@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/*
 * =============================================================================
 * MERONEX DASHBOARD - MASTER CSS INDEX
 * =============================================================================
 * All CSS imports are centralized here to ensure consistent ordering.
 * Import order matters! Themes and base styles must come before components.
 *
 * To add new CSS: Add an @import line in the appropriate section below.
 * =============================================================================
 */
/* -----------------------------------------------------------------------------
 * 1. FOUNDATION - Theme variables and base styles (MUST BE FIRST)
 * -------------------------------------------------------------------------- */
:root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --app-bg-image: url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=80');

  /* Default (Dark) Theme Variables */
  --bg-color: #0F1115;
  --text-color: rgba(255, 255, 255, 0.9);
  --input-bg: rgba(255, 255, 255, 0.1);
  --input-border: rgba(255, 255, 255, 0.2);
  --input-text: #fff;
  --input-placeholder: rgba(255, 255, 255, 0.5);
  --input-focus-border: var(--accent);
  --input-focus-bg: rgba(255, 255, 255, 0.15);
  --input-focus-shadow: rgba(var(--accent-rgb), 0.15);

  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --panel-scrollbar-thumb: rgba(255, 255, 255, 0.15);

  /* =============================================
     OS DESKTOP THEME SYSTEM (Dark default)
     Centralized variables for all OS UI components
     ============================================= */
  
  /* Glass surfaces */
  --os-glass-bg: rgba(18, 18, 24, 0.65);
  --os-glass-bg-solid: #141418;
  --os-glass-border: rgba(255, 255, 255, 0.1);
  --os-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  
  /* Typography */
  --os-text-primary: rgba(255, 255, 255, 0.95);
  --os-text-secondary: rgba(255, 255, 255, 0.7);
  --os-text-muted: rgba(255, 255, 255, 0.45);
  --os-text-hint: rgba(255, 255, 255, 0.35);
  
  /* Interactive states */
  --os-hover-bg: rgba(255, 255, 255, 0.08);
  --os-active-bg: rgba(var(--accent-rgb), 0.25);
  --os-selected-bg: rgba(var(--accent-rgb), 0.2);
  
  /* Accent colors — set dynamically via Settings > Appearance */
  --accent: #38bdf8;
  --accent-rgb: 56, 189, 248;
  --accent-light: #7dd3fc;
  --accent-lighter: #bae6fd;
  --accent-dark: #0284c7;
  /* Legacy aliases */
  --os-accent: var(--accent);
  --os-accent-light: var(--accent-light);
  --os-accent-bg: rgba(var(--accent-rgb), 0.15);
  --os-accent-glow: rgba(var(--accent-rgb), 0.3);
  --os-accent-text: var(--accent-lighter);
  
  /* Structural */
  --os-divider: rgba(255, 255, 255, 0.12);
  --os-overlay-bg: rgba(10, 10, 14, 0.85);
  --os-wallpaper-overlay: rgba(0, 0, 0, 0.3);
  --os-context-bg: rgba(20, 20, 30, 0.95);
  
  /* Icons and buttons */
  --os-icon-bg: rgba(255, 255, 255, 0.1);
  --os-icon-bg-hover: rgba(255, 255, 255, 0.15);
  --os-btn-bg: rgba(255, 255, 255, 0.08);
  --os-btn-border: rgba(255, 255, 255, 0.12);
  --os-btn-hover: rgba(255, 255, 255, 0.12);
  
  /* Inputs */
  --os-input-bg: rgba(0, 0, 0, 0.25);
  --os-input-border: rgba(255, 255, 255, 0.12);
  --os-input-focus-border: rgba(var(--accent-rgb), 0.5);
  --os-input-focus-bg: rgba(0, 0, 0, 0.35);
  
  /* Sidebar */
  --os-sidebar-bg: rgba(0, 0, 0, 0.15);
  --os-sidebar-border: rgba(255, 255, 255, 0.06);
  --os-sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --os-sidebar-item-active: rgba(var(--accent-rgb), 0.25);
  
  /* Scrollbars */
  --os-scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --os-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
/* Light Theme */
body.light {
  --bg-color: #FAFAFA;
  --text-color: rgba(0, 0, 0, 0.9);
  --input-bg: #fff;
  --input-border: rgba(0, 0, 0, 0.15);
  --input-text: #1e293b;
  --input-placeholder: rgba(0, 0, 0, 0.4);
  --input-focus-border: var(--accent);
  --input-focus-shadow: rgba(var(--accent-rgb), 0.12);
  
  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --panel-scrollbar-thumb: rgba(0, 0, 0, 0.2);

  /* =============================================
     OS DESKTOP THEME SYSTEM (Light)
     Elegant frosted glass with proper contrast
     ============================================= */
  
  /* Glass surfaces - frosted white */
  --os-glass-bg: rgba(255, 255, 255, 0.78);
  --os-glass-bg-solid: #FAFAFA;
  --os-glass-border: rgba(0, 0, 0, 0.1);
  --os-glass-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  
  /* Typography - proper dark text for readability */
  --os-text-primary: rgba(20, 20, 30, 0.92);
  --os-text-secondary: rgba(40, 40, 55, 0.78);
  --os-text-muted: rgba(60, 60, 80, 0.6);
  --os-text-hint: rgba(80, 80, 100, 0.5);
  
  /* Interactive states */
  --os-hover-bg: rgba(0, 0, 0, 0.05);
  --os-active-bg: rgba(var(--accent-rgb), 0.15);
  --os-selected-bg: rgba(var(--accent-rgb), 0.12);

  /* Accent colors — light mode (aliases, JS sets --accent/--accent-rgb) */
  --os-accent: var(--accent);
  --os-accent-light: var(--accent-light);
  --os-accent-bg: rgba(var(--accent-rgb), 0.12);
  --os-accent-glow: rgba(var(--accent-rgb), 0.25);
  --os-accent-text: var(--accent-dark);
  
  /* Structural */
  --os-divider: rgba(0, 0, 0, 0.08);
  --os-overlay-bg: rgba(250, 250, 252, 0.96);
  --os-wallpaper-overlay: rgba(255, 255, 255, 0.2);
  --os-context-bg: rgba(255, 255, 255, 0.95);
  
  /* Icons and buttons */
  --os-icon-bg: rgba(0, 0, 0, 0.06);
  --os-icon-bg-hover: rgba(0, 0, 0, 0.1);
  --os-btn-bg: rgba(0, 0, 0, 0.05);
  --os-btn-border: rgba(0, 0, 0, 0.12);
  --os-btn-hover: rgba(0, 0, 0, 0.08);
  
  /* Inputs */
  --os-input-bg: rgba(255, 255, 255, 0.9);
  --os-input-border: rgba(0, 0, 0, 0.15);
  --os-input-focus-border: rgba(var(--accent-rgb), 0.5);
  --os-input-focus-bg: rgba(255, 255, 255, 1);
  
  /* Sidebar */
  --os-sidebar-bg: rgba(0, 0, 0, 0.04);
  --os-sidebar-border: rgba(0, 0, 0, 0.08);
  --os-sidebar-item-hover: rgba(0, 0, 0, 0.06);
  --os-sidebar-item-active: rgba(var(--accent-rgb), 0.18);
  
  /* Scrollbars */
  --os-scrollbar-thumb: rgba(0, 0, 0, 0.12);
  --os-scrollbar-thumb-hover: rgba(0, 0, 0, 0.22);

  /* CodeMirror editor theme — override blue-grey fallbacks */
  --background: 0 0% 98%;    /* matches #FAFAFA */
  --muted: 0 0% 96%;         /* neutral grey, no blue tint */
  --foreground: 220 14% 14%; /* dark text */
}
/* Gray Theme — mid-tone dark, comfortable for long sessions */
body.gray {
  --bg-color: #1C1C1E;
  --text-color: rgba(255, 255, 255, 0.88);
  --input-bg: rgba(255, 255, 255, 0.08);
  --input-border: rgba(255, 255, 255, 0.14);
  --input-text: rgba(255, 255, 255, 0.88);
  --input-placeholder: rgba(255, 255, 255, 0.4);
  --input-focus-border: var(--accent);
  --input-focus-bg: rgba(255, 255, 255, 0.12);
  --input-focus-shadow: rgba(var(--accent-rgb), 0.15);

  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --panel-scrollbar-thumb: rgba(255, 255, 255, 0.12);

  /* =============================================
     OS DESKTOP THEME SYSTEM (Gray)
     Mid-tone dark — warmer/softer than dark
     ============================================= */

  /* Glass surfaces */
  --os-glass-bg: rgba(40, 40, 46, 0.75);
  --os-glass-bg-solid: #28282E;
  --os-glass-border: rgba(255, 255, 255, 0.10);
  --os-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);

  /* Typography */
  --os-text-primary: rgba(255, 255, 255, 0.88);
  --os-text-secondary: rgba(255, 255, 255, 0.65);
  --os-text-muted: rgba(255, 255, 255, 0.42);
  --os-text-hint: rgba(255, 255, 255, 0.30);

  /* Interactive states */
  --os-hover-bg: rgba(255, 255, 255, 0.07);
  --os-active-bg: rgba(var(--accent-rgb), 0.22);
  --os-selected-bg: rgba(var(--accent-rgb), 0.18);

  /* Structural */
  --os-divider: rgba(255, 255, 255, 0.10);
  --os-overlay-bg: rgba(28, 28, 32, 0.88);
  --os-wallpaper-overlay: rgba(0, 0, 0, 0.25);
  --os-context-bg: rgba(36, 36, 42, 0.97);

  /* Icons and buttons */
  --os-icon-bg: rgba(255, 255, 255, 0.08);
  --os-icon-bg-hover: rgba(255, 255, 255, 0.13);
  --os-btn-bg: rgba(255, 255, 255, 0.07);
  --os-btn-border: rgba(255, 255, 255, 0.10);
  --os-btn-hover: rgba(255, 255, 255, 0.11);

  /* Inputs */
  --os-input-bg: rgba(0, 0, 0, 0.20);
  --os-input-border: rgba(255, 255, 255, 0.11);
  --os-input-focus-border: rgba(var(--accent-rgb), 0.5);
  --os-input-focus-bg: rgba(0, 0, 0, 0.28);

  /* Sidebar */
  --os-sidebar-bg: rgba(255, 255, 255, 0.04);
  --os-sidebar-border: rgba(255, 255, 255, 0.06);
  --os-sidebar-item-hover: rgba(255, 255, 255, 0.07);
  --os-sidebar-item-active: rgba(var(--accent-rgb), 0.22);

  /* Scrollbars */
  --os-scrollbar-thumb: rgba(255, 255, 255, 0.09);
  --os-scrollbar-thumb-hover: rgba(255, 255, 255, 0.18);
}
/* =============================================
   APP-SPECIFIC THEME OVERRIDES
   Central place for per-app color tweaks that
   can't be expressed via --os-* variables alone.
   Add new themes: copy a body.gray block below.
   ============================================= */
/* Light theme: app surfaces need extra brightness */
body.light .journal-app,
body.light .becoming-app {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.light .entry-dialog,
body.light .capture-dialog {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}
/* Light: editor textarea */
body.light .entry-dialog-editor {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--os-text-primary);
}
/* Light: sidebar text */
body.light .sidebar-title,
body.light .section-button,
body.light .filter-checkbox {
  color: var(--os-text-secondary);
}
body.light .section-button:hover {
  background: var(--os-hover-bg);
  color: var(--os-text-primary);
}
/* Light: journal calendar */
body.light .jcal-day {
  color: var(--os-text-muted);
}
body.light .jcal-day.has-content {
  color: var(--os-text-primary);
}
body.light .jcal-weekday {
  color: var(--os-text-hint);
}
body.light .jcal-nav {
  color: var(--os-text-muted);
}
/* Light: entry cards */
body.light .entry-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
  border-left-color: rgba(0, 0, 0, 0.1);
}
body.light .entry-card:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .entry-time,
body.light .entry-text {
  color: var(--os-text-secondary);
}
body.light .entry-title {
  color: var(--os-text-primary);
}
/* Light: today empty prompt */
body.light .today-empty-prompt {
  color: var(--os-text-muted);
  border-color: rgba(0, 0, 0, 0.12);
}
/* Light: canvas app */
body.light .canvas-app {
  color: var(--os-text-primary);
}
/* Gray: AI Chat panel — slightly more opaque for readability */
body.gray .ai-chat-panel {
  background: rgba(36, 36, 42, 0.88) !important;
}
/* Gray theme: slightly brighter inner cards for contrast */
body.gray .entry-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
}
body.gray .entry-card:hover {
  background: rgba(255, 255, 255, 0.07);
}
/* Gray: journal calendar contrast */
body.gray .journal-calendar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
/* =============================================
   Base Input Styles using variables */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea {
  font-size: 0.9rem;
  color: var(--input-text);
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  outline: none;
  transition: all 0.2s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
textarea:focus {
  border-color: var(--input-focus-border);
  background: var(--input-focus-bg, var(--input-bg));
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}
input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
}
/* Inner panel scrollbars */
.glass-panel,
.panel,
.next-panel,
.markdown-block,
.next-tree,
.journal-nav,
.body-nav,
.roadmap-nav,
.editable-markdown-content,
.editable-markdown-edit-mode,
.editable-markdown-editor-wrapper,
.editable-markdown-editor {
  scrollbar-width: thin;
  scrollbar-color: var(--panel-scrollbar-thumb) transparent;
}
.glass-panel::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb,
.next-panel::-webkit-scrollbar-thumb,
.markdown-block::-webkit-scrollbar-thumb,
.next-tree::-webkit-scrollbar-thumb,
.editable-markdown-edit-mode::-webkit-scrollbar-thumb,
.editable-markdown-editor-wrapper::-webkit-scrollbar-thumb,
.editable-markdown-editor::-webkit-scrollbar-thumb,
[class*="-content"]::-webkit-scrollbar-thumb,
[class*="-items"]::-webkit-scrollbar-thumb,
[class*="-list"]::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--panel-scrollbar-thumb);
}
* {
  box-sizing: border-box;
}
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: auto;
  width: 100%;
  max-width: 100vw;
  /* Prevent browser back/forward swipe navigation gesture */
  overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  /* Prevent any horizontal scroll */
  scroll-behavior: auto;
  /* Prevent pinch-to-zoom */
  touch-action: pan-x pan-y;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  transition: background-color 0.3s, color 0.3s;
  overflow-x: hidden !important;
  overflow-y: auto;
  width: 100%;
  max-width: 100vw;
  /* Prevent browser back/forward swipe navigation gesture */
  overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  /* Prevent scroll anchoring that can cause shifts */
  overflow-anchor: none;
  /* Prevent touch/trackpad gestures from triggering navigation and zooming */
  touch-action: pan-y;
}
#root {
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}
/* --- Scrollbars --- */
/* Hide scrollbar on body/html/root to prevent white bar on right */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar,
.app-shell::-webkit-scrollbar,
.app-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
html,
body,
#root,
.app-shell,
.app-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* --- Styled Scrollbars for Content Areas --- */
/*
 * Universal scrollbar styling for all scrollable elements within windows and apps.
 * This applies to any element with overflow that's inside these containers.
 */
/* Dark theme (default) - applies to windows, apps, settings, modals */
.window *::-webkit-scrollbar,
.app-window *::-webkit-scrollbar,
.settings-content *::-webkit-scrollbar,
.settings-content::-webkit-scrollbar,
.modal *::-webkit-scrollbar,
[class*="-modal-overlay"] *::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.styled-scrollbar::-webkit-scrollbar,
.cm-tooltip *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.window *::-webkit-scrollbar-track,
.app-window *::-webkit-scrollbar-track,
.settings-content *::-webkit-scrollbar-track,
.settings-content::-webkit-scrollbar-track,
.modal *::-webkit-scrollbar-track,
[class*="-modal-overlay"] *::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track,
.styled-scrollbar::-webkit-scrollbar-track,
.cm-tooltip *::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}
.window *::-webkit-scrollbar-thumb,
.app-window *::-webkit-scrollbar-thumb,
.settings-content *::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb,
.modal *::-webkit-scrollbar-thumb,
[class*="-modal-overlay"] *::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.styled-scrollbar::-webkit-scrollbar-thumb,
.cm-tooltip *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  transition: background 0.2s ease;
}
.window *::-webkit-scrollbar-thumb:hover,
.app-window *::-webkit-scrollbar-thumb:hover,
.settings-content *::-webkit-scrollbar-thumb:hover,
.settings-content::-webkit-scrollbar-thumb:hover,
.modal *::-webkit-scrollbar-thumb:hover,
[class*="-modal-overlay"] *::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.styled-scrollbar::-webkit-scrollbar-thumb:hover,
.cm-tooltip *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Firefox scrollbar styling */
.window *,
.app-window *,
.settings-content *,
.settings-content,
.modal *,
[class*="-modal-overlay"] *,
.dropdown-menu,
.styled-scrollbar,
.cm-tooltip * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
/* Light theme scrollbars */
body.light .window *::-webkit-scrollbar-thumb,
body.light .app-window *::-webkit-scrollbar-thumb,
body.light .settings-content *::-webkit-scrollbar-thumb,
body.light .settings-content::-webkit-scrollbar-thumb,
body.light .modal *::-webkit-scrollbar-thumb,
body.light [class*="-modal-overlay"] *::-webkit-scrollbar-thumb,
body.light .dropdown-menu::-webkit-scrollbar-thumb,
body.light .styled-scrollbar::-webkit-scrollbar-thumb,
body.light .cm-tooltip *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}
body.light .window *::-webkit-scrollbar-thumb:hover,
body.light .app-window *::-webkit-scrollbar-thumb:hover,
body.light .settings-content *::-webkit-scrollbar-thumb:hover,
body.light .settings-content::-webkit-scrollbar-thumb:hover,
body.light .modal *::-webkit-scrollbar-thumb:hover,
body.light [class*="-modal-overlay"] *::-webkit-scrollbar-thumb:hover,
body.light .dropdown-menu::-webkit-scrollbar-thumb:hover,
body.light .styled-scrollbar::-webkit-scrollbar-thumb:hover,
body.light .cm-tooltip *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}
body.light .window *,
body.light .app-window *,
body.light .settings-content *,
body.light .settings-content,
body.light .modal *,
body.light [class*="-modal-overlay"] *,
body.light .dropdown-menu,
body.light .styled-scrollbar,
body.light .cm-tooltip * {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
/* Scrollbar corner (where horizontal and vertical meet) */
.window *::-webkit-scrollbar-corner,
.app-window *::-webkit-scrollbar-corner,
.settings-content *::-webkit-scrollbar-corner,
.modal *::-webkit-scrollbar-corner,
[class*="-modal-overlay"] *::-webkit-scrollbar-corner,
.cm-tooltip *::-webkit-scrollbar-corner {
  background: transparent;
}
/* Tauri (WebKit/WKWebView) scrollbar styling
 * The Rust side forces NSScrollerStyleOverlay so macOS uses thin overlay
 * scrollbars instead of legacy thick ones. No extra CSS needed. */
/* --- Layout & Shell --- */
.app-shell {
  display: flex;
  min-height: 100vh;
  color: inherit;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  /* Prevent browser back/forward swipe navigation */
  overscroll-behavior: none !important;
  /* Fixed positioning to isolate from browser gesture animations */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.app-shell.focus-mode,
.app-shell.thoughts-focus-mode,
.app-shell.daily-focus-mode,
.app-shell.activity-focus-mode,
.app-shell.notes-focus-mode {
  overflow: hidden;
}
/* Hide scrollbar on app-shell in focus modes (not children) */
.app-shell.focus-mode::-webkit-scrollbar,
.app-shell.thoughts-focus-mode::-webkit-scrollbar,
.app-shell.daily-focus-mode::-webkit-scrollbar,
.app-shell.activity-focus-mode::-webkit-scrollbar,
.app-shell.notes-focus-mode::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.app-shell.focus-mode,
.app-shell.thoughts-focus-mode,
.app-shell.daily-focus-mode,
.app-shell.activity-focus-mode,
.app-shell.notes-focus-mode {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.app-content {
  /* IMPORTANT: display: block prevents sandbox app CSS from breaking layout */
  display: block !important;
  flex: 1;
  padding: 48px clamp(24px, 5vw, 64px) 96px;
  color: inherit;
  position: relative;
  z-index: 1;
  margin-left: 15.5rem;
  transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100vw;
  height: 100%;
  /* Prevent browser back/forward swipe navigation */
  overscroll-behavior: none !important;
}
/* Adjust content margin when sidebar is collapsed */
.app-shell:has(.sidebar.collapsed) .app-content {
  margin-left: 5rem;
}
.app-grid {
  display: grid;
  gap: 24px;
  overflow-x: hidden;
  max-width: 100%;
}
.page-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.fullscreen-grid {
  grid-template-columns: 1fr;
}
.fullscreen-content {
  margin-left: 0 !important;
  padding: 0;
}
/* --- Common Utility Buttons --- */
.copy-btn,
.speak-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}
.copy-btn:hover,
.speak-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
.copy-btn.copied {
  background: rgba(74, 222, 128, 0.15) !important;
  color: #4ade80 !important;
}
.speak-btn.speaking {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #3b82f6 !important;
  animation: pulse-speak 1.5s ease-in-out infinite !important;
}
@keyframes pulse-speak {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.speak-btn.loading {
  background: rgba(251, 191, 36, 0.25);
  color: #fbbf24;
  cursor: wait;
  animation: pulse-loading 1s ease-in-out infinite;
}
@keyframes pulse-loading {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
body.light .copy-btn,
body.light .speak-btn {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.4);
}
body.light .copy-btn:hover,
body.light .speak-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}
body.light .copy-btn.copied {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}
/* --- Ghost Button Style --- */
button.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.85rem;
  font-weight: 500;
}
button.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
button.ghost:active {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(0.97);
}
body.light button.ghost {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.5);
}
body.light button.ghost:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
body.zen button.ghost {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}
body.zen button.ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
body.batman button.ghost {
  background: rgba(0, 100, 200, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
body.batman button.ghost:hover {
  background: rgba(0, 100, 200, 0.2);
  color: rgba(255, 255, 255, 0.9);
}
/* ── CodeMirror List Bullets ──────────────────────────────────── */
/* Global CSS — EditorView.theme() scoping doesn't reach mark     */
/* decorations reliably across multiple theme layers.             */
.cm-editor {
  /* List marker color tokens (override per theme on .cm-editor). */
  --cm-list-bullet-color: rgba(0, 0, 0, 0.4);
  --cm-list-number-color: rgba(0, 0, 0, 0.45);
  --cm-task-marker-color: rgba(0, 0, 0, 0.42);
  --cm-list-bullet-size: 0.95em;
  --cm-list-bullet-top-offset: -1px;
}
/* Bullet mark: hide the raw dash/asterisk, show • via ::after */
.cm-editor .cm-list-bullet {
  color: transparent;
  position: relative;
  display: inline-block;
  width: var(--cm-list-marker-token, 8px);
  text-align: center;
}
.cm-editor .cm-list-bullet::after {
  content: '•';
  position: absolute;
  left: 50%;
  top: var(--cm-list-bullet-top-offset);
  transform: translateX(-50%);
  color: var(--cm-list-bullet-color);
  font-size: var(--cm-list-bullet-size);
  pointer-events: none;
}
/* Ordered list numbers */
.cm-editor .cm-list-number {
  color: var(--cm-list-number-color);
  font-variant-numeric: tabular-nums;
}
/* Task list markers: keep visual width stable between checkbox and raw marker modes */
.cm-editor .cm-task-checkbox-slot {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  box-sizing: border-box;
}
.cm-editor .cm-task-checkbox {
  margin-right: 0 !important;
}
.cm-editor .cm-task-marker-visible {
  color: var(--cm-task-marker-color);
  white-space: pre;
  box-sizing: border-box;
}
/* Keep visible inline markdown markers the same color as their formatted text. */
.cm-editor .cm-strong .cm-formatting-inline-visible,
.cm-editor .cm-emphasis .cm-formatting-inline-visible,
.cm-editor .cm-code .cm-formatting-inline-visible {
  color: inherit !important;
  opacity: 1 !important;
}
/* Markdown writing experience modes (shared across all MarkdownEditor instances) */
.live-preview-editor.md-focus-mode .cm-editor.cm-focused .cm-content > .cm-line,
.live-preview-editor.md-focus-mode .cm-editor.cm-focused .cm-content > .cm-widgetBlock {
  opacity: var(--md-focus-dim-opacity, 0.42);
  transition: opacity 110ms ease;
}
.live-preview-editor.md-focus-mode .cm-editor.cm-focused .cm-content > .cm-activeLine,
.live-preview-editor.md-focus-mode .cm-editor.cm-focused .cm-content > .cm-widgetBlock:focus-within {
  opacity: 1;
}
.live-preview-editor.md-typewriter-mode .cm-scroller {
  scroll-behavior: auto;
}
/* List depth guides (Obsidian-style nested branch lines) */
.cm-editor .cm-line.cm-list-line {
  position: relative;
}
.cm-editor .cm-line.cm-list-line.cm-list-guides-on:not(.cm-list-depth-1)::before {
  content: '';
  position: absolute;
  left: var(--cm-list-parent-guide-x, 0px);
  top: var(--cm-list-guide-top-trim, 2px);
  bottom: var(--cm-list-guide-bottom-trim, 2px);
  width: var(--cm-list-guide-width, 1px);
  background: var(--cm-list-guide-color, rgba(120, 120, 120, 0.32));
  pointer-events: none;
}
.cm-editor .cm-line.cm-list-line.cm-list-guides-on.cm-list-guides-fade:not(.cm-list-depth-1)::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--cm-list-guide-color, rgba(120, 120, 120, 0.32)) 20%,
    var(--cm-list-guide-color, rgba(120, 120, 120, 0.32)) 80%,
    transparent 100%
  );
}
.cm-editor .cm-line.cm-list-line.cm-list-debug::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(239, 68, 68, 0.65), rgba(239, 68, 68, 0.65)),
    linear-gradient(to bottom, rgba(34, 197, 94, 0.65), rgba(34, 197, 94, 0.65)),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.65), rgba(59, 130, 246, 0.65));
  background-repeat: no-repeat;
  background-size:
    calc(var(--cm-list-debug-show-marker-axis, 1) * 1px) 100%,
    calc(var(--cm-list-debug-show-content-axis, 1) * 1px) 100%,
    calc(var(--cm-list-debug-show-guide-axis, 0) * 1px) 100%;
  background-position:
    calc(var(--cm-list-content-x, 0px) - (var(--cm-list-marker, 0px) / 2)) 0,
    var(--cm-list-content-x, 0px) 0,
    var(--cm-list-parent-guide-x, 0px) 0;
  opacity: 0.55;
}
/* Dark themes */
body.dark .cm-editor,
body.zen .cm-editor,
body.gray .cm-editor,
body.batman .cm-editor {
  /* Dark theme overrides for list marker tokens */
  --cm-list-bullet-color: rgba(255, 255, 255, 0.46);
  --cm-list-number-color: rgba(255, 255, 255, 0.5);
  --cm-task-marker-color: rgba(255, 255, 255, 0.5);
}
/* Imported custom theme preset.
   Maps external CSS vars into shared markdown tokens and provides light fallback styling.
   Full imported look is applied by lab-scoped CSS injected at runtime. */
.live-preview-editor.md-visual-custom {
  --md-typora-control-text-color: var(--md-custom-control-text-color, var(--md-custom-light-text-color, var(--md-custom-text-color, #72695e)));
  --md-typora-text-color: var(--md-custom-text-color, #2b2621);
  --md-typora-bg-color: var(--md-custom-bg-color, var(--md-custom-side-bar-bg-color, #faf9f5));
  --md-typora-select-text-bg-color: var(--md-custom-select-text-bg-color, #e8ddd0);
  --md-typora-code-bg-color: var(--md-custom-code-bg-color, #fcfcfa);
  --md-typora-code-text-color: var(--md-custom-code-text-color, var(--md-custom-text-color, #1c1815));
  --md-typora-code-border-color: var(--md-custom-code-border-color, var(--md-custom-border, #e9e2d8));
  --md-typora-border-color: var(--md-custom-border-color, var(--md-custom-border, #ddd5ca));
  --md-typora-accent-color: var(--md-custom-accent-color, var(--md-custom-link-color, #bc6a3a));
  --md-typora-heading-color: var(--md-custom-heading-color, var(--md-custom-title-color, var(--md-custom-text-color, #1c1815)));
  --md-typora-quote-bg-color: var(--md-custom-quote-bg-color, #f3ede5);
  --md-typora-quote-border-color: var(--md-custom-quote-border-color, var(--md-custom-border-quote, #d8cbbb));
  --md-typora-quote-text-color: var(--md-custom-quote-text-color, var(--md-custom-text-color, #625950));
  --md-typora-inline-code-color: var(--md-custom-inline-code-color, var(--md-custom-code-color, #b14a40));
  --md-typora-inline-code-bg-color: var(--md-custom-inline-code-bg-color, var(--md-custom-inline-code-bg, #f2eeea));
  --md-typora-inline-code-border-color: var(--md-custom-inline-code-border-color, var(--md-custom-border, #d7cec5));
  --md-typora-font-body: var(--md-custom-font-body, var(--md-custom-base-font, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "PingFang SC", "Hiragino Sans GB", serif));
  --md-typora-font-ui: var(--md-custom-font-ui, var(--md-custom-base-font, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif));
  --md-typora-font-mono: var(--md-custom-font-mono, var(--md-custom-monospace, Menlo, Monaco, "SF Mono", Consolas, "Sarasa Mono SC", "Cascadia Code", monospace));
}
.live-preview-editor.md-visual-custom .cm-editor {
  background: var(--md-typora-bg-color);
}
.live-preview-editor.md-visual-custom .cm-content {
  max-width: var(--md-custom-max-width, 780px);
  color: var(--md-typora-text-color);
  font-family: var(--md-typora-font-body);
}
.live-preview-editor.md-visual-custom .cm-link,
.live-preview-editor.md-visual-custom .cm-link-widget,
.live-preview-editor.md-visual-custom .cm-wikilink,
.live-preview-editor.md-visual-custom .cm-wikilink-widget {
  color: var(--md-typora-accent-color);
  text-decoration: none;
  border-bottom: 1px solid var(--md-custom-link-bottom, var(--md-typora-border-color));
}
.live-preview-editor.md-visual-custom .cm-code {
  font-family: var(--md-typora-font-mono);
  color: var(--md-typora-inline-code-color);
  background-color: var(--md-typora-inline-code-bg-color);
  border: 1px solid var(--md-typora-inline-code-border-color);
}
.live-preview-editor.md-visual-custom .cm-header-1,
.live-preview-editor.md-visual-custom .cm-header-2,
.live-preview-editor.md-visual-custom .cm-header-3,
.live-preview-editor.md-visual-custom .cm-header-4,
.live-preview-editor.md-visual-custom .cm-header-5,
.live-preview-editor.md-visual-custom .cm-header-6 {
  color: var(--md-typora-heading-color);
  font-family: var(--md-custom-title-font, var(--md-typora-font-ui));
  font-weight: var(--md-custom-header-weight, 600);
}
/* ── Typora visual preset ──────────────────────────────────────── */
/* Centralized CSS tokens for a warm paper-like markdown canvas.    */
.live-preview-editor.md-visual-typora {
  --md-typora-control-text-color: #72695e;
  --md-typora-text-color: #2b2621;
  --md-typora-bg-color: #faf9f5;
  --md-typora-select-text-bg-color: #e8ddd0;
  --md-typora-code-bg-color: #fcfcfa;
  --md-typora-code-text-color: #1c1815;
  --md-typora-code-border-color: #e9e2d8;
  --md-typora-border-color: #ddd5ca;
  --md-typora-accent-color: #bc6a3a;
  --md-typora-heading-color: #1c1815;
  --md-typora-quote-bg-color: #f3ede5;
  --md-typora-quote-border-color: #d8cbbb;
  --md-typora-quote-text-color: #625950;
  --md-typora-inline-code-color: #b14a40;
  --md-typora-inline-code-bg-color: #f2eeea;
  --md-typora-inline-code-border-color: #d7cec5;
  --md-typora-font-body: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "PingFang SC", "Hiragino Sans GB", serif;
  --md-typora-font-ui: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --md-typora-font-mono: Menlo, Monaco, "SF Mono", Consolas, "Sarasa Mono SC", "Cascadia Code", monospace;
}
.live-preview-editor.md-visual-typora .cm-editor {
  --cm-inline-mark-color: rgba(114, 105, 94, 0.74) !important;
  --cm-inline-mark-visible-color: var(--md-typora-text-color) !important;
  --cm-inline-mark-font-family: var(--md-typora-font-mono) !important;
  --cm-block-mark-color: rgba(114, 105, 94, 0.7) !important;
  --cm-block-mark-visible-opacity: 0.72 !important;
  --cm-hr-stroke-color: rgba(221, 213, 202, 0.88) !important;
  --cm-hr-active-color: rgba(157, 85, 45, 0.9) !important;
  --cm-list-bullet-color: rgba(114, 105, 94, 0.82) !important;
  --cm-list-number-color: rgba(114, 105, 94, 0.9) !important;
  --cm-task-marker-color: rgba(114, 105, 94, 0.88) !important;
  --cm-list-guide-color: rgba(114, 105, 94, 0.28);
  background: var(--md-typora-bg-color) !important;
}
.live-preview-editor.md-visual-typora .cm-scroller,
.live-preview-editor.md-visual-typora .cm-content {
  background: var(--md-typora-bg-color) !important;
}
.live-preview-editor.md-visual-typora .cm-content {
  max-width: 780px !important;
  font-family: var(--md-typora-font-body) !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
  color: var(--md-typora-text-color) !important;
  caret-color: var(--md-typora-accent-color) !important;
}
.live-preview-editor.md-visual-typora .cm-line {
  line-height: 1.62 !important;
  color: var(--md-typora-text-color);
}
.live-preview-editor.md-visual-typora .cm-selectionBackground {
  background-color: rgba(232, 221, 208, 0.78) !important;
}
.live-preview-editor.md-visual-typora.cm-focused .cm-selectionBackground,
.live-preview-editor.md-visual-typora .cm-editor.cm-focused .cm-selectionBackground {
  background-color: var(--md-typora-select-text-bg-color) !important;
}
.live-preview-editor.md-visual-typora .cm-header-1,
.live-preview-editor.md-visual-typora .cm-header-2,
.live-preview-editor.md-visual-typora .cm-header-3,
.live-preview-editor.md-visual-typora .cm-header-4,
.live-preview-editor.md-visual-typora .cm-header-5,
.live-preview-editor.md-visual-typora .cm-header-6 {
  color: var(--md-typora-heading-color) !important;
  font-family: var(--md-typora-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.live-preview-editor.md-visual-typora .cm-header-1 {
  font-size: 1.84em !important;
  line-height: 1.16 !important;
}
.live-preview-editor.md-visual-typora .cm-header-2 {
  font-size: 1.48em !important;
  line-height: 1.2 !important;
}
.live-preview-editor.md-visual-typora .cm-header-3 {
  font-size: 1.24em !important;
  line-height: 1.32 !important;
}
.live-preview-editor.md-visual-typora .cm-strong {
  color: var(--md-typora-heading-color) !important;
  font-family: var(--md-typora-font-ui) !important;
  font-weight: 700 !important;
}
.live-preview-editor.md-visual-typora .cm-emphasis {
  color: var(--md-typora-text-color) !important;
}
.live-preview-editor.md-visual-typora .cm-code {
  font-family: var(--md-typora-font-mono) !important;
  border: 1px solid var(--md-typora-inline-code-border-color) !important;
  background-color: var(--md-typora-inline-code-bg-color) !important;
  color: var(--md-typora-inline-code-color) !important;
  border-radius: 999px !important;
  padding: 0.08em 0.42em 0.1em !important;
  font-size: 0.9em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.live-preview-editor.md-visual-typora .cm-link,
.live-preview-editor.md-visual-typora .cm-link-widget,
.live-preview-editor.md-visual-typora .cm-wikilink,
.live-preview-editor.md-visual-typora .cm-wikilink-widget {
  color: var(--md-typora-accent-color) !important;
}
.live-preview-editor.md-visual-typora .cm-link-widget:hover,
.live-preview-editor.md-visual-typora .cm-link:hover {
  color: #9d552d !important;
}
.live-preview-editor.md-visual-custom .cm-link-widget:hover,
.live-preview-editor.md-visual-custom .cm-link:hover {
  color: var(--md-typora-accent-color) !important;
}
.live-preview-editor.md-visual-typora .cm-link-external-icon {
  color: var(--md-typora-control-text-color);
  opacity: 0.82;
}
.live-preview-editor.md-visual-typora .cm-line.cm-blockquote-line {
  border-left: 2px solid var(--md-typora-quote-border-color);
  background-color: var(--md-typora-quote-bg-color);
  color: var(--md-typora-quote-text-color);
  border-radius: 10px;
  padding-left: 1rem;
}
.live-preview-editor.md-visual-typora .cm-line.cm-blockquote-line .cm-quote-bar {
  display: none;
}
.live-preview-editor.md-visual-typora .cm-table-widget th,
.live-preview-editor.md-visual-typora .cm-table-editor th {
  background-color: transparent !important;
  color: var(--md-typora-heading-color) !important;
  border-color: var(--md-typora-border-color) !important;
  font-weight: 600 !important;
}
.live-preview-editor.md-visual-typora .cm-table-widget td,
.live-preview-editor.md-visual-typora .cm-table-editor td {
  color: var(--md-typora-text-color);
  border-color: rgba(114, 105, 94, 0.26) !important;
}
.live-preview-editor.md-visual-typora .cm-table-widget table,
.live-preview-editor.md-visual-typora .cm-table-editor table {
  border-top: 1px solid rgba(114, 105, 94, 0.45);
  border-bottom: 1px solid rgba(114, 105, 94, 0.45);
}
.live-preview-editor.md-visual-typora .cm-codeblock-widget {
  border: 1px solid var(--md-typora-code-border-color);
  background-color: var(--md-typora-code-bg-color) !important;
  color: var(--md-typora-code-text-color);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(43, 38, 33, 0.03);
}
.live-preview-editor.md-visual-typora .cm-codeblock-line,
.live-preview-editor.md-visual-typora .cm-codeblock-widget code,
.live-preview-editor.md-visual-typora .cm-codeblock-widget pre {
  font-family: var(--md-typora-font-mono) !important;
  font-size: 0.9em;
  line-height: 1.55;
}
/* --- Markdown & Typography --- */
/* Shared typography variables — used by BOTH Live Preview (CodeMirror decorations) AND Reading view */
:root {
  --md-h1-size: 1.75rem;
  --md-h2-size: 1.4rem;
  --md-h3-size: 1.15rem;
  --md-h4-size: 1rem;
  --md-h1-weight: 600;
  --md-h2-weight: 600;
  --md-h3-weight: 600;
  --md-bold-weight: 700;
  --md-line-height: 1.6;
  --md-link-color: #38bdf8;
}
/* Markdown containers - scoped to prevent leakage */
.markdown-content,
.markdown-block {
  line-height: 1.75;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.markdown-content h1,
.markdown-block h1 {
  font-size: 1.4em;
  font-weight: 600;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}
.markdown-content h2,
.markdown-block h2 {
  font-size: 1.2em;
  font-weight: 600;
  margin-top: 0.6em;
  margin-bottom: 0.4em;
}
.markdown-content h3,
.markdown-block h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 0.5em;
  margin-bottom: 0.35em;
}
/* First heading in content should have less top margin */
.markdown-content h1:first-child,
.markdown-block h1:first-child,
.markdown-content h2:first-child,
.markdown-block h2:first-child,
.markdown-content h3:first-child,
.markdown-block h3:first-child {
  margin-top: 0;
}
.markdown-content p,
.markdown-block p {
  margin: 1em 0;
}
/* Preserve empty paragraphs for visual spacing */
.markdown-content p:empty,
.markdown-block p:empty {
  min-height: 1em;
  margin: 0.5em 0;
}
/* Blank line spacer for preserved paragraph breaks */
.markdown-content .blank-line-spacer,
.markdown-block .blank-line-spacer {
  display: block;
  height: 0.75em;
  margin: 0;
  padding: 0;
}
/* Ensure br tags have proper line height for visual spacing */
.markdown-content br,
.markdown-block br {
  display: block;
  content: "";
  margin-top: 0.25em;
}
/* Unordered lists */
.markdown-content ul,
.markdown-block ul {
  margin: 1em 0;
  padding-left: 1.5em;
  list-style-type: disc;
}
/* Ordered lists - enhanced styling */
.markdown-content ol,
.markdown-block ol {
  margin: 1em 0;
  padding-left: 0;
  list-style: none;
  counter-reset: md-counter;
}
.markdown-content ol>li,
.markdown-block ol>li {
  counter-increment: md-counter;
  position: relative;
  padding-left: 2.5em;
  margin: 0.75em 0;
  line-height: 1.7;
}
.markdown-content ol>li::before,
.markdown-block ol>li::before {
  content: counter(md-counter);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.6em;
  height: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-radius: 6px;
  font-size: 0.8em;
  font-weight: 600;
  font-family: 'SF Mono', Monaco, monospace;
}
body.light .markdown-content ol>li::before,
body.light .markdown-block ol>li::before {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}
body.zen .markdown-content ol>li::before,
body.zen .markdown-block ol>li::before {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-light);
}
/* Regular list items (ul) */
.markdown-content ul>li,
.markdown-block ul>li {
  margin: 0.5em 0;
  line-height: 1.75;
}
/* Nested lists */
.markdown-content ol ol,
.markdown-block ol ol,
.markdown-content ul ul,
.markdown-block ul ul,
.markdown-content ol ul,
.markdown-block ol ul,
.markdown-content ul ol,
.markdown-block ul ol {
  margin: 0.5em 0;
}
.markdown-content ol ol>li::before,
.markdown-block ol ol>li::before {
  background: rgba(var(--accent-rgb), 0.08);
  font-size: 0.75em;
}
.markdown-content code,
.markdown-block code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875em;
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
}
body.light .markdown-content code,
body.light .markdown-block code {
  background-color: rgba(0, 0, 0, 0.05);
  color: #1f2937;
}
body.dark .markdown-content code,
body.dark .markdown-block code {
  background-color: rgba(255, 255, 255, 0.1);
  color: #d1d5db;
}
.markdown-content pre,
.markdown-block pre {
  padding: 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
}
body.light .markdown-content pre,
body.light .markdown-block pre {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
body.dark .markdown-content pre,
body.dark .markdown-block pre {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.markdown-content a,
.markdown-block a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.light .markdown-content a,
body.light .markdown-block a {
  color: #3b82f6;
}
body.dark .markdown-content a,
body.dark .markdown-block a {
  color: #60a5fa;
}
body.zen .markdown-content a,
body.zen .markdown-block a {
  color: #a3e635;
}
/* Visited link styles */
body.light .markdown-content a:visited,
body.light .markdown-block a:visited {
  color: var(--accent-dark);
}
body.dark .markdown-content a:visited,
body.dark .markdown-block a:visited {
  color: var(--accent);
}
body.zen .markdown-content a:visited,
body.zen .markdown-block a:visited {
  color: #86efac;
}
/* People mention pills (@slug) */
.mention-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.05em 0.5em;
  border-radius: 9999px;
  font-size: 0.88em;
  font-weight: 500;
  vertical-align: baseline;
  white-space: nowrap;
}
body.zen .mention-pill {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
body.dark .mention-pill {
  background: rgba(96, 165, 250, 0.15);
  color: rgba(96, 165, 250, 0.9);
  border: 1px solid rgba(96, 165, 250, 0.25);
}
body.light .mention-pill {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}
/* Tag pills (#gym, #topic) */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.05em 0.5em;
  border-radius: 9999px;
  font-size: 0.88em;
  font-weight: 500;
  vertical-align: baseline;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.tag-pill:hover {
  opacity: 0.8;
}
body.zen .tag-pill {
  background: rgba(74, 222, 128, 0.12);
  color: rgba(74, 222, 128, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.2);
}
body.dark .tag-pill {
  background: rgba(74, 222, 128, 0.12);
  color: rgba(74, 222, 128, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.2);
}
body.light .tag-pill {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.2);
}
/* Tag scroll-to highlight pulse */
.tag-pill-highlight,
.tag-scroll-highlight {
  animation: tagHighlightPulse 2.5s ease-out;
}
.tag-scroll-highlight {
  display: inline;
  border-radius: 4px;
  padding: 1px 2px;
}
@keyframes tagHighlightPulse {
  0% { background: rgba(74, 222, 128, 0.5); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  20% { background: rgba(74, 222, 128, 0.35); box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.3); }
  50% { background: rgba(74, 222, 128, 0.2); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15); }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
body.light .tag-pill-highlight,
body.light .tag-scroll-highlight {
  animation: tagHighlightPulseLight 2.5s ease-out;
}
@keyframes tagHighlightPulseLight {
  0% { background: rgba(22, 163, 74, 0.4); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  20% { background: rgba(22, 163, 74, 0.25); box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.25); }
  50% { background: rgba(22, 163, 74, 0.15); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1); }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
/* Vault wikilinks ([[path|label]]) */
.vault-link {
  display: inline;
  color: rgba(56, 189, 248, 0.9);
  text-decoration: none;
  border-bottom: 1px dashed rgba(56, 189, 248, 0.4);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.vault-link:hover {
  color: rgba(56, 189, 248, 1);
  border-bottom-color: rgba(56, 189, 248, 0.8);
}
body.light .vault-link {
  color: #0284c7;
  border-bottom-color: rgba(2, 132, 199, 0.4);
}
body.light .vault-link:hover {
  color: #0369a1;
  border-bottom-color: rgba(3, 105, 161, 0.8);
}
/* Tables in markdown */
.markdown-content table,
.markdown-block table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  background: transparent;
}
.markdown-content th,
.markdown-block th,
.markdown-content td,
.markdown-block td {
  padding: 0.75em 1em;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
}
.markdown-content th,
.markdown-block th {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
}
body.light .markdown-content th,
body.light .markdown-block th,
body.light .markdown-content td,
body.light .markdown-block td {
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .markdown-content th,
body.light .markdown-block th {
  background: rgba(0, 0, 0, 0.03);
}
body.zen .markdown-content th,
body.zen .markdown-block th,
body.zen .markdown-content td,
body.zen .markdown-block td {
  border-color: rgba(255, 255, 255, 0.15);
  color: inherit;
}
body.zen .markdown-content th,
body.zen .markdown-block th {
  background: rgba(255, 255, 255, 0.08);
}
/* Blockquotes in markdown */
.markdown-content blockquote,
.markdown-block blockquote {
  margin: 1em 0;
  padding: 1em 1.5em;
  border-left: 4px solid rgba(255, 255, 255, 0.3);
  background: rgba(15, 15, 20, 0.75);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
body.light .markdown-content blockquote,
body.light .markdown-block blockquote {
  border-left-color: rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.02);
}
body.zen .markdown-content blockquote,
body.zen .markdown-block blockquote {
  border-left-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}
/* Horizontal rules in markdown */
.markdown-content hr,
.markdown-block hr {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 2em 0;
}
body.light .markdown-content hr,
body.light .markdown-block hr {
  background: rgba(0, 0, 0, 0.1);
}
body.zen .markdown-content hr,
body.zen .markdown-block hr {
  background: rgba(255, 255, 255, 0.15);
}
/* Markdown text (inline) - scoped to prevent leakage */
.markdown-text {
  display: inline;
}
.markdown-text .md-bold {
  font-weight: 700;
}
.markdown-text .md-italic {
  font-style: italic;
  color: var(--accent-light);
}
body.light .markdown-text .md-italic {
  color: var(--accent-dark);
}
body.zen .markdown-text .md-italic {
  color: var(--accent-light);
}
.markdown-text .md-strike {
  text-decoration: line-through;
  opacity: 0.8;
}
.markdown-block s {
  text-decoration: line-through;
  opacity: 0.6;
}
.markdown-text .md-code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 0.95em;
}
body.light .markdown-text .md-code {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
/* Inline headers (# ## ### etc. at start of text) */
.markdown-text .md-h1 {
  display: inline-block;
  font-size: 1em;
  font-weight: 500;
  color: var(--accent);
  background: rgba(55, 48, 74, 0.8);
  padding: 0.4em 0.8em;
  border-radius: 8px;
  letter-spacing: 0;
}
.markdown-text .md-h2 {
  display: inline-block;
  font-size: 1.05em;
  font-weight: 500;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  padding: 0.3em 0.65em;
  border-radius: 6px;
  letter-spacing: -0.01em;
}
.markdown-text .md-h3 {
  display: inline-block;
  font-size: 1em;
  font-weight: 500;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  padding: 0.25em 0.6em;
  border-radius: 6px;
}
.markdown-text .md-h4 {
  font-size: 0.95em;
  font-weight: 500;
  color: var(--accent-light);
}
.markdown-text .md-h5 {
  font-size: 0.9em;
  font-weight: 500;
  color: #f9a8d4;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.markdown-text .md-h6 {
  font-size: 0.85em;
  font-weight: 500;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.light .markdown-text .md-h1 {
  color: var(--accent-dark);
  background: rgba(var(--accent-rgb), 0.12);
}
body.light .markdown-text .md-h2 {
  color: #15803d;
  text-shadow: none;
}
body.light .markdown-text .md-h3 {
  color: #0369a1;
  text-shadow: none;
}
body.light .markdown-text .md-h4 {
  color: var(--accent-dark);
}
body.light .markdown-text .md-h5 {
  color: #be185d;
}
body.light .markdown-text .md-h6 {
  color: #475569;
}
body.zen .markdown-text .md-h1 {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
}
body.zen .markdown-text .md-h2 {
  color: #166534;
  text-shadow: none;
}
body.zen .markdown-text .md-h3 {
  color: #1e40af;
  text-shadow: none;
}
body.zen .markdown-text .md-h4 {
  color: var(--accent-dark);
}
body.zen .markdown-text .md-h5 {
  color: #9d174d;
}
body.zen .markdown-text .md-h6 {
  color: #475569;
}
/* Header bullets in tree view - use same purple as regular bullets */
.bullet.header-bullet {
  font-size: 0.85em;
  margin-right: 6px;
  color: var(--accent);
}
.bullet.header-bullet.h1,
.bullet.header-bullet.h2,
.bullet.header-bullet.h3,
.bullet.header-bullet.h4,
.bullet.header-bullet.h5,
.bullet.header-bullet.h6 {
  color: var(--accent);
}
body.light .bullet.header-bullet,
body.light .bullet.header-bullet.h1,
body.light .bullet.header-bullet.h2,
body.light .bullet.header-bullet.h3,
body.light .bullet.header-bullet.h4,
body.light .bullet.header-bullet.h5,
body.light .bullet.header-bullet.h6 {
  color: var(--accent);
}
body.zen .bullet.header-bullet,
body.zen .bullet.header-bullet.h1,
body.zen .bullet.header-bullet.h2,
body.zen .bullet.header-bullet.h3,
body.zen .bullet.header-bullet.h4,
body.zen .bullet.header-bullet.h5,
body.zen .bullet.header-bullet.h6 {
  color: var(--accent);
}
/* Inline header items spacing */
.todo-list li.inline-header-item {
  margin-top: 8px;
}
.markdown-text .md-link {
  color: #5cc8ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(92, 200, 255, 0.35);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  padding: 0 2px;
  border-radius: 4px;
}
.markdown-text .md-link:hover {
  color: #90e0ff;
  border-color: rgba(144, 224, 255, 0.7);
  background-color: rgba(144, 224, 255, 0.08);
  text-decoration: none;
}
.markdown-text .md-tag {
  display: inline;
  color: rgba(var(--accent-rgb), 0.65);
  font-weight: inherit;
  letter-spacing: inherit;
}
body.light .markdown-text .md-tag {
  color: rgba(var(--accent-rgb), 0.6);
}
body.light .markdown-text .md-link {
  color: #0f6ab8;
  border-bottom: 1px solid rgba(15, 106, 184, 0.35);
}
body.light .markdown-text .md-link:hover {
  color: #0c4f88;
  border-color: rgba(12, 79, 136, 0.7);
  background-color: rgba(12, 79, 136, 0.08);
}
/* -----------------------------------------------------------------------------
 * 2. LAYOUT - App shell, sidebar, navigation
 * -------------------------------------------------------------------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
  color: inherit;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}
.app-shell.focus-mode,
.app-shell.thoughts-focus-mode,
.app-shell.daily-focus-mode,
.app-shell.activity-focus-mode,
.app-shell.notes-focus-mode {
  overflow: hidden;
}
/* Hide scrollbar on app-shell in focus modes (not children) */
.app-shell.focus-mode::-webkit-scrollbar,
.app-shell.thoughts-focus-mode::-webkit-scrollbar,
.app-shell.daily-focus-mode::-webkit-scrollbar,
.app-shell.activity-focus-mode::-webkit-scrollbar,
.app-shell.notes-focus-mode::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.app-shell.focus-mode,
.app-shell.thoughts-focus-mode,
.app-shell.daily-focus-mode,
.app-shell.activity-focus-mode,
.app-shell.notes-focus-mode {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* Hide app-content backdrop effects in focus modes to prevent bleeding through */
.app-shell.focus-mode .app-content,
.app-shell.thoughts-focus-mode .app-content,
.app-shell.daily-focus-mode .app-content,
.app-shell.activity-focus-mode .app-content,
.app-shell.notes-focus-mode .app-content {
  visibility: hidden;
  pointer-events: none;
}
.app-content {
  flex: 1;
  padding: 48px clamp(24px, 5vw, 64px) 96px;
  color: inherit;
  position: relative;
  z-index: 1;
  /* Use 5rem (collapsed) as default, override when expanded */
  margin-left: 5rem;
  /* TEMP: Removed transition to test if brief state changes cause the shift */
  /* transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1); */
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100vw;
  /* Since app-shell is position:fixed, app-content needs explicit height */
  height: 100%;
  /* Prevent browser back/forward swipe navigation */
  overscroll-behavior: none !important;
}
/* Classic view: removed margin-left override to allow sidebar expansion to work */
/* Adjust content margin when sidebar is expanded (not collapsed) */
.app-shell:has(.sidebar:not(.collapsed)) .app-content {
  margin-left: 15.5rem;
}
/* When sidebar is collapsed, add extra top padding to account for expand button */
.app-shell:has(.sidebar.collapsed) .app-content {
  padding-top: 56px;
}
.app-grid {
  display: grid;
  gap: 24px;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}
/* Full-width pages */
.app-grid:has(.weekly-plan-page),
.app-grid:has(.weekly-objectives-page) {
  max-width: none;
}
.app-content:has(.weekly-plan-page),
.app-content:has(.weekly-objectives-page) {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
/* ===========================================
   PAGE PANELS - Consistent width and styling
   =========================================== */
/* Base page panel - standard width */
.page-panel {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
}
/* Full-width page panels */
.page-panel.full-width {
  max-width: none;
  width: 100%;
  margin: 0;
}
/* ===========================================
   ZEN THEME - Dark Glassmorphism Page Panels
   Matches .settings-section styling
   =========================================== */
body.zen .page-panel {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
  margin: 1.5rem auto;
}
/* Full-width page panels in zen */
body.zen .page-panel.full-width {
  margin: 1.5rem;
  width: calc(100% - 3rem);
  max-width: none;
}
.page-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Fullscreen mode */
.app-shell.fullscreen-mode .sidebar {
  display: none;
}
.app-shell.fullscreen-mode .app-content {
  margin-left: 0;
  padding: 48px clamp(24px, 5vw, 64px);
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.app-shell.fullscreen-mode .app-grid {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.app-shell.fullscreen-mode .fullscreen-content {
  width: 100%;
}
/* Fullscreen writing mode should remove floating chrome (AI/music/timer/button). */
.app-shell.fullscreen-mode .focus-controls-wrapper,
.app-shell.fullscreen-mode .focus-mode-selector,
.app-shell.fullscreen-mode .fullscreen-toggle-btn {
  display: none !important;
}
/* Fullscreen toggle button - hidden in classical view */
.fullscreen-toggle-btn {
  display: none;
}
/* Focus Mode Selector Button */
.focus-mode-selector {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
}
.focus-mode-selector-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.focus-mode-selector-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.focus-mode-selector-btn svg {
  opacity: 0.8;
}
.focus-mode-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 160px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.focus-mode-selector:hover .focus-mode-menu,
.focus-mode-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.focus-mode-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.focus-mode-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}
.focus-mode-menu-item .shortcut {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.5;
  font-family: 'SF Mono', Monaco, monospace;
}
body.light .focus-mode-selector-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
body.light .focus-mode-selector-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.8);
}
body.light .focus-mode-menu {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .focus-mode-menu-item {
  color: rgba(0, 0, 0, 0.7);
}
body.light .focus-mode-menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.9);
}
/* Hide in focus modes */
.app-shell.focus-mode .focus-mode-selector,
.app-shell.thoughts-focus-mode .focus-mode-selector,
.app-shell.daily-focus-mode .focus-mode-selector,
.app-shell.activity-focus-mode .focus-mode-selector,
.app-shell.notes-focus-mode .focus-mode-selector {
  display: none;
}
/* --- Floating Controls (AI, Music, Timer) --- */
.focus-controls-wrapper {
  display: contents;
}
/* In focus mode, position the wrapper as a container */
.app-shell.focus-mode .focus-controls-wrapper,
.app-shell.thoughts-focus-mode .focus-controls-wrapper,
.app-shell.daily-focus-mode .focus-controls-wrapper,
.app-shell.activity-focus-mode .focus-controls-wrapper,
.app-shell.notes-focus-mode .focus-controls-wrapper {
  display: block;
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 1000;
  pointer-events: none;
  background: transparent;
  opacity: 1;
  transition: opacity 0.15s ease;
}
.ai-chat-hover-wrapper,
.music-player-hover-wrapper,
.pomodoro-hover-wrapper {
  display: contents;
}
.app-shell.focus-mode .ai-chat-hover-wrapper,
.app-shell.thoughts-focus-mode .ai-chat-hover-wrapper,
.app-shell.daily-focus-mode .ai-chat-hover-wrapper,
.app-shell.activity-focus-mode .ai-chat-hover-wrapper,
.app-shell.notes-focus-mode .ai-chat-hover-wrapper,
.app-shell.focus-mode .music-player-hover-wrapper,
.app-shell.thoughts-focus-mode .music-player-hover-wrapper,
.app-shell.daily-focus-mode .music-player-hover-wrapper,
.app-shell.activity-focus-mode .music-player-hover-wrapper,
.app-shell.notes-focus-mode .music-player-hover-wrapper,
.app-shell.focus-mode .pomodoro-hover-wrapper,
.app-shell.thoughts-focus-mode .pomodoro-hover-wrapper,
.app-shell.daily-focus-mode .pomodoro-hover-wrapper,
.app-shell.activity-focus-mode .pomodoro-hover-wrapper,
.app-shell.notes-focus-mode .pomodoro-hover-wrapper {
  display: block;
  position: absolute;
  right: 0;
  pointer-events: auto;
}
.app-shell.focus-mode .pomodoro-hover-wrapper,
.app-shell.thoughts-focus-mode .pomodoro-hover-wrapper,
.app-shell.daily-focus-mode .pomodoro-hover-wrapper,
.app-shell.activity-focus-mode .pomodoro-hover-wrapper,
.app-shell.notes-focus-mode .pomodoro-hover-wrapper {
  bottom: 0;
}
.app-shell.focus-mode .music-player-hover-wrapper,
.app-shell.thoughts-focus-mode .music-player-hover-wrapper,
.app-shell.daily-focus-mode .music-player-hover-wrapper,
.app-shell.activity-focus-mode .music-player-hover-wrapper,
.app-shell.notes-focus-mode .music-player-hover-wrapper {
  bottom: 3.25rem;
}
.app-shell.focus-mode .ai-chat-hover-wrapper,
.app-shell.thoughts-focus-mode .ai-chat-hover-wrapper,
.app-shell.daily-focus-mode .ai-chat-hover-wrapper,
.app-shell.activity-focus-mode .ai-chat-hover-wrapper,
.app-shell.notes-focus-mode .ai-chat-hover-wrapper {
  bottom: 6.5rem;
}
.app-shell.focus-mode .ai-chat-hover-wrapper .ai-chat-launch-btn,
.app-shell.thoughts-focus-mode .ai-chat-hover-wrapper .ai-chat-launch-btn,
.app-shell.daily-focus-mode .ai-chat-hover-wrapper .ai-chat-launch-btn,
.app-shell.activity-focus-mode .ai-chat-hover-wrapper .ai-chat-launch-btn,
.app-shell.notes-focus-mode .ai-chat-hover-wrapper .ai-chat-launch-btn,
.app-shell.focus-mode .music-player-hover-wrapper .music-player-container,
.app-shell.thoughts-focus-mode .music-player-hover-wrapper .music-player-container,
.app-shell.daily-focus-mode .music-player-hover-wrapper .music-player-container,
.app-shell.activity-focus-mode .music-player-hover-wrapper .music-player-container,
.app-shell.notes-focus-mode .music-player-hover-wrapper .music-player-container,
.app-shell.focus-mode .pomodoro-hover-wrapper .pomodoro-container,
.app-shell.thoughts-focus-mode .pomodoro-hover-wrapper .pomodoro-container,
.app-shell.daily-focus-mode .pomodoro-hover-wrapper .pomodoro-container,
.app-shell.activity-focus-mode .pomodoro-hover-wrapper .pomodoro-container,
.app-shell.notes-focus-mode .pomodoro-hover-wrapper .pomodoro-container {
  position: relative;
  bottom: auto;
  right: auto;
}
.ai-chat-launch-btn {
  position: fixed;
  bottom: 7rem;
  right: 0.5rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  color: var(--accent);
  cursor: pointer;
  z-index: 40;
  pointer-events: auto;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.ai-chat-launch-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-light);
}
/* Base positioning for containers */
.music-player-container {
  position: fixed;
  bottom: 3.75rem;
  right: 0.5rem;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
}
.pomodoro-container {
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
}
/* Hide in focus modes */
.app-shell.focus-mode .focus-mode-selector,
.app-shell.thoughts-focus-mode .focus-mode-selector,
.app-shell.daily-focus-mode .focus-mode-selector {
  display: none;
}
.app-shell.focus-idle .focus-controls-wrapper {
  opacity: 0;
  pointer-events: none;
}
/* ======================= */
/* Sandbox Apps Menu       */
/* ======================= */
.apps-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  animation: appsMenuFadeIn 0.2s ease-out;
}
@keyframes appsMenuFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.apps-menu {
  width: 95%;
  max-width: 900px;
  margin-top: 2rem;
  background: linear-gradient(145deg, rgba(30, 30, 40, 0.95), rgba(20, 20, 28, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 25px 80px rgba(0, 0, 0, 0.6),
    0 0 100px rgba(var(--accent-rgb), 0.1);
  overflow: hidden;
  animation: appsMenuSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes appsMenuSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.apps-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.apps-menu-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.apps-menu-title svg {
  color: var(--accent);
}
.apps-menu-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.apps-count {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}
.apps-menu-header kbd {
  padding: 0.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}
.apps-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  padding: 1.25rem;
  max-height: 70vh;
  overflow-y: auto;
}
.apps-menu-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.apps-menu-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--accent-rgb), 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.apps-menu-card.selected {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.2) inset,
    0 8px 24px rgba(var(--accent-rgb), 0.15);
}
.apps-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.08));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 14px;
  flex-shrink: 0;
}
.apps-card-icon svg {
  color: var(--accent);
}
.apps-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.apps-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.apps-card-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apps-menu-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}
.apps-menu-empty svg {
  opacity: 0.3;
}
.apps-menu-empty p {
  margin: 0;
  font-size: 1rem;
}
.apps-menu-empty small {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.25);
}
.apps-menu-footer {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.875rem 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.apps-menu-footer span {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'SF Mono', Monaco, monospace;
}
/* Light theme */
body.light .apps-menu-overlay {
  background: rgba(0, 0, 0, 0.4);
}
body.light .apps-menu {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03) inset,
    0 25px 80px rgba(0, 0, 0, 0.25);
}
body.light .apps-menu-header {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.light .apps-menu-title {
  color: #1e293b;
}
body.light .apps-menu-title svg {
  color: var(--accent-dark);
}
body.light .apps-count {
  color: rgba(0, 0, 0, 0.4);
}
body.light .apps-menu-header kbd {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
}
body.light .apps-menu-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .apps-menu-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(var(--accent-rgb), 0.3);
}
body.light .apps-menu-card.selected {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.4);
}
body.light .apps-card-icon {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.05));
  border-color: rgba(var(--accent-rgb), 0.2);
}
body.light .apps-card-icon svg {
  color: var(--accent-dark);
}
body.light .apps-card-name {
  color: #1e293b;
}
body.light .apps-card-desc {
  color: rgba(0, 0, 0, 0.5);
}
body.light .apps-menu-empty {
  color: rgba(0, 0, 0, 0.4);
}
body.light .apps-menu-empty small {
  color: rgba(0, 0, 0, 0.3);
}
body.light .apps-menu-footer {
  background: rgba(0, 0, 0, 0.02);
  border-top-color: rgba(0, 0, 0, 0.05);
}
body.light .apps-menu-footer span {
  color: rgba(0, 0, 0, 0.4);
}
/* Glass sidebar base */
.sidebar,
.glass-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 20;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transition: all 0.3s ease-in-out;
  
  /* Default (Dark) */
  background: rgba(15, 17, 21, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
body.light .glass-sidebar {
  background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
body.gray .glass-sidebar {
  background: rgba(26, 26, 26, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
body.zen .glass-sidebar {
  background: rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  color: white;
}
body.batman .glass-sidebar {
  background: rgba(10, 10, 15, 0.9);
  border-right: 1px solid rgba(0, 100, 200, 0.2);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}
.glass-sidebar nav {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
.sidebar {
  width: 15.5rem;
  min-width: 15.5rem;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
  overflow: hidden;
}
.sidebar.collapsed {
  width: 5rem;
  min-width: 5rem;
  overflow: visible;
  /* Ensure flyouts don't affect layout calculations */
  contain: layout;
  /* Prevent sidebar from triggering document scroll */
  overscroll-behavior: none;
}
/* Keep overflow hidden during transition to prevent visual glitches */
.sidebar.transitioning {
  overflow: hidden !important;
}
.sidebar.transitioning .sidebar-nav {
  overflow: hidden !important;
}
.sidebar.collapsed .sidebar-header-wrapper {
  padding: 0.5rem;
}
.sidebar.collapsed .sidebar-logo-btn {
  margin-top: 1.5rem;
}
.sidebar.collapsed .sidebar-nav {
  padding: 0.25rem;
  overflow: visible;
}
.sidebar-menu-item span,
.sidebar-menu-item svg+span,
.sidebar-section-title {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sidebar.collapsed .sidebar-menu-item>span:not(.sidebar-tooltip),
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .nav-title {
  display: none !important;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}
/* Hide ALL submenus when collapsed - they only show on hover as flyout */
.sidebar.collapsed .sidebar-submenu {
  display: none;
}
.sidebar.collapsed .nav-section li:hover>.sidebar-submenu {
  display: block;
}
/* Larger icons when collapsed */
.sidebar.collapsed .sidebar-menu-item {
  justify-content: center;
  padding: 0.75rem;
}
.sidebar.collapsed .sidebar-menu-item svg {
  width: 1.35rem;
  height: 1.35rem;
}
.sidebar.collapsed .nav-section ul {
  gap: 0.25rem;
}
/* Ensure nav section items show flyouts when collapsed */
.sidebar.collapsed .nav-section-items {
  overflow: visible;
}
/* Sidebar tooltip - shown when collapsed */
.sidebar-tooltip {
  display: none;
}
/* Only show tooltip structure when sidebar is collapsed */
.sidebar.collapsed .sidebar-tooltip {
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.sidebar.collapsed .sidebar-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: rgba(30, 30, 35, 0.95);
}
.sidebar-menu-item {
  position: relative;
}
/* Show tooltip on hover */
.sidebar.collapsed .sidebar-menu-item:hover .sidebar-tooltip {
  opacity: 1;
  visibility: visible;
}
/* Hide tooltip for flyout items (they have their own flyout menu) */
.sidebar.collapsed .sidebar-flyout-wrapper .sidebar-tooltip {
  display: none !important;
}
body.light .sidebar.collapsed .sidebar-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
body.light .sidebar.collapsed .sidebar-tooltip::before {
  border-right-color: rgba(255, 255, 255, 0.95);
}
/* Sidebar header */
.sidebar-header-wrapper {
  padding: 1.25rem 1rem 1rem;
  transition: all 0.3s;
}
.sidebar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.sidebar-logo-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  padding: 0.25rem;
  margin: -0.25rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease;
  font: inherit;
  color: inherit;
  text-decoration: none;
}
.sidebar-logo-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.sidebar-logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  overflow: hidden;
}
.sidebar-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sidebar-logo-btn:hover .sidebar-logo {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.sidebar-title {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  white-space: nowrap;
  margin: 0;
  line-height: 1;
  opacity: 0.9;
}
.sidebar-collapse-btn {
  padding: 0.4rem;
  border-radius: 0.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
}
.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
}
.sidebar-expand-btn {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  transform: translateX(-50%);
  width: 48px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s;
  z-index: 100;
}
.sidebar-expand-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
body.light .sidebar-expand-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.5);
}
body.light .sidebar-expand-btn:hover {
  background: white;
  color: rgba(0, 0, 0, 0.8);
}
/* Sidebar navigation */
.sidebar-nav {
  flex: 1;
  padding: 0.5rem 1rem 0.5rem 1.25rem;
  overflow-y: auto;
  transition: all 0.3s;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
body.light .sidebar-nav {
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
body.light .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}
body.light .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
.sidebar-nav ul {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.sidebar-nav li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.sidebar-nav li::before,
.sidebar-nav li::marker {
  content: none;
  display: none;
}
/* Section header button */
.nav-title-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.25rem 0.6rem;
  margin: 0.75rem 0 0.25rem;
}
.nav-title-btn:hover .nav-title {
  color: rgba(255, 255, 255, 0.6);
}
body.light .nav-title-btn:hover .nav-title {
  color: rgba(0, 0, 0, 0.6);
}
.nav-title {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  padding: 0;
  font-weight: 500;
  transition: color 0.2s ease, opacity 0.25s ease, transform 0.25s ease;
}
body.light .nav-title {
  color: rgba(0, 0, 0, 0.4);
}
.nav-title-chevron {
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.4;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}
.nav-title-btn:hover .nav-title-chevron {
  opacity: 0.7;
}
/* Section items container animation */
.nav-section-items {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.nav-section-items.collapsed {
  opacity: 0;
  pointer-events: none;
}
.nav-section-items.expanded {
  opacity: 1;
}
.sidebar-section-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0.25rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
  background: transparent;
  border: none;
  cursor: pointer;
}
.sidebar-section-title {
  font-size: 0.55rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin-bottom: 0.6rem;
  opacity: 0.55;
}
/* Menu item */
.sidebar-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  text-decoration: none;
  background: transparent;
}
.sidebar-menu-item.active {
  background: rgba(255, 255, 255, 0.1);
}
.sidebar-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* Active indicator bar */
.sidebar-active-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #c084fc;
  border-radius: 0 9999px 9999px 0;
}
/* Submenu */
.sidebar-submenu {
  margin-left: 1.5rem;
  margin-top: 0.25rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, transform 0.3s ease;
}
.sidebar-submenu.expanded {
  opacity: 1;
  transform: translateY(0);
}
.sidebar-submenu.collapsed {
  pointer-events: none;
}
/* Collapsed sidebar - submenu as flyout popup on hover */
.sidebar.collapsed .nav-section li {
  position: relative;
}
.sidebar.collapsed .nav-section li:hover>.sidebar-submenu {
  display: block !important;
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.5rem;
  margin-top: 0;
  padding: 0.5rem;
  border-left: none;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  max-height: none !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  z-index: 1000;
}
.sidebar.collapsed .nav-section li:hover>.sidebar-submenu::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 12px;
  border: 6px solid transparent;
  border-right-color: rgba(30, 30, 35, 0.98);
}
/* Submenu items in collapsed flyout */
.sidebar.collapsed .sidebar-submenu-item {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
}
.sidebar.collapsed .sidebar-submenu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* --- Flyout Menu --- */
.sidebar-flyout-wrapper {
  position: relative;
  width: 100%;
}
.sidebar.collapsed .sidebar-flyout-wrapper {
  display: flex;
  justify-content: center;
}
.sidebar.collapsed .sidebar-flyout-wrapper .sidebar-menu-item {
  justify-content: center;
  width: 100%;
}
.sidebar-flyout {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.5rem;
  padding: 0.5rem;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}
.sidebar-flyout.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
.sidebar-flyout-arrow {
  position: absolute;
  right: 100%;
  top: 12px;
  border: 6px solid transparent;
  border-right-color: rgba(30, 30, 35, 0.98);
}
.sidebar-flyout-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.25rem;
}
.sidebar-flyout-items {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.sidebar-flyout-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.sidebar-flyout-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.sidebar-flyout-item.active {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.1);
}
.sidebar-flyout-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
body.light .sidebar-flyout {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
body.light .sidebar-flyout-arrow {
  border-right-color: rgba(255, 255, 255, 0.98);
}
body.light .sidebar-flyout-header {
  color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .sidebar-flyout-item {
  color: rgba(0, 0, 0, 0.8);
}
body.light .sidebar-flyout-item:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .sidebar-flyout-item.active {
  color: #9333ea;
  background: rgba(147, 51, 234, 0.08);
}
.sidebar-submenu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  border-radius: 0.4rem;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.sidebar-submenu-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.45;
}
/* Sidebar footer */
.sidebar-footer {
  padding: 0.75rem 1rem;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.sidebar-version {
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}
.sidebar-refresh-btn {
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: all 0.2s;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
}
.sidebar-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}
/* Theme-specific overrides for sidebar */
.glass-sidebar.light .sidebar-title { color: #111827; }
.glass-sidebar.light .sidebar-section-title { color: #6b7280; }
.glass-sidebar.light .sidebar-menu-item { color: rgba(55, 65, 81, 0.85); }
.glass-sidebar.light .sidebar-menu-item:hover { background: rgba(0, 0, 0, 0.05); color: #111827; }
.glass-sidebar.light .sidebar-menu-item.active { background: rgba(0, 0, 0, 0.08); color: #c084fc; }
.glass-sidebar.light .sidebar-collapse-btn { border-color: #e5e7eb; background: white; color: rgba(0, 0, 0, 0.8); }
.glass-sidebar.light .sidebar-collapse-btn:hover { background: #f3f4f6; color: rgba(0, 0, 0, 0.9); }
.glass-sidebar.light .sidebar-submenu { border-left-color: #e5e7eb; }
.glass-sidebar.light .sidebar-footer { border-top-color: #e5e7eb; }
.glass-sidebar.light .sidebar-version { color: #6b7280; }
.glass-sidebar.light .sidebar-refresh-btn { color: #9ca3af; }
.glass-sidebar.light .sidebar-refresh-btn:hover { background: rgba(0, 0, 0, 0.05); color: #374151; }
.glass-sidebar .sidebar-title { color: white; }
.glass-sidebar .sidebar-section-title { color: #9ca3af; }
.glass-sidebar .sidebar-menu-item { color: rgba(255, 255, 255, 0.85); }
.glass-sidebar .sidebar-menu-item:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
.glass-sidebar .sidebar-menu-item.active { background: rgba(255, 255, 255, 0.12); color: #c084fc; }
.glass-sidebar .sidebar-collapse-btn { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: white; }
.glass-sidebar .sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.1); }
.glass-sidebar.zen .sidebar-title { color: rgba(255, 255, 255, 0.9); }
.glass-sidebar.zen .sidebar-section-title { color: rgba(255, 255, 255, 0.7); }
.glass-sidebar.zen .sidebar-menu-item { color: rgba(255, 255, 255, 0.92); }
.glass-sidebar.zen .sidebar-menu-item:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.98); }
.glass-sidebar.zen .sidebar-menu-item.active { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 1); border-left: 2px solid rgba(255, 255, 255, 0.4); }
.glass-sidebar.zen .sidebar-collapse-btn { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: white; }
.glass-sidebar.zen .sidebar-submenu { border-left-color: rgba(255, 255, 255, 0.3); }
.glass-sidebar.zen .nav-section button svg, .glass-sidebar.zen .nav-section a svg, .glass-sidebar.zen .nav-section .nav-link svg { color: rgba(255, 255, 255, 0.9) !important; fill: none !important; stroke: currentColor !important; }
.glass-sidebar.zen .nav-section li.active button svg, .glass-sidebar.zen .nav-section li.active a svg { color: rgba(255, 255, 255, 1) !important; fill: none !important; stroke: currentColor !important; }
.glass-sidebar.zen .nav-title { color: rgba(255, 255, 255, 0.5) !important; }
.glass-sidebar.zen .nav-title-btn:hover .nav-title { color: rgba(255, 255, 255, 0.75) !important; }
.glass-sidebar.zen .nav-title-chevron { color: rgba(255, 255, 255, 0.5); }
.glass-sidebar.zen .sidebar-submenu-item { color: white !important; }
.glass-sidebar.zen .sidebar-submenu-item:hover { color: white !important; background: rgba(255, 255, 255, 0.1); }
.glass-sidebar.zen .sidebar-submenu-item.active { color: #c084fc !important; background: rgba(192, 132, 252, 0.15); }
.glass-sidebar.zen .sidebar-submenu-dot { background: white !important; opacity: 0.8; }
.glass-sidebar.batman .sidebar-title { color: #93c5fd; }
.glass-sidebar.batman .sidebar-section-title { color: rgba(96, 165, 250, 0.6); }
.glass-sidebar.batman .sidebar-menu-item { color: #9ca3af; }
.glass-sidebar.batman .sidebar-menu-item:hover { background: rgba(30, 58, 138, 0.2); color: #93c5fd; }
.glass-sidebar.batman .sidebar-menu-item.active { background: rgba(30, 58, 138, 0.3); color: #93c5fd; border-left: 2px solid #3b82f6; }
.glass-sidebar.batman .sidebar-collapse-btn { border-color: rgba(59, 130, 246, 0.3); background: rgba(30, 58, 138, 0.2); color: #93c5fd; }
.glass-sidebar.batman .sidebar-submenu { border-left-color: rgba(59, 130, 246, 0.3); }
/* -----------------------------------------------------------------------------
 * 3. PANELS - Dashboard panel components
 * -------------------------------------------------------------------------- */
/* 
 * FLAT PANEL SYSTEM
 * Maximum 2 visual levels: page → panel
 * .body-nav and .body-content are handled separately in BodyPanel.css
 */
/* Shared Glass Styles for all Panel-like components */
.panel,
.glass-panel,
.lane-card,
.project-card,
.section-card,
.journal-entry-card,
.roadmap-phase-card,
.info-card,
.field-card,
.daily-war-card,
.roadmap-section-card {
  /* Default (Dark) - Clean dark panel */
  background: rgba(15, 15, 20, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  padding: 1.75rem;
  max-width: 100%;
  box-sizing: border-box;
}
body.light .panel,
body.light .glass-panel,
body.light .lane-card,
body.light .project-card,
body.light .section-card,
body.light .journal-entry-card,
body.light .roadmap-phase-card,
body.light .info-card,
body.light .field-card,
body.light .daily-war-card,
body.light .roadmap-section-card {
  background: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
body.gray .panel,
body.gray .glass-panel,
body.gray .lane-card,
body.gray .project-card,
body.gray .section-card,
body.gray .journal-entry-card,
body.gray .roadmap-phase-card,
body.gray .info-card,
body.gray .field-card,
body.gray .daily-war-card,
body.gray .roadmap-section-card {
  background: rgba(20, 20, 25, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
body.zen .panel,
body.zen .glass-panel,
body.zen .lane-card,
body.zen .project-card,
body.zen .section-card,
body.zen .journal-entry-card,
body.zen .roadmap-phase-card,
body.zen .info-card,
body.zen .field-card,
body.zen .daily-war-card,
body.zen .roadmap-section-card {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
}
body.batman .panel,
body.batman .glass-panel,
body.batman .lane-card,
body.batman .project-card,
body.batman .section-card,
body.batman .journal-entry-card,
body.batman .roadmap-phase-card,
body.batman .info-card,
body.batman .field-card,
body.batman .daily-war-card,
body.batman .roadmap-section-card {
  background: rgba(10, 10, 15, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 100, 200, 0.2);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}
/* Shared Header Styles */
.body-content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1.5rem;
}
/* Compact header - subtle divider, no heavy glass effect */
.body-content-header.compact {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  /* No background, border, or shadow - keep it flat */
}
.body-content-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}
.p1-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.body-content-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f5f5f7;
}
/* Icon badges - more subtle, no heavy shadows */
.section-icon-wrapper {
  width: auto;
  height: auto;
  padding: 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.section-icon-wrapper.blue { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
.section-icon-wrapper.orange { background: rgba(251, 146, 60, 0.12); color: #fb923c; }
.section-icon-wrapper.green { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.section-icon-wrapper.purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.section-icon-wrapper.red { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.section-icon-wrapper.gold { background: rgba(201, 162, 39, 0.15); color: #c9a227; }
.body-content-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
body.light .body-content-header.compact {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .body-content-header h3 {
  color: #111827;
}
body.zen .body-content-header.compact {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.batman .body-content-header.compact {
  border-bottom-color: rgba(0, 100, 200, 0.15);
}
/* 
 * Content Cards - lighter styling for inner sections
 * Use within body-content for subtle visual separation
 */
.content-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 1.5rem;
}
body.light .content-card {
  background: rgba(0, 0, 0, 0.015);
  border-color: rgba(0, 0, 0, 0.04);
}
body.zen .content-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}
body.batman .content-card {
  background: rgba(0, 100, 200, 0.03);
  border-color: rgba(0, 100, 200, 0.08);
}
/* Settings page text in Zen theme uses panel font color */
body.zen .glass-panel h3,
body.zen .glass-panel p,
body.zen .glass-panel label,
body.zen .glass-panel span:not(.theme-option-check):not(.preset-check):not(.preset-name),
body.zen .settings-note {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
}
/* ========================================
   CONNECTION ERROR MODAL
   Shown when server is disconnected
   ======================================== */
.connection-error-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999999;
  animation: errorFadeIn 0.3s ease-out;
}
@keyframes errorFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes errorPulse {
  0%, 100% {
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.15);
  }
  50% {
    box-shadow: 0 0 60px rgba(239, 68, 68, 0.25);
  }
}
@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
.connection-error-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 420px;
  padding: 3rem 2.5rem;
  background: linear-gradient(
    165deg,
    rgba(30, 20, 25, 0.95) 0%,
    rgba(15, 10, 15, 0.98) 100%
  );
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 24px;
  box-shadow: 
    0 0 40px rgba(239, 68, 68, 0.15),
    0 25px 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: errorPulse 3s ease-in-out infinite;
}
.connection-error-modal .error-icon-wrapper {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.15) 0%,
    rgba(239, 68, 68, 0.08) 100%
  );
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 50%;
  margin-bottom: 1.75rem;
  color: #f87171;
  animation: iconFloat 3s ease-in-out infinite;
}
.connection-error-modal h2 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f5f5f7;
}
.connection-error-modal .error-message {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'SF Mono', 'Fira Code', monospace;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.connection-error-modal .error-hint {
  margin: 0.75rem 0 1.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}
.connection-error-modal .retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.9) 0%,
    rgba(185, 28, 28, 0.9) 100%
  );
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 
    0 4px 12px rgba(239, 68, 68, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.connection-error-modal .retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 20px rgba(239, 68, 68, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.connection-error-modal .retry-btn:active {
  transform: translateY(0);
}
/* Light Theme */
body.light .connection-error-overlay {
  background: rgba(255, 255, 255, 0.7);
}
body.light .connection-error-modal {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(254, 242, 242, 0.98) 100%
  );
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 
    0 0 40px rgba(239, 68, 68, 0.1),
    0 25px 50px rgba(0, 0, 0, 0.15);
}
body.light .connection-error-modal h2 {
  color: #1f2937;
}
body.light .connection-error-modal .error-message {
  color: #6b7280;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .connection-error-modal .error-hint {
  color: #9ca3af;
}
body.light .connection-error-modal .error-icon-wrapper {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.12) 0%,
    rgba(239, 68, 68, 0.06) 100%
  );
  border-color: rgba(239, 68, 68, 0.2);
  color: #dc2626;
}
/* Gray Theme */
body.gray .connection-error-modal {
  background: linear-gradient(
    165deg,
    rgba(35, 35, 40, 0.98) 0%,
    rgba(20, 20, 25, 0.98) 100%
  );
}
/* Zen Theme */
body.zen .connection-error-overlay {
  background: rgba(0, 0, 0, 0.7);
}
body.zen .connection-error-modal {
  background: linear-gradient(
    165deg,
    rgba(20, 15, 20, 0.95) 0%,
    rgba(10, 5, 10, 0.98) 100%
  );
  border-color: rgba(239, 68, 68, 0.15);
}
/* Batman Theme */
body.batman .connection-error-modal {
  background: linear-gradient(
    165deg,
    rgba(15, 20, 30, 0.98) 0%,
    rgba(5, 10, 20, 0.98) 100%
  );
  border-color: rgba(239, 68, 68, 0.25);
}
/* Body Layout & Navigation Styles */
/* 
 * FLAT PANEL SYSTEM
 * Only 2 visual levels: container → content
 * No nested glass panels or redundant borders
 */
.body-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  min-height: 600px;
}
/* Navigation sidebar - subtle, no heavy glass effect */
.body-nav {
  width: 260px;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  padding: 1rem 0.75rem;
  position: sticky;
  top: 2rem;
  /* Subtle separator instead of full panel */
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.body-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.body-nav-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin: 0;
}
.body-nav-actions {
  display: flex;
  gap: 4px;
}
.body-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
  padding-right: 0.5rem;
}
.body-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  width: 100%;
  background: transparent;
  color: inherit;
  opacity: 0.65;
  border-radius: 10px;
  text-align: left;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.body-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  opacity: 0.9;
}
.body-nav-item.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  opacity: 1;
}
/* Content area - no nested panels! */
.body-content {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 1rem;
}
/* When glass-panel is inside body-content, make it transparent/flat */
.body-content .glass-panel {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
/* Caret for nested nav */
.caret {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.caret::before {
  content: '▸';
  font-size: 10px;
}
.caret.open {
  transform: rotate(90deg);
}
.caret.placeholder {
  visibility: hidden;
}
/* Scrollbars for nav */
.body-nav-list::-webkit-scrollbar {
  width: 4px;
}
.body-nav-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
/* Light theme */
body.light .body-nav {
  border-right-color: rgba(0, 0, 0, 0.06);
}
body.light .body-nav-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .body-nav-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .body-nav-item.active {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-dark);
}
body.light .body-nav-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
}
/* Zen theme */
body.zen .body-nav {
  border-right-color: rgba(255, 255, 255, 0.08);
}
body.zen .body-nav-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.zen .body-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
body.zen .body-nav-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-light);
}
/* Batman theme */
body.batman .body-nav {
  border-right-color: rgba(0, 100, 200, 0.15);
}
body.batman .body-nav-header {
  border-bottom-color: rgba(0, 100, 200, 0.15);
}
body.batman .body-nav-item:hover {
  background: rgba(0, 100, 200, 0.08);
}
body.batman .body-nav-item.active {
  background: rgba(0, 150, 255, 0.15);
  color: #60a5fa;
}
/* Common Styles for Command Center Panels */
/* ==========================================
   COLLAPSIBLE PANELS - Shared Styles
   ========================================== */
.collapsible-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  position: relative;
  padding: 0 !important;
}
/* Collapsed state */
.collapsible-panel.collapsed {
  grid-template-rows: auto 0fr;
}
/* ==========================================
   HEADER - Consistent height, padding, layout
   ========================================== */
.collapsible-panel .body-content-header {
  position: relative;
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
/* ==========================================
   CONTENT - Consistent padding
   ========================================== */
.collapsible-panel .collapsible-content {
  padding: 0.75rem 1.5rem 1.5rem !important;
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease;
}
.collapsible-panel .next-panel-content {
  padding: 0 !important;
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease;
}
.collapsible-panel.collapsed .collapsible-content,
.collapsible-panel.collapsed .next-panel-content {
  opacity: 0;
  pointer-events: none;
  min-height: 0;
  padding: 0 !important;
}
/* Clickable header */
.collapsible-header {
  cursor: pointer;
}
.collapsible-header:hover h3 {
  color: rgba(255, 255, 255, 0.95);
}
body.light .collapsible-header:hover h3 {
  color: rgba(0, 0, 0, 0.95);
}
/* Title row takes full width */
.collapsible-panel .body-content-title-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Title group on the left */
.collapsible-panel .p1-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.collapsible-panel .p1-title-group h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
/* Actions always on the right, fixed position */
.collapsible-panel .body-content-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
/* All icon buttons: 28x28px */
.collapsible-panel .view-toggle-btn,
.collapsible-panel .add-item-btn,
.collapsible-panel .section-link-btn,
.collapsible-panel .btn-icon-link,
.collapsible-panel .section-collapse-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  min-height: 28px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}
/* Standardize icon sizes */
.collapsible-panel .view-toggle-btn svg,
.collapsible-panel .add-item-btn svg,
.collapsible-panel .section-link-btn svg,
.collapsible-panel .btn-icon-link svg,
.collapsible-panel .section-collapse-btn svg {
  width: 14px;
  height: 14px;
}
/* Flush button - taller with text */
.collapsible-panel .flush-btn {
  height: 28px !important;
  padding: 0 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 6px;
  font-size: 0.75rem;
}
.collapsible-panel .flush-btn svg {
  width: 14px;
  height: 14px;
}
/* Badges - same height as buttons */
.collapsible-panel .week-badge,
.collapsible-panel .subtitle-muted,
.collapsible-panel .collapsed-count {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 0.75rem;
  border-radius: 6px;
}
.collapsible-panel .collapsed-count {
  margin-left: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
body.light .collapsible-panel .collapsed-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}
/* Section icon wrapper - consistent size */
.collapsible-panel .section-icon-wrapper {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.collapsible-panel .section-icon-wrapper svg {
  width: 18px;
  height: 18px;
}
/* Collapse button - consistent across all panels */
.section-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.section-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}
.section-collapse-btn svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapsible-panel.collapsed .section-collapse-btn svg {
  transform: rotate(180deg);
}
/* Light theme */
body.light .section-collapse-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
body.light .section-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.8);
}
/* Zen theme */
body.zen .section-collapse-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.6));
}
body.zen .section-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.9));
}
/* Collapsed count badge */
.collapsed-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  margin-left: 0.5rem;
}
body.light .collapsed-count {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.06);
}
body.zen .collapsed-count {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.5));
  background: rgba(255, 255, 255, 0.1);
}
/* Active Projects Grid */
.active-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.active-project-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.active-project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple, var(--accent)));
  opacity: 0.8;
}
.active-project-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
body.light .active-project-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.light .active-project-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
body.zen .active-project-card {
  background: rgb(255 255 255 / calc(var(--zen-panel-opacity, 15%) + 2%));
  border-color: rgba(255, 255, 255, 0.1);
}
body.zen .active-project-card:hover {
  background: rgb(255 255 255 / calc(var(--zen-panel-opacity, 15%) + 5%));
}
.active-project-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.active-project-header svg {
  color: var(--accent-blue);
  opacity: 0.9;
}
.active-project-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  flex: 1;
}
body.light .active-project-header h3 {
  color: rgba(0, 0, 0, 0.85);
}
body.zen .active-project-header h3 {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
}
.active-project-description {
  color: rgba(255, 255, 255, 0.6);
}
body.light .active-project-description {
  color: rgba(0, 0, 0, 0.5);
}
body.zen .active-project-description {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.6));
  opacity: 0.7;
}
.active-project-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  font-size: 0.8rem;
}
body.light .active-project-stats {
  background: rgba(0, 0, 0, 0.04);
}
body.zen .active-project-stats {
  background: rgba(0, 0, 0, 0.1);
}
.project-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
body.light .project-stat {
  color: rgba(0, 0, 0, 0.5);
}
body.zen .project-stat {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.6));
  opacity: 0.7;
}
.project-stat svg {
  opacity: 0.8;
}
.project-stat.in-progress {
  color: var(--accent-blue);
}
body.light .project-stat.in-progress {
  color: var(--accent-blue);
}
.project-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-left: auto;
}
body.light .project-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}
.project-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-green), #34d399);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.active-project-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.project-task-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
body.light .project-task-item {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.02);
}
body.light .project-task-item:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
}
body.zen .project-task-item {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.8));
  background: rgba(255, 255, 255, 0.03);
}
.project-task-item svg {
  flex-shrink: 0;
  margin-top: 3px;
}
/* Ledger Panel Specific */
.ledger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.ledger-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.ledger-item {
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
body.light .ledger-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}
/* P1 Actions Panel - Checkbox Column */
.checkbox-column {
  width: 40px;
  padding: 0.5rem !important;
  text-align: center;
}
.complete-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
}
.complete-checkbox:hover {
  color: rgba(34, 197, 94, 0.8);
  transform: scale(1.1);
}
.complete-checkbox:hover svg {
  stroke-width: 2.5;
}
body.light .complete-checkbox {
  color: rgba(0, 0, 0, 0.25);
}
body.light .complete-checkbox:hover {
  color: rgba(34, 197, 94, 0.9);
}
/* P1 Category View */
.p1-category-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.p1-category-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}
.p1-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.p1-category-icon {
  font-size: 1rem;
}
.p1-category-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  flex: 1;
}
.p1-category-count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
}
.p1-category-items {
  display: flex;
  flex-direction: column;
}
.p1-category-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}
.p1-category-item:last-child {
  border-bottom: none;
}
.p1-category-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.p1-category-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.p1-category-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.p1-category-item-name {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.p1-category-item-notes {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}
.p1-category-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.p1-category-item:hover .p1-category-item-actions {
  opacity: 1;
}
/* Light theme category view */
body.light .p1-category-group {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .p1-category-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .p1-category-label {
  color: rgba(0, 0, 0, 0.85);
}
body.light .p1-category-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}
body.light .p1-category-item {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
body.light .p1-category-item:hover {
  background: rgba(0, 0, 0, 0.02);
}
body.light .p1-category-item-name {
  color: rgba(0, 0, 0, 0.85);
}
body.light .p1-category-item-notes {
  color: rgba(0, 0, 0, 0.5);
}
/* P1 Completed Section - now inside the panel */
.p1-completed-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .p1-completed-section {
  border-top-color: rgba(0, 0, 0, 0.08);
}
.p1-completed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 0.5rem 0;
  user-select: none;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.15s ease;
}
.p1-completed-header:hover {
  color: rgba(255, 255, 255, 0.9);
}
.p1-completed-title {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.p1-completed-count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  color: #4ade80;
  margin-left: auto;
}
.p1-completed-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.p1-completed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.p1-completed-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.uncomplete-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #4ade80;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.uncomplete-checkbox:hover {
  color: rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}
.p1-completed-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.p1-completed-name {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  font-size: 0.9rem;
}
.category-tag-mini {
  font-size: 0.8rem;
  opacity: 0.7;
}
.p1-completed-time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Light theme completed section */
body.light .p1-completed-header {
  color: rgba(0, 0, 0, 0.5);
}
body.light .p1-completed-header:hover {
  color: rgba(0, 0, 0, 0.8);
}
body.light .p1-completed-count {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
  color: #16a34a;
}
body.light .p1-completed-list {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .p1-completed-item:hover {
  background: rgba(0, 0, 0, 0.02);
}
body.light .uncomplete-checkbox {
  color: #16a34a;
}
body.light .uncomplete-checkbox:hover {
  color: rgba(0, 0, 0, 0.6);
}
body.light .p1-completed-name {
  color: rgba(0, 0, 0, 0.4);
}
body.light .p1-completed-time {
  color: rgba(0, 0, 0, 0.35);
}
/* P1 Header Actions */
.p1-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.15s ease;
}
.view-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.view-toggle-btn.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
body.light .view-toggle-btn {
  color: rgba(0, 0, 0, 0.35);
}
body.light .view-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
}
body.light .view-toggle-btn.active {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
/* ============================================
   MODAL STYLES (for P1 Actions Panel and other modals)
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal-content {
  width: 100%;
  max-width: 500px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  overflow: hidden;
  animation: slideUp 0.2s ease;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
body.light .modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
body.light .modal-header {
  border-color: rgba(0, 0, 0, 0.08);
}
.modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
body.light .modal-header h3 {
  color: rgba(0, 0, 0, 0.85);
}
.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
body.light .modal-close {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.5);
}
body.light .modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
body.light .modal-footer {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}
/* Form Styles */
.form-group {
  margin-bottom: 1.25rem;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
body.light .form-group label {
  color: rgba(0, 0, 0, 0.7);
}
.modal-content .form-group input,
.modal-content .form-group select,
.modal-content .form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.9rem;
  font-family: inherit;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.modal-content .form-group input:focus,
.modal-content .form-group select:focus,
.modal-content .form-group textarea:focus {
  outline: none;
  border-color: rgba(201, 162, 39, 0.5) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1);
}
.modal-content .form-group input::placeholder,
.modal-content .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}
body.light .modal-content .form-group input,
body.light .modal-content .form-group select,
body.light .modal-content .form-group textarea {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
body.light .modal-content .form-group input:focus,
body.light .modal-content .form-group select:focus,
body.light .modal-content .form-group textarea:focus {
  border-color: rgba(201, 162, 39, 0.6) !important;
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}
body.light .modal-content .form-group input::placeholder,
body.light .modal-content .form-group textarea::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}
.form-group textarea {
  min-height: 80px;
  resize: vertical;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
/* Modal Buttons */
.modal-btn {
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  font-family: inherit;
}
.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-btn.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
.modal-btn.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}
body.light .modal-btn.secondary {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}
body.light .modal-btn.secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
}
.modal-btn.primary {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.9), rgba(139, 92, 42, 0.9));
  color: white;
  font-weight: 600;
}
.modal-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(201, 162, 39, 1), rgba(139, 92, 42, 1));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
}
.modal-btn.primary:disabled {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.4);
}
body.light .modal-btn.primary:disabled {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.3);
}
.modal-btn.danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
  color: white;
  font-weight: 600;
}
.modal-btn.danger:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(239, 68, 68, 1), rgba(220, 38, 38, 1));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
/* Confirm Modal (smaller) */
.modal-content.confirm-modal {
  max-width: 400px;
}
.confirm-modal .modal-body {
  padding: 1.5rem;
}
.confirm-modal .modal-body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}
body.light .confirm-modal .modal-body p {
  color: rgba(0, 0, 0, 0.7);
}
.confirm-modal .modal-body strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}
body.light .confirm-modal .modal-body strong {
  color: rgba(0, 0, 0, 0.9);
}
/* Hero Card */
.panel.hero-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
}
.hero-content {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.hero-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(106, 90, 205, 0.2);
  display: grid;
  place-items: center;
  color: var(--accent-light);
}
.hero-quote {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 400;
  line-height: 1.65;
  color: inherit;
  letter-spacing: 0.005em;
  font-style: italic;
  opacity: 0.92;
}
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.95rem;
  flex-wrap: nowrap;
  margin-top: 20px;
}
.hero-meta-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-meta-item:last-child {
  flex: 0 0 auto;
  text-align: right;
  align-items: flex-end;
}
.meta-label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.65rem;
  opacity: 0.5;
  margin-bottom: 6px;
  white-space: nowrap;
}
.meta-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sun-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'JetBrains Mono', monospace;
}
body.light .sun-info-row {
  color: rgba(0, 0, 0, 0.45);
}
.sun-time, .sun-duration, .sun-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sun-time.sunrise svg { color: #fbbf24; }
.sun-time.sunset svg { color: #f97316; }
.sun-duration svg { color: #facc15; }
.sun-countdown.daytime { color: rgba(249, 115, 22, 0.85); }
.sun-countdown.nighttime { color: rgba(251, 191, 36, 0.85); }
.sun-separator {
  opacity: 0.3;
  margin: 0 4px;
}
.protocol {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-light);
}
body.light .protocol {
  color: var(--accent-dark);
}
.status-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}
/* Timezone Tooltip Portal */
.timezone-tooltip-portal {
  background: rgba(20, 20, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.75rem;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.timezone-tooltip-portal.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.light .timezone-tooltip-portal {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.timezone-block {
  padding: 0.5rem 0;
}
.timezone-block:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .timezone-block:not(:last-child) {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.timezone-sun-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
  padding-left: 0.25rem;
}
.timezone-sun-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.45);
}
body.light .timezone-sun-item {
  color: rgba(0, 0, 0, 0.45);
}
.timezone-sun-item.sunrise svg {
  color: #fbbf24;
}
.timezone-sun-item.sunset svg {
  color: #f97316;
}
.timezone-sun-item.daylight svg {
  color: #facc15;
}
/* News Panel - Uses shared collapsible-panel styles from CommandCenterPanels.css */
.news-panel {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* News-specific content wrapper */
.news-panel .news-panel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Two-column layout for full-width news panel */
.news-panel.two-column .news-panel-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.news-panel.two-column .briefing-section {
  border-bottom: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding-right: 2rem;
  padding-bottom: 0;
}
body.light .news-panel.two-column .briefing-section {
  border-right-color: rgba(0, 0, 0, 0.08);
}
@media (max-width: 900px) {
  .news-panel.two-column .news-panel-content {
    grid-template-columns: 1fr;
  }

  .news-panel.two-column .briefing-section {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-right: 0;
    padding-bottom: 14px;
  }
}
/* News meta badge in header */
.news-meta-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 0.5rem;
}
body.light .news-meta-badge {
  color: rgba(0, 0, 0, 0.5);
}
body.zen .news-meta-badge {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.5));
}
/* Spinning refresh button */
.news-panel .view-toggle-btn.spinning svg {
  animation: spin 1s linear infinite;
}
/* Fullscreen mode - Newspaper style */
.news-panel.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
  overflow: hidden;
  grid-template-rows: auto auto 1fr !important;
  /* Override inherited text color from Window component */
  color: rgba(0, 0, 0, 0.85) !important;
  /* Newspaper paper background with subtle texture */
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Fullscreen masthead - match paper background */
.news-panel.fullscreen .newspaper-masthead,
.news-panel.fullscreen .newspaper-masthead.nyt-style {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  border-bottom-color: rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 200; /* Above sidebar and pulse-layout */
  padding-left: 60px !important; /* Space for collapsed sidebar */
}
/* When sidebar is expanded, need more space */
.news-panel.fullscreen.has-sidebar:not(.sidebar-collapsed) .newspaper-masthead,
.news-panel.fullscreen.has-sidebar:not(.sidebar-collapsed) .newspaper-masthead.nyt-style {
  padding-left: 300px !important; /* Space for expanded sidebar */
}
/* When sidebar is collapsed */
.news-panel.fullscreen.has-sidebar.sidebar-collapsed .newspaper-masthead,
.news-panel.fullscreen.has-sidebar.sidebar-collapsed .newspaper-masthead.nyt-style {
  padding-left: 60px !important; /* Space for collapsed sidebar (48px + padding) */
}
.news-panel.fullscreen .newspaper-masthead:hover {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
}
.news-panel.fullscreen .masthead-title {
  color: #1a1714;
}
.news-panel.fullscreen .masthead-date,
.news-panel.fullscreen .masthead-edition {
  color: rgba(0, 0, 0, 0.6);
}
.news-panel.fullscreen .masthead-btn {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}
.news-panel.fullscreen .masthead-btn:hover {
  color: rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.25);
}
.news-panel.fullscreen .masthead-divider {
  background: rgba(0, 0, 0, 0.15);
}
/* Fullscreen header styling */
.news-panel.fullscreen .body-content-header {
  cursor: default;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}
.news-panel.fullscreen .body-content-header h3 {
  color: #1a1714;
}
.news-panel.fullscreen .news-meta-badge {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.fullscreen .section-icon-wrapper.gold {
  background: rgba(201, 162, 39, 0.2);
  color: #8b6914;
}
.news-panel.fullscreen .view-toggle-btn,
.news-panel.fullscreen .section-collapse-btn {
  color: rgba(0, 0, 0, 0.6) !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
.news-panel.fullscreen .view-toggle-btn:hover,
.news-panel.fullscreen .section-collapse-btn:hover {
  color: rgba(0, 0, 0, 0.9) !important;
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}
.news-panel.fullscreen .view-toggle-btn.active {
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}
.news-panel.fullscreen .news-panel-content {
  height: calc(100vh - 70px);
  overflow-y: auto;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
}
.news-panel.fullscreen .newspaper-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
}
/* Briefing buttons in fullscreen */
.news-panel.fullscreen .briefing-btn {
  background: rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.75) !important;
}
.news-panel.fullscreen .briefing-btn:hover {
  background: rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}
.news-panel.fullscreen .briefing-btn.active {
  background: rgba(var(--accent-rgb), 0.15) !important;
  border-color: rgba(var(--accent-rgb), 0.35) !important;
  color: var(--accent-dark) !important;
}
/* Regenerate and other action buttons */
.news-panel.fullscreen .briefing-regen-btn,
.news-panel.fullscreen .briefing-generate-btn,
.news-panel.fullscreen .news-fetch-btn {
  background: rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.75) !important;
}
.news-panel.fullscreen .briefing-regen-btn:hover,
.news-panel.fullscreen .briefing-generate-btn:hover,
.news-panel.fullscreen .news-fetch-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: rgba(0, 0, 0, 0.95) !important;
}
.news-panel.fullscreen .briefing-text {
  columns: 3 280px;
  column-gap: 40px;
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  color: #2d2a26;
  padding: 20px 24px;
  border-radius: 0;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.03),
    0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  column-rule-color: rgba(0, 0, 0, 0.12);
}
.news-panel.fullscreen .briefing-text strong {
  color: #1a1714;
}
.news-panel.fullscreen .briefing-text h1,
.news-panel.fullscreen .briefing-text h2,
.news-panel.fullscreen .briefing-text h3,
.news-panel.fullscreen .briefing-text h4,
.news-panel.fullscreen .briefing-text .briefing-header {
  color: #5c4033;
  border-bottom-color: rgba(0, 0, 0, 0.15);
}
.news-panel.fullscreen .briefing-text p:first-of-type::first-letter {
  color: #8b4513;
}
.news-panel.fullscreen .briefing-text hr,
.news-panel.fullscreen .briefing-text .briefing-divider {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
}
/* Newspaper section tabs in fullscreen */
.news-panel.fullscreen .newspaper-sections {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 200; /* Above sidebar and pulse-layout */
}
.news-panel.fullscreen .section-tab {
  color: rgba(0, 0, 0, 0.8) !important;
  font-weight: 500;
}
.news-panel.fullscreen .section-tab:hover {
  color: rgba(0, 0, 0, 0.95) !important;
  background: rgba(0, 0, 0, 0.08) !important;
}
.news-panel.fullscreen .section-tab.active {
  color: rgba(0, 0, 0, 0.95) !important;
  font-weight: 600;
  border-bottom: 2px solid rgba(0, 0, 0, 0.4) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}
.news-panel.fullscreen .section-tab:not(:last-child)::after {
  background: rgba(0, 0, 0, 0.25) !important;
}
.news-panel.fullscreen .section-divider {
  color: rgba(0, 0, 0, 0.3) !important;
  font-weight: 600;
}
/* Section tab briefing dots and generating states */
.news-panel.fullscreen .section-tab.has-briefing::before,
.news-panel.fullscreen .section-tab.generating::before {
  border-color: rgba(0, 0, 0, 0.4) !important;
}
.news-panel.fullscreen .section-tab.has-briefing .briefing-dot {
  background: rgba(52, 199, 89, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}
.news-panel.fullscreen .masthead-btn.collapse-toggle.hidden {
  display: none;
}
/* Fullscreen overlay backdrop - newspaper paper background */
.news-panel.fullscreen::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: -1;
}
/* All themes use newspaper paper background in fullscreen */
body.light .news-panel.fullscreen::before,
body.light .news-panel.fullscreen,
body.gray .news-panel.fullscreen::before,
body.gray .news-panel.fullscreen,
body.zen .news-panel.fullscreen::before,
body.zen .news-panel.fullscreen,
body.batman .news-panel.fullscreen::before,
body.batman .news-panel.fullscreen {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Hide everything else when news panel is fullscreen */
body.news-fullscreen-active .sidebar {
  display: none !important;
}
body.news-fullscreen-active .app-content {
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
/* Match body background to newspaper paper in fullscreen */
body.news-fullscreen-active {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
}
body.news-fullscreen-active.light,
body.news-fullscreen-active.gray,
body.news-fullscreen-active.zen,
body.news-fullscreen-active.batman {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
}
/* Hide all panels except news panel */
body.news-fullscreen-active .panel:not(.news-panel) {
  display: none !important;
  visibility: hidden !important;
}
/* Hide floating controls */
body.news-fullscreen-active .focus-mode-selector,
body.news-fullscreen-active .fullscreen-toggle-btn,
body.news-fullscreen-active .ai-chat-launch-btn,
body.news-fullscreen-active .music-player-container,
body.news-fullscreen-active .pomodoro-container,
body.news-fullscreen-active .focus-controls-wrapper {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* NYT-Style Newspaper Masthead */
.newspaper-masthead {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(180deg, rgba(18, 18, 22, 0.98) 0%, rgba(14, 14, 18, 0.95) 100%);
  transition: background 0.2s ease;
  border-bottom: 1px solid rgba(201, 162, 39, 0.12);
}
.newspaper-masthead.nyt-style {
  padding: 12px 20px 0;
}
.masthead-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 10px;
}
.masthead-left,
.masthead-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
}
.masthead-right {
  justify-content: flex-end;
  gap: 4px;
}
.masthead-date-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 2px;
}
.masthead-date {
  font-size: 0.75rem;
  color: rgba(201, 162, 39, 0.85);
  font-weight: 600;
  font-family: 'Georgia', 'Times New Roman', serif;
  letter-spacing: 0.02em;
}
.masthead-edition {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}
.masthead-center {
  text-align: center;
  flex: 1;
  position: relative;
}
.masthead-title {
  font-family: 'Chomsky', 'Old English Text MT', 'UnifrakturMaguntia', 'Times New Roman', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #f5f0e6;
  line-height: 1;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Fallback for browsers without custom font - use elegant serif */
@supports not (font-family: 'Chomsky') {
  .masthead-title {
    font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
}
.masthead-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(201, 162, 39, 0.6) 15%,
      rgba(201, 162, 39, 0.8) 50%,
      rgba(201, 162, 39, 0.6) 85%,
      transparent 100%);
  margin-top: 0;
  position: relative;
}
/* Elegant double-line divider like classic newspapers */
.masthead-divider::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 15%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0.12) 85%,
      transparent 100%);
  margin-bottom: 3px;
}
/* Fetch Progress Indicator - Removed in favor of subtle corner loader */
.fetch-progress-bar {
  display: none;
}
.fetch-progress-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 60px;
  overflow-y: auto;
}
.fetch-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-family: 'Source Sans 3', sans-serif;
  text-transform: capitalize;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}
.fetch-group-chip.success {
  background: rgba(52, 199, 89, 0.15);
  color: #34c759;
}
.fetch-group-chip.failed {
  background: rgba(255, 69, 58, 0.15);
  color: #ff453a;
}
.fetch-group-chip svg {
  opacity: 0.8;
}
/* Masthead no longer clickable - hover style removed */
.news-panel.collapsed .newspaper-masthead {
  border-bottom-color: rgba(201, 162, 39, 0.1);
}
/* Keep old class names for backwards compat */
.masthead-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
}
.masthead-actions.right {
  justify-content: flex-end;
}
.masthead-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.masthead-btn:hover {
  color: rgba(201, 162, 39, 0.85);
  background: rgba(201, 162, 39, 0.08);
}
/* Refresh button states */
.masthead-btn.refresh-btn {
  position: relative;
  overflow: hidden;
}
.masthead-btn.refresh-btn.refreshing {
  cursor: wait;
  background: rgba(201, 162, 39, 0.15);
  border-color: rgba(201, 162, 39, 0.3);
}
.masthead-btn.refresh-btn.refreshing svg {
  animation: spin 1s linear infinite;
  color: rgba(201, 162, 39, 0.9);
}
.masthead-btn.refresh-btn.error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 0.9);
}
.masthead-btn.refresh-btn.error:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
}
.masthead-btn.refresh-btn .refresh-progress-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.6), rgba(201, 162, 39, 0.9));
  transition: width 0.3s ease;
  border-radius: 0 2px 2px 0;
}
.masthead-btn.spinning svg {
  animation: spin 1s linear infinite;
}
.masthead-btn.collapse-toggle svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-panel.collapsed .masthead-btn.collapse-toggle svg {
  transform: rotate(180deg);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
/* Refresh menu dropdown */
.refresh-menu-container {
  position: relative;
}
.refresh-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.refresh-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-family: 'Georgia', serif;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.refresh-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.refresh-menu-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.refresh-menu-item > span:first-of-type {
  flex: 1;
}
.refresh-menu-hint {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.refresh-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 6px 0;
}
/* Fullscreen/newspaper mode */
.news-panel.fullscreen .refresh-menu,
.news-panel.newspaper .refresh-menu {
  background: rgba(245, 240, 230, 0.98);
  border-color: rgba(139, 105, 20, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.news-panel.fullscreen .refresh-menu-item,
.news-panel.newspaper .refresh-menu-item {
  color: rgba(60, 42, 33, 0.85);
}
.news-panel.fullscreen .refresh-menu-item:hover,
.news-panel.newspaper .refresh-menu-item:hover {
  background: rgba(139, 105, 20, 0.1);
}
.news-panel.fullscreen .refresh-menu-hint,
.news-panel.newspaper .refresh-menu-hint {
  color: rgba(60, 42, 33, 0.45);
}
.news-panel.fullscreen .refresh-menu-divider,
.news-panel.newspaper .refresh-menu-divider {
  background: rgba(139, 105, 20, 0.15);
}
/* Section Navigation - NYT Style */
.newspaper-sections {
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid rgba(201, 162, 39, 0.12);
  /* Elegant dark background with subtle warmth */
  background: linear-gradient(180deg, rgba(12, 12, 16, 0.92) 0%, rgba(8, 8, 12, 0.88) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0 20px;
  position: relative;
  z-index: 100;
}
.section-tabs-scroll {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 0;
  overflow: visible;
  scrollbar-width: none;
  padding: 10px 0;
  max-height: 76px;
  /* Limit to approximately 2 lines */
}
.section-tabs-scroll::-webkit-scrollbar {
  display: none;
}
/* Page Navigation Arrows - Full Height Edge Zones */
.page-nav-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 20;
}
.page-nav-btn svg {
  transition: all 0.2s ease;
  opacity: 0;
}
.page-nav-prev {
  left: 0;
}
.page-nav-next {
  right: 0;
}
/* Show arrow icon on hover */
.page-nav-btn:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent);
  color: rgba(255, 255, 255, 0.95);
}
.page-nav-btn:hover:not(:disabled) svg {
  opacity: 1;
}
.page-nav-next:hover:not(:disabled) {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.4), transparent);
}
.page-nav-btn:active:not(:disabled) {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent);
}
.page-nav-next:active:not(:disabled) {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.6), transparent);
}
.page-nav-btn:disabled {
  pointer-events: none !important;
  cursor: default;
}
.section-tab {
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-bottom: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}
/* Elegant separator between tabs */
.section-tab:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(201, 162, 39, 0.25);
  font-size: 0.7rem;
  font-weight: 300;
}
.section-tab:hover {
  color: rgba(201, 162, 39, 0.95);
  background: transparent;
}
.section-tab.active {
  color: #f5f0e6;
  font-weight: 600;
  background: rgba(201, 162, 39, 0.12);
  border-radius: 4px;
  box-shadow: inset 0 -2px 0 rgba(201, 162, 39, 0.5);
}
/* Tab briefing status - elegant newspaper style */
/* Loaded: refined editorial underline with gold accent */
.section-tab.has-briefing {
  color: rgba(255, 255, 255, 0.85);
}
.section-tab.has-briefing::before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 25%;
  right: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.5), transparent);
}
/* Generating: subtle italic with animated underline */
.section-tab.generating {
  font-style: italic;
  color: rgba(201, 162, 39, 0.7);
}
.section-tab.generating::before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 25%;
  width: 0;
  height: 1px;
  background: rgba(201, 162, 39, 0.5);
  animation: underline-grow 2s ease-in-out infinite;
}
@keyframes underline-grow {
  0% {
    width: 0;
    left: 50%;
  }

  50% {
    width: 50%;
    left: 25%;
  }

  100% {
    width: 0;
    left: 50%;
  }
}
/* Section tab dropdown for overflow collections */
.section-tab-dropdown {
  position: relative;
  display: inline-flex;
  z-index: 1000;
}
.section-tab-dropdown .dropdown-trigger {
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.section-tab-dropdown .dropdown-trigger:hover {
  color: rgba(255, 255, 255, 0.9);
}
.section-tab-dropdown .dropdown-trigger.active {
  color: #fff;
  font-weight: 600;
}
.section-tab-dropdown .dropdown-trigger::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
}
.section-tab-dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(20, 20, 22, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 99999;
}
/* Invisible bridge to maintain hover when moving to dropdown */
.section-tab-dropdown .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -10px;
  right: -10px;
  height: 12px;
  pointer-events: auto;
}
.section-tab-dropdown:hover .dropdown-menu,
.section-tab-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.section-tab-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
  cursor: pointer;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.78rem;
  text-transform: capitalize;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
}
.section-tab-dropdown .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.section-tab-dropdown .dropdown-item.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
}
.section-tab-dropdown .dropdown-item .briefing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.section-tab-dropdown .dropdown-item.generating {
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
}
/* Light mode dropdown */
body.light .section-tab-dropdown .dropdown-trigger {
  color: rgba(0, 0, 0, 0.5);
}
body.light .section-tab-dropdown .dropdown-trigger:hover {
  color: rgba(0, 0, 0, 0.85);
}
body.light .section-tab-dropdown .dropdown-trigger.active {
  color: #1a1a1a;
}
body.light .section-tab-dropdown .dropdown-trigger::after {
  background: rgba(0, 0, 0, 0.12);
}
body.light .section-tab-dropdown .dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
body.light .section-tab-dropdown .dropdown-item {
  color: rgba(0, 0, 0, 0.6);
}
body.light .section-tab-dropdown .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a1a;
}
body.light .section-tab-dropdown .dropdown-item.active {
  background: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}
body.light .section-tab-dropdown .dropdown-item .briefing-dot {
  background: rgba(0, 0, 0, 0.4);
}
/* Light mode adjustments */
body.light .section-tab.has-briefing {
  color: rgba(0, 0, 0, 0.9);
}
body.light .section-tab.has-briefing::before {
  background: rgba(0, 0, 0, 0.3);
}
body.light .section-tab.generating {
  color: rgba(0, 0, 0, 0.55);
}
body.light .section-tab.generating::before {
  background: rgba(0, 0, 0, 0.25);
}
/* News Content Skeleton */
.news-skeleton {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  animation: fade-in 0.5s ease-out;
}
.skeleton-briefing {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-image {
  width: 100%;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.newspaper-theme .skeleton-image {
  background: rgba(0, 0, 0, 0.03);
}
.skeleton-text-meta {
  width: 120px;
  height: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}
.skeleton-text-line {
  width: 100%;
  height: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}
.newspaper-theme .skeleton-text-meta,
.newspaper-theme .skeleton-text-line,
body.light .skeleton-text-meta,
body.light .skeleton-text-line {
  background: rgba(0, 0, 0, 0.02);
}
body.light .skeleton-image,
body.light .skeleton-header,
body.light .skeleton-sub-header,
body.light .skeleton-item {
  background: rgba(0, 0, 0, 0.04);
}
body.light .skeleton-image::after,
body.light .skeleton-text-line::after,
body.light .skeleton-text-meta::after,
body.light .skeleton-header::after,
body.light .skeleton-sub-header::after,
body.light .skeleton-item::after {
  background: linear-gradient(90deg,
      transparent,
      rgba(0, 0, 0, 0.03),
      transparent);
}
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.skeleton-header {
  width: 100px;
  height: 18px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 15px;
  border-radius: 4px;
}
.skeleton-sub-header {
  width: 80%;
  height: 12px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 15px;
  border-radius: 4px;
}
.skeleton-item {
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 10px;
  border-radius: 6px;
}
/* Shimmer Animation */
.skeleton-image::after,
.skeleton-text-line::after,
.skeleton-text-meta::after,
.skeleton-header::after,
.skeleton-sub-header::after,
.skeleton-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.03),
      transparent);
  animation: skeleton-shimmer 1.5s infinite;
}
.newspaper-theme .skeleton-image::after,
.newspaper-theme .skeleton-text-line::after,
.newspaper-theme .skeleton-text-meta::after,
.newspaper-theme .skeleton-header::after,
.newspaper-theme .skeleton-sub-header::after,
.newspaper-theme .skeleton-item::after {
  background: linear-gradient(90deg,
      transparent,
      rgba(0, 0, 0, 0.02),
      transparent);
}
@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.briefing-progress-floating-cancel {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}
.briefing-progress-floating-cancel:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
/* Light theme */
body.light .briefing-progress-floating {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light .briefing-progress-floating-bar {
  background: rgba(0, 0, 0, 0.08);
}
body.light .briefing-progress-floating-fill {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}
body.light .briefing-progress-floating-info {
  color: rgba(0, 0, 0, 0.6);
}
body.light .briefing-progress-floating-info .generating-spinner-small {
  color: var(--accent-dark);
}
body.light .briefing-progress-floating-time {
  color: rgba(var(--accent-rgb), 0.9);
}
body.light .briefing-progress-floating-cancel {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}
body.light .briefing-progress-floating-cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
/* Newspaper Body */
.newspaper-body {
  position: relative;
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}
/* AI Briefing Panel */
.briefing-panel {
  border-bottom: 2px double rgba(255, 255, 255, 0.15);
  padding-bottom: 12px;
  margin-bottom: 0;
}
.briefing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.briefing-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.briefing-actions {
  display: flex;
  gap: 4px;
}
.briefing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}
.briefing-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.briefing-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}
.briefing-content {
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.briefing-text {
  display: block;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
body.light .briefing-text {
  color: rgba(0, 0, 0, 0.85);
}
/* Newspaper theme - only when explicitly added */
.briefing-text.newspaper-theme {
  columns: 2 200px;
  column-gap: 28px;
  column-rule: 1px solid rgba(255, 255, 255, 0.1);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  font-family: 'Georgia', 'Times New Roman', serif;
}
/* Ensure briefing-text overrides markdown-text display when both classes are present */
.markdown-text.briefing-text,
.briefing-text.markdown-text {
  display: block;
}
/* Newspaper-style text selection */
.briefing-text {
  cursor: text;
}
.briefing-text ::selection {
  background: rgba(255, 213, 128, 0.85);
  color: #1a1208;
  text-shadow: none;
}
.briefing-text ::-moz-selection {
  background: rgba(255, 213, 128, 0.85);
  color: #1a1208;
  text-shadow: none;
}
/* Light theme selection */
body.light .briefing-text ::selection {
  background: rgba(255, 220, 140, 0.9);
  color: #1a1208;
  text-shadow: none;
}
body.light .briefing-text ::-moz-selection {
  background: rgba(255, 220, 140, 0.9);
  color: #1a1208;
  text-shadow: none;
}
/* Newspaper Theme */
.briefing-text.newspaper-theme {
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  color: #2d2a26;
  padding: 20px 24px;
  border-radius: 4px;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.03),
    0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  column-rule-color: rgba(0, 0, 0, 0.12);
}
/* Font Size Variations */
.briefing-text.font-small,
.stories-body.font-small,
.stories-detail-body.font-small {
  font-size: 0.85rem;
  line-height: 1.6;
}
.briefing-text.font-medium,
.stories-body.font-medium,
.stories-detail-body.font-medium {
  font-size: 1rem;
  line-height: 1.7;
}
.briefing-text.font-large,
.stories-body.font-large,
.stories-detail-body.font-large {
  font-size: 1.1rem;
  line-height: 1.75;
}
.briefing-text.font-xlarge,
.stories-body.font-xlarge,
.stories-detail-body.font-xlarge {
  font-size: 1.25rem;
  line-height: 1.8;
}
.briefing-text.font-xxlarge,
.stories-body.font-xxlarge,
.stories-detail-body.font-xxlarge {
  font-size: 1.4rem;
  line-height: 1.85;
}
/* Action divider */
.action-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}
.briefing-header {
  margin: 14px 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-light);
  letter-spacing: 0.01em;
}
.briefing-header:first-child {
  margin-top: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.95);
}
.briefing-paragraph {
  margin: 0 0 10px;
  line-height: 1.65;
}
/* Bullet points (no visible markers) */
.briefing-bullet {
  margin: 8px 0 8px 24px;
  padding: 4px 0 4px 12px;
  line-height: 1.55;
  text-indent: 0 !important;
  position: relative;
  border-left: 2px solid rgba(139, 105, 20, 0.2);
}
.bullet-marker {
  display: none;
}
.newspaper-theme .briefing-bullet,
body.light .briefing-bullet {
  border-left-color: rgba(139, 105, 20, 0.25);
}
/* Styled sub-headers like "Today's Key Takeaways:" */
.briefing-text .briefing-paragraph em:first-child:last-child {
  display: block;
  margin: 20px 0 12px 0;
  padding: 6px 0;
  font-size: 0.8em;
  font-weight: 700;
  font-style: normal;
  color: #5c4033;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(139, 105, 20, 0.2);
}
/* Key takeaway styling */
.briefing-takeaway {
  display: block;
  margin: 8px 0 16px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.9);
}
.takeaway-arrow {
  margin-right: 8px;
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}
.briefing-text.newspaper-theme .briefing-takeaway {
  background: linear-gradient(90deg, rgba(139, 105, 20, 0.12), rgba(255, 248, 240, 0.03));
  border-left-color: #8b6914;
  color: #5c4033;
}
.briefing-text.newspaper-theme .takeaway-arrow {
  color: #8b6914;
}
/* Light theme takeaway styling */
body.light .briefing-takeaway {
  background: linear-gradient(90deg, rgba(139, 105, 20, 0.08), rgba(255, 248, 240, 0.02));
  border-left-color: #8b6914;
  color: #5c4033;
}
body.light .takeaway-arrow {
  color: #8b6914;
}
/* Italic text styling (no special box treatment) */
.briefing-text em {
  font-style: italic;
}
.briefing-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 6px 0;
}
/* Stories Section */
.stories-section {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-top: 8px;
}
.stories-section.expanded {
  border-color: rgba(255, 255, 255, 0.1);
}
.stories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: none;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}
.stories-header:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
}
.stories-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stories-header-left svg {
  color: rgba(255, 255, 255, 0.4);
}
.stories-count {
  font-weight: 400;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 10px;
}
.stories-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.story-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.story-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.story-source {
  flex-shrink: 0;
  width: 80px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(var(--accent-rgb), 0.7);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-title {
  flex: 1;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
.briefing-link {
  display: inline;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.15s ease;
}
.briefing-link:hover {
  color: var(--accent-light);
}
/* Inline links for multi-number references like [20, 34] */
.briefing-link-inline {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: super;
  opacity: 0.75;
  cursor: pointer;
  transition: all 0.15s ease;
}
.briefing-link-inline:hover {
  color: var(--accent-light);
  opacity: 1;
}
.newspaper-theme .briefing-link-inline {
  color: #8b5a2b;
}
.newspaper-theme .briefing-link-inline:hover {
  color: #5c3a21;
  opacity: 1;
}
.briefing-link-num {
  font-size: 0.65em;
  font-weight: 600;
  vertical-align: super;
  opacity: 0.7;
  margin-right: 1px;
}
.briefing-link-title {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.briefing-link:hover .briefing-link-title {
  text-decoration-style: solid;
}
/* Newspaper theme links */
.newspaper-theme .briefing-link {
  color: #5c3a21;
}
.newspaper-theme .briefing-link:hover {
  color: #3d2615;
}
.newspaper-theme .briefing-link-title {
  text-decoration-color: #8b6914;
}
.briefing-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}
.briefing-empty svg {
  opacity: 0.6;
}
.briefing-loading {
  color: rgba(var(--accent-rgb), 0.7);
  animation: pulse-loading 1.5s ease-in-out infinite;
}
.briefing-btn.spinning svg {
  animation: spin 1s linear infinite;
}
.briefing-generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  border-radius: 10px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.briefing-generate-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.15));
  border-color: rgba(var(--accent-rgb), 0.5);
}
.briefing-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.briefing-footer {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.briefing-regen-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.briefing-regen-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}
.briefing-regen-btn svg {
  flex-shrink: 0;
  display: inline-block;
}
.briefing-regen-btn.spinning svg {
  animation: spin 1s linear infinite;
  transform-origin: center center;
}
.briefing-regen-btn.spinning {
  pointer-events: none;
  opacity: 0.8;
}
.briefing-regen-btn.spinning span {
  opacity: 0.6;
}
.newspaper-body::-webkit-scrollbar {
  width: 4px;
}
.newspaper-body::-webkit-scrollbar-track {
  background: transparent;
}
.newspaper-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}
.newspaper-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* Newspaper Content Layout */
/* ===================== NEWSPAPER FLOW LAYOUT ===================== */
.newspaper-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Removed flex: 1 - content flows naturally, scrolling handled by .newspaper-body */
}
/* Lead Story - Full Width */
.lead-story {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.lead-story:hover {
  opacity: 0.8;
}
.lead-kicker {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 4px;
}
.lead-title {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}
/* Main Content Grid */
.content-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Removed flex: 1 - let content determine height, not fill space */
}
/* Section Headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}
.section-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fetch-timestamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.55rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.section-header:hover .fetch-timestamp {
  opacity: 1;
}
.fetch-timestamp svg {
  opacity: 0.6;
}
/* Section headers in fullscreen - newspaper style */
.news-panel.fullscreen .section-header {
  color: rgba(0, 0, 0, 0.9) !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3) !important;
  font-weight: 800 !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
}
.news-panel.fullscreen .section-header .count-badge {
  background: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}
.news-panel.fullscreen .fetch-timestamp {
  color: rgba(0, 0, 0, 0.6) !important;
}
.news-panel.fullscreen .section-header:hover .fetch-timestamp {
  color: rgba(0, 0, 0, 0.8) !important;
}
.news-panel.fullscreen .fetch-timestamp svg {
  opacity: 0.7;
}
/* Future and Stocks section headers with gradient text in fullscreen */
.news-panel.fullscreen .future-section .section-header span:first-child {
  background: linear-gradient(90deg, #5c4033, #8b4513) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.news-panel.fullscreen .stocks-section .section-header span:first-child {
  background: linear-gradient(90deg, #5c4033, #8b4513) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.news-panel.fullscreen .headlines-header {
  border-bottom: 2px solid rgba(0, 0, 0, 0.3) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}
/* Headlines section in fullscreen - newspaper theme */
.news-panel.fullscreen .headlines-section {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.news-panel.fullscreen .source-column {
  border-right-color: rgba(0, 0, 0, 0.15) !important;
}
.news-panel.fullscreen .source-header {
  border-bottom-color: rgba(0, 0, 0, 0.2) !important;
}
.news-panel.fullscreen .source-name {
  color: rgba(0, 0, 0, 0.8) !important;
  font-weight: 800 !important;
}
.news-panel.fullscreen .source-count {
  color: rgba(0, 0, 0, 0.6) !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
.news-panel.fullscreen .headline-item {
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
.news-panel.fullscreen .headline-item:hover {
  opacity: 0.8 !important;
  background: rgba(0, 0, 0, 0.03) !important;
}
.news-panel.fullscreen .headline-title {
  color: rgba(0, 0, 0, 0.85) !important;
}
.news-panel.fullscreen .more-count {
  color: rgba(0, 0, 0, 0.5) !important;
}
.news-panel.fullscreen .more-section {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
.news-panel.fullscreen .more-header,
.news-panel.fullscreen .more-header * {
  color: rgba(0, 0, 0, 0.7) !important;
}
.news-panel.fullscreen .more-header:hover,
.news-panel.fullscreen .more-header:hover * {
  color: rgba(0, 0, 0, 0.9) !important;
}
.news-panel.fullscreen .more-header svg {
  color: rgba(0, 0, 0, 0.5) !important;
}
.news-panel.fullscreen .more-source-column {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
.news-panel.fullscreen .headline-link {
  color: rgba(0, 0, 0, 0.7) !important;
}
.news-panel.fullscreen .headline-link:hover {
  color: rgba(0, 0, 0, 0.95) !important;
}
.news-panel.fullscreen .show-all-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}
.news-panel.fullscreen .show-all-btn:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}
.news-panel.fullscreen .news-column {
  border-right-color: rgba(0, 0, 0, 0.15) !important;
}
.news-panel.fullscreen .article-source {
  color: rgba(0, 0, 0, 0.5) !important;
}
.news-panel.fullscreen .column-headline {
  color: rgba(0, 0, 0, 0.9) !important;
}
.news-panel.fullscreen .briefs-divider span {
  color: rgba(0, 0, 0, 0.4) !important;
}
.news-panel.fullscreen .briefs-divider::after {
  background: rgba(0, 0, 0, 0.15) !important;
}
.news-panel.fullscreen .brief-link {
  color: rgba(0, 0, 0, 0.65) !important;
}
.news-panel.fullscreen .brief-link:hover {
  color: rgba(0, 0, 0, 0.95) !important;
}
.news-panel.fullscreen .more-stories {
  color: rgba(0, 0, 0, 0.4) !important;
}
.news-panel.fullscreen .story-total {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.7) !important;
}
/* Action buttons in section headers - fullscreen newspaper style - fade in on hover */
.news-panel.fullscreen .section-actions {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.news-panel.fullscreen .section-header:hover .section-actions {
  opacity: 1;
}
/* Keep buttons visible if any are active */
.news-panel.fullscreen .section-header:has(.action-btn.active) .section-actions,
.news-panel.fullscreen .section-actions:has(.action-btn.active) {
  opacity: 1;
}
.news-panel.fullscreen .action-btn {
  background: rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.75) !important;
}
.news-panel.fullscreen .action-btn:hover {
  background: rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: rgba(0, 0, 0, 0.95) !important;
}
.news-panel.fullscreen .action-btn.active {
  background: rgba(var(--accent-rgb), 0.15) !important;
  border-color: rgba(var(--accent-rgb), 0.35) !important;
  color: var(--accent-dark) !important;
}
.section-actions {
  display: flex;
  gap: 6px;
  margin-right: 50px;
  /* Clear space for page navigation */
}
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.2s ease;
}
.action-btn svg {
  width: 14px;
  height: 14px;
}
.action-btn:hover {
  background: rgba(201, 162, 39, 0.1);
  border-color: rgba(201, 162, 39, 0.25);
  color: rgba(201, 162, 39, 0.9);
}
.action-btn.active {
  background: rgba(201, 162, 39, 0.15);
  border-color: rgba(201, 162, 39, 0.35);
  color: #c9a227;
}
.action-btn.spinning svg {
  animation: spin 1s linear infinite;
}
/* Voice Menu Dropdown */
.voice-menu-container {
  position: relative;
}
.voice-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 6px;
  /* Creates invisible bridge for mouse hover */
  z-index: 100;
}
.voice-menu-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  /* Invisible hover bridge */
}
.voice-menu-dropdown-inner {
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: voiceMenuFadeIn 0.12s ease;
}
@keyframes voiceMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.voice-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}
.voice-option:hover {
  background: rgba(255, 255, 255, 0.08);
}
.voice-option svg {
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.voice-option span {
  font-size: 0.82rem;
  font-weight: 500;
  flex: 1;
}
.voice-option small {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
}
.voice-option:hover svg {
  color: var(--accent);
}
/* ===================== AI CONTEXT MENU ===================== */
.ai-context-menu-container {
  position: relative;
}
.ai-context-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(59, 130, 246, 0.15)) !important;
}
.ai-context-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(59, 130, 246, 0.25)) !important;
}
.ai-context-btn svg {
  color: var(--accent) !important;
}
.ai-context-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 6px;
  z-index: 100;
}
.ai-context-menu-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}
.ai-context-menu-dropdown-inner {
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 10px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--accent-rgb), 0.1);
  animation: aiMenuFadeIn 0.12s ease;
}
@keyframes aiMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ai-context-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}
.ai-context-option:hover {
  background: rgba(var(--accent-rgb), 0.15);
}
.ai-context-option svg {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}
.ai-context-option span {
  font-size: 0.8rem;
  font-weight: 500;
  flex: 1;
}
.ai-context-option small {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
}
.ai-context-option:hover svg {
  color: var(--accent);
}
/* ===================== LANGUAGE MENU ===================== */
.language-menu-container {
  position: relative;
}
.language-btn {
  font-size: 1rem !important;
  padding: 4px 6px !important;
}
.lang-code {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.8;
}
.language-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 6px;
  z-index: 100;
}
.language-menu-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}
.language-menu-dropdown-inner {
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 6px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: voiceMenuFadeIn 0.12s ease;
}
.language-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}
.language-option:hover {
  background: rgba(255, 255, 255, 0.08);
}
.language-option.active {
  background: rgba(var(--accent-rgb), 0.15);
}
.language-option .lang-code {
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.5em;
  text-align: center;
  opacity: 0.6;
  flex-shrink: 0;
}
.language-option .lang-name {
  font-size: 0.82rem;
  font-weight: 500;
  flex: 1;
}
.language-option svg {
  color: var(--accent);
  flex-shrink: 0;
}
/* Light theme language menu */
body.light .language-menu-dropdown-inner {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
body.light .language-option {
  color: rgba(0, 0, 0, 0.8);
}
body.light .language-option:hover {
  background: rgba(0, 0, 0, 0.05);
}
body.light .language-option.active {
  background: rgba(var(--accent-rgb), 0.1);
}
body.light .language-option svg {
  color: var(--accent-dark);
}
/* ===================== RTL SUPPORT FOR ARABIC ===================== */
.briefing-text.rtl {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', 'Arial', serif;
  unicode-bidi: embed;
}
.briefing-text.rtl * {
  direction: rtl;
  text-align: right;
}
.briefing-text.rtl .briefing-header {
  text-align: right;
  direction: rtl;
}
.briefing-text.rtl .briefing-header:first-child {
  text-align: right;
}
.briefing-text.rtl .briefing-paragraph {
  text-align: right;
  direction: rtl;
}
.briefing-text.rtl p {
  text-align: right;
  direction: rtl;
}
.briefing-text.rtl .briefing-bullet {
  flex-direction: row-reverse;
  text-align: right;
  justify-content: flex-start;
}
.briefing-text.rtl .briefing-bullet .bullet-marker {
  margin-left: 0.5em;
  margin-right: 0;
}
.briefing-text.rtl .briefing-takeaway {
  flex-direction: row-reverse;
  text-align: right;
  justify-content: flex-start;
}
.briefing-text.rtl .briefing-takeaway .takeaway-arrow {
  margin-left: 0.5em;
  margin-right: 0;
  transform: scaleX(-1);
}
.briefing-text.rtl .briefing-link {
  flex-direction: row-reverse;
  direction: rtl;
}
.briefing-text.rtl .briefing-link-num {
  margin-left: 0.35em;
  margin-right: 0;
}
.briefing-text.rtl .briefing-link-title {
  direction: rtl;
  text-align: right;
}
.briefing-text.rtl hr,
.briefing-text.rtl .briefing-divider {
  direction: ltr;
  /* Dividers don't need RTL */
}
.briefing-text.rtl strong,
.briefing-text.rtl em {
  direction: inherit;
}
.count-badge {
  font-size: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 500;
}
/* Briefing Section */
.briefing-section {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  /* Prevent briefing from being compressed */
}
/* Scoped to news-panel to avoid collision with RhythmPanel's .briefing-body */
.news-panel .briefing-body {
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  overflow: visible !important;
  flex-shrink: 0;
  height: auto !important;
  max-height: none !important;
  /* Override RhythmPanel's max-height: 120px */
  padding: 0;
  /* Override RhythmPanel's padding */
}
.briefing-text p,
.briefing-text .briefing-paragraph {
  margin: 0 0 12px;
  text-indent: 1.5em;
}
/* Drop cap on first paragraph */
.briefing-text p:first-of-type {
  text-indent: 0;
}
.briefing-text p:first-of-type::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  padding-right: 8px;
  padding-top: 4px;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Playfair Display', 'Georgia', serif;
}
/* RTL languages (Arabic, Hebrew, etc.) - flip the drop cap to right side */
.briefing-text[dir="rtl"] p:first-of-type::first-letter {
  float: right;
  padding-right: 0;
  padding-left: 8px;
}
/* Newspaper theme drop cap */
.briefing-text.newspaper-theme p:first-of-type::first-letter {
  color: #8b4513;
}
.briefing-text hr,
.briefing-text .briefing-divider {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  margin: 18px 0;
}
.briefing-text strong {
  color: #fff;
}
/* Newspaper theme dividers and strong */
.briefing-text.newspaper-theme hr,
.briefing-text.newspaper-theme .briefing-divider {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
}
.briefing-text.newspaper-theme strong {
  color: #1a1714;
}
.briefing-text h1,
.briefing-text h2,
.briefing-text h3,
.briefing-text h4,
.briefing-text .briefing-header {
  margin: 10px 0 5px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-light);
  font-family: 'Playfair Display', 'Georgia', serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 3px;
  break-after: avoid;
  break-inside: avoid;
}
/* Newspaper theme headers */
.briefing-text.newspaper-theme h1,
.briefing-text.newspaper-theme h2,
.briefing-text.newspaper-theme h3,
.briefing-text.newspaper-theme h4,
.briefing-text.newspaper-theme .briefing-header {
  color: #5c4033;
  border-bottom-color: rgba(0, 0, 0, 0.15);
}
.briefing-text h1:first-child,
.briefing-text h2:first-child,
.briefing-text h3:first-child,
.briefing-text .briefing-header:first-child {
  margin-top: 0;
}
.briefing-text ul,
.briefing-text ol {
  margin: 8px 0;
  padding-left: 18px;
}
.briefing-text li {
  margin-bottom: 4px;
}
.briefing-loading-text {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}
.briefing-empty {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  font-size: 0.75rem;
  margin: 0;
}
/* Newspaper-themed generating state */
.briefing-generating {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.briefing-generating .generating-masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
}
.briefing-generating .generating-line {
  height: 12px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.08) 100%);
  background-size: 200% 100%;
  border-radius: 3px;
}
.briefing-generating .generating-line.short {
  width: 40%;
  height: 18px;
}
.briefing-generating .generating-line.medium {
  width: 60%;
}
.briefing-generating .generating-line.long {
  width: 85%;
}
.briefing-generating .generating-line.full {
  width: 100%;
}
.briefing-generating .generating-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}
.briefing-generating .generating-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.briefing-generating .generating-line.pulse-1 {
  animation: shimmer 2s ease-in-out infinite;
}
.briefing-generating .generating-line.pulse-2 {
  animation: shimmer 2s ease-in-out infinite 0.3s;
}
.briefing-generating .generating-line.pulse-3 {
  animation: shimmer 2s ease-in-out infinite 0.6s;
}
@keyframes shimmer {

  0%,
  100% {
    background-position: 200% 0;
    opacity: 0.6;
  }

  50% {
    background-position: -200% 0;
    opacity: 1;
  }
}
/* Clean generating state - no skeleton */
.briefing-generating-clean {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  text-align: center;
}
.briefing-generating-clean .generating-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}
.briefing-generating-clean .generating-spinner {
  animation: spin 1s linear infinite;
  color: var(--accent);
}
.briefing-generating .generating-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 20px;
}
.briefing-generating .generating-spinner {
  animation: spin 1s linear infinite;
  color: var(--accent);
}
/* Fullscreen newspaper theme for generating state */
.news-panel.fullscreen .briefing-generating {
  color: rgba(0, 0, 0, 0.7) !important;
}
.news-panel.fullscreen .briefing-generating .generating-header {
  color: rgba(0, 0, 0, 0.8) !important;
  font-family: 'Georgia', 'Times New Roman', serif;
}
.news-panel.fullscreen .briefing-generating .generating-spinner {
  color: #5c4033 !important;
}
.briefing-generating-clean .generating-spinner-small {
  animation: spin 1s linear infinite;
  opacity: 0.6;
}
/* Auto-image generation toggle button */
.auto-image-toggle {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.auto-image-toggle:hover {
  opacity: 1;
}
.auto-image-toggle.active {
  opacity: 1;
  color: var(--accent);
}
.news-panel.fullscreen .auto-image-toggle.active {
  color: #5c4033;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.briefing-generating-clean .generating-progress-section {
  width: 100%;
  max-width: 300px;
  margin-bottom: 20px;
}
.briefing-generating-clean .generating-progress-bar {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.briefing-generating-clean .generating-progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  border-radius: 4px;
  transition: width 0.5s ease-out;
}
.briefing-generating-clean .generating-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}
.briefing-generating-clean .generating-elapsed {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  color: rgba(var(--accent-rgb), 0.8);
}
.briefing-generating-clean .generating-count {
  color: rgba(255, 255, 255, 0.5);
}
.briefing-generating-clean .generating-collections-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 400px;
  margin-bottom: 16px;
}
.briefing-generating-clean .generating-collection-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}
.briefing-generating-clean .generating-collection-item.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.briefing-generating-clean .generating-collection-item.pending {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.briefing-generating-clean .generating-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
}
/* Newspaper-themed loading overlay for fullscreen refresh */
.newspaper-loading-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  z-index: 10002 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-in;
  pointer-events: all;
}
.newspaper-loading-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 100001;
}
.newspaper-loading-close:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}
/* Fullscreen overlay - ensure it's above everything */
.newspaper-loading-overlay.fullscreen {
  z-index: 99999 !important;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* App view overlay (not fullscreen) - overlay on panel */
.newspaper-loading-overlay.app-view {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(8px);
  z-index: 10001 !important;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.newspaper-loading-content {
  text-align: center;
  max-width: 500px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Typewriter GIF container for fullscreen loading */
.typewriter-container {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.typewriter-gif {
  width: 320px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
  filter: sepia(0.15) contrast(1.05);
  border: 3px solid rgba(92, 64, 51, 0.4);
}
.newspaper-loading-header {
  margin-bottom: 32px;
}
.newspaper-loading-icon {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}
/* Vintage printing press animation */
.newspaper-press-animation {
  position: relative;
  width: 120px;
  height: 80px;
}
.press-plate {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 8px;
  background: linear-gradient(90deg, #3a2e1f 0%, #5c4033 50%, #3a2e1f 100%);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: pressDown 1.5s ease-in-out infinite;
}
.press-paper {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 4px;
  background: linear-gradient(90deg, #f5f0e6 0%, #ebe5d8 50%, #f5f0e6 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  animation: paperMove 1.5s ease-in-out infinite;
}
@keyframes pressDown {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(4px);
  }
}
@keyframes paperMove {
  0% {
    transform: translateX(-50%) translateX(-10px);
    opacity: 0.7;
  }

  50% {
    transform: translateX(-50%) translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) translateX(10px);
    opacity: 0.7;
  }
}
.newspaper-loading-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.9);
  margin: 0 0 8px 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.newspaper-loading-subtitle {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
  font-style: italic;
}
.newspaper-loading-progress {
  margin-top: 24px;
}
.newspaper-progress-bar {
  position: relative;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.newspaper-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #5c4033 0%, #8b4513 50%, #5c4033 100%);
  background-size: 200% 100%;
  border-radius: 3px;
  transition: width 0.3s ease-out;
  animation: progressShimmer 2s ease-in-out infinite;
}
@keyframes progressShimmer {

  0%,
  100% {
    background-position: 200% 0;
  }

  50% {
    background-position: -200% 0;
  }
}
.newspaper-progress-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.7);
  font-family: 'Georgia', 'Times New Roman', serif;
}
.newspaper-progress-message {
  font-weight: 500;
}
.newspaper-progress-group {
  color: rgba(0, 0, 0, 0.5);
  font-style: italic;
}
.newspaper-progress-collections {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.newspaper-progress-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.7rem;
  border-radius: 12px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.newspaper-progress-badge.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.3);
}
.newspaper-progress-badge.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #991b1b;
  border-color: rgba(239, 68, 68, 0.3);
}
.briefing-generating-clean .generating-cancel {
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.briefing-generating-clean .generating-cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.briefing-generating .typewriter-icon {
  animation: typewriter-pulse 1s ease-in-out infinite;
}
@keyframes typewriter-pulse {

  0%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }

  50% {
    opacity: 0.8;
    transform: translateY(-1px);
  }
}
/* Light theme generating state */
body.light .briefing-generating .generating-line {
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.06) 0%,
      rgba(0, 0, 0, 0.12) 50%,
      rgba(0, 0, 0, 0.06) 100%);
  background-size: 200% 100%;
}
body.light .briefing-generating .generating-divider {
  background: rgba(0, 0, 0, 0.08);
}
/* Briefing skeleton loader - newspaper theme */
.briefing-skeleton {
  padding: 1.5rem;
}
.briefing-skeleton .skeleton-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--news-border, rgba(0, 0, 0, 0.1));
  white-space: nowrap;
}
.briefing-skeleton .skeleton-icon {
  color: var(--news-text-secondary, #5c4033);
  opacity: 0.6;
}
.briefing-skeleton .skeleton-icon.pulse {
  animation: skeleton-icon-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-icon-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}
.briefing-skeleton .skeleton-status {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--news-text-secondary, #5c4033);
  opacity: 0.7;
}
.briefing-skeleton .skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.briefing-skeleton .skeleton-line {
  height: 1rem;
  background: linear-gradient(
    90deg,
    var(--news-skeleton-start, rgba(92, 64, 51, 0.08)) 0%,
    var(--news-skeleton-mid, rgba(92, 64, 51, 0.15)) 50%,
    var(--news-skeleton-start, rgba(92, 64, 51, 0.08)) 100%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.briefing-skeleton .skeleton-line.long {
  width: 95%;
}
.briefing-skeleton .skeleton-line.medium {
  width: 75%;
}
.briefing-skeleton .skeleton-line.short {
  width: 50%;
}
.briefing-skeleton .skeleton-line:nth-child(1) { animation-delay: 0s; }
.briefing-skeleton .skeleton-line:nth-child(2) { animation-delay: 0.1s; }
.briefing-skeleton .skeleton-line:nth-child(3) { animation-delay: 0.2s; }
.briefing-skeleton .skeleton-line:nth-child(4) { animation-delay: 0.3s; }
.briefing-skeleton .skeleton-line:nth-child(5) { animation-delay: 0.4s; }
.briefing-skeleton .skeleton-line:nth-child(6) { animation-delay: 0.5s; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Headlines Section - Newspaper Column Layout */
.headlines-section {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 6px;
}
.headlines-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.headlines-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}
.headlines-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
}
.source-column {
  padding: 0 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.source-column:first-child {
  padding-left: 0;
}
.source-column:last-child {
  border-right: none;
  padding-right: 0;
}
.source-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.source-header.compact {
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.source-name {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}
/* Fullscreen override for source-name - placed right after base rule */
.news-panel.fullscreen .source-name {
  color: rgba(0, 0, 0, 0.8) !important;
}
.source-count {
  font-size: 0.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 5px;
  border-radius: 3px;
}
.source-stories {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.source-stories.compact {
  gap: 6px;
}
.headline-item {
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.06);
  transition: all 0.15s ease;
}
.headline-item:last-child {
  border-bottom: none;
}
.headline-item:hover {
  opacity: 0.7;
}
.headline-item.compact {
  padding: 4px 0;
}
.headline-title {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Fullscreen paper mode - dark text */
.fullscreen .headline-title,
.news-panel.fullscreen .headline-title,
section.fullscreen .headline-title {
  color: rgba(0, 0, 0, 0.85) !important;
}
.fullscreen .source-name,
.news-panel.fullscreen .source-name,
section.fullscreen .source-name {
  color: rgba(0, 0, 0, 0.7) !important;
}
.fullscreen .more-header,
.fullscreen .more-header span,
.news-panel.fullscreen .more-header,
.news-panel.fullscreen .more-header span {
  color: rgba(0, 0, 0, 0.6) !important;
}
.headline-item.compact .headline-title {
  font-size: 0.68rem;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.more-count {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  padding-top: 4px;
}
/* More Section - Additional Sources */
.more-section {
  padding: 16px;
  margin-top: 12px;
  border-radius: 6px;
}
.more-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.more-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s ease;
}
.more-header:hover {
  color: rgba(255, 255, 255, 0.7);
}
.more-header svg {
  color: rgba(255, 255, 255, 0.4);
}
/* Fullscreen override for more-header - placed right after base rule */
.news-panel.fullscreen .more-header,
.news-panel.fullscreen .more-header * {
  color: rgba(0, 0, 0, 0.7) !important;
}
.news-panel.fullscreen .more-header svg {
  color: rgba(0, 0, 0, 0.5) !important;
}
.more-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.more-source-column {
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
/* Legacy grid (keeping for compatibility) */
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 14px;
  margin-top: 10px;
}
.more-link {
  display: block;
  font-size: 0.68rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.12s ease;
}
.more-link:hover {
  color: var(--accent);
}
.link-source {
  display: block;
  font-size: 0.48rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 2px;
}
/* Lead Article - Featured Story */
.lead-article {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.lead-article:hover {
  opacity: 0.8;
}
.article-kicker {
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 3px;
}
.lead-headline {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}
/* Secondary Headlines */
.secondary-headlines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.headline-item {
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.headline-item:hover {
  opacity: 0.75;
}
.headline-source {
  display: block;
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1px;
}
.headline-title {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
/* Fullscreen override for headline-title - placed right after base rule */
.news-panel.fullscreen .headline-title {
  color: rgba(0, 0, 0, 0.85) !important;
}
/* More Headlines Section */
.more-headlines {
  padding-top: 8px;
}
.more-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.more-divider:hover {
  opacity: 0.8;
}
.more-divider svg {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}
.more-divider span {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}
.story-total {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 0.5rem;
  margin-left: auto;
}
.headline-links {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.headline-links.expanded {
  max-height: 400px;
  overflow-y: auto;
}
.headline-link {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.12s ease;
  line-height: 1.35;
}
.headline-link:hover {
  color: var(--accent);
}
.show-all-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.15s ease;
}
.show-all-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}
/* Multi-Column Layout */
.column-stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  min-height: 0;
}
.news-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.news-column:last-child {
  padding-right: 0;
  border-right: none;
}
.column-article {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.column-article:hover {
  opacity: 0.75;
}
.article-source {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 2px;
}
.column-headline {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
/* Bottom Briefs Section */
.news-briefs {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.briefs-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.briefs-divider span {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}
.briefs-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.briefs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.brief-link {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.brief-link:hover {
  color: var(--accent);
}
.more-stories {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}
/* Legacy Lead Story (keep for backwards compat) */
.lead-story {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.lead-story:hover {
  opacity: 0.8;
}
.lead-story .story-source {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}
.lead-headline {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.28;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.lead-excerpt {
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
/* Secondary Stories */
.secondary-stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.secondary-story {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.secondary-story:hover {
  opacity: 0.75;
}
.secondary-story .story-source {
  display: block;
  font-size: 0.54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 5px;
}
.secondary-headline {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
/* Brief Section */
.brief-section {
  padding-top: 6px;
}
.brief-header {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brief-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.brief-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.brief-item:last-child {
  border-bottom: none;
}
.brief-item:hover {
  opacity: 0.7;
}
.brief-source {
  flex-shrink: 0;
  width: 72px;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(var(--accent-rgb), 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  padding-right: 10px;
}
.brief-title {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/* Pagination */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.news-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.news-page-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.news-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.news-page-info {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
  min-width: 50px;
  text-align: center;
}
/* Loading & Empty States */
.news-loading,
.news-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 180px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  gap: 10px;
  font-size: 0.8rem;
}
.news-loading .generating-spinner {
  animation: spin 1s linear infinite;
  color: rgba(var(--accent-rgb), 0.8);
}
.news-loading .loading-progress-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.news-loading .loading-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  border-radius: 2px;
  transition: width 0.3s ease;
}
.news-loading.error {
  color: rgba(239, 68, 68, 0.9);
}
.news-loading.error .error-icon {
  color: #ef4444;
  opacity: 0.9;
}
.news-loading.error p {
  color: rgba(239, 68, 68, 0.9);
  font-weight: 500;
}
.news-empty-state svg {
  opacity: 0.35;
}
.news-fetch-btn {
  margin-top: 4px;
  padding: 8px 16px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.news-fetch-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
}
.news-fetch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ===================== LIGHT THEME ===================== */
body.light .newspaper-masthead {
  background: transparent;
}
body.light .newspaper-masthead:hover {
  background: rgba(0, 0, 0, 0.02);
}
body.light .masthead-title {
  color: #1a1a1a;
}
body.light .masthead-date {
  color: rgba(0, 0, 0, 0.65);
}
body.light .masthead-edition {
  color: rgba(0, 0, 0, 0.45);
}
body.light .masthead-divider {
  background: linear-gradient(90deg,
      transparent 0%,
      #1a1a1a 10%,
      #1a1a1a 90%,
      transparent 100%);
}
body.light .masthead-divider::before {
  background: rgba(0, 0, 0, 0.12);
}
body.light .fetch-progress-bar {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .fetch-progress-track {
  background: rgba(0, 0, 0, 0.08);
}
body.light .fetch-progress-fill {
  background: linear-gradient(90deg, #8b6914, #c9a227);
}
body.light .fetch-progress-message {
  color: rgba(0, 0, 0, 0.7);
}
body.light .fetch-progress-items {
  color: #8b6914;
}
body.light .fetch-group-chip {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
}
body.light .fetch-group-chip.success {
  background: rgba(52, 199, 89, 0.12);
  color: #248a3d;
}
body.light .fetch-group-chip.failed {
  background: rgba(255, 69, 58, 0.12);
  color: #d70015;
}
body.light .masthead-btn {
  color: rgba(0, 0, 0, 0.35);
}
body.light .masthead-btn:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.04);
}
body.light .newspaper-sections {
  background: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light .section-tab {
  color: rgba(0, 0, 0, 0.5);
}
body.light .section-tab:not(:last-child)::after {
  background: rgba(0, 0, 0, 0.12);
}
body.light .section-tab:hover {
  color: rgba(0, 0, 0, 0.85);
  background: transparent;
}
body.light .section-tab.active {
  color: #1a1a1a;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.5);
}
body.light .page-nav-btn:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent);
  color: rgba(0, 0, 0, 0.8);
}
body.light .page-nav-next:hover:not(:disabled) {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.08), transparent);
}
body.light .page-nav-btn:active:not(:disabled) {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.15), transparent);
}
body.light .page-nav-next:active:not(:disabled) {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.15), transparent);
}
body.light .lead-story {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .lead-story .story-source {
  color: var(--accent-dark);
}
body.light .lead-headline {
  color: #1a1a1a;
}
body.light .lead-excerpt {
  color: rgba(0, 0, 0, 0.55);
}
body.light .secondary-stories {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .secondary-story .story-source {
  color: rgba(var(--accent-rgb), 0.7);
}
body.light .secondary-headline {
  color: #2a2a2a;
}
/* Light theme - Newspaper Layout */
/* Light theme - Newspaper Flow */
body.light .lead-story {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light .lead-kicker {
  color: var(--accent-dark);
}
body.light .lead-title {
  color: #1a1a1a;
}
body.light .section-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.45);
}
body.light .action-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.45);
}
body.light .action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}
body.light .action-btn.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}
body.light .voice-menu-dropdown-inner {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
body.light .voice-option {
  color: rgba(0, 0, 0, 0.8);
}
body.light .voice-option:hover {
  background: rgba(0, 0, 0, 0.05);
}
body.light .voice-option svg {
  color: rgba(0, 0, 0, 0.4);
}
body.light .voice-option small {
  color: rgba(0, 0, 0, 0.45);
}
body.light .voice-option:hover svg {
  color: var(--accent-dark);
}
body.light .ai-context-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(59, 130, 246, 0.1)) !important;
}
body.light .ai-context-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(59, 130, 246, 0.2)) !important;
}
body.light .ai-context-btn svg {
  color: var(--accent-dark) !important;
}
body.light .ai-context-menu-dropdown-inner {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--accent-rgb), 0.08);
}
body.light .ai-context-option {
  color: rgba(0, 0, 0, 0.85);
}
body.light .ai-context-option:hover {
  background: rgba(var(--accent-rgb), 0.1);
}
body.light .ai-context-option svg {
  color: rgba(var(--accent-rgb), 0.65);
}
body.light .ai-context-option small {
  color: rgba(0, 0, 0, 0.45);
}
body.light .ai-context-option:hover svg {
  color: var(--accent-dark);
}
body.light .action-divider {
  background: rgba(0, 0, 0, 0.12);
}
body.light .count-badge {
  background: rgba(0, 0, 0, 0.05);
}
body.light .briefing-section {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .briefing-text {
  column-rule-color: rgba(0, 0, 0, 0.1);
}
body.light .briefing-text p:first-of-type::first-letter {
  color: var(--accent-dark);
}
body.light .news-panel .briefing-body {
  color: rgba(0, 0, 0, 0.8);
}
body.light .briefing-text hr,
body.light .briefing-text .briefing-divider {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent);
}
body.light .briefing-text h1,
body.light .briefing-text h2,
body.light .briefing-text h3,
body.light .briefing-text h4,
body.light .briefing-text .briefing-header {
  color: var(--accent-dark);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .briefing-text strong {
  color: #1a1a1a;
}
body.light .briefing-loading-text,
body.light .briefing-empty {
  color: rgba(0, 0, 0, 0.35);
}
/* Light theme - Headlines newspaper columns */
body.light .headlines-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .headlines-header {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
body.light .source-column {
  border-right-color: rgba(0, 0, 0, 0.08);
}
body.light .source-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .source-name {
  color: rgba(0, 0, 0, 0.55);
}
body.light .source-count {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.06);
}
body.light .headline-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .headline-title {
  color: rgba(0, 0, 0, 0.85);
}
body.light .more-count {
  color: rgba(0, 0, 0, 0.4);
}
body.light .more-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.015) 0%, rgba(0, 0, 0, 0.008) 100%);
  border-color: rgba(0, 0, 0, 0.05);
}
body.light .more-header {
  color: rgba(0, 0, 0, 0.45);
}
body.light .more-header:hover {
  color: rgba(0, 0, 0, 0.65);
}
body.light .more-header svg {
  color: rgba(0, 0, 0, 0.35);
}
body.light .more-sources-grid {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .more-source-column {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.04);
}
body.light .more-link {
  color: rgba(0, 0, 0, 0.55);
}
body.light .more-link:hover {
  color: var(--accent-dark);
}
body.light .link-source {
  color: rgba(0, 0, 0, 0.25);
}
body.light .news-column {
  border-right-color: rgba(0, 0, 0, 0.06);
}
body.light .article-source {
  color: rgba(0, 0, 0, 0.4);
}
body.light .news-briefs {
  border-top-color: rgba(0, 0, 0, 0.08);
}
body.light .briefs-divider span {
  color: rgba(0, 0, 0, 0.35);
}
body.light .briefs-divider::after {
  background: rgba(0, 0, 0, 0.08);
}
body.light .brief-link {
  color: rgba(0, 0, 0, 0.55);
}
body.light .brief-link:hover {
  color: var(--accent-dark);
}
body.light .more-stories {
  color: rgba(0, 0, 0, 0.3);
}
body.light .brief-header {
  color: rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light .brief-item {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.light .brief-source {
  color: rgba(var(--accent-rgb), 0.55);
}
body.light .brief-title {
  color: rgba(0, 0, 0, 0.7);
}
body.light .news-pagination {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .news-page-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
}
body.light .news-page-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}
body.light .news-page-info {
  color: rgba(0, 0, 0, 0.4);
}
/* Light theme briefing */
body.light .briefing-panel {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0.04));
  border-color: rgba(var(--accent-rgb), 0.15);
}
body.light .briefing-header {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: rgba(var(--accent-rgb), 0.1);
}
body.light .briefing-title {
  color: var(--accent-dark);
}
body.light .briefing-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
}
body.light .briefing-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}
body.light .briefing-btn.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}
body.light .briefing-content {
  color: rgba(0, 0, 0, 0.8);
}
body.light .briefing-link {
  color: var(--accent-dark);
}
body.light .briefing-link:hover {
  color: var(--accent-dark);
}
body.light .briefing-link-title {
  text-decoration-color: var(--accent-dark);
}
body.light .briefing-link-inline {
  color: var(--accent-dark);
}
body.light .briefing-link-inline:hover {
  color: var(--accent-dark);
  opacity: 1;
}
body.light .briefing-header {
  color: var(--accent-dark);
}
body.light .briefing-header:first-child {
  color: rgba(0, 0, 0, 0.9);
}
body.light .briefing-divider {
  border-top-color: rgba(0, 0, 0, 0.08);
}
/* Light theme stories */
body.light .stories-section {
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .stories-section.expanded {
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .stories-header {
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.6);
}
body.light .stories-header:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.8);
}
body.light .stories-header-left svg {
  color: rgba(0, 0, 0, 0.4);
}
body.light .stories-count {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.05);
}
body.light .stories-list {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .story-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .story-source {
  color: rgba(var(--accent-rgb), 0.7);
}
body.light .story-title {
  color: rgba(0, 0, 0, 0.85);
}
body.light .briefing-empty {
  color: rgba(0, 0, 0, 0.4);
}
body.light .briefing-loading {
  color: rgba(var(--accent-rgb), 0.7);
}
body.light .briefing-generate-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.05));
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}
body.light .briefing-generate-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  border-color: rgba(var(--accent-rgb), 0.4);
}
body.light .briefing-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .briefing-regen-btn {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
body.light .briefing-regen-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}
body.light .news-loading,
body.light .news-empty-state {
  color: rgba(0, 0, 0, 0.4);
}
body.light .news-loading.error {
  color: rgba(220, 38, 38, 0.9);
}
body.light .news-loading.error .error-icon {
  color: #dc2626;
  opacity: 0.9;
}
body.light .news-loading.error p {
  color: rgba(220, 38, 38, 0.9);
}
body.light .news-fetch-btn {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}
/* ===================== ZEN THEME ===================== */
body.zen .newspaper-masthead {
  background: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
body.gray .newspaper-sections {
  background: rgba(20, 20, 25, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.zen .newspaper-sections {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
body.batman .newspaper-sections {
  background: rgba(10, 10, 15, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* Newspaper Illustration Styles */
.newspaper-illustration {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
}
.newspaper-illustration-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.newspaper-illustration-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}
body.light .newspaper-illustration-loading {
  color: rgba(0, 0, 0, 0.7);
}
.news-panel.fullscreen .newspaper-illustration-image {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.news-panel.fullscreen .newspaper-illustration-loading {
  color: rgba(0, 0, 0, 0.7);
}
/* Fullscreen Image Viewer */
.newspaper-image-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: pointer;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.newspaper-image-fullscreen-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.newspaper-image-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.newspaper-image-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}
.newspaper-image-close:active {
  transform: scale(0.95);
}
body.light .newspaper-image-fullscreen {
  background: rgba(255, 255, 255, 0.98);
}
body.light .newspaper-image-close {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.8);
}
body.light .newspaper-image-close:hover {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.3);
}
/* ===================== FEED MANAGER MODAL ===================== */
.feed-manager-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.feed-manager-modal {
  width: 90%;
  max-width: 540px;
  max-height: 80vh;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.25s ease;
  overflow: hidden;
}
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.feed-manager-modal.light {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.feed-manager-modal.zen {
  background: rgba(30, 30, 32, 0.98);
}
.feed-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.feed-manager-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.feed-manager-modal.light .feed-manager-header h2 {
  color: rgba(0, 0, 0, 0.85);
}
.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}
.feed-manager-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}
/* Manager Tabs */
.manager-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.manager-tab {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.manager-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}
.manager-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* Collections Manager */
.collections-manager {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.manager-hint {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}
.collections-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.collection-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: grab;
  transition: all 0.15s ease;
  user-select: none;
}
.collection-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.collection-row.dragging {
  opacity: 0.5;
  cursor: grabbing;
  background: rgba(var(--accent-rgb), 0.1);
}
.collection-row.drag-over {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
}
.collection-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  cursor: grab;
  padding: 4px 2px;
  transition: color 0.15s;
}
.collection-drag-handle .drag-dots {
  font-size: 12px;
  letter-spacing: -3px;
  line-height: 1;
}
.collection-row:hover .collection-drag-handle {
  color: rgba(255, 255, 255, 0.5);
}
.collection-row.dragging .collection-drag-handle {
  cursor: grabbing;
}
/* Keep old styles for backwards compat but hide them */
.collection-reorder {
  display: none;
  flex-direction: column;
  gap: 2px;
}
.reorder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.12s ease;
}
.reorder-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.reorder-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.collection-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-transform: capitalize;
}
.visibility-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}
.visibility-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}
.visibility-btn.hidden {
  color: rgba(255, 255, 255, 0.25);
}
.visibility-btn.hidden:hover {
  color: rgba(255, 255, 255, 0.5);
}
/* Create Collection Wizard */
.create-wizard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.wizard-step.active {
  opacity: 1;
}
.wizard-step.completed {
  opacity: 0.7;
}
.wizard-step .step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}
.wizard-step.active .step-number {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.wizard-step.completed .step-number {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: var(--accent);
}
.wizard-step .step-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}
.wizard-step.active .step-label {
  color: rgba(255, 255, 255, 0.85);
}
.wizard-step-line {
  width: 40px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 20px;
}
.wizard-content {
  text-align: center;
}
.wizard-content h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.wizard-hint {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 16px;
}
.wizard-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  font-size: 0.9rem;
  text-align: center;
  transition: all 0.15s;
}
.wizard-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}
.wizard-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.wizard-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.wizard-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
}
.wizard-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.wizard-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wizard-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.wizard-btn.primary:hover:not(:disabled) {
  background: var(--accent);
}
.wizard-btn .spinning {
  animation: spin 1s linear infinite;
}
/* Wizard Feed Selection */
.wizard-feeds-list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 4px;
}
.wizard-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.wizard-feed-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.wizard-feed-item.selected {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.wizard-feed-item input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
}
.wizard-feed-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wizard-feed-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.wizard-feed-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wizard-feed-url {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Light theme wizard */
body.light .wizard-step .step-number {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}
body.light .wizard-step.active .step-number {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: white;
}
body.light .wizard-step .step-label {
  color: rgba(0, 0, 0, 0.45);
}
body.light .wizard-step.active .step-label {
  color: rgba(0, 0, 0, 0.8);
}
body.light .wizard-step-line {
  background: rgba(0, 0, 0, 0.1);
}
body.light .wizard-content h3 {
  color: rgba(0, 0, 0, 0.85);
}
body.light .wizard-hint {
  color: rgba(0, 0, 0, 0.5);
}
body.light .wizard-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: #333;
}
body.light .wizard-input:focus {
  border-color: var(--accent-dark);
  background: rgba(0, 0, 0, 0.02);
}
body.light .wizard-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
body.light .wizard-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.65);
}
body.light .wizard-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: #333;
}
body.light .wizard-btn.primary {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
body.light .wizard-btn.primary:hover:not(:disabled) {
  background: var(--accent-dark);
}
body.light .wizard-feed-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .wizard-feed-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .wizard-feed-item.selected {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.25);
}
body.light .wizard-feed-title {
  color: rgba(0, 0, 0, 0.85);
}
body.light .wizard-feed-desc {
  color: rgba(0, 0, 0, 0.5);
}
body.light .wizard-feed-url {
  color: rgba(0, 0, 0, 0.35);
}
.feed-groups-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.group-tab {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: capitalize;
}
.group-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.group-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.group-tab.add-new {
  padding: 6px 10px;
  border-style: dashed;
  color: rgba(255, 255, 255, 0.35);
}
.group-tab.add-new:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.25);
}
.add-feed-row {
  display: flex;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.add-feed-row input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
}
.add-feed-row input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.add-feed-row button {
  padding: 0 14px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s ease;
}
.add-feed-row button:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
}
.feeds-list-modal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.muted.centered {
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.3);
}
.feed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  transition: background 0.15s ease;
}
.feed-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.feed-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.feed-row-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.feed-row-url {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-remove-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.feed-remove-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}
/* Light theme modal */
body.light .feed-manager-modal .modal-close-btn {
  color: rgba(0, 0, 0, 0.4);
}
body.light .feed-manager-modal .modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}
body.light .feed-manager-modal .feed-manager-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .feed-manager-modal .group-tab {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
body.light .feed-manager-modal .group-tab:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.85);
}
body.light .feed-manager-modal .group-tab.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}
body.light .feed-manager-modal .add-feed-row input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}
body.light .feed-manager-modal .add-feed-row input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
body.light .feed-manager-modal .add-feed-row button {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}
body.light .feed-manager-modal .feed-row {
  background: rgba(0, 0, 0, 0.02);
}
body.light .feed-manager-modal .feed-row:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .feed-manager-modal .feed-row-title {
  color: rgba(0, 0, 0, 0.85);
}
body.light .feed-manager-modal .feed-row-url {
  color: rgba(0, 0, 0, 0.4);
}
body.light .feed-manager-modal .muted.centered {
  color: rgba(0, 0, 0, 0.35);
}
/* Light theme manager tabs */
body.light .manager-tabs {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .manager-tab {
  color: rgba(0, 0, 0, 0.5);
}
body.light .manager-tab:hover {
  color: rgba(0, 0, 0, 0.8);
}
body.light .manager-tab.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}
body.light .manager-hint {
  color: rgba(0, 0, 0, 0.4);
}
body.light .collection-row {
  background: rgba(0, 0, 0, 0.02);
}
body.light .reorder-btn {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.4);
}
body.light .reorder-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}
body.light .collection-row {
  background: rgba(0, 0, 0, 0.02);
}
body.light .collection-row:hover {
  background: rgba(0, 0, 0, 0.05);
}
body.light .collection-row.dragging {
  background: rgba(var(--accent-rgb), 0.1);
}
body.light .collection-row.drag-over {
  border-color: var(--accent-dark);
  background: rgba(var(--accent-rgb), 0.12);
}
body.light .collection-drag-handle {
  color: rgba(0, 0, 0, 0.2);
}
body.light .collection-row:hover .collection-drag-handle {
  color: rgba(0, 0, 0, 0.45);
}
body.light .collection-name {
  color: rgba(0, 0, 0, 0.85);
}
body.light .visibility-btn {
  color: rgba(0, 0, 0, 0.5);
}
body.light .visibility-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}
body.light .visibility-btn.hidden {
  color: rgba(0, 0, 0, 0.25);
}
/* Selection Popup */
.selection-popup {
  z-index: 10000;
  min-width: 280px;
  max-width: 420px;
  max-height: 70vh;
  background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: popup-appear 0.15s ease-out;
  display: flex;
  flex-direction: column;
}
@keyframes popup-appear {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Action buttons row */
.selection-actions {
  display: flex;
  gap: 2px;
  padding: 6px;
}
.selection-actions button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.15s ease;
}
.selection-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.selection-actions button span {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}
.selection-actions button:hover span {
  opacity: 1;
}
/* Result view */
.selection-result {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.selection-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(40, 40, 45, 0.98) 0%, rgba(35, 35, 40, 0.95) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
}
.selection-action-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.selection-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: all 0.15s ease;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.selection-close:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.15);
}
.selection-result-content {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;

  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.selection-result-content::-webkit-scrollbar {
  width: 8px;
}
.selection-result-content::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}
.selection-result-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.selection-result-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.selection-loading {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  font-size: 14px;
}
.selection-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}
.selection-text p {
  margin: 0 0 10px 0;
}
.selection-text p:last-child {
  margin-bottom: 0;
}
/* Font size variations for selection popup */
.selection-popup.font-small .selection-text {
  font-size: 13px;
  line-height: 1.6;
}
.selection-popup.font-medium .selection-text {
  font-size: 15px;
  line-height: 1.65;
}
.selection-popup.font-large .selection-text {
  font-size: 17px;
  line-height: 1.7;
}
.selection-popup.font-xlarge .selection-text {
  font-size: 19px;
  line-height: 1.75;
}
.selection-popup.font-xxlarge .selection-text {
  font-size: 21px;
  line-height: 1.8;
}
/* Adjust popup width for larger fonts */
.selection-popup.font-large {
  max-width: 480px;
}
.selection-popup.font-xlarge,
.selection-popup.font-xxlarge {
  max-width: 520px;
}
/* Light theme */
body.light .selection-popup {
  background: linear-gradient(135deg, #fefcf8 0%, #f8f4ec 100%);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}
body.light .selection-actions button {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.65);
}
body.light .selection-actions button:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}
body.light .selection-result-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .selection-action-label {
  color: rgba(0, 0, 0, 0.85);
}
body.light .selection-result-header {
  background: linear-gradient(180deg, rgba(252, 250, 245, 0.98) 0%, rgba(248, 244, 236, 0.95) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light .selection-close {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.4);
}
body.light .selection-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}
body.light .selection-text {
  color: rgba(0, 0, 0, 0.8);
}
body.light .selection-result-content {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
body.light .selection-result-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
body.light .selection-result-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
/* Pinboard picker */
.pinboard-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.pinboard-chip {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pinboard-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.pinboard-chip.selected {
  background: rgba(74, 144, 217, 0.3);
  border-color: rgba(74, 144, 217, 0.6);
  color: #fff;
  font-weight: 600;
}
.pinboard-note-input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  margin-bottom: 8px;
  outline: none;
  box-sizing: border-box;
}
.pinboard-note-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.pinboard-note-input:focus {
  border-color: rgba(74, 144, 217, 0.5);
}
.pinboard-confirm-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 8px;
  background: rgba(74, 144, 217, 0.3);
  border: 1px solid rgba(74, 144, 217, 0.5);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pinboard-confirm-btn:hover {
  background: rgba(74, 144, 217, 0.45);
}
body.light .pinboard-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}
body.light .pinboard-chip:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
body.light .pinboard-chip.selected {
  background: rgba(74, 144, 217, 0.15);
  border-color: rgba(74, 144, 217, 0.5);
  color: #2563eb;
}
body.light .pinboard-note-input {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.85);
}
body.light .pinboard-note-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
body.light .pinboard-confirm-btn {
  background: rgba(74, 144, 217, 0.15);
  border-color: rgba(74, 144, 217, 0.4);
  color: #2563eb;
}
/* ═══════════════════════════════════════════════════════════════════════════
   HACKER NEWS POINTS HIGHLIGHTING
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-points {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  background: rgba(255, 102, 0, 0.15);
  color: #ff6600;
  margin-right: 6px;
  flex-shrink: 0;
  font-family: var(--font-mono, 'SF Mono', monospace);
}
.hn-points.hot {
  background: rgba(255, 102, 0, 0.25);
  color: #ff6600;
  animation: hn-pulse 2s ease-in-out infinite;
}
.hn-points.viral {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.35), rgba(255, 60, 0, 0.35));
  color: #ff3c00;
  animation: hn-glow 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.3);
}
@keyframes hn-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}
@keyframes hn-glow {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 12px rgba(255, 102, 0, 0.5);
  }
}
.headline-item.hn-hot {
  border-left: 2px solid rgba(255, 102, 0, 0.5);
  padding-left: 8px;
  margin-left: -10px;
}
.headline-item.hn-viral {
  border-left: 3px solid #ff6600;
  padding-left: 8px;
  margin-left: -11px;
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.08), transparent 50%);
}
.headline-item.hn-viral .headline-title {
  font-weight: 500;
}
/* Light mode adjustments */
body.light .hn-points {
  background: rgba(255, 102, 0, 0.12);
}
body.light .hn-points.hot {
  background: rgba(255, 102, 0, 0.2);
}
body.light .hn-points.viral {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.25), rgba(255, 60, 0, 0.25));
}
body.light .headline-item.hn-viral {
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.06), transparent 50%);
}
/* ═══════════════════════════════════════════════════════════════════════════
   SOURCE STORIES POPUP
   ═══════════════════════════════════════════════════════════════════════════ */
.source-header.clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}
.source-header.clickable:hover {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.source-header.clickable:hover .source-name {
  color: var(--accent, #4a9eff);
}
body.light .source-header.clickable:hover {
  background: rgba(0, 0, 0, 0.04);
}
.source-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
  overflow: hidden;
  overscroll-behavior: contain;
}
.source-popup {
  background: var(--bg-secondary, #1a1a1a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.source-popup-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.source-popup-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  flex: 1;
}
.source-popup-count {
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
}
.source-popup-close {
  background: none;
  border: none;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.source-popup-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #fff);
}
.source-popup-content {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  overscroll-behavior: contain;
}
.source-popup-content::-webkit-scrollbar {
  width: 8px;
}
.source-popup-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}
.source-popup-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.source-popup-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  background-clip: padding-box;
}
.source-popup-item {
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.source-popup-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.source-popup-item.hn-hot {
  border-left: 2px solid rgba(255, 102, 0, 0.5);
  padding-left: 12px;
}
.source-popup-item.hn-viral {
  border-left: 3px solid #ff6600;
  padding-left: 11px;
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.08), transparent 40%);
}
.source-popup-item-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.source-popup-item-main .hn-points {
  margin-top: 2px;
}
.source-popup-title {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary, #fff);
  flex: 1;
}
.source-popup-item.hn-viral .source-popup-title {
  font-weight: 500;
}
.source-popup-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-left: 0;
}
.source-popup-item .hn-points~.source-popup-title~.source-popup-meta {
  padding-left: 52px;
}
.source-popup-time {
  font-size: 11px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.4));
  font-family: var(--font-mono, 'SF Mono', monospace);
}
.source-popup-description {
  margin: 6px 0 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
  padding-left: 0;
}
.source-popup-item .hn-points+.source-popup-title~.source-popup-description {
  padding-left: 52px;
}
/* Light mode */
body.light .source-popup {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
body.light .source-popup-header {
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .source-popup-header h3 {
  color: #1a1a1a;
}
body.light .source-popup-count {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.06);
}
body.light .source-popup-close {
  color: rgba(0, 0, 0, 0.4);
}
body.light .source-popup-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a1a;
}
body.light .source-popup-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .source-popup-title {
  color: #1a1a1a;
}
body.light .source-popup-description {
  color: rgba(0, 0, 0, 0.5);
}
body.light .source-popup-time {
  color: rgba(0, 0, 0, 0.4);
}
body.light .source-popup-item.hn-viral {
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.06), transparent 40%);
}
body.light .source-popup-content {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
body.light .source-popup-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
body.light .source-popup-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
/* Future Tab Styles */
.section-divider {
  color: rgba(201, 162, 39, 0.35);
  font-weight: 300;
  margin: 0 8px;
  user-select: none;
}
body.light .section-divider {
  color: rgba(139, 92, 42, 0.25);
}
.future-tab {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.12), rgba(var(--accent-rgb), 0.1)) !important;
  border: 1px solid rgba(139, 92, 176, 0.25) !important;
  border-radius: 4px !important;
}
.future-tab:hover {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.2), rgba(var(--accent-rgb), 0.18)) !important;
  border-color: rgba(139, 92, 176, 0.4) !important;
}
.future-tab.active {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.25), rgba(var(--accent-rgb), 0.22)) !important;
  border-color: rgba(139, 92, 176, 0.5) !important;
  color: #d4c4f4 !important;
}
body.light .future-tab {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.08), rgba(var(--accent-rgb), 0.06)) !important;
  border-color: rgba(139, 92, 176, 0.18) !important;
}
body.light .future-tab:hover {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.14), rgba(var(--accent-rgb), 0.12)) !important;
}
body.light .future-tab.active {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.18), rgba(var(--accent-rgb), 0.16)) !important;
  color: var(--accent-dark) !important;
}
/* Future Section Styles */
.future-section .section-header span:first-child {
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.light .future-section .section-header span:first-child {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* ============================================
   NEWSPAPER VINTAGE - Future & Stocks Tabs
   ============================================ */
/* Future tab - vintage newspaper style */
.news-panel.newspaper .future-tab {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.15), rgba(var(--accent-rgb), 0.12)) !important;
  border: 1px solid rgba(139, 92, 176, 0.3) !important;
  border-radius: 4px !important;
  font-family: 'Georgia', serif !important;
  color: var(--accent-dark) !important;
}
.news-panel.newspaper .future-tab:hover {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.22), rgba(var(--accent-rgb), 0.18)) !important;
  border-color: rgba(139, 92, 176, 0.45) !important;
}
.news-panel.newspaper .future-tab.active {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.28), rgba(var(--accent-rgb), 0.24)) !important;
  border-color: rgba(139, 92, 176, 0.5) !important;
  color: #5b21b6 !important;
  font-weight: 600 !important;
}
/* Stocks tab - vintage newspaper style */
.news-panel.newspaper .stocks-tab {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.12), rgba(5, 140, 100, 0.1)) !important;
  border: 1px solid rgba(16, 163, 127, 0.3) !important;
  border-radius: 4px !important;
  font-family: 'Georgia', serif !important;
  color: #047857 !important;
}
.news-panel.newspaper .stocks-tab:hover {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.2), rgba(5, 140, 100, 0.16)) !important;
  border-color: rgba(16, 163, 127, 0.45) !important;
}
.news-panel.newspaper .stocks-tab.active {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.26), rgba(5, 140, 100, 0.22)) !important;
  border-color: rgba(16, 163, 127, 0.5) !important;
  color: #065f46 !important;
  font-weight: 600 !important;
}
/* Pulse tab - vintage newspaper style */
.news-panel.newspaper .pulse-tab {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(168, 85, 247, 0.1)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
  border-radius: 4px !important;
  font-family: 'Georgia', serif !important;
  color: var(--accent-dark) !important;
}
.news-panel.newspaper .pulse-tab:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(168, 85, 247, 0.16)) !important;
  border-color: rgba(var(--accent-rgb), 0.45) !important;
}
.news-panel.newspaper .pulse-tab.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(168, 85, 247, 0.22)) !important;
  border-color: rgba(var(--accent-rgb), 0.5) !important;
  color: var(--accent-dark) !important;
  font-weight: 600 !important;
}
/* Future section header - vintage */
.news-panel.newspaper .future-section .section-header span:first-child {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #5c4033 !important;
  background-clip: unset !important;
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-style: italic !important;
}
/* Stocks section header - vintage */
.news-panel.newspaper .stocks-section .section-header span:first-child {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #5c4033 !important;
  background-clip: unset !important;
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-style: italic !important;
}
/* Future & Stocks content - vintage newspaper style */
.news-panel.newspaper .future-section,
.news-panel.newspaper .stocks-section {
  background: transparent !important;
  border: none !important;
}
.news-panel.newspaper .future-section .section-header,
.news-panel.newspaper .stocks-section .section-header {
  border-bottom: 2px double rgba(139, 105, 20, 0.3) !important;
  padding-bottom: 0.5em !important;
  margin-bottom: 1em !important;
}
.news-panel.newspaper .stocks-text,
.news-panel.newspaper .future-text {
  font-family: 'Georgia', serif !important;
  color: #3d2817 !important;
  line-height: 1.7 !important;
}
.news-panel.newspaper .stocks-text strong {
  color: #5c4033 !important;
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.news-panel.newspaper .stocks-text .briefing-bullet,
.news-panel.newspaper .future-text .briefing-bullet {
  background: transparent !important;
  border-left: 2px solid rgba(139, 105, 20, 0.4) !important;
  border-radius: 0 !important;
  padding: 0.5em 0 0.5em 1em !important;
  margin: 0.5em 0 !important;
}
.news-panel.newspaper .stocks-text .briefing-bullet::before,
.news-panel.newspaper .future-text .briefing-bullet::before {
  content: '•' !important;
  color: #8b6914 !important;
  font-size: 1em !important;
  margin-right: 0.5em !important;
}
/* Timestamp in vintage mode */
.news-panel.newspaper .future-section .fetch-timestamp,
.news-panel.newspaper .stocks-section .fetch-timestamp {
  font-family: 'Georgia', serif !important;
  font-style: italic !important;
  color: #8b7355 !important;
  font-size: 0.75em !important;
}
/* Action buttons in vintage mode */
.news-panel.newspaper .future-section button,
.news-panel.newspaper .stocks-section button {
  background: transparent !important;
  border: 1px solid rgba(139, 105, 20, 0.35) !important;
  color: #5c4033 !important;
  font-family: 'Georgia', serif !important;
  border-radius: 2px !important;
}
.news-panel.newspaper .future-section button:hover,
.news-panel.newspaper .stocks-section button:hover {
  background: rgba(139, 105, 20, 0.08) !important;
  border-color: rgba(139, 105, 20, 0.5) !important;
}
/* Section divider - vintage style */
.news-panel.newspaper .section-divider {
  color: rgba(139, 105, 20, 0.35) !important;
  font-weight: 400 !important;
  font-family: 'Georgia', serif !important;
}
/* Emojis in tabs - more subtle in vintage mode */
.news-panel.newspaper .future-tab,
.news-panel.newspaper .stocks-tab {
  font-size: 0.9em !important;
}
/* Loading/generating state in vintage */
.news-panel.newspaper .future-tab.generating,
.news-panel.newspaper .stocks-tab.generating {
  animation: newspaper-pulse 1.5s ease-in-out infinite !important;
}
@keyframes newspaper-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
/* Stock Market Outlook Section Styles */
/* Stock ticker styling - make them stand out */
.predictions-text strong {
  color: var(--accent-light);
  font-weight: 700;
  font-family: var(--font-mono, 'SF Mono', 'Monaco', monospace);
  letter-spacing: 0.3px;
}
body.light .predictions-text strong {
  color: var(--accent-dark);
}
/* Stock section bullet points */
.predictions-text .briefing-bullet {
  padding-left: 1.5em;
  position: relative;
  margin: 0.6em 0;
  line-height: 1.6;
  padding: 0.5em 0.8em;
  background: rgba(147, 51, 234, 0.05);
  border-radius: 6px;
  border-left: 3px solid rgba(147, 51, 234, 0.25);
}
body.light .predictions-text .briefing-bullet {
  background: rgba(147, 51, 234, 0.04);
  border-left-color: rgba(147, 51, 234, 0.35);
}
/* Sector and stock header styling */
.predictions-text .briefing-header {
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  color: #e0d4fc;
  border-bottom: 1px solid rgba(147, 51, 234, 0.2);
  padding-bottom: 0.3em;
  font-size: 1.05em;
}
body.light .predictions-text .briefing-header {
  color: var(--accent-dark);
  border-color: rgba(109, 40, 217, 0.15);
}
/* Markdown header levels */
.briefing-h1 {
  font-size: 1.4em;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  border-bottom-width: 2px;
}
.briefing-h2 {
  font-size: 1.2em;
  margin-top: 1em;
  margin-bottom: 0.4em;
}
.briefing-h3 {
  font-size: 1.1em;
  margin-top: 0.8em;
  margin-bottom: 0.3em;
}
/* Stock outlook emphasis and disclaimer */
.predictions-text em {
  color: #d8b4fe;
  font-style: italic;
}
body.light .predictions-text em {
  color: var(--accent-dark);
}
/* Dividers in predictions */
.predictions-text .briefing-divider {
  border-color: rgba(147, 51, 234, 0.15);
  margin: 1.5em 0;
}
body.light .predictions-text .briefing-divider {
  border-color: rgba(147, 51, 234, 0.1);
}
/* Takeaway styling in predictions */
.predictions-text .briefing-takeaway {
  background: rgba(147, 51, 234, 0.08);
  padding: 0.6em 1em;
  border-radius: 6px;
  margin: 0.8em 0;
}
body.light .predictions-text .briefing-takeaway {
  background: rgba(147, 51, 234, 0.06);
}
/* ============================================
   STOCK MARKET SECTION STYLES
   ============================================ */
/* Stocks Tab */
.stocks-tab {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.12), rgba(5, 140, 100, 0.1)) !important;
  border: 1px solid rgba(16, 163, 127, 0.25) !important;
  border-radius: 4px !important;
}
.stocks-tab:hover {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.2), rgba(5, 140, 100, 0.18)) !important;
  border-color: rgba(16, 163, 127, 0.4) !important;
}
.stocks-tab.active {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.25), rgba(5, 140, 100, 0.22)) !important;
  border-color: rgba(16, 163, 127, 0.5) !important;
  color: #7ee8c4 !important;
}
body.light .stocks-tab {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.08), rgba(5, 140, 100, 0.06)) !important;
  border-color: rgba(16, 163, 127, 0.18) !important;
}
body.light .stocks-tab:hover {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.14), rgba(5, 140, 100, 0.12)) !important;
}
body.light .stocks-tab.active {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.18), rgba(5, 140, 100, 0.16)) !important;
  color: #047857 !important;
}
/* Pulse Tab */
.pulse-tab {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(168, 85, 247, 0.1)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.25) !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}
.pulse-tab:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(168, 85, 247, 0.18)) !important;
  border-color: rgba(var(--accent-rgb), 0.4) !important;
}
.pulse-tab.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(168, 85, 247, 0.22)) !important;
  border-color: rgba(var(--accent-rgb), 0.5) !important;
  color: var(--accent-light) !important;
}
body.light .pulse-tab {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(168, 85, 247, 0.06)) !important;
  border-color: rgba(var(--accent-rgb), 0.18) !important;
}
body.light .pulse-tab:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(168, 85, 247, 0.12)) !important;
}
body.light .pulse-tab.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(168, 85, 247, 0.16)) !important;
  color: var(--accent-dark) !important;
}
/* Stocks Section Header */
.stocks-section .section-header span:first-child {
  background: linear-gradient(90deg, #6ee7b7, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.light .stocks-section .section-header span:first-child {
  background: linear-gradient(90deg, #059669, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Stocks Text Container */
.stocks-text strong {
  color: #6ee7b7;
  font-weight: 700;
  font-family: var(--font-mono, 'SF Mono', 'Monaco', monospace);
  letter-spacing: 0.3px;
}
body.light .stocks-text strong {
  color: #059669;
}
/* Stock ticker styling */
.stocks-text .briefing-bullet {
  padding-left: 1.5em;
  position: relative;
  margin: 0.6em 0;
  line-height: 1.6;
  padding: 0.5em 0.8em;
  background: rgba(16, 185, 129, 0.05);
  border-radius: 6px;
  border-left: 3px solid rgba(16, 185, 129, 0.25);
}
body.light .stocks-text .briefing-bullet {
  background: rgba(16, 185, 129, 0.04);
  border-left-color: rgba(16, 185, 129, 0.35);
}
/* Stock section headers */
.stocks-text .briefing-header {
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  color: #a7f3d0;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
  padding-bottom: 0.3em;
  font-size: 1.05em;
}
body.light .stocks-text .briefing-header {
  color: #047857;
  border-color: rgba(5, 150, 105, 0.15);
}
/* Emphasis text in stocks */
.stocks-text em {
  color: #d4a574;
  font-style: italic;
}
body.light .stocks-text em {
  color: #8b5a2b;
}
/* Dividers in stocks section */
.stocks-text .briefing-divider {
  border-color: rgba(16, 185, 129, 0.15);
  margin: 1.5em 0;
}
body.light .stocks-text .briefing-divider {
  border-color: rgba(16, 185, 129, 0.1);
}
/* Takeaway/Watch styling in stocks */
.stocks-text .briefing-takeaway {
  background: rgba(16, 185, 129, 0.08);
  padding: 0.6em 1em;
  border-radius: 6px;
  margin: 0.8em 0;
}
body.light .stocks-text .briefing-takeaway {
  background: rgba(16, 185, 129, 0.06);
}
/* Bullish/Bearish indicator colors */
.stocks-text .briefing-paragraph {
  line-height: 1.7;
}
/* Stock analysis paragraphs with tighter spacing */
.stocks-text .briefing-paragraph+.briefing-paragraph {
  margin-top: 0.4em;
}
/* Stocks empty state container */
.briefing-empty-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em 0;
}
/* Waiting state - shown when briefings are loading */
.briefing-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
.briefing-waiting svg {
  color: rgba(var(--accent-rgb), 0.6);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
.briefing-waiting p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.briefing-waiting-hint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}
body.light .briefing-waiting {
  color: rgba(0, 0, 0, 0.5);
}
body.light .briefing-waiting svg {
  color: rgba(var(--accent-rgb), 0.6);
}
body.light .briefing-waiting p {
  color: rgba(0, 0, 0, 0.6);
}
body.light .briefing-waiting-hint {
  color: rgba(0, 0, 0, 0.35);
}
/* Stocks tip styling */
.stocks-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: 0.8em 1em;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.15);
  font-size: 0.85em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.stocks-tip svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #34d399;
}
.stocks-tip strong {
  color: #6ee7b7;
}
body.light .stocks-tip {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.2);
  color: rgba(0, 0, 0, 0.6);
}
body.light .stocks-tip svg {
  color: #059669;
}
body.light .stocks-tip strong {
  color: #047857;
}
/* Reddit sentiment highlight in stocks text */
.stocks-text .briefing-header:nth-of-type(n) {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
/* ============================================
   COLLECTION SOURCES - Vintage Newspaper Byline
   ============================================ */
/* Sources byline within newspaper panel */
.news-panel.newspaper .collection-sources-byline {
  margin-top: 1.25em;
  padding: 0.75em 0;
  border-top: 1px solid rgba(139, 105, 20, 0.2);
  border-bottom: 1px solid rgba(139, 105, 20, 0.2);
  background: linear-gradient(90deg, transparent, rgba(139, 105, 20, 0.03), transparent);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #5c4033;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.01em;
}
.news-panel.newspaper .collection-sources-byline .byline-label {
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  color: #8b6914;
  margin-right: 0.5em;
}
.news-panel.newspaper .collection-sources-byline .byline-sources {
  display: inline;
}
.news-panel.newspaper .collection-sources-byline .byline-source {
  cursor: default;
  color: #5c4033;
}
.news-panel.newspaper .collection-sources-byline .byline-source::after {
  content: ' · ';
  font-style: normal;
  color: rgba(139, 105, 20, 0.4);
}
.news-panel.newspaper .collection-sources-byline .byline-source:last-child::after {
  content: '';
}
.news-panel.newspaper .collection-sources-byline .byline-more {
  font-style: normal;
  color: rgba(92, 64, 51, 0.6);
  margin-left: 0.3em;
}
/* ============================================
   STOCKS/FUTURE SOURCES (Vintage Newspaper)
   ============================================ */
.news-panel.newspaper .stocks-sources {
  margin-top: 1.25em;
  padding: 0.75em 0;
  border-top: 1px solid rgba(139, 105, 20, 0.2);
  border-bottom: 1px solid rgba(139, 105, 20, 0.2);
  background: linear-gradient(90deg, transparent, rgba(139, 105, 20, 0.03), transparent);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #5c4033;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.01em;
}
.news-panel.newspaper .stocks-sources-header {
  display: inline;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  color: #8b6914;
  margin-right: 0.5em;
}
.news-panel.newspaper .stocks-sources-header svg {
  display: none;
}
.news-panel.newspaper .stocks-sources-list {
  display: inline;
}
.news-panel.newspaper .stock-source-tag {
  display: inline;
  cursor: default;
  background: none;
  border: none;
  padding: 0;
  color: #5c4033;
  font-size: inherit;
  font-family: inherit;
}
.news-panel.newspaper .stock-source-tag::after {
  content: ' · ';
  font-style: normal;
  color: rgba(139, 105, 20, 0.4);
}
.news-panel.newspaper .stock-source-tag:last-child::after {
  content: '';
}
/* Stage indicators for unified loading */
.newspaper-progress-stages {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  font-size: 0.85rem;
}
.stage-indicator {
  position: relative;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.stage-indicator.active {
  background: rgba(139, 69, 19, 0.1);
  color: rgba(0, 0, 0, 0.7);
  border-color: rgba(139, 69, 19, 0.3);
}
.stage-indicator.completed {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}
.stage-indicator.completed::after {
  content: ' ✓';
  margin-left: 4px;
}
/* App view overlay styling - fixed to viewport center */
.newspaper-loading-overlay.app-view {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(8px);
  z-index: 10001 !important;
}
.news-panel.fullscreen .newspaper-loading-overlay.app-view {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
}
/* News Notification Toast */
.news-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: #fff;
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  min-width: 280px;
  max-width: 400px;
  will-change: transform, opacity;
}
.news-notification.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.news-notification.success {
  border-left: 4px solid #34c759;
}
.news-notification.info {
  border-left: 4px solid #0a84ff;
}
.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34c759;
}
.news-notification.info .notification-icon {
  color: #0a84ff;
}
.notification-content {
  flex: 1;
}
.notification-message {
  font-size: 0.9rem;
  font-weight: 500;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}
.notification-close {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.notification-close:hover {
  color: rgba(201, 162, 39, 0.9);
  background: rgba(201, 162, 39, 0.1);
  border-color: rgba(201, 162, 39, 0.2);
}
.notification-close:active {
  transform: scale(0.95);
}
/* Specific styling for newspaper mode notifications */
.news-fullscreen-active .news-notification {
  background: rgba(245, 240, 230, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #1a1714;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.news-fullscreen-active .notification-message {
  color: #1a1714;
}
.news-fullscreen-active .notification-close {
  color: rgba(0, 0, 0, 0.35);
}
.news-fullscreen-active .notification-close:hover {
  color: rgba(139, 92, 42, 0.9);
  background: rgba(139, 92, 42, 0.1);
  border: 1px solid rgba(139, 92, 42, 0.2);
}
/* Briefing Completion Alert - Right Bottom Corner */
.briefing-completion-alert {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 10001;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  will-change: transform, opacity;
}
.briefing-completion-alert.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.briefing-alert-content {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(30, 30, 35, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  min-width: 280px;
  max-width: 320px;
  box-sizing: border-box;
}
.briefing-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.15), rgba(48, 209, 88, 0.1));
  color: #34c759;
  flex-shrink: 0;
  animation: gentle-pulse 2s ease-in-out infinite;
  will-change: transform;
}
@keyframes gentle-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}
.briefing-alert-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.briefing-alert-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.briefing-alert-subtitle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 400;
}
.briefing-alert-close {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 8px;
  box-sizing: border-box;
}
.briefing-alert-close:hover {
  color: rgba(201, 162, 39, 0.9);
  background: rgba(201, 162, 39, 0.1);
  border-color: rgba(201, 162, 39, 0.2);
}
.briefing-alert-close:active {
  transform: scale(0.95);
}
/* Light theme support */
body.light .briefing-alert-content {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}
body.light .briefing-alert-icon {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.12), rgba(48, 209, 88, 0.08));
  color: #22c55e;
}
body.light .briefing-alert-title {
  color: rgba(26, 23, 20, 0.95);
}
body.light .briefing-alert-subtitle {
  color: rgba(26, 23, 20, 0.6);
}
/* Fullscreen newspaper mode */
.news-fullscreen-active .briefing-alert-content {
  background: rgba(245, 240, 230, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}
.news-fullscreen-active .briefing-alert-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1));
  color: #16a34a;
}
.news-fullscreen-active .briefing-alert-title {
  color: rgba(26, 23, 20, 0.95);
}
.news-fullscreen-active .briefing-alert-subtitle {
  color: rgba(26, 23, 20, 0.65);
}
.news-fullscreen-active .briefing-alert-close {
  color: rgba(0, 0, 0, 0.35);
}
.news-fullscreen-active .briefing-alert-close:hover {
  color: rgba(139, 92, 42, 0.9);
  background: rgba(139, 92, 42, 0.1);
  border: 1px solid rgba(139, 92, 42, 0.2);
}
body.light .briefing-alert-close {
  color: rgba(26, 23, 20, 0.35);
}
body.light .briefing-alert-close:hover {
  color: rgba(139, 92, 42, 0.9);
  background: rgba(139, 92, 42, 0.1);
  border: 1px solid rgba(139, 92, 42, 0.2);
}
/* ===== NEWSPAPER RITUAL FEATURES ===== */
/* Reading Timer */
.reading-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(201, 162, 39, 0.15);
  border-radius: 12px;
  font-size: 11px;
  font-family: 'SF Mono', 'Monaco', monospace;
  color: #c9a227;
  margin-left: 12px;
}
.reading-timer svg {
  opacity: 0.8;
}
.reading-timer .timer-warning {
  color: #ef4444;
  animation: timer-pulse 1s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.timer-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 4px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 50%;
  color: #22c55e;
  cursor: pointer;
  transition: all 0.2s ease;
}
.timer-close-btn:hover {
  background: rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.5);
  transform: scale(1.1);
}
/* View Mode Toggle */
.masthead-btn.view-mode-btn {
  position: relative;
}
.masthead-btn.view-mode-btn.active {
  background: rgba(201, 162, 39, 0.2);
  border-color: rgba(201, 162, 39, 0.4);
  color: #c9a227;
}
.masthead-btn.view-mode-btn.active:hover {
  background: rgba(201, 162, 39, 0.3);
}
/* Ensure panel contains the overlay */
.news-panel.newspaper {
  position: relative;
  overflow: hidden; /* Prevent overlay from escaping */
}
/* Session Closed Banner - Panel (non-fullscreen) */
.news-panel .session-closed-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(16, 185, 129, 0.06)) !important;
  border-top: 1px solid rgba(34, 197, 94, 0.15) !important;
  border-bottom: 1px solid rgba(34, 197, 94, 0.15) !important;
  animation: banner-fade-in 0.5s ease;
}
.news-panel .session-closed-banner svg {
  color: #22c55e !important;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.news-panel .session-closed-banner .session-text {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.news-panel .session-closed-banner .session-reset-btn {
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 8px !important;
}
.news-panel .session-closed-banner .session-reset-btn:hover {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}
/* Light mode - panel view */
body.light .news-panel .session-closed-banner {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.08)) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
}
body.light .news-panel .session-closed-banner svg {
  color: #16a34a !important;
}
body.light .news-panel .session-closed-banner .session-text {
  color: rgba(0, 0, 0, 0.75) !important;
}
body.light .news-panel .session-closed-banner .session-reset-btn {
  color: #16a34a !important;
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
body.light .news-panel .session-closed-banner .session-reset-btn:hover {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}
@keyframes banner-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Collapsed state - more compact (panel view) */
.news-panel .session-closed-banner.collapsed {
  padding: 6px 14px !important;
  gap: 8px !important;
}
.news-panel .session-closed-banner.collapsed svg {
  width: 14px;
  height: 14px;
}
.news-panel .session-closed-banner.collapsed .session-text {
  font-size: 11px !important;
}
.news-panel .session-closed-banner.collapsed .session-reset-btn {
  padding: 3px 10px !important;
  font-size: 10px !important;
}
/* Fullscreen newspaper style - vintage background only here */
.news-panel.fullscreen .session-closed-banner {
  background: linear-gradient(135deg, #f8f4eb 0%, #f0ebe0 100%) !important;
  border-top: 1px solid rgba(139, 105, 20, 0.2) !important;
  border-bottom: 2px double rgba(139, 105, 20, 0.25) !important;
  padding: 14px 32px !important;
}
.news-panel.fullscreen .session-closed-banner svg {
  color: #6b4c1a !important;
  flex-shrink: 0;
}
.news-panel.fullscreen .session-closed-banner .session-text {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: #3d2817 !important;
  letter-spacing: 0.02em;
}
.news-panel.fullscreen .session-closed-banner .session-reset-btn {
  padding: 7px 18px !important;
  font-family: 'Georgia', serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #3d2817 !important;
  background: rgba(139, 105, 20, 0.08) !important;
  border: 1px solid rgba(139, 105, 20, 0.4) !important;
  border-radius: 2px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 12px !important;
}
.news-panel.fullscreen .session-closed-banner .session-reset-btn:hover {
  background: rgba(139, 105, 20, 0.15) !important;
  border-color: rgba(139, 105, 20, 0.6) !important;
  color: #2a1a0f !important;
}
/* Fullscreen collapsed state */
.news-panel.fullscreen .session-closed-banner.collapsed {
  padding: 10px 24px !important;
  gap: 10px !important;
}
.news-panel.fullscreen .session-closed-banner.collapsed .session-text {
  font-size: 13px !important;
}
.news-panel.fullscreen .session-closed-banner.collapsed .session-reset-btn {
  padding: 5px 14px !important;
  font-size: 10px !important;
}
/* Light mode timer overrides */
body.light .reading-timer {
  background: rgba(139, 92, 42, 0.1);
  color: #8b5c2a;
}
body.light .timer-close-btn {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.25);
}
/* Newspaper theme - Reading Timer */
.news-panel.newspaper .reading-timer {
  background: rgba(139, 105, 20, 0.15) !important;
  border: 1px solid rgba(139, 105, 20, 0.25) !important;
  color: #8b6914 !important;
  font-family: 'Georgia', serif !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 3px !important;
}
.news-panel.newspaper .reading-timer svg {
  color: #8b6914 !important;
}
.news-panel.newspaper .timer-close-btn {
  background: rgba(139, 105, 20, 0.1) !important;
  border: 1px solid rgba(139, 105, 20, 0.3) !important;
  color: #5c4033 !important;
}
.news-panel.newspaper .timer-close-btn:hover {
  background: rgba(139, 105, 20, 0.2) !important;
}
/* ============================================
   FREQUENCY INDICATORS - Elegant & Subtle
   ============================================ */
/* Weekly collections - small superscript */
.news-panel.newspaper .section-tab[data-frequency="weekly"]::after {
  content: "w";
  position: relative;
  top: -0.4em;
  margin-left: 1px;
  font-family: 'Georgia', serif;
  font-size: 0.6em;
  font-style: italic;
  color: inherit;
  opacity: 0.5;
}
/* On-demand collections - small dot */
.news-panel.newspaper .section-tab[data-frequency="on-demand"]::after {
  content: "°";
  position: relative;
  top: -0.3em;
  margin-left: 0;
  font-size: 0.8em;
  color: inherit;
  opacity: 0.4;
}
/* Daily collections - no indicator */
.news-panel.newspaper .section-tab[data-frequency="daily"]::after {
  content: "";
}
/* On-demand tab styling - slightly muted */
.news-panel.newspaper .section-tab.on-demand {
  opacity: 0.7;
}
.news-panel.newspaper .section-tab.on-demand:hover {
  opacity: 1;
}
/* ============================================
   RSS GROUP SOURCES PANEL
   ============================================ */
.rss-sources-section {
  padding: 16px;
  margin-top: 12px;
  border-radius: 6px;
}
.rss-sources-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.rss-sources-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
  transition: color 0.2s ease;
}
.rss-sources-header:hover {
  color: rgba(255, 255, 255, 0.7);
}
.rss-sources-header svg {
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
}
.rss-sources-content {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rss-group-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.rss-group-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.rss-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.rss-group-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: capitalize;
}
.rss-group-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.rss-feeds-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rss-feed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.01);
  transition: background 0.2s ease;
}
.rss-feed-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.rss-feed-item svg:first-of-type {
  color: rgba(255, 165, 0, 0.7);
  flex-shrink: 0;
}
.rss-feed-title {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rss-feed-link {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.rss-feed-item:hover .rss-feed-link {
  opacity: 1;
}
.rss-feed-link:hover {
  color: rgba(255, 255, 255, 0.7);
}
.rss-feeds-loading {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  padding: 8px;
}
/* Light theme support */
body.light .rss-sources-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.015) 0%, rgba(0, 0, 0, 0.008) 100%);
  border-color: rgba(0, 0, 0, 0.05);
}
body.light .rss-sources-header {
  color: rgba(0, 0, 0, 0.45);
}
body.light .rss-sources-header:hover {
  color: rgba(0, 0, 0, 0.65);
}
body.light .rss-sources-header svg {
  color: rgba(0, 0, 0, 0.35);
}
body.light .rss-sources-content {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .rss-group-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.04);
}
body.light .rss-group-item:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .rss-group-header {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.light .rss-group-name {
  color: rgba(0, 0, 0, 0.7);
}
body.light .rss-group-count {
  color: rgba(0, 0, 0, 0.45);
}
body.light .rss-feed-item {
  background: rgba(0, 0, 0, 0.01);
}
body.light .rss-feed-item:hover {
  background: rgba(0, 0, 0, 0.02);
}
body.light .rss-feed-item svg:first-of-type {
  color: rgba(255, 140, 0, 0.7);
}
body.light .rss-feed-title {
  color: rgba(0, 0, 0, 0.6);
}
body.light .rss-feed-link {
  color: rgba(0, 0, 0, 0.3);
}
body.light .rss-feed-link:hover {
  color: rgba(0, 0, 0, 0.6);
}
body.light .rss-feeds-loading {
  color: rgba(0, 0, 0, 0.4);
}
/* Fullscreen newspaper mode */
.news-panel.fullscreen .rss-sources-section {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
.news-panel.fullscreen .rss-sources-header {
  color: rgba(0, 0, 0, 0.7) !important;
}
.news-panel.fullscreen .rss-sources-header:hover {
  color: rgba(0, 0, 0, 0.9) !important;
}
.news-panel.fullscreen .rss-group-item {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
/* ============================================
   PULSE SECTION - World Pulse Aggregation
   ============================================ */
/* Pulse body - multi-column newspaper layout */
.pulse-body {
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  padding: 1.5rem !important;
  border-radius: 0;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.03),
    0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.pulse-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
/* Section groups within pulse - newspaper column style */
.pulse-section-group {
  padding-right: 1.25rem;
  border-right: 1px solid rgba(139, 105, 20, 0.2);
}
.pulse-section-group:last-child {
  border-right: none;
  padding-right: 0;
}
.pulse-section-title {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #3d2817;
  margin: 0 0 0.85rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(139, 105, 20, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Pulse items list */
.pulse-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pulse-item {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.12);
}
.pulse-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.pulse-item-link {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #2d2a26;
  text-decoration: none;
  transition: color 0.15s ease;
}
.pulse-item-link:hover {
  color: #8b6914;
}
.pulse-item-meta {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-style: italic;
  color: #8b7355;
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Cache info */
.pulse-cache-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Georgia', serif;
  font-size: 0.7rem;
  font-style: italic;
  color: #8b7355;
  padding: 0.75rem 0 0 0;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(139, 105, 20, 0.15);
}
/* Pulse Loading State */
.pulse-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  gap: 1.25rem;
}
.pulse-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(139, 105, 20, 0.2);
  border-top-color: #8b6914;
  border-radius: 50%;
  animation: pulse-spin 1s linear infinite;
}
@keyframes pulse-spin {
  to { transform: rotate(360deg); }
}
.pulse-loading-status {
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #3d2817;
  margin: 0;
  text-align: center;
  font-weight: 500;
}
/* Pulse section header in newspaper style */
.news-panel.newspaper .pulse-section .section-header,
.news-panel.fullscreen .pulse-section .section-header {
  border-bottom: 2px double rgba(139, 105, 20, 0.3) !important;
  padding-bottom: 0.5em !important;
  margin-bottom: 1em !important;
}
.news-panel.newspaper .pulse-section .section-header span:first-child,
.news-panel.fullscreen .pulse-section .section-header span:first-child {
  font-family: 'Playfair Display', 'Georgia', serif;
  color: #3d2817;
}
/* Fullscreen Pulse - take over full screen */
.news-panel.fullscreen .pulse-section.pulse-layout {
  position: fixed;
  top: 120px; /* Below masthead and tabs */
  left: 0;
  right: 0;
  bottom: 0;
  min-height: auto;
  height: auto;
  border-radius: 0;
  z-index: 100;
}
/* Hide headlines section when pulse is showing in fullscreen */
.news-panel.fullscreen .pulse-layout ~ .headlines-section,
.news-panel.fullscreen .content-grid:has(.pulse-layout) ~ .headlines-section {
  display: none !important;
}
/* ============================================
   PULSE LAYOUT - Sidebar + Content
   ============================================ */
.pulse-layout {
  display: grid !important;
  grid-template-columns: 200px 1fr;
  gap: 0;
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  border-radius: 8px;
  overflow: hidden;
  min-height: 500px;
  height: calc(100vh - 200px);
  max-height: calc(100vh - 200px);
}
/* Pulse layout without separate sidebar (nav is in CollectionSidebar) */
.pulse-layout.pulse-no-sidebar {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}
/* Pulse content header (replaces pulse-sidebar-header when no sidebar) */
.pulse-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
  background: rgba(61, 40, 23, 0.04);
}
.pulse-content-title {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 700;
  font-size: 1rem;
  color: #3d2817;
}
.pulse-content-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pulse-content-actions .action-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 105, 20, 0.1);
  border: 1px solid rgba(139, 105, 20, 0.2);
  border-radius: 4px;
  color: #8b6914;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pulse-content-actions .action-btn:hover {
  background: rgba(139, 105, 20, 0.2);
}
.pulse-content-actions .action-btn.spinning svg,
.pulse-content-actions .action-btn svg.spinning {
  animation: pulse-spin 1s linear infinite;
}
.pulse-cache-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Georgia', serif;
  font-size: 0.7rem;
  color: #8b7355;
}
/* Pulse Sidebar */
.pulse-sidebar {
  background: rgba(61, 40, 23, 0.06);
  border-right: 1px solid rgba(139, 105, 20, 0.2);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  height: 100%;
}
.pulse-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 700;
  font-size: 1rem;
  color: #3d2817;
}
.pulse-sidebar-actions .action-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 105, 20, 0.1);
  border: 1px solid rgba(139, 105, 20, 0.2);
  border-radius: 4px;
  color: #8b6914;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pulse-sidebar-actions .action-btn:hover {
  background: rgba(139, 105, 20, 0.2);
}
.pulse-sidebar-actions .action-btn.spinning svg {
  animation: pulse-spin 1s linear infinite;
}
/* Pulse Navigation */
.pulse-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}
.pulse-nav-divider {
  font-family: 'Georgia', serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b7355;
  padding: 0.75rem 1rem 0.35rem;
  margin-top: 0.25rem;
}
.pulse-nav-divider-linkedin {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pulse-linkedin-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pulse-linkedin-time {
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 400;
  color: #a08060;
  text-transform: none;
  letter-spacing: normal;
}
.pulse-linkedin-refresh-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #8b7355;
  opacity: 0.7;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pulse-linkedin-refresh-btn:hover {
  opacity: 1;
}
.pulse-linkedin-refresh-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.pulse-linkedin-refresh-btn .spinning {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.pulse-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  text-align: left;
  font-family: 'Georgia', serif;
  font-size: 0.8rem;
  color: #4a3f35;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pulse-nav-item:hover {
  background: rgba(139, 105, 20, 0.08);
}
.pulse-nav-item.active {
  background: rgba(139, 105, 20, 0.15);
  color: #3d2817;
  font-weight: 600;
}
.pulse-nav-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.pulse-nav-item span:first-of-type {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse-nav-count {
  font-size: 0.7rem;
  color: #8b7355;
  background: rgba(139, 105, 20, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}
.pulse-nav-badge {
  font-size: 0.7rem;
  color: #22c55e;
}
.pulse-sidebar .pulse-cache-info {
  border-top: 1px solid rgba(139, 105, 20, 0.15);
  padding: 0.75rem 1rem;
  margin: 0;
}
/* Pulse Content Area */
.pulse-content {
  padding: 1.5rem;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pulse-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(139, 105, 20, 0.2);
}
.pulse-content-header h3 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3d2817;
  margin: 0;
}
.pulse-content-header .action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: rgba(139, 105, 20, 0.1);
  border: 1px solid rgba(139, 105, 20, 0.25);
  border-radius: 4px;
  font-family: 'Georgia', serif;
  font-size: 0.75rem;
  color: #8b6914;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pulse-content-header .action-btn:hover {
  background: rgba(139, 105, 20, 0.2);
}
.pulse-github-period-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(139, 105, 20, 0.08);
  border: 1px solid rgba(139, 105, 20, 0.18);
}
.pulse-period-btn {
  border: none;
  background: transparent;
  color: rgba(61, 40, 23, 0.75);
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pulse-period-btn:hover {
  background: rgba(139, 105, 20, 0.14);
  color: #3d2817;
}
.pulse-period-btn.active {
  background: rgba(139, 105, 20, 0.28);
  color: #3d2817;
}
/* Pulse Empty State */
.pulse-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1rem;
  color: #8b7355;
}
.pulse-empty svg {
  opacity: 0.4;
}
.pulse-empty p {
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  margin: 0;
}
/* AI Summary Section */
.pulse-summary-view {
  max-width: 700px;
}
.pulse-summary-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem;
  gap: 1rem;
}
.pulse-summary-loading p {
  font-family: 'Georgia', serif;
  font-size: 1rem;
  font-weight: 500;
  color: #4a3f35;
  margin: 0;
}
.loading-hint {
  font-family: 'Georgia', serif;
  font-size: 0.8rem;
  color: #8b8178;
  font-style: italic;
  text-align: center;
  max-width: 300px;
}
.pulse-summary-content {
  padding: 0;
}
.pulse-summary-text {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #2d2a26;
  margin: 0 0 1.5rem 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
}
.pulse-summary-empty {
  padding: 2rem;
  text-align: center;
  background: rgba(139, 105, 20, 0.05);
  border-radius: 6px;
}
.pulse-summary-empty p {
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  color: #8b7355;
  margin: 0;
}
/* Highlights Cards */
.pulse-highlights {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pulse-highlight {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  border-left: 4px solid #8b6914;
}
.pulse-highlight-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.pulse-highlight-category {
  display: inline-block;
  font-family: 'Georgia', serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b6914;
  background: rgba(139, 105, 20, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}
.pulse-highlight-source {
  font-family: 'Georgia', serif;
  font-size: 0.65rem;
  color: #888;
  font-style: italic;
}
.pulse-highlight h4 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d2817;
  margin: 0 0 0.35rem 0;
}
.pulse-highlight p {
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4a3f35;
  margin: 0;
}
/* Category colors */
.pulse-highlight-ai { border-left-color: var(--accent); }
.pulse-highlight-ai .pulse-highlight-category { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.pulse-highlight-tools { border-left-color: #0ea5e9; }
.pulse-highlight-tools .pulse-highlight-category { color: #0ea5e9; background: rgba(14, 165, 233, 0.1); }
.pulse-highlight-github { border-left-color: #22c55e; }
.pulse-highlight-github .pulse-highlight-category { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.pulse-highlight-industry { border-left-color: #f59e0b; }
.pulse-highlight-industry .pulse-highlight-category { color: #b45309; background: rgba(245, 158, 11, 0.15); }
.pulse-highlight-opinion { border-left-color: #ec4899; }
.pulse-highlight-opinion .pulse-highlight-category { color: #ec4899; background: rgba(236, 72, 153, 0.1); }
/* Perspective View */
.pulse-perspective-view {
  max-width: 700px;
}
.pulse-perspective-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  gap: 1rem;
}
.pulse-perspective-loading p {
  font-family: 'Georgia', serif;
  font-size: 1rem;
  font-weight: 500;
  color: #4a3f35;
  margin: 0;
}
.pulse-perspective-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  gap: 1rem;
  text-align: center;
}
.pulse-perspective-empty svg {
  color: #d4a574;
  opacity: 0.5;
}
.pulse-perspective-empty p {
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #5c5652;
  max-width: 400px;
  line-height: 1.6;
}
.perspective-hint {
  font-size: 0.75rem;
  color: #8b8178;
  font-style: italic;
}
.pulse-perspective-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 0.5rem;
}
.perspective-section {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(139, 105, 20, 0.03);
  border-radius: 12px;
  border-left: 3px solid #d4a574;
}
.perspective-section svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.perspective-section h4 {
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #5c5652;
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.perspective-section p {
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #2d2a26;
  margin: 0;
}
/* Perspective section color variants */
.perspective-emotional {
  border-left-color: #ec4899;
  background: rgba(236, 72, 153, 0.04);
}
.perspective-emotional svg {
  color: #ec4899;
}
.perspective-emotional p {
  font-style: italic;
  color: #5c5652;
}
.perspective-grounded {
  border-left-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.04);
}
.perspective-grounded svg {
  color: #0ea5e9;
}
.perspective-grounded h4 {
  color: #0c7cd5;
}
.perspective-opportunity {
  border-left-color: #22c55e;
  background: rgba(34, 197, 94, 0.04);
}
.perspective-opportunity svg {
  color: #22c55e;
}
.perspective-opportunity h4 {
  color: #16a34a;
}
.perspective-action {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.04);
}
.perspective-action svg {
  color: #f59e0b;
}
.perspective-action h4 {
  color: #b45309;
}
.perspective-affirmation {
  border-left-color: var(--accent);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(236, 72, 153, 0.04));
  text-align: center;
  padding: 1.5rem;
}
.perspective-affirmation svg {
  color: var(--accent);
  margin: 0 auto;
}
.affirmation-text {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #5c4d7d;
  font-style: italic;
  margin: 0;
}
/* Section View Items List */
.pulse-section-view {
  max-width: 100%;
}
/* Grouped section (like HN with top/new/best tabs) */
.pulse-grouped-section {
  width: 100%;
}
/* Regular section without groups */
.pulse-regular-section {
  max-width: 900px;
}
/* Multi-column layout for grouped sections (HN Top/Best/New) */
.pulse-groups-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
}
.pulse-group-column {
  min-width: 0; /* Allow text truncation */
}
.pulse-column-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-family: 'Georgia', serif;
  font-weight: 600;
  color: rgba(60, 42, 33, 0.7);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
}
.pulse-column-title .column-icon {
  font-size: 0.9rem;
}
/* Compact list items for columns */
.pulse-list-item-compact {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}
.pulse-list-item-compact .pulse-item-title {
  font-size: 0.8rem;
  line-height: 1.35;
}
.pulse-list-item-compact .pulse-item-meta {
  font-size: 0.7rem;
}
/* Legacy tabs - keep for backwards compat */
.pulse-groups-tabs {
  display: flex;
  gap: 0.25rem;
}
.pulse-group-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-family: 'Georgia', serif;
  font-weight: 500;
  color: rgba(60, 42, 33, 0.6);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pulse-group-tab:hover {
  color: rgba(60, 42, 33, 0.9);
  background: rgba(139, 105, 20, 0.08);
}
.pulse-group-tab.active {
  color: rgba(60, 42, 33, 1);
  background: rgba(139, 105, 20, 0.15);
}
.pulse-group-tab .tab-icon {
  font-size: 0.9rem;
}
.pulse-items-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pulse-list-item {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.12);
}
.pulse-list-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.pulse-list-item a {
  display: block;
  text-decoration: none;
  transition: all 0.15s ease;
}
.pulse-list-item a:hover .pulse-item-title {
  color: #8b6914;
}
.pulse-item-title {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: #2d2a26;
}
.pulse-item-desc {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #5a4f44;
  margin-top: 0.25rem;
}
.pulse-list-item .pulse-item-meta {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-style: italic;
  color: #8b7355;
  margin-top: 0.25rem;
}
/* Repo type styling */
.pulse-list-item.repo .pulse-item-title {
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: 0.85rem;
}
/* ============================================
   TODAY VIEW (Two-Column: Inbox Left, Calendar Right)
   ============================================ */
.pulse-today-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pulse-today-header {
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.pulse-today-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.pulse-today-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.pulse-today-header h3 svg {
  color: #f4b400;
}
.pulse-today-date {
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  font-style: italic;
  color: #8b7355;
}
/* Account Filter Buttons */
.pulse-today-filters {
  display: flex;
  gap: 0.5rem;
}
.pulse-filter-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(139, 105, 20, 0.2);
  border-radius: 15px;
  background: rgba(139, 105, 20, 0.05);
  font-family: -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #8b7355;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: capitalize;
}
.pulse-filter-btn:hover {
  background: rgba(139, 105, 20, 0.1);
  border-color: rgba(139, 105, 20, 0.3);
}
.pulse-filter-btn.active {
  background: rgba(139, 105, 20, 0.15);
  border-color: #8b6914;
  color: #5a4f44;
}
/* Two-Column Grid Layout */
.pulse-today-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.pulse-today-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(139, 105, 20, 0.03);
  border-radius: 8px;
  padding: 1rem;
}
.pulse-today-column .pulse-items-list {
  flex: 1;
  overflow-y: auto;
}
.pulse-today-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #5a4f44;
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
  flex-shrink: 0;
}
.pulse-today-section-title svg {
  opacity: 0.7;
}
.pulse-today-count {
  font-family: -apple-system, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: #8b6914;
  background: rgba(139, 105, 20, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
}
/* Account Tabs for Inbox */
.pulse-inbox-account-tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: rgba(139, 105, 20, 0.06);
  border-radius: 4px;
  padding: 2px;
}
.pulse-inbox-account-tabs .account-tab {
  padding: 0.2rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: 3px;
  font-family: -apple-system, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  color: #8b7355;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pulse-inbox-account-tabs .account-tab:hover {
  background: rgba(139, 105, 20, 0.1);
  color: #5a4f44;
}
.pulse-inbox-account-tabs .account-tab.active {
  background: rgba(139, 105, 20, 0.2);
  color: #5a4f44;
}
.pulse-inbox-account-tabs .account-tab.personal.active {
  background: rgba(22, 163, 74, 0.2);
  color: #15803d;
}
.pulse-inbox-account-tabs .account-tab.work.active {
  background: rgba(37, 99, 235, 0.2);
  color: #1d4ed8;
}
.pulse-inbox-account-tabs .tab-count {
  font-size: 0.6rem;
  font-weight: 600;
  opacity: 0.7;
  margin-left: 2px;
}
/* Open in Gmail/Calendar link */
.pulse-open-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: #8b7355;
  text-decoration: none;
  transition: all 0.15s ease;
  margin-left: 0.5rem;
}
.pulse-open-link:hover {
  background: rgba(139, 105, 20, 0.1);
  color: #5a4f44;
}
/* Scroll containers for inbox and calendar */
.pulse-inbox-scroll,
.pulse-calendar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
/* Section empty state */
.pulse-today-section-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: #a89a85;
  text-align: center;
  flex: 1;
}
.pulse-today-section-empty svg {
  opacity: 0.5;
  margin-bottom: 0.5rem;
}
.pulse-today-section-empty p {
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
}
/* Full empty state (no data at all) */
.pulse-today-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #8b7355;
  text-align: center;
  grid-column: 1 / -1;
}
.pulse-today-empty svg {
  color: #6b8e23;
  margin-bottom: 1rem;
}
.pulse-today-empty p {
  font-family: 'Georgia', serif;
  font-size: 1rem;
  margin: 0;
}
/* Today nav button styling */
.pulse-nav-today {
  background: rgba(244, 180, 0, 0.1) !important;
  border: 1px solid rgba(244, 180, 0, 0.2) !important;
}
.pulse-nav-today.active {
  background: rgba(244, 180, 0, 0.2) !important;
  border-color: rgba(244, 180, 0, 0.4) !important;
}
.pulse-nav-today svg {
  color: #f4b400;
}
/* Responsive: Stack columns on narrow screens */
@media (max-width: 700px) {
  .pulse-today-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   CALENDAR & EMAIL SECTIONS (Google Integration)
   ============================================ */
/* Header meta text */
.pulse-header-meta {
  font-family: 'Georgia', serif;
  font-size: 0.75rem;
  font-style: italic;
  color: #8b7355;
  margin-left: auto;
}
/* Calendar List */
.pulse-calendar-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pulse-calendar-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(139, 105, 20, 0.04);
  border-radius: 6px;
  border-left: 3px solid #8b6914;
}
.pulse-list-item.event.all-day .pulse-calendar-item {
  border-left-color: #6b8e23;
}
.pulse-calendar-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  text-align: center;
}
.pulse-calendar-date {
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5a4f44;
}
.pulse-calendar-date.today {
  color: #16a34a;
  font-weight: 700;
}
.pulse-calendar-date.tomorrow {
  color: #c2410c;
  font-weight: 600;
}
.pulse-list-item.event.is-today .pulse-calendar-item {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, 0.06);
}
.pulse-list-item.event.is-tomorrow .pulse-calendar-item {
  border-left-color: #c2410c;
  background: rgba(194, 65, 12, 0.04);
}
.pulse-calendar-hour {
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: 0.7rem;
  color: #8b7355;
  margin-top: 0.2rem;
}
.pulse-calendar-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pulse-calendar-details .pulse-item-title {
  font-size: 0.88rem;
  line-height: 1.4;
}
.pulse-calendar-details .pulse-item-desc {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
}
.pulse-calendar-details .pulse-item-desc svg {
  opacity: 0.6;
}
.pulse-video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: #4285f4;
  color: white !important;
  border-radius: 4px;
  font-size: 0.68rem;
  font-family: -apple-system, sans-serif;
  text-decoration: none;
  transition: background 0.15s ease;
}
.pulse-video-link:hover {
  background: #3367d6;
}
.pulse-account-badge {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  background: rgba(139, 105, 20, 0.12);
  border-radius: 3px;
  font-family: -apple-system, sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  color: #8b6914;
  text-transform: capitalize;
}
/* Inbox View Mode Toggle */
.pulse-inbox-view-toggle {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: rgba(139, 105, 20, 0.08);
  border-radius: 4px;
  padding: 2px;
}
.pulse-inbox-view-toggle .view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  border: none;
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  color: #8b7355;
  transition: all 0.15s ease;
}
.pulse-inbox-view-toggle .view-btn:hover {
  background: rgba(139, 105, 20, 0.1);
  color: #5a4f44;
}
.pulse-inbox-view-toggle .view-btn.active {
  background: rgba(139, 105, 20, 0.2);
  color: #5a4f44;
}
/* Quick Links to Gmail/Calendar */
.pulse-quick-links {
  display: flex;
  gap: 3px;
  margin-left: 0.5rem;
}
.pulse-quick-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.pulse-quick-link.personal {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
.pulse-quick-link.personal:hover {
  background: rgba(22, 163, 74, 0.25);
  color: #166534;
}
.pulse-quick-link.work {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}
.pulse-quick-link.work:hover {
  background: rgba(37, 99, 235, 0.25);
  color: #1e40af;
}
/* Email List */
.pulse-email-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pulse-email-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  background: rgba(139, 105, 20, 0.04);
  border-radius: 4px;
  transition: background 0.15s ease;
  cursor: pointer;
}
.pulse-email-item:hover {
  background: rgba(139, 105, 20, 0.08);
}
.pulse-list-item.email.important .pulse-email-item {
  border-left: 2px solid #f4b400;
  background: rgba(244, 180, 0, 0.06);
}
.pulse-email-from {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pulse-email-sender {
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5a4f44;
}
.pulse-important-star {
  color: #f4b400;
  fill: #f4b400;
  width: 10px;
  height: 10px;
}
.pulse-email-item .pulse-item-title {
  font-size: 0.8rem;
  line-height: 1.35;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pulse-email-item .pulse-item-desc {
  font-size: 0.7rem;
  color: #8b7355;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pulse-email-item .pulse-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.1rem;
}
/* COMPACT VIEW - Maximum density */
.pulse-email-list.view-compact {
  gap: 1px;
}
.pulse-email-list.view-compact .pulse-email-item {
  padding: 0.3rem 0.5rem;
  gap: 0.1rem;
  flex-direction: row;
  align-items: center;
  border-radius: 2px;
}
.pulse-email-list.view-compact .pulse-email-from {
  min-width: 100px;
  max-width: 100px;
}
.pulse-email-list.view-compact .pulse-email-sender {
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pulse-email-list.view-compact .pulse-item-title {
  font-size: 0.72rem;
  flex: 1;
  margin: 0;
}
.pulse-email-list.view-compact .pulse-item-meta {
  margin: 0;
  margin-left: auto;
}
.pulse-email-list.view-compact .pulse-important-star {
  width: 8px;
  height: 8px;
}
/* COMFORTABLE VIEW - Balanced */
.pulse-email-list.view-comfortable {
  gap: 0.35rem;
}
.pulse-email-list.view-comfortable .pulse-email-item {
  padding: 0.5rem 0.65rem;
}
.pulse-email-list.view-comfortable .pulse-item-desc {
  -webkit-line-clamp: 1;
}
/* EXPANDED VIEW - Full details */
.pulse-email-list.view-expanded {
  gap: 0.5rem;
}
.pulse-email-list.view-expanded .pulse-email-item {
  padding: 0.75rem;
  gap: 0.25rem;
}
.pulse-email-list.view-expanded .pulse-email-sender {
  font-size: 0.78rem;
}
.pulse-email-list.view-expanded .pulse-item-title {
  font-size: 0.85rem;
  -webkit-line-clamp: 2;
}
.pulse-email-list.view-expanded .pulse-item-desc {
  font-size: 0.75rem;
  -webkit-line-clamp: 2;
}
/* Email/Calendar clickable links */
.pulse-email-link,
.pulse-calendar-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.pulse-email-link:hover .pulse-email-item,
.pulse-calendar-link:hover .pulse-calendar-item {
  background: rgba(139, 105, 20, 0.1);
}
/* Account-specific colors */
.pulse-account-badge.account-work {
  background: rgba(37, 99, 235, 0.15);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.2);
}
.pulse-account-badge.account-personal {
  background: rgba(22, 163, 74, 0.15);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.2);
}
/* Calendar item account colors */
.pulse-list-item.event.account-work .pulse-calendar-item {
  border-left-color: #2563eb;
}
.pulse-list-item.event.account-personal .pulse-calendar-item {
  border-left-color: #16a34a;
}
/* Keep today/tomorrow colors for their items */
.pulse-list-item.event.is-today .pulse-calendar-item {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, 0.06);
}
.pulse-list-item.event.is-tomorrow .pulse-calendar-item {
  border-left-color: #c2410c;
  background: rgba(194, 65, 12, 0.04);
}
/* Email item account colors (subtle left border) */
.pulse-list-item.email.account-work .pulse-email-item {
  border-left: 2px solid rgba(37, 99, 235, 0.4);
}
.pulse-list-item.email.account-personal .pulse-email-item {
  border-left: 2px solid rgba(22, 163, 74, 0.4);
}
/* Important overrides account color */
.pulse-list-item.email.important .pulse-email-item {
  border-left-color: #f4b400;
}
/* Email Action Buttons */
.pulse-list-item.email {
  position: relative;
}
.pulse-email-actions {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}
.pulse-list-item.email:hover .pulse-email-actions {
  opacity: 1;
}
.pulse-email-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
  color: #5a4f44;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.pulse-email-action-btn:hover {
  background: rgba(139, 105, 20, 0.15);
  color: #3d3428;
}
.pulse-email-action-btn.delete:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.pulse-email-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pulse-list-item.email.processing {
  opacity: 0.5;
  pointer-events: none;
}
.pulse-list-item.email.processing .pulse-email-actions {
  opacity: 1;
}
/* Make email link take full width minus action area */
.pulse-email-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-right: 60px;
}
.pulse-list-item.email:hover .pulse-email-link {
  padding-right: 60px;
}
/* Compact view adjustments */
.pulse-email-list.view-compact .pulse-email-actions {
  right: 0.25rem;
}
.pulse-email-list.view-compact .pulse-email-action-btn {
  width: 20px;
  height: 20px;
}
.pulse-email-list.view-compact .pulse-email-link {
  padding-right: 50px;
}
/* Responsive - collapse sidebar on small screens */
@media (max-width: 600px) {
  .pulse-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .pulse-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(139, 105, 20, 0.2);
    max-height: 200px;
  }

  .pulse-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
  }

  .pulse-nav-divider {
    display: none;
  }

  .pulse-nav-item {
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    background: rgba(139, 105, 20, 0.08);
  }

  .pulse-nav-count {
    display: none;
  }
}
/* ============================================
   X COMBINED VIEW - Newspaper-style editorial layout
   ============================================ */
.pulse-x-combined-view {
  height: 100%;
  overflow-y: auto;
  padding: 0.5rem;
}
.x-combined-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: auto 1fr;
  gap: 1.25rem;
  min-height: 100%;
}
/* Section headers - compact editorial style */
.x-section-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #3d2817;
}
.x-section-header h4 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  color: #3d2817;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.x-section-header svg {
  color: #3d2817;
  width: 14px;
  height: 14px;
}
/* X logo for timeline */
.x-section-header .x-logo {
  font-size: 0.9rem;
  font-weight: 800;
  color: #3d2817;
}
/* News columns - left side, 2 columns */
.x-news-columns {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  min-width: 0;
}
.x-news-column {
  min-width: 0;
}
/* For You header icon color */
.x-news-column .x-section-header svg[class*="sparkles"],
.x-news-column .x-section-header .lucide-sparkles {
  color: #f59e0b;
}
/* News list items - compact newspaper style */
.x-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.x-news-item {
  border-bottom: 1px solid rgba(139, 105, 20, 0.1);
}
.x-news-item:last-child {
  border-bottom: none;
}
.x-news-item a {
  display: block;
  padding: 0.6rem 0;
  text-decoration: none;
  transition: all 0.15s ease;
}
.x-news-item a:hover {
  background: rgba(139, 105, 20, 0.04);
  margin: 0 -0.5rem;
  padding: 0.6rem 0.5rem;
}
.x-news-title {
  display: block;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #3d2817;
  font-weight: 600;
  font-family: Georgia, 'Times New Roman', serif;
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x-news-meta {
  display: block;
  font-size: 0.65rem;
  color: #8b6914;
  opacity: 0.7;
  margin-top: 0.2rem;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Trending column - right sidebar */
.x-trending-column {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
  background: rgba(139, 105, 20, 0.03);
  border-radius: 8px;
  padding: 0.75rem;
  border: 1px solid rgba(139, 105, 20, 0.08);
}
.x-trending-column .x-section-header {
  border-bottom-color: #e25c5c;
}
.x-trending-column .x-section-header svg {
  color: #e25c5c;
}
.x-trending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: trending;
}
.x-trending-item {
  border-bottom: 1px solid rgba(139, 105, 20, 0.08);
}
.x-trending-item:last-child {
  border-bottom: none;
}
.x-trending-item a {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0;
  text-decoration: none;
  transition: background 0.15s ease;
  counter-increment: trending;
}
.x-trending-item a::before {
  content: counter(trending);
  font-size: 0.7rem;
  font-weight: 700;
  color: #e25c5c;
  min-width: 1.2rem;
  opacity: 0.7;
}
.x-trending-item a:hover {
  background: rgba(139, 105, 20, 0.05);
  margin: 0 -0.5rem;
  padding: 0.5rem;
}
.x-trending-title {
  display: block;
  font-size: 0.8rem;
  line-height: 1.3;
  color: #3d2817;
  font-weight: 600;
}
.x-trending-meta {
  display: block;
  font-size: 0.65rem;
  color: #8b6914;
  opacity: 0.6;
  margin-top: 0.1rem;
}
/* Timeline section - bottom, full width of left column */
.x-timeline-section {
  grid-column: 1;
  grid-row: 2;
  border-top: 1px solid rgba(139, 105, 20, 0.15);
  padding-top: 0.75rem;
}
.x-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}
.x-timeline-item a {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  background: rgba(139, 105, 20, 0.02);
  border-left: 3px solid rgba(29, 155, 240, 0.4);
  transition: all 0.15s ease;
  height: 100%;
}
.x-timeline-item a:hover {
  background: rgba(139, 105, 20, 0.06);
  border-left-color: rgba(29, 155, 240, 0.8);
}
.x-timeline-content {
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #3d2817;
  margin-bottom: 0.4rem;
  flex: 1;
  /* Clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x-timeline-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}
.x-timeline-author {
  font-size: 0.68rem;
  color: #1d9bf0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.x-timeline-engagement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.x-engagement-stat {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.65rem;
  color: #8b6914;
  opacity: 0.7;
}
.x-engagement-stat svg {
  width: 11px;
  height: 11px;
  opacity: 0.8;
}
.x-engagement-stat .lucide-heart {
  color: #e25c5c;
}
.x-engagement-stat .lucide-repeat-2 {
  color: #22c55e;
}
/* Hide top row container since we use grid areas now */
.x-top-row {
  display: contents;
}
/* Responsive - stack on smaller screens */
@media (max-width: 900px) {
  .x-combined-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .x-news-columns {
    grid-column: 1;
    grid-row: 1;
  }

  .x-trending-column {
    grid-column: 1;
    grid-row: 2;
  }

  .x-timeline-section {
    grid-column: 1;
    grid-row: 3;
  }
}
@media (max-width: 600px) {
  .x-news-columns {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   LINKEDIN COMBINED VIEW - News + Trending row, Feed full width
   ============================================ */
.pulse-linkedin-combined-view {
  height: 100%;
  overflow-y: auto;
}
.linkedin-combined-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* Top row: News + Trending */
.linkedin-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.linkedin-news-column,
.linkedin-trending-column {
  min-width: 0;
}
.linkedin-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(10, 102, 194, 0.15);
}
.linkedin-section-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d2817;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.linkedin-section-header svg {
  color: #0a66c2;
}
/* News list items */
.linkedin-news-list,
.linkedin-trending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.linkedin-news-item a,
.linkedin-trending-item a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  background: rgba(10, 102, 194, 0.03);
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}
.linkedin-news-item a:hover,
.linkedin-trending-item a:hover {
  background: rgba(10, 102, 194, 0.08);
  border-left-color: #0a66c2;
}
.linkedin-news-title,
.linkedin-trending-title {
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #3d2817;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.linkedin-news-meta,
.linkedin-trending-meta {
  display: block;
  font-size: 0.7rem;
  color: #0a66c2;
  opacity: 0.7;
  margin-top: 0.25rem;
}
/* Trending column */
.linkedin-trending-column .linkedin-section-header svg {
  color: #e25c5c;
}
/* Feed section - full width */
.linkedin-feed-section {
  border-top: 1px solid rgba(10, 102, 194, 0.12);
  padding-top: 1rem;
}
.linkedin-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 0.75rem;
}
.linkedin-feed-item a {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  background: rgba(10, 102, 194, 0.03);
  border: 1px solid rgba(10, 102, 194, 0.08);
  transition: all 0.15s ease;
  height: 100%;
}
.linkedin-feed-item a:hover {
  background: rgba(10, 102, 194, 0.08);
  border-color: rgba(10, 102, 194, 0.15);
}
.linkedin-feed-content {
  display: block;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #3d2817;
  margin-bottom: 0.5rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.linkedin-feed-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
}
.linkedin-feed-author {
  font-size: 0.72rem;
  color: #0a66c2;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  font-weight: 500;
}
.linkedin-feed-engagement {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.linkedin-engagement-stat {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  color: #0a66c2;
  opacity: 0.75;
}
.linkedin-engagement-stat svg {
  opacity: 0.7;
}
.linkedin-engagement-stat .lucide-thumbs-up {
  color: #0a66c2;
}
.linkedin-engagement-stat .lucide-message-circle {
  color: #057642;
}
/* Responsive - stack on smaller screens */
@media (max-width: 900px) {
  .linkedin-top-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .linkedin-feed-list {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   News Loading Bar - Sticky at bottom of panel
   ============================================ */
.news-loading-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(245, 240, 230, 0.98);
  border-top: 1px solid rgba(100, 80, 60, 0.15);
  padding: 10px 16px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.news-loading-bar .loading-indicator-content {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}
.news-loading-bar .loading-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(100, 80, 60, 0.1);
  border-radius: 6px;
  flex-shrink: 0;
}
.news-loading-bar .loading-icon-wrapper svg {
  color: #8b6914;
}
.news-loading-bar .generating-spinner {
  animation: newsLoadingSpin 1s linear infinite;
}
@keyframes newsLoadingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.news-loading-bar .loading-indicator-info {
  flex: 1;
  min-width: 0;
}
.news-loading-bar .loading-status {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #3d2817;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-loading-bar .loading-mini-progress {
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.news-loading-bar .loading-mini-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b6914, #c9a227);
  border-radius: 2px;
  transition: width 0.3s ease-out;
}
.news-loading-bar .loading-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.4);
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.news-loading-bar .loading-cancel-btn:hover {
  background: rgba(200, 50, 50, 0.15);
  color: #c44;
}
.news-subtle-loading .loading-cancel-btn:hover {
  background: rgba(255, 100, 100, 0.3);
  color: #ff6b6b;
}
.news-subtle-loading.on-paper .loading-cancel-btn:hover {
  background: rgba(200, 50, 50, 0.15);
  color: #c44;
}
/* ============================================
   Collection Sidebar - Cleaner Navigation
   ============================================ */
.news-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: width 0.2s ease, transform 0.2s ease;
}
.news-sidebar.collapsed {
  width: 48px;
}
.sidebar-header {
  display: none;
}
.sidebar-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: var(--os-icon-bg);
  border: 1px solid var(--os-glass-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--os-text-secondary);
  z-index: 51;
  transition: all 0.15s ease;
}
.news-sidebar.collapsed .sidebar-toggle {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.sidebar-toggle:hover {
  background: var(--os-icon-bg-hover);
  color: var(--os-text-primary);
}
.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 42px 8px 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--os-scrollbar-thumb) transparent;
}
.sidebar-content::-webkit-scrollbar {
  width: 4px;
}
.sidebar-content::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}
/* Sidebar groups - visual separation without heavy dividers */
.sidebar-group {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-group:first-child {
  padding-top: 4px;
}
.sidebar-group:last-child {
  border-bottom: none;
}
.sidebar-group-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
  padding: 4px 12px 6px;
}
/* Main nav items */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
  font-family: 'Georgia', serif;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.sidebar-nav-item:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.04);
}
.sidebar-nav-item.active {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(201, 162, 39, 0.12);
}
.sidebar-nav-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.sidebar-nav-item.active svg {
  opacity: 0.9;
}
.sidebar-nav-item > span:first-of-type {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}
/* Sub-items (collections without icons) */
.sidebar-nav-item-sub {
  padding-left: 36px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}
.sidebar-nav-item-sub:hover {
  color: rgba(255, 255, 255, 0.85);
}
.sidebar-nav-item-sub.active {
  color: rgba(255, 255, 255, 0.95);
}
/* Expandable nav item (Stories with chevron) */
.sidebar-nav-expandable {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  width: 100%;
  position: relative;
}
.sidebar-nav-expandable > .sidebar-nav-item {
  flex: 1;
  width: auto;
  min-width: 0;
}
.sidebar-nav-expandable > .sidebar-expand-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s, color 0.15s, background 0.15s, opacity 0.15s;
  border-radius: 4px;
  opacity: 0.4;
}
.sidebar-nav-expandable > .sidebar-expand-btn:hover {
  opacity: 0.8;
}
.sidebar-nav-expandable > .sidebar-expand-btn.expanded {
  transform: translateY(-50%) rotate(90deg);
}
/* Story agent children */
.sidebar-nav-children {
  margin-left: 4px;
  border-left: 1px solid var(--os-divider);
  padding-left: 4px;
}
.sidebar-story-agent {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Count badges - subtle, right-aligned */
.sidebar-nav-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  min-width: 20px;
  text-align: right;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.sidebar-nav-item.active .sidebar-nav-count {
  color: rgba(255, 255, 255, 0.5);
}
/* New video badges */
.sidebar-new-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: #e74c3c;
  padding: 1px 5px;
  border-radius: 8px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.video-new-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  background: #e74c3c;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.video-live-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  background: #e74c3c;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
  letter-spacing: 0.06em;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
/* ── Live TV Section ───────────────────────────── */
.livetv-section {
  padding: 0 1rem;
}
.livetv-player {
  margin-bottom: 12px;
}
.livetv-player-wrap {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.livetv-categories {
  display: flex;
  gap: 2px;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.livetv-categories::-webkit-scrollbar { display: none; }
.livetv-cat-btn {
  background: none;
  border: none;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.livetv-cat-btn:hover {
  background: rgba(255,255,255,0.06);
}
body.light .livetv-cat-btn:hover {
  background: rgba(0,0,0,0.05);
}
.livetv-cat-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent) !important;
  font-weight: 600;
}
.livetv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 4px 0 1rem;
}
.livetv-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.livetv-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
}
body.light .livetv-card {
  border-color: rgba(0,0,0,0.08);
}
body.light .livetv-card:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
}
.livetv-card.active {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.livetv-card-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.livetv-card-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}
.livetv-card-name {
  font-size: 0.72rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
/* Newspaper theme overrides for Live TV */
.daily-digest-app .livetv-card {
  border-color: rgba(0,0,0,0.08);
}
.daily-digest-app .livetv-card:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
}
.daily-digest-app .livetv-card-name {
  color: rgba(0,0,0,0.85);
}
.daily-digest-app .livetv-cat-btn {
  color: rgba(0,0,0,0.5);
}
.daily-digest-app .livetv-cat-btn:hover {
  background: rgba(0,0,0,0.05);
}
.daily-digest-app .livetv-cat-btn.active {
  color: var(--accent) !important;
}
/* Seen videos — dimmed thumbnail */
.video-card-netflix.seen .video-thumbnail-netflix {
  opacity: 0.45;
}
.video-card-netflix.seen .video-thumbnail-netflix::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.video-card-netflix.seen .video-title-netflix {
  opacity: 0.5;
}
/* Refresh button - appears on hover */
.sidebar-refresh-btn {
  display: none;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.sidebar-nav-item:hover .sidebar-refresh-btn {
  display: flex;
}
.sidebar-nav-item:hover .sidebar-nav-count {
  display: none;
}
.sidebar-refresh-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
}
.sidebar-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sidebar-refresh-btn .spinning {
  animation: spin 1s linear infinite;
}
/* Legacy classes kept for backwards compat */
.sidebar-section {
  margin-bottom: 8px;
}
.sidebar-section-title {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  padding: 6px 10px 2px;
  margin-top: 2px;
}
.sidebar-collections {
  max-height: none;
  overflow-y: visible;
}
.sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 10px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 1px 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-family: 'Georgia', serif;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: capitalize;
  position: relative;
}
.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.sidebar-item.active {
  background: rgba(201, 162, 39, 0.15);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}
/* Green dots and sidebar spinners removed - main content area shows loading state */
.sidebar-item-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* sidebar-item-spinner removed - main content area shows loading state */
/* ========================================
   Nested Sidebar Items (Pulse navigation)
   ======================================== */
/* Pulse section header - simplified, no expand/collapse */
.sidebar-section-pulse {
  margin-bottom: 4px;
}
.sidebar-pulse-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 0.15s ease;
}
.sidebar-pulse-header:hover {
  color: rgba(255, 255, 255, 0.8);
}
.sidebar-pulse-header.active {
  color: rgba(255, 255, 255, 0.7);
}
.sidebar-pulse-icon {
  font-size: 0.9rem;
}
.sidebar-pulse-label {
  flex: 1;
}
/* Pulse items container - always visible */
.sidebar-pulse-items {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
/* Legacy nested container - kept for backwards compat */
.sidebar-nested {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease-out;
  margin-left: 12px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-nested.expanded {
  grid-template-rows: 1fr;
}
.sidebar-nested-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-nested-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-family: 'Georgia', serif;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.sidebar-nested-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.sidebar-nested-item.active {
  background: rgba(201, 162, 39, 0.12);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}
.sidebar-nested-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.sidebar-nested-item > span:not(.sidebar-nested-count):not(.sidebar-nested-badge) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-nested-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-nested-badge {
  font-size: 0.6rem;
  color: rgba(74, 222, 128, 0.9);
  margin-left: auto;
}
.sidebar-nested-divider {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  padding: 8px 8px 3px 8px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-nested-divider-linkedin {
  gap: 6px;
}
.sidebar-linkedin-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidebar-linkedin-time {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Georgia', serif;
  text-transform: none;
  letter-spacing: 0;
}
.sidebar-linkedin-refresh-btn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.sidebar-linkedin-refresh-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.sidebar-linkedin-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sidebar-linkedin-refresh-btn .spinning {
  animation: spin 1s linear infinite;
}
/* Refresh button in nested items - appears on hover, replaces count */
.sidebar-nested-item .sidebar-item-refresh-btn {
  display: none;
  width: 28px;
  height: 16px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(60, 42, 33, 0.6);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.sidebar-nested-item:hover .sidebar-item-refresh-btn {
  display: flex;
}
.sidebar-nested-item .sidebar-item-refresh-btn:hover {
  color: rgba(60, 42, 33, 0.9);
}
.sidebar-nested-item .sidebar-item-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sidebar-nested-item .sidebar-item-refresh-btn .spinning {
  animation: spin 1s linear infinite;
}
/* Hide count when item has refresh button and is hovered */
.sidebar-nested-item-with-actions:hover .sidebar-nested-count {
  display: none;
}
.sidebar-item-time {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'Georgia', serif;
}
.sidebar-item-refresh-btn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.sidebar-item-refresh-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.sidebar-item-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sidebar-item-refresh-btn .spinning {
  animation: spin 1s linear infinite;
}
/* Light theme adjustments for pulse header */
/* Newspaper mode sidebar - vintage beige theme */
.news-panel.newspaper .news-sidebar {
  background: rgba(245, 240, 230, 0.98);
  border-right-color: rgba(139, 105, 20, 0.15);
}
.news-panel.newspaper .sidebar-toggle {
  background: rgba(245, 240, 230, 0.95);
  border-color: rgba(139, 105, 20, 0.2);
  color: rgba(60, 42, 33, 0.6);
}
.news-panel.newspaper .sidebar-toggle:hover {
  background: rgba(235, 230, 220, 1);
  color: rgba(60, 42, 33, 0.9);
}
.news-panel.newspaper .sidebar-group {
  border-bottom-color: rgba(139, 105, 20, 0.12);
}
.news-panel.newspaper .sidebar-group-label {
  color: rgba(60, 42, 33, 0.4);
}
.news-panel.newspaper .sidebar-nav-item {
  color: rgba(60, 42, 33, 0.75);
}
.news-panel.newspaper .sidebar-nav-item svg {
  color: rgba(60, 42, 33, 0.6);
}
.news-panel.newspaper .sidebar-nav-item:hover {
  color: rgba(60, 42, 33, 1);
  background: rgba(139, 105, 20, 0.08);
}
.news-panel.newspaper .sidebar-nav-item.active {
  color: rgba(60, 42, 33, 1);
  background: rgba(139, 105, 20, 0.15);
}
.news-panel.newspaper .sidebar-nav-item.active svg {
  color: rgba(60, 42, 33, 0.9);
}
.news-panel.newspaper .sidebar-nav-item-sub {
  color: rgba(60, 42, 33, 0.6);
}
.news-panel.newspaper .sidebar-nav-item-sub:hover {
  color: rgba(60, 42, 33, 0.9);
}
.news-panel.newspaper .sidebar-nav-item-sub.active {
  color: rgba(60, 42, 33, 1);
}
.news-panel.newspaper .sidebar-expand-btn {
  color: rgba(60, 42, 33, 0.4);
}
.news-panel.newspaper .sidebar-expand-btn:hover {
  color: rgba(60, 42, 33, 0.7);
}
.news-panel.newspaper .sidebar-nav-children {
  border-left-color: rgba(60, 42, 33, 0.1);
}
.news-panel.newspaper .sidebar-nav-count {
  color: rgba(60, 42, 33, 0.4);
}
.news-panel.newspaper .sidebar-refresh-btn {
  color: rgba(60, 42, 33, 0.45);
}
.news-panel.newspaper .sidebar-refresh-btn:hover {
  color: rgba(60, 42, 33, 0.85);
  background: rgba(139, 105, 20, 0.12);
}
/* Light theme - new sidebar nav */
body.light .sidebar-group {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .sidebar-nav-item {
  color: rgba(0, 0, 0, 0.6);
}
body.light .sidebar-nav-item:hover {
  color: rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.04);
}
body.light .sidebar-nav-item.active {
  color: rgba(0, 0, 0, 0.95);
  background: rgba(201, 162, 39, 0.15);
}
body.light .sidebar-nav-item-sub {
  color: rgba(0, 0, 0, 0.5);
}
body.light .sidebar-nav-item-sub:hover {
  color: rgba(0, 0, 0, 0.8);
}
body.light .sidebar-nav-count {
  color: rgba(0, 0, 0, 0.35);
}
body.light .sidebar-refresh-btn {
  color: rgba(0, 0, 0, 0.4);
}
body.light .sidebar-refresh-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.08);
}
/* Light theme - legacy styles */
body.light .sidebar-pulse-header {
  color: rgba(0, 0, 0, 0.5);
}
body.light .sidebar-pulse-header:hover {
  color: rgba(0, 0, 0, 0.8);
}
body.light .sidebar-pulse-header.active {
  color: rgba(0, 0, 0, 0.7);
}
body.light .sidebar-pulse-items {
  border-left-color: rgba(0, 0, 0, 0.1);
}
/* Light theme adjustments for nested sidebar */
body.light .sidebar-nested {
  border-left-color: rgba(0, 0, 0, 0.1);
}
body.light .sidebar-nested-item {
  color: rgba(0, 0, 0, 0.55);
}
body.light .sidebar-nested-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.85);
}
body.light .sidebar-nested-item.active {
  background: rgba(201, 162, 39, 0.12);
  color: rgba(0, 0, 0, 0.95);
}
body.light .sidebar-nested-count {
  color: rgba(0, 0, 0, 0.4);
}
body.light .sidebar-nested-divider {
  color: rgba(0, 0, 0, 0.35);
}
body.light .sidebar-linkedin-time,
body.light .sidebar-item-time {
  color: rgba(0, 0, 0, 0.3);
}
body.light .sidebar-linkedin-refresh-btn,
body.light .sidebar-item-refresh-btn {
  color: rgba(0, 0, 0, 0.4);
}
body.light .sidebar-linkedin-refresh-btn:hover:not(:disabled),
body.light .sidebar-item-refresh-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}
/* Fullscreen mode pulse header */
/* Fullscreen mode - new sidebar nav */
.news-panel.fullscreen .sidebar-group {
  border-bottom-color: rgba(60, 42, 33, 0.15);
}
.news-panel.fullscreen .sidebar-nav-item {
  color: rgba(60, 42, 33, 0.75);
}
.news-panel.fullscreen .sidebar-nav-item svg {
  opacity: 0.7;
}
.news-panel.fullscreen .sidebar-nav-item:hover {
  color: rgba(60, 42, 33, 1);
  background: rgba(139, 90, 43, 0.1);
}
.news-panel.fullscreen .sidebar-nav-item.active {
  color: rgba(60, 42, 33, 1);
  background: rgba(139, 90, 43, 0.18);
}
.news-panel.fullscreen .sidebar-nav-item.active svg {
  opacity: 1;
}
.news-panel.fullscreen .sidebar-nav-item-sub {
  color: rgba(60, 42, 33, 0.65);
}
.news-panel.fullscreen .sidebar-nav-item-sub:hover {
  color: rgba(60, 42, 33, 0.95);
}
.news-panel.fullscreen .sidebar-nav-item-sub.active {
  color: rgba(60, 42, 33, 1);
}
.news-panel.fullscreen .sidebar-nav-count {
  color: rgba(60, 42, 33, 0.5);
}
.news-panel.fullscreen .sidebar-refresh-btn {
  color: rgba(60, 42, 33, 0.5);
}
.news-panel.fullscreen .sidebar-refresh-btn:hover {
  color: rgba(60, 42, 33, 0.9);
  background: rgba(139, 90, 43, 0.15);
}
/* Fullscreen mode - legacy styles */
.news-panel.fullscreen .sidebar-pulse-header {
  color: rgba(60, 42, 33, 0.5);
}
.news-panel.fullscreen .sidebar-pulse-header:hover {
  color: rgba(60, 42, 33, 0.8);
}
.news-panel.fullscreen .sidebar-pulse-header.active {
  color: rgba(60, 42, 33, 0.7);
}
.news-panel.fullscreen .sidebar-pulse-items {
  border-left-color: rgba(139, 90, 43, 0.15);
}
/* Fullscreen mode nested sidebar */
.news-panel.fullscreen .sidebar-nested {
  border-left-color: rgba(139, 90, 43, 0.15);
}
.news-panel.fullscreen .sidebar-nested-item {
  color: rgba(60, 42, 33, 0.6);
}
.news-panel.fullscreen .sidebar-nested-item:hover {
  background: rgba(139, 90, 43, 0.08);
  color: rgba(60, 42, 33, 0.9);
}
.news-panel.fullscreen .sidebar-nested-item.active {
  background: rgba(139, 90, 43, 0.12);
  color: rgba(60, 42, 33, 1);
}
.news-panel.fullscreen .sidebar-nested-count {
  color: rgba(60, 42, 33, 0.5);
}
.news-panel.fullscreen .sidebar-nested-divider {
  color: rgba(60, 42, 33, 0.4);
}
.news-panel.fullscreen .sidebar-linkedin-time,
.news-panel.fullscreen .sidebar-item-time {
  color: rgba(60, 42, 33, 0.35);
}
.news-panel.fullscreen .sidebar-linkedin-refresh-btn,
.news-panel.fullscreen .sidebar-item-refresh-btn {
  color: rgba(60, 42, 33, 0.45);
}
.news-panel.fullscreen .sidebar-linkedin-refresh-btn:hover:not(:disabled),
.news-panel.fullscreen .sidebar-item-refresh-btn:hover:not(:disabled) {
  background: rgba(139, 90, 43, 0.1);
  color: rgba(60, 42, 33, 0.75);
}
/* Collapsed sidebar icons */
.sidebar-collapsed-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
}
.sidebar-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sidebar-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.sidebar-icon-btn.active {
  background: rgba(201, 162, 39, 0.2);
  color: rgba(255, 255, 255, 0.95);
}
.sidebar-icon-divider {
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}
/* ============================================
   Reading Toolbar - Progress & Font Controls
   ============================================ */
.reading-toolbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.reading-progress-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
}
.reading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.8), rgba(201, 162, 39, 1));
  transition: width 0.1s ease-out;
  border-radius: 0 2px 2px 0;
}
.reading-toolbar-controls {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  gap: 12px;
}
.reading-section-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reading-section-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: capitalize;
}
.reading-section-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}
.reading-pulse-cache {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.reading-pulse-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.15s ease;
}
.reading-pulse-refresh:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
.reading-pulse-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.reading-pulse-refresh .spinning {
  animation: spin 1s linear infinite;
}
.reading-toolbar-spacer {
  flex: 1;
}
.reading-font-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 2px;
}
.reading-font-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}
.reading-font-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.reading-font-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.reading-font-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 4px;
  min-width: 20px;
  text-align: center;
}
.reading-toc-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}
.reading-toc-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.reading-toc-btn.active {
  background: rgba(201, 162, 39, 0.2);
  color: rgba(201, 162, 39, 1);
}
.reading-progress-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  min-width: 32px;
  text-align: right;
}
/* Fullscreen/paper mode styles */
.news-panel.fullscreen .news-sidebar {
  background: rgba(245, 240, 230, 0.95);
  border-right-color: rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 250; /* Above masthead */
}
.news-panel.fullscreen .sidebar-toggle {
  background: rgba(245, 240, 230, 0.95);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}
.news-panel.fullscreen .sidebar-toggle:hover {
  background: rgba(235, 230, 220, 1);
  color: rgba(0, 0, 0, 0.9);
}
.news-panel.fullscreen .sidebar-section-title {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.fullscreen .sidebar-divider {
  background: rgba(0, 0, 0, 0.1);
}
.news-panel.fullscreen .sidebar-item {
  color: rgba(0, 0, 0, 0.6);
}
.news-panel.fullscreen .sidebar-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.9);
}
.news-panel.fullscreen .sidebar-item.active {
  background: rgba(139, 90, 43, 0.12);
  color: rgba(0, 0, 0, 0.95);
}
.news-panel.fullscreen .sidebar-icon-btn {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.fullscreen .sidebar-icon-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}
.news-panel.fullscreen .sidebar-icon-btn.active {
  background: rgba(139, 90, 43, 0.15);
  color: rgba(0, 0, 0, 0.95);
}
.news-panel.fullscreen .sidebar-icon-divider {
  background: rgba(0, 0, 0, 0.1);
}
/* Fullscreen nested sidebar items - dark text on beige */
.news-panel.fullscreen .sidebar-nested {
  border-left-color: rgba(139, 90, 43, 0.2);
}
.news-panel.fullscreen .sidebar-nested-item {
  color: rgba(60, 42, 33, 0.7);
}
.news-panel.fullscreen .sidebar-nested-item:hover {
  background: rgba(139, 90, 43, 0.08);
  color: rgba(60, 42, 33, 0.95);
}
.news-panel.fullscreen .sidebar-nested-item.active {
  background: rgba(139, 90, 43, 0.15);
  color: rgba(60, 42, 33, 1);
  font-weight: 600;
}
.news-panel.fullscreen .sidebar-nested-count {
  color: rgba(60, 42, 33, 0.5);
  background: rgba(139, 90, 43, 0.1);
}
.news-panel.fullscreen .sidebar-nested-badge {
  color: rgba(34, 139, 34, 0.9);
}
.news-panel.fullscreen .sidebar-nested-divider {
  color: rgba(60, 42, 33, 0.5);
}
.news-panel.fullscreen .sidebar-linkedin-time,
.news-panel.fullscreen .sidebar-item-time {
  color: rgba(60, 42, 33, 0.4);
}
.news-panel.fullscreen .sidebar-linkedin-refresh-btn,
.news-panel.fullscreen .sidebar-item-refresh-btn {
  color: rgba(60, 42, 33, 0.5);
}
.news-panel.fullscreen .sidebar-linkedin-refresh-btn:hover:not(:disabled),
.news-panel.fullscreen .sidebar-item-refresh-btn:hover:not(:disabled) {
  background: rgba(139, 90, 43, 0.12);
  color: rgba(60, 42, 33, 0.8);
}
.news-panel.fullscreen .sidebar-divider {
  background: rgba(139, 90, 43, 0.15);
}
.news-panel.fullscreen .reading-toolbar {
  background: rgba(245, 240, 230, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.news-panel.fullscreen .reading-progress-track {
  background: rgba(0, 0, 0, 0.08);
}
.news-panel.fullscreen .reading-progress-bar {
  background: linear-gradient(90deg, rgba(139, 90, 43, 0.7), rgba(139, 90, 43, 1));
}
.news-panel.fullscreen .reading-section-name {
  color: rgba(0, 0, 0, 0.8);
}
.news-panel.fullscreen .reading-section-count {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.fullscreen .reading-pulse-cache {
  color: rgba(0, 0, 0, 0.4);
  border-left-color: rgba(0, 0, 0, 0.15);
}
.news-panel.fullscreen .reading-pulse-refresh {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.fullscreen .reading-pulse-refresh:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
.news-panel.fullscreen .reading-font-controls {
  background: rgba(0, 0, 0, 0.05);
}
.news-panel.fullscreen .reading-font-btn {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.fullscreen .reading-font-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}
.news-panel.fullscreen .reading-font-label {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.fullscreen .reading-toc-btn {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.fullscreen .reading-toc-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}
.news-panel.fullscreen .reading-toc-btn.active {
  background: rgba(139, 90, 43, 0.15);
  color: rgba(139, 90, 43, 1);
}
.news-panel.fullscreen .reading-progress-text {
  color: rgba(0, 0, 0, 0.4);
}
/* Layout adjustment when sidebar is present */
.news-panel.has-sidebar .newspaper-body {
  margin-left: 280px;
  transition: margin-left 0.2s ease;
}
.news-panel.has-sidebar.sidebar-collapsed .newspaper-body {
  margin-left: 48px;
}
/* Masthead also needs padding adjustment for sidebar (non-fullscreen windows) */
.news-panel.has-sidebar:not(.fullscreen) .newspaper-masthead,
.news-panel.has-sidebar:not(.fullscreen) .newspaper-masthead.nyt-style {
  padding-left: 300px !important;
  transition: padding-left 0.2s ease;
}
.news-panel.has-sidebar.sidebar-collapsed:not(.fullscreen) .newspaper-masthead,
.news-panel.has-sidebar.sidebar-collapsed:not(.fullscreen) .newspaper-masthead.nyt-style {
  padding-left: 60px !important;
}
/* Hide old collection tabs when sidebar is enabled */
.news-panel.has-sidebar .newspaper-sections {
  display: none;
}
/* =====================================================
   FOR YOU - Personalized Morning Briefing
   ===================================================== */
/* Featured sidebar item for For You */
.sidebar-nav-featured {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  margin-bottom: 4px;
}
.sidebar-nav-featured:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.2));
  border-color: rgba(var(--accent-rgb), 0.5);
}
.sidebar-nav-featured.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.3));
  border-color: rgba(var(--accent-rgb), 0.6);
}
.sidebar-nav-featured svg {
  color: var(--accent);
}
.sidebar-nav-featured.loading {
  opacity: 0.7;
}
.sidebar-nav-loading {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/* For You Layout - Full morning briefing */
.for-you-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem;
}
/* Today Section - Calendar & Email */
.for-you-today {
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.1));
  padding-bottom: 1.5rem;
}
.for-you-today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.for-you-today-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--news-heading, #1a1a1a);
  margin: 0;
}
.for-you-date {
  font-size: 0.875rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.5));
}
.for-you-today-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 800px) {
  .for-you-today-grid {
    grid-template-columns: 1fr;
  }
}
/* Calendar Events */
.for-you-calendar,
.for-you-emails {
  min-width: 0;
}
.for-you-calendar h4,
.for-you-emails h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--news-muted, rgba(0, 0, 0, 0.5));
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.08));
}
.for-you-events {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.for-you-event {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.05));
}
.for-you-event:last-child {
  border-bottom: none;
}
.event-time {
  flex-shrink: 0;
  width: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--news-accent, #5c4033);
}
.event-title {
  flex: 1;
  font-size: 0.875rem;
  color: var(--news-text, #1a1a1a);
  line-height: 1.4;
}
.event-video {
  flex-shrink: 0;
  color: var(--news-accent, #5c4033);
  margin-left: 0.25rem;
}
/* For You - Pulse Section (Schedule & Inbox) */
.for-you-pulse {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.1));
}
.for-you-pulse .pulse-section {
  flex: 1;
  min-width: 0;
  background: var(--news-hover, rgba(0, 0, 0, 0.02));
  border-radius: 8px;
  padding: 1rem;
}
.for-you-pulse .pulse-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--news-text, #1a1a1a);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.08));
}
.for-you-pulse .calendar-events {
  display: flex;
  flex-direction: column;
}
.for-you-pulse .email-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.for-you-pulse .email-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.for-you-pulse .email-item:hover {
  background: var(--news-hover, rgba(0, 0, 0, 0.03));
}
.for-you-pulse .email-item.unread {
  background: var(--news-hover, rgba(0, 0, 0, 0.02));
}
.for-you-pulse .email-sender {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--news-text, #1a1a1a);
}
.for-you-pulse .email-subject {
  font-size: 0.8rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Calendar Day Labels */
.event-day-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--news-accent, #5c4033);
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.08));
}
.event-day-label:first-child {
  margin-top: 0;
}
.event-day-label.tomorrow,
.event-day-label.upcoming {
  color: var(--news-muted, rgba(0, 0, 0, 0.5));
}
/* Event Item in Grouped View */
.calendar-events .event-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
}
.calendar-events .event-time {
  flex-shrink: 0;
  min-width: 75px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--news-accent, #5c4033);
}
.calendar-events .event-title {
  flex: 1;
  font-size: 0.8rem;
  color: var(--news-text, #1a1a1a);
  line-height: 1.3;
}
/* Email List */
.for-you-email-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.for-you-email {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.for-you-email:hover {
  background: var(--news-hover, rgba(0, 0, 0, 0.03));
}
.for-you-email.unread {
  background: var(--news-hover, rgba(0, 0, 0, 0.02));
}
.email-from {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--news-text, #1a1a1a);
}
.email-subject {
  font-size: 0.8rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Important/Priority Email */
.email-item.important {
  background: var(--news-hover, rgba(0, 0, 0, 0.02));
  border-left: 2px solid var(--news-accent, #5c4033);
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}
.email-item.important .email-sender::before {
  content: '★ ';
  color: var(--news-accent, #5c4033);
}
/* News Briefing Section */
.for-you-news {
  flex: 1;
}
.for-you-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--news-accent, #5c4033);
}
.for-you-news-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--news-accent, #5c4033);
  margin: 0;
}
.for-you-news-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.for-you-news-actions .for-you-timestamp {
  font-size: 0.75rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.4));
  margin-right: 0.25rem;
}
.for-you-news-actions .for-you-timestamp.stale {
  color: var(--news-warning, #b45309);
  font-style: italic;
}
.for-you-news-actions .action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--news-hover, rgba(92, 64, 51, 0.1));
  border: 1px solid var(--news-border, rgba(92, 64, 51, 0.25));
  border-radius: 6px;
  color: var(--news-accent, #5c4033);
  cursor: pointer;
  transition: all 0.15s ease;
}
.for-you-news-actions .action-btn:hover {
  background: var(--news-accent, #5c4033);
  color: white;
  border-color: var(--news-accent, #5c4033);
}
.for-you-news-actions .action-btn.active {
  background: var(--news-accent, #5c4033);
  color: white;
  border-color: var(--news-accent, #5c4033);
}
.for-you-news-actions .action-btn.spinning svg {
  animation: spin 1s linear infinite;
}
.for-you-news-actions .action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.for-you-news-body {
  min-height: 200px;
}
/* For You briefing text */
.for-you-text {
  line-height: 1.7;
  color: var(--news-text, #1a1a1a);
}
.for-you-text h1,
.for-you-text h2 {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  color: var(--news-heading, #1a1a1a);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.for-you-text h1:first-child,
.for-you-text h2:first-child {
  margin-top: 0;
}
.for-you-text h2 {
  font-size: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.1));
}
/* Empty state */
.for-you-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  gap: 0.5rem;
}
.for-you-empty p {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.1rem;
  color: var(--news-text, #1a1a1a);
  margin: 0;
}
.for-you-empty span {
  font-size: 0.875rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.4));
}
.generate-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--news-accent, #5c4033);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.generate-btn:hover {
  background: var(--news-accent-hover, #4a3328);
  transform: translateY(-1px);
}
.generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
/* Footer */
.for-you-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--news-border, rgba(0, 0, 0, 0.08));
  font-size: 0.75rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.4));
  text-align: center;
}
/* Debug Panel - Dark glassmorphism style */
.for-you-debug {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}
.for-you-debug .debug-section {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.for-you-debug .debug-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.for-you-debug h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.for-you-debug h4 svg {
  opacity: 0.6;
}
.for-you-debug .debug-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}
.for-you-debug .debug-stats span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.for-you-debug .debug-context {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.for-you-debug details {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.for-you-debug details[open] {
  background: rgba(255, 255, 255, 0.03);
}
.for-you-debug summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  padding: 0.6rem 0.75rem;
  transition: background 0.15s ease;
}
.for-you-debug summary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.95);
}
.for-you-debug summary::marker {
  color: rgba(255, 255, 255, 0.4);
}
.for-you-debug pre {
  margin: 0;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.7rem;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}
.for-you-debug pre::-webkit-scrollbar {
  width: 6px;
}
.for-you-debug pre::-webkit-scrollbar-track {
  background: transparent;
}
.for-you-debug pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.for-you-debug .debug-prompt {
  max-height: 400px;
}
/* Category stats in Brave section */
.for-you-debug .debug-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}
.for-you-news-actions .action-btn.active {
  background: var(--news-accent, #8b6914);
  color: white;
}
/* Dark mode / newspaper theme adjustments */
.news-panel.newspaper .for-you-layout {
  --news-text: #1a1a1a;
  --news-heading: #1a1a1a;
  --news-muted: rgba(0, 0, 0, 0.5);
  --news-border: rgba(0, 0, 0, 0.1);
  --news-hover: rgba(0, 0, 0, 0.03);
  --news-accent: #5c4033;
  --news-accent-hover: #4a3328;
}
/* Fullscreen dark mode */
.news-panel.fullscreen .for-you-layout {
  --news-text: rgba(255, 255, 255, 0.9);
  --news-heading: rgba(255, 255, 255, 0.95);
  --news-muted: rgba(255, 255, 255, 0.5);
  --news-border: rgba(255, 255, 255, 0.1);
  --news-hover: rgba(255, 255, 255, 0.05);
  --news-accent: #c9a227;
  --news-accent-hover: #b8922a;
}
.news-panel.fullscreen .generate-btn {
  background: #c9a227;
}
.news-panel.fullscreen .generate-btn:hover {
  background: #b8922a;
}
/* @keyframes spin is already defined elsewhere */
/* ============================================
   Search Section Styles
   ============================================ */
.search-section .section-header span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.search-body {
  padding: 1rem;
}
.search-input-container {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.search-input:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
body.light .search-input {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
}
body.light .search-input:focus {
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.05);
}
body.light .search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.search-btn {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.3);
  border-color: rgba(56, 189, 248, 0.3);
}
.search-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.search-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.6);
}
body.light .search-loading {
  color: rgba(0, 0, 0, 0.6);
}
.search-results {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.5rem;
}
.search-result-item {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.1s;
  border-radius: 4px;
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
body.light .search-result-item {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.light .search-result-item:hover {
  background: rgba(0, 0, 0, 0.02);
}
.search-result-title {
  display: inline;
  font-size: 0.82rem;
  font-weight: 500;
  color: #38bdf8;
  text-decoration: none;
  line-height: 1.3;
}
.search-result-title:hover {
  text-decoration: underline;
}
.search-result-snippet {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0.1rem 0 0 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.light .search-result-snippet {
  color: rgba(0, 0, 0, 0.45);
}
.search-result-url {
  display: none;
}
body.light .search-result-url {
  color: rgba(0, 0, 0, 0.3);
}
.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}
body.light .search-empty {
  color: rgba(0, 0, 0, 0.4);
}
/* Search Agents Grid */
.search-agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.search-agent-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
}
.search-agent-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.search-agent-section-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.search-agent-section-emoji {
  font-size: 0.9rem;
}
.search-agent-section-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.search-agent-section-count {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 8px;
  margin-left: 0.25rem;
}
.search-agent-edit-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.search-agent-edit-btn:hover {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}
.search-agent-section-items {
  display: flex;
  flex-direction: column;
}
.search-compact-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.1s;
}
.search-compact-item:last-child {
  border-bottom: none;
}
.search-compact-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.search-compact-title {
  font-size: 0.78rem;
  color: #7dd3fc;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-compact-age {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Agent empty/loading states */
.search-agent-empty {
  padding: 0.5rem 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3);
}
.search-agent-loading {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.3rem 0;
}
.search-agent-loading .skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  animation: shimmer 1.5s infinite;
}
.search-agent-loading .skeleton-line.long { width: 90%; }
.search-agent-loading .skeleton-line.medium { width: 65%; }
.search-agent-loading .skeleton-line.short { width: 40%; }
@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
body.light .search-agent-empty {
  color: rgba(0, 0, 0, 0.35);
}
body.light .search-agent-loading .skeleton-line {
  background: rgba(0, 0, 0, 0.06);
}
.news-panel.newspaper .search-agent-empty {
  color: rgba(0, 0, 0, 0.35);
}
.news-panel.newspaper .search-agent-loading .skeleton-line {
  background: rgba(0, 0, 0, 0.05);
}
/* Add agent card */
.search-agent-add-section {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 80px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.78rem;
  font-family: inherit;
  transition: all 0.15s;
}
.search-agent-add-section:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.02);
}
/* Light theme */
body.light .search-agent-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .search-agent-section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .search-agent-section-name {
  color: rgba(0, 0, 0, 0.85);
}
body.light .search-agent-section-count {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.05);
}
body.light .search-agent-edit-btn {
  color: rgba(0, 0, 0, 0.25);
}
body.light .search-agent-edit-btn:hover {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.06);
}
body.light .search-compact-item {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
body.light .search-compact-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .search-compact-title {
  color: #0284c7;
}
body.light .search-compact-age {
  color: rgba(0, 0, 0, 0.35);
}
body.light .search-agent-add-section {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.3);
}
body.light .search-agent-add-section:hover {
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.02);
}
/* Newspaper theme */
.news-panel.newspaper .search-agent-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.news-panel.newspaper .search-agent-section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.news-panel.newspaper .search-agent-section-name {
  color: #1a1a1a;
}
.news-panel.newspaper .search-agent-section-count {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.04);
}
.news-panel.newspaper .search-agent-edit-btn {
  color: rgba(0, 0, 0, 0.25);
}
.news-panel.newspaper .search-agent-edit-btn:hover {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.05);
}
.news-panel.newspaper .search-compact-item {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
.news-panel.newspaper .search-compact-item:hover {
  background: rgba(0, 0, 0, 0.02);
}
.news-panel.newspaper .search-compact-title {
  color: #0c4a6e;
}
.news-panel.newspaper .search-compact-age {
  color: rgba(0, 0, 0, 0.35);
}
.news-panel.newspaper .search-agent-add-section {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.3);
}
.news-panel.newspaper .search-agent-add-section:hover {
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.5);
}
/* Legacy curated search results — keep for search-result-age */
.search-result-age {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 0.5rem;
}
body.light .search-result-age {
  color: rgba(0, 0, 0, 0.35);
}
/* Search Agents */
.search-agents-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.search-agent-pill {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.search-agent-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}
.search-agent-pill.add {
  border-style: dashed;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.35rem 0.6rem;
}
.search-agent-pill.add:hover {
  color: rgba(255, 255, 255, 0.7);
}
.search-agent-pill-emoji {
  font-size: 0.85rem;
}
.search-agent-pill-name {
  font-weight: 500;
}
body.light .search-agent-pill {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}
body.light .search-agent-pill:hover {
  background: rgba(0, 0, 0, 0.08);
}
.news-panel.newspaper .search-agent-pill {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
  color: #333;
}
.news-panel.newspaper .search-agent-pill:hover {
  background: rgba(0, 0, 0, 0.06);
}
/* Agent editor */
.search-agent-editor {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.search-agent-editor h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}
.search-agent-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.search-agent-form-row {
  display: flex;
  gap: 0.5rem;
}
.search-agent-input,
.search-agent-textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-family: inherit;
}
.search-agent-input:focus,
.search-agent-textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.search-agent-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.search-agent-form-actions {
  display: flex;
  gap: 0.5rem;
}
.search-agent-btn {
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.search-agent-btn.save {
  background: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-light);
}
.search-agent-btn.save:hover {
  background: rgba(var(--accent-rgb), 0.5);
}
.search-agent-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}
.search-agent-btn.delete {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  margin-left: auto;
}
.search-agent-btn.delete:hover {
  background: rgba(239, 68, 68, 0.4);
}
body.light .search-agent-editor {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .search-agent-editor h4 {
  color: rgba(0, 0, 0, 0.8);
}
body.light .search-agent-input,
body.light .search-agent-textarea {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.9);
}
.news-panel.newspaper .search-agent-editor {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
.news-panel.newspaper .search-agent-editor h4 {
  color: #333;
}
.news-panel.newspaper .search-agent-input,
.news-panel.newspaper .search-agent-textarea {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #333;
}
/* ============================================
   Events Section Styles
   ============================================ */
.events-section .section-header span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.events-body {
  padding: 1rem;
}
.events-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.6);
}
body.light .events-loading {
  color: rgba(0, 0, 0, 0.6);
}
.events-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.events-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.events-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.light .events-group-title {
  color: rgba(0, 0, 0, 0.8);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.events-date-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.5rem;
}
.events-date-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.25rem;
}
body.light .events-date-label {
  color: rgba(0, 0, 0, 0.5);
}
.event-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background 0.2s;
}
.event-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
body.light .event-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
.event-time {
  font-size: 0.8rem;
  font-weight: 500;
  color: #f97316;
  min-width: 60px;
  flex-shrink: 0;
}
.event-title {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}
body.light .event-title {
  color: rgba(0, 0, 0, 0.9);
}
.task-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background 0.2s;
}
.task-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
body.light .task-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
.task-item svg {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}
.task-item svg.task-done {
  color: #4ade80;
}
body.light .task-item svg {
  color: rgba(0, 0, 0, 0.4);
}
.task-title {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}
.task-title.completed {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.4);
}
body.light .task-title {
  color: rgba(0, 0, 0, 0.9);
}
body.light .task-title.completed {
  color: rgba(0, 0, 0, 0.4);
}
.events-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}
body.light .events-empty {
  color: rgba(0, 0, 0, 0.4);
}
/* Newspaper theme styles for Search and Events */
.news-panel.newspaper .search-section,
.news-panel.newspaper .events-section {
  background: rgba(255, 251, 240, 0.98);
}
.news-panel.newspaper .search-section .section-header,
.news-panel.newspaper .events-section .section-header {
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.news-panel.newspaper .search-input {
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.8);
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a;
  caret-color: #1a1a1a;
  outline: none;
}
.news-panel.newspaper .search-input:focus {
  border-color: rgba(0, 0, 0, 0.35) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  outline: none !important;
  box-shadow: none !important;
}
.news-panel.newspaper .search-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.news-panel.newspaper .search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .search-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.newspaper .search-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
}
.news-panel.newspaper .search-result-item {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.news-panel.newspaper .search-result-item:hover {
  background: rgba(0, 0, 0, 0.02);
}
.news-panel.newspaper .search-result-title {
  color: #0c4a6e;
}
.news-panel.newspaper .search-result-snippet {
  color: rgba(0, 0, 0, 0.55);
}
.news-panel.newspaper .search-result-url {
  color: rgba(0, 0, 0, 0.35);
}
.news-panel.newspaper .events-group-title {
  color: #1a1a1a;
  border-bottom-color: rgba(0, 0, 0, 0.15);
}
.news-panel.newspaper .events-date-label {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.newspaper .event-title,
.news-panel.newspaper .task-title {
  color: #1a1a1a;
}
.news-panel.newspaper .task-title.completed {
  color: rgba(0, 0, 0, 0.4);
}
/* Fullscreen mode styles */
.news-panel.fullscreen .search-section,
.news-panel.fullscreen .events-section {
  background: transparent;
}
.news-panel.fullscreen .search-section .section-header span:first-child,
.news-panel.fullscreen .events-section .section-header span:first-child {
  font-size: 1.2rem;
}
/* ============================================
   STORY THREADS
   ============================================ */
.stories-section-noheader {
  padding-top: 0.5rem;
}
.stories-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 8px;
}
.stories-action-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.stories-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.stories-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.stories-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}
.stories-body {
  padding: 0.75rem 1rem;
}
/* Three-column layout: agents sidebar (left) + feed (center) + discover sidebar (right) */
.stories-three-col {
  display: flex;
  gap: 0;
  align-items: flex-start;
  height: 100%;
}
/* Left agents sidebar */
.stories-agents-sidebar {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 8px 8px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: visible;
  max-height: 100%;
}
.agents-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}
.agents-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.agents-sidebar-add {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.agents-sidebar-add:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.agents-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
  width: 100%;
  text-align: left;
}
.agents-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.agents-sidebar-item.active {
  background: rgba(var(--accent-rgb), 0.12);
}
.agents-sidebar-item.active .agents-sidebar-name {
  color: var(--accent);
  font-weight: 600;
}
.agents-sidebar-item.active .agent-status-ring {
  border-color: var(--accent) !important;
}
.agents-sidebar-all {
  margin-bottom: 4px;
  opacity: 0.7;
}
.agents-sidebar-all:hover {
  opacity: 1;
}
.agents-sidebar-name {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.agents-sidebar-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.agents-sidebar-item-wrapper {
  position: relative;
}
.agents-sidebar-item.archived {
  opacity: 0.45;
}
/* Agent context menu */
.agents-sidebar-menu {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 4px;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  min-width: 120px;
}
.agents-sidebar-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}
.agents-sidebar-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}
.agents-menu-danger:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}
.agents-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 2px 0;
}
.agents-menu-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px 2px;
}
.agents-menu-frequency {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 2px 6px 4px;
}
.agents-freq-option {
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  gap: 0 !important;
}
.agents-freq-option:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.agents-freq-option.active {
  color: var(--accent, #a78bfa) !important;
  background: rgba(var(--accent-rgb, 167, 139, 250), 0.12) !important;
  border-color: rgba(var(--accent-rgb, 167, 139, 250), 0.25) !important;
}
/* Feed scanning bar */
.feed-scanning-bar {
  position: relative;
  height: 28px;
  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feed-scanning-bar-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.15), transparent);
  animation: feed-scan-slide 1.5s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes feed-scan-slide {
  0% { left: -30%; }
  100% { left: 100%; }
}
.feed-scanning-bar-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: rgba(var(--accent-rgb), 0.8);
  z-index: 1;
}
/* Create agent dialog */
.create-agent-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(4px);
}
.create-agent-dialog {
  background: rgba(28, 28, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 20px 24px;
  width: 420px;
  max-width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.create-agent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}
.create-agent-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 14px;
  line-height: 1.4;
}
.create-agent-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
}
.create-agent-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.create-agent-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.create-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.create-agent-cancel {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  cursor: pointer;
}
.create-agent-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}
.create-agent-submit {
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.create-agent-submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
}
.create-agent-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.agents-sidebar-archived-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  margin-top: 4px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.agents-sidebar-archived-toggle:hover {
  color: rgba(255, 255, 255, 0.7);
}
.agents-sidebar-archived-count {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0.6;
}
.agents-sidebar-item.archived {
  opacity: 0.5;
}
.agents-sidebar-item.archived:hover {
  opacity: 0.75;
}
.stories-col-feed {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
}
/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
  .stories-three-col {
    flex-direction: column;
  }
  .stories-agents-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    max-height: none;
    padding: 8px 0;
  }
}
/* Story list */
.stories-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.story-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  color: inherit;
  width: 100%;
  font: inherit;
}
.story-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.story-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.story-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.story-card-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.95);
}
.story-status-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
}
.story-status-badge.small {
  font-size: 0.6rem;
  padding: 1px 5px;
}
.story-card-meta {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  padding-left: 16px;
}
/* Agent avatars */
.agent-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
}
/* Agents bar — like Instagram stories / Twitter avatar row */
.stories-agents-bar {
  display: flex;
  gap: 12px;
  padding: 8px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.stories-agents-bar::-webkit-scrollbar {
  display: none;
}
.agent-follow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  min-width: 56px;
  color: inherit;
  font: inherit;
}
.agent-follow-item:hover .agent-name {
  color: rgba(255, 255, 255, 0.9);
}
.agent-follow-item.active {
  opacity: 1;
}
.agent-follow-item.active .agent-avatar-wrapper {
  transform: scale(1.1);
}
.agent-follow-item.active .agent-status-ring {
  border-width: 3px;
  border-color: var(--accent) !important;
}
.agent-follow-item.active .agent-name {
  color: var(--accent);
  font-weight: 600;
}
.agent-clear-filter {
  opacity: 0.5;
}
.agent-clear-filter:hover {
  opacity: 0.8;
}
.agent-avatar-wrapper {
  position: relative;
}
.agent-avatar-wrapper.scanning .agent-avatar {
  animation: agent-pulse 1.5s ease-in-out infinite;
}
.agent-avatar-wrapper.scanning .agent-status-ring {
  border-color: var(--accent) !important;
  animation: agent-ring-spin 1.2s linear infinite;
  border-top-color: transparent !important;
}
@keyframes agent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes agent-ring-spin {
  to { transform: rotate(360deg); }
}
.agent-status-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid;
}
.agent-name {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}
/* Story detail — fill parent chain so header can pin */
.newspaper-body:has(.stories-detail-view) {
  overflow: hidden !important;
}
.newspaper-flow:has(.stories-detail-view) {
  flex: 1;
  min-height: 0;
}
.content-grid:has(.stories-detail-view) {
  flex: 1;
  min-height: 0;
}
.stories-detail-view {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  flex-shrink: 1 !important;
  min-height: 0 !important;
}
.stories-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.stories-back-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.stories-back-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}
.stories-detail-title {
  flex: 1;
  font-weight: 600;
}
.stories-detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Analyze dialog */
.analyze-dialog { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(var(--accent-rgb), 0.04); flex-shrink: 0; }
.analyze-dialog-header { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: rgba(var(--accent-rgb), 0.8); margin-bottom: 8px; }
.analyze-dialog-close { margin-left: auto; background: none; border: none; color: rgba(255, 255, 255, 0.4); cursor: pointer; padding: 2px; border-radius: 4px; display: flex; }
.analyze-dialog-close:hover { color: rgba(255, 255, 255, 0.7); }
.analyze-dialog-input { width: 100%; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: rgba(255, 255, 255, 0.85); padding: 8px 10px; font-size: 0.8rem; font-family: inherit; resize: none; outline: none; box-sizing: border-box; }
.analyze-dialog-input:focus { border-color: rgba(var(--accent-rgb), 0.3); }
.analyze-dialog-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.analyze-dialog-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.analyze-dialog-cancel { background: none; border: none; color: rgba(255, 255, 255, 0.4); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 0.75rem; }
.analyze-dialog-cancel:hover { color: rgba(255, 255, 255, 0.6); }
.analyze-dialog-submit { background: rgba(var(--accent-rgb), 0.15); border: 1px solid rgba(var(--accent-rgb), 0.3); color: rgba(var(--accent-rgb), 0.9); padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.analyze-dialog-submit:hover { background: rgba(var(--accent-rgb), 0.25); }
.scan-result-toast {
  padding: 6px 14px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  flex-shrink: 0;
}
.feed-scan-toast {
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
  background: rgba(var(--accent-rgb), 0.06);
  color: rgba(var(--accent-rgb), 0.8);
  margin-bottom: 8px;
  animation: toast-fade-in 0.3s ease;
}
@keyframes toast-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.news-panel.newspaper .scan-result-toast {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.news-panel.newspaper .feed-scan-toast {
  color: rgba(139, 87, 42, 0.7);
  background: rgba(139, 87, 42, 0.04);
  border-color: rgba(139, 87, 42, 0.12);
}
.news-panel.newspaper .feed-new-header {
  color: rgba(139, 87, 42, 0.75);
}
.news-panel.newspaper .feed-new-dot {
  background: #8B572A;
}
.news-panel.newspaper .feed-item.feed-item-new {
  border-left-color: rgba(139, 87, 42, 0.3);
}
.news-panel.newspaper .feed-old-divider span {
  color: rgba(60, 42, 33, 0.3);
}
.news-panel.newspaper .feed-old-divider::after {
  background: rgba(60, 42, 33, 0.08);
}
.stories-detail-body {
  padding: 1rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
/* Two-column layout */
.stories-detail-columns {
  display: flex;
  gap: 1rem;
  height: 100%;
}
.stories-col-timeline {
  flex: 1;
  min-width: 0;
}
.stories-col-context {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Summary */
.story-summary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
}
.story-summary h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 8px;
}
.story-summary p {
  margin: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.story-updated {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
}
/* Background context */
.story-background {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
}
.story-background h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 8px;
}
.story-background p {
  margin: 0;
  font-size: inherit;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
}
/* Tags section */
.story-tags-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.story-tags-group h4 {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 6px;
}
/* Key actors & keywords */
.story-actors,
.story-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.story-actor-tag {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  color: rgba(96, 165, 250, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.2);
  font-weight: 500;
}
.story-keyword-tag {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.story-keyword-tag.ai-keyword {
  background: rgba(var(--accent-rgb), 0.08);
  color: rgba(var(--accent-rgb), 0.8);
  border-color: rgba(var(--accent-rgb), 0.2);
}
.story-tags-group h4 svg { vertical-align: -1px; }
.keyword-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
}
.story-keyword-tag:hover .keyword-remove-btn {
  opacity: 0.6;
}
.keyword-remove-btn:hover {
  opacity: 1 !important;
  color: #ef4444;
}
.story-keyword-add {
  display: inline-flex;
}
.keyword-add-input,
.keyword-add-input:focus,
.keyword-add-input:focus-visible,
.keyword-add-input:active {
  outline: 0 none transparent !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  --input-focus-border: transparent;
}
.keyword-add-input {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  -webkit-appearance: none;
  width: 80px;
  font-family: inherit;
  transition: width 0.2s, border-color 0.15s, background 0.15s;
}
.keyword-add-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.65rem;
}
.keyword-add-input:focus {
  border-color: rgba(255, 255, 255, 0.25);
  border-style: solid;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  width: 120px;
}
/* Timeline */
.story-timeline {
  margin-top: 0;
}
.story-timeline h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 12px;
}
.story-timeline-empty {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 0;
}
.story-timeline-entries {
  display: flex;
  flex-direction: column;
}
.timeline-group {
  margin-bottom: 4px;
}
.timeline-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-left: 2px;
}
.timeline-group-time {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  font-weight: 500;
}
.timeline-group-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.story-timeline-entry {
  display: flex;
  gap: 12px;
  min-height: 60px;
}
.timeline-entry-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
  flex-shrink: 0;
}
.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  flex-shrink: 0;
}
.timeline-dot.scan {
  background: transparent;
}
.timeline-dot.analysis {
  background: rgba(var(--accent-rgb), 0.5);
  border-color: var(--accent);
  border-radius: 3px;
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
}
.timeline-line {
  flex: 1;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}
.timeline-entry-content {
  flex: 1;
  padding-bottom: 16px;
}
.timeline-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.timeline-time {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}
.timeline-significance {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.timeline-analysis-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.timeline-headline {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}
.timeline-details {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}
.timeline-insight {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: rgba(var(--accent-rgb), 0.8);
  line-height: 1.5;
  font-style: italic;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.timeline-insight svg {
  flex-shrink: 0;
  margin-top: 2px;
}
/* Analysis markdown content */
.timeline-analysis-content {
  margin: 4px 0 6px;
  font-size: inherit;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}
.timeline-analysis-content .analysis-heading {
  font-size: 1.05em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin: 12px 0 4px;
}
.timeline-analysis-content .analysis-heading:first-child {
  margin-top: 0;
}
.timeline-analysis-content .analysis-paragraph {
  margin: 0 0 8px;
}
.timeline-analysis-content .analysis-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 12px 0;
}
.news-panel.newspaper .timeline-analysis-content {
  color: rgba(0, 0, 0, 0.6);
}
.news-panel.newspaper .timeline-analysis-content .analysis-heading {
  color: rgba(0, 0, 0, 0.8);
}
.news-panel.newspaper .timeline-analysis-content .analysis-divider {
  border-top-color: rgba(0, 0, 0, 0.1);
}
.timeline-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.timeline-source-link {
  font-size: 0.7rem;
  color: rgba(56, 189, 248, 0.7);
  text-decoration: none;
}
.timeline-source-link:hover {
  color: #38bdf8;
  text-decoration: underline;
}
/* Create form */
.story-create-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.story-create-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.story-create-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.story-create-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.story-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}
.story-create-cancel {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}
.story-create-cancel:hover {
  color: rgba(255, 255, 255, 0.7);
}
.story-create-submit {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.story-create-submit:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.95);
}
.story-create-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Tracking section header */
.stories-tracking-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin: 16px 0 8px;
}
/* Empty state */
.stories-empty {
  text-align: center;
  padding: 32px 16px;
  color: rgba(255, 255, 255, 0.4);
}
.stories-empty svg {
  opacity: 0.3;
  margin-bottom: 8px;
}
.stories-empty p {
  margin: 4px 0;
}
.stories-empty-hint {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
}
.stories-create-btn {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stories-create-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.95);
}
/* Quick Follow Topics */
.quick-follow-section {
  margin-bottom: 16px;
}
.quick-follow-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quick-follow-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.quick-follow-chip:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(255, 255, 255, 0.9);
}
.quick-follow-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.quick-follow-chip svg {
  opacity: 0.5;
}
.quick-follow-chip:hover svg {
  opacity: 1;
}
/* Loading */
.stories-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  color: rgba(255, 255, 255, 0.4);
  gap: 12px;
}
.stories-loading p {
  margin: 0;
  font-size: 0.85rem;
}
.news-panel.newspaper .stories-loading {
  color: rgba(0, 0, 0, 0.4);
}
/* Stories Feed */
/* Feed — social-style posts */
.stories-feed {
  margin-top: 0;
}
.stories-feed-list {
  display: flex;
  flex-direction: column;
}
/* "N new updates since last visit" header */
.feed-new-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.85);
}
.feed-new-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* New item left accent */
.feed-item.feed-item-new {
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
}
/* "Earlier" divider between new and old */
.feed-old-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin: 4px 0;
}
.feed-old-divider span {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.feed-old-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
/* Each feed item is a post with avatar */
.feed-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.feed-item:last-child {
  border-bottom: none;
}
.feed-item-avatar {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}
.feed-item-avatar-line {
  align-items: stretch;
  padding-top: 0;
}
.feed-thread-line {
  width: 2px;
  height: 100%;
  min-height: 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
}
.feed-item-main {
  flex: 1;
  min-width: 0;
}
.feed-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.feed-headline-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.feed-agent-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-agent-name:hover {
  color: rgba(255, 255, 255, 0.9);
}
.feed-item-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}
.feed-headline {
  margin: 0;
  font-size: 1.05em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.35;
}
.feed-analysis-header {
  margin: 2px 0 4px;
}
.feed-details {
  margin: 3px 0 0;
  font-size: 0.92em;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}
.feed-sources {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.feed-source-link {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.25);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.feed-source-link:hover {
  color: rgba(255, 255, 255, 0.6);
}
.feed-analysis-preview {
  font-size: 0.92em;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  line-height: 1.5;
  margin-top: 4px;
}
.feed-analysis-text {
  line-height: 1.65;
  white-space: pre-wrap;
}
.feed-analysis-text strong {
  color: rgba(255, 255, 255, 0.95);
}
/* Continuation posts — reduce visual gap when same agent */
.feed-item.feed-item-continuation {
  border-top: none;
  padding-top: 4px;
  margin-top: -4px;
}
/* Expandable feed items */
.feed-item.expandable {
  cursor: pointer;
}
.feed-item.expandable:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.feed-expand-hint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 8px;
  display: inline-block;
}
.feed-item.expandable:hover .feed-expand-hint {
  color: rgba(var(--accent-rgb), 0.7);
}
.feed-collapse-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: rgba(var(--accent-rgb), 0.6);
}
.feed-collapse-btn:hover {
  color: rgba(var(--accent-rgb), 0.9);
}
.feed-expanded-content {
  white-space: normal;
}
/* Post overlay dialog */
.feed-post-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.feed-post-dialog {
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  max-width: 680px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.feed-post-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.feed-post-dialog-agent {
  display: flex;
  align-items: center;
  gap: 10px;
}
.feed-post-dialog-agent .feed-agent-name {
  font-size: 0.9rem;
  display: block;
}
.feed-post-dialog-agent .feed-item-time {
  font-size: 0.75rem;
  display: block;
  margin-top: 2px;
}
.feed-post-dialog-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
}
.feed-post-dialog-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.feed-post-dialog-headline {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.feed-post-dialog-body {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.7;
}
.feed-post-dialog-body p {
  margin: 0 0 12px 0;
}
.feed-post-dialog-body strong {
  color: rgba(255, 255, 255, 0.95);
}
.feed-post-dialog-body h3 {
  color: rgba(255, 255, 255, 0.95);
  margin: 24px 0 12px 0;
  font-size: 1.05rem;
  line-height: 1.4;
}
.feed-post-dialog-body h4 {
  color: rgba(255, 255, 255, 0.9);
  margin: 20px 0 8px 0;
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.feed-post-dialog-body h5 {
  color: rgba(255, 255, 255, 0.85);
  margin: 16px 0 6px 0;
  font-size: 0.88rem;
}
.feed-post-dialog-body ul,
.feed-post-dialog-body ol {
  margin: 8px 0 12px 0;
  padding-left: 20px;
}
.feed-post-dialog-body li {
  margin-bottom: 6px;
  line-height: 1.6;
}
.feed-post-dialog-body hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 20px 0;
}
.analysis-list {
  margin: 8px 0 12px 0;
  padding-left: 20px;
}
.analysis-list li {
  margin-bottom: 4px;
  line-height: 1.6;
}
.analysis-subheading {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 16px 0 6px 0;
}
.feed-post-dialog-sources {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.feed-post-dialog-sources h4 {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px 0;
}
.feed-post-dialog-sources .feed-source-link {
  display: block;
  margin-bottom: 6px;
  max-width: none;
}
/* Spinning icon */
.spinning {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Newspaper theme overrides for stories */
.news-panel.newspaper .story-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
.news-panel.newspaper .story-card:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}
.news-panel.newspaper .story-card-title {
  color: #1a1a1a;
}
.news-panel.newspaper .story-card-meta {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .story-summary {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
.news-panel.newspaper .story-summary p {
  color: #1a1a1a;
}
.news-panel.newspaper .story-summary h4,
.news-panel.newspaper .story-timeline h4 {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.newspaper .timeline-headline {
  color: #1a1a1a;
}
.news-panel.newspaper .timeline-details {
  color: rgba(0, 0, 0, 0.6);
}
.news-panel.newspaper .timeline-time {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .story-create-input {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
}
.news-panel.newspaper .stories-empty {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .stories-empty-hint {
  color: rgba(0, 0, 0, 0.3);
}
/* Newspaper Feed */
.news-panel.newspaper .feed-item {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  padding: 18px 0;
}
.news-panel.newspaper .feed-thread-line {
  background: rgba(0, 0, 0, 0.08);
}
.news-panel.newspaper .feed-agent-name {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.newspaper .feed-agent-name:hover {
  color: rgba(0, 0, 0, 0.8);
}
.news-panel.newspaper .feed-item-time {
  color: rgba(0, 0, 0, 0.3);
}
.news-panel.newspaper .feed-headline {
  color: rgba(0, 0, 0, 0.85);
  font-family: 'Lora', 'Georgia', serif;
}
.news-panel.newspaper .feed-details {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.newspaper .feed-source-link {
  color: rgba(0, 0, 0, 0.25);
}
.news-panel.newspaper .feed-source-link:hover {
  color: rgba(0, 0, 0, 0.55);
}
.news-panel.newspaper .feed-analysis-preview {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.newspaper .feed-analysis-text strong {
  color: #1a1a1a;
}
.news-panel.newspaper .feed-item.expandable:hover {
  background: rgba(0, 0, 0, 0.03);
}
.news-panel.newspaper .feed-expand-hint {
  color: rgba(0, 0, 0, 0.25);
}
.news-panel.newspaper .feed-item.expandable:hover .feed-expand-hint {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.newspaper .feed-collapse-btn {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .feed-collapse-btn:hover {
  color: rgba(0, 0, 0, 0.7);
}
.news-panel.newspaper .feed-item.feed-item-continuation {
  border-top: none;
}
.news-panel.newspaper .feed-post-dialog {
  background: #f5f0e8;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
}
.news-panel.newspaper .feed-post-dialog-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .feed-post-dialog-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}
.news-panel.newspaper .feed-post-dialog-headline {
  color: #1a1a1a;
}
.news-panel.newspaper .feed-post-dialog-body {
  color: rgba(0, 0, 0, 0.75);
}
.news-panel.newspaper .feed-post-dialog-body strong {
  color: #1a1a1a;
}
.news-panel.newspaper .feed-post-dialog-body h3,
.news-panel.newspaper .feed-post-dialog-body h4,
.news-panel.newspaper .feed-post-dialog-body h5 {
  color: #1a1a1a;
}
.news-panel.newspaper .feed-post-dialog-body hr {
  border-top-color: rgba(0, 0, 0, 0.1);
}
.news-panel.newspaper .analysis-subheading {
  color: rgba(0, 0, 0, 0.8);
}
.news-panel.newspaper .feed-post-dialog-sources {
  border-top-color: rgba(0, 0, 0, 0.08);
}
.news-panel.newspaper .feed-post-dialog-sources h4 {
  color: rgba(0, 0, 0, 0.35);
}
.news-panel.newspaper .feed-post-overlay {
  background: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .agent-name {
  color: rgba(0, 0, 0, 0.45);
}
.news-panel.newspaper .agent-follow-item:hover .agent-name {
  color: rgba(0, 0, 0, 0.8);
}
.news-panel.newspaper .agent-follow-item.active .agent-name {
  color: #8B572A;
}
.news-panel.newspaper .agent-follow-item.active .agent-status-ring {
  border-color: #8B572A !important;
}
/* Newspaper theme — agents sidebar */
.news-panel.newspaper .stories-agents-sidebar {
  border-right-color: rgba(60, 42, 33, 0.1);
}
.news-panel.newspaper .agents-sidebar-header {
  color: rgba(60, 42, 33, 0.4);
}
.news-panel.newspaper .agents-sidebar-add {
  color: rgba(60, 42, 33, 0.4);
  border-color: rgba(60, 42, 33, 0.15);
}
.news-panel.newspaper .agents-sidebar-add:hover {
  color: rgba(60, 42, 33, 0.8);
  background: rgba(60, 42, 33, 0.06);
  border-color: rgba(60, 42, 33, 0.3);
}
.news-panel.newspaper .agents-sidebar-item:hover {
  background: rgba(60, 42, 33, 0.06);
}
.news-panel.newspaper .agents-sidebar-item.active {
  background: rgba(139, 87, 42, 0.08);
}
.news-panel.newspaper .agents-sidebar-item.active .agents-sidebar-name {
  color: #8B572A;
}
.news-panel.newspaper .agents-sidebar-item.active .agent-status-ring {
  border-color: #8B572A !important;
}
.news-panel.newspaper .agents-sidebar-name {
  color: rgba(60, 42, 33, 0.7);
}
.news-panel.newspaper .agents-sidebar-count {
  color: rgba(60, 42, 33, 0.35);
}
.news-panel.newspaper .agents-sidebar-menu {
  background: rgba(255, 252, 245, 0.97);
  border-color: rgba(60, 42, 33, 0.15);
}
.news-panel.newspaper .agents-sidebar-menu button {
  color: rgba(60, 42, 33, 0.75);
}
.news-panel.newspaper .agents-sidebar-menu button:hover {
  background: rgba(60, 42, 33, 0.06);
  color: rgba(60, 42, 33, 0.95);
}
.news-panel.newspaper .agents-menu-danger:hover {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.06) !important;
}
.news-panel.newspaper .agents-menu-divider {
  background: rgba(60, 42, 33, 0.1);
}
.news-panel.newspaper .agents-menu-label {
  color: rgba(60, 42, 33, 0.4);
}
.news-panel.newspaper .agents-freq-option {
  color: rgba(60, 42, 33, 0.5) !important;
  background: rgba(60, 42, 33, 0.04) !important;
  border-color: rgba(60, 42, 33, 0.08) !important;
}
.news-panel.newspaper .agents-freq-option:hover {
  color: rgba(60, 42, 33, 0.85) !important;
  background: rgba(60, 42, 33, 0.08) !important;
}
.news-panel.newspaper .agents-freq-option.active {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
}
.news-panel.newspaper .feed-scanning-bar {
  background: rgba(139, 87, 42, 0.04);
}
.news-panel.newspaper .feed-scanning-bar-progress {
  background: linear-gradient(90deg, transparent, rgba(139, 87, 42, 0.08), transparent);
}
.news-panel.newspaper .feed-scanning-bar-text {
  color: rgba(139, 87, 42, 0.6);
}
.news-panel.newspaper .create-agent-overlay {
  background: rgba(245, 240, 230, 0.6);
}
.news-panel.newspaper .create-agent-dialog {
  background: rgba(250, 247, 240, 0.99);
  border-color: rgba(60, 42, 33, 0.15);
  box-shadow: 0 8px 32px rgba(60, 42, 33, 0.15);
}
.news-panel.newspaper .create-agent-header {
  color: rgba(60, 42, 33, 0.9);
}
.news-panel.newspaper .create-agent-desc {
  color: rgba(60, 42, 33, 0.45);
}
.news-panel.newspaper .create-agent-input {
  background: rgba(60, 42, 33, 0.03);
  border-color: rgba(60, 42, 33, 0.12);
  color: rgba(60, 42, 33, 0.9);
}
.news-panel.newspaper .create-agent-input:focus {
  border-color: rgba(139, 87, 42, 0.4);
}
.news-panel.newspaper .create-agent-input::placeholder {
  color: rgba(60, 42, 33, 0.25);
}
.news-panel.newspaper .create-agent-cancel {
  border-color: rgba(60, 42, 33, 0.12);
  color: rgba(60, 42, 33, 0.5);
}
.news-panel.newspaper .create-agent-cancel:hover {
  background: rgba(60, 42, 33, 0.04);
  color: rgba(60, 42, 33, 0.7);
}
.news-panel.newspaper .create-agent-submit {
  background: rgba(139, 87, 42, 0.1);
  color: #8B572A;
}
.news-panel.newspaper .create-agent-submit:hover:not(:disabled) {
  background: rgba(139, 87, 42, 0.18);
}
.news-panel.newspaper .agents-sidebar-archived-toggle {
  color: rgba(60, 42, 33, 0.4);
  border-top-color: rgba(60, 42, 33, 0.1);
}
.news-panel.newspaper .agents-sidebar-archived-toggle:hover {
  color: rgba(60, 42, 33, 0.7);
}
.news-panel.newspaper .story-keyword-tag {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}
.news-panel.newspaper .story-create-form {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
.news-panel.newspaper .story-create-cancel {
  color: rgba(0, 0, 0, 0.35);
}
.news-panel.newspaper .story-create-cancel:hover {
  color: rgba(0, 0, 0, 0.6);
}
.news-panel.newspaper .stories-create-btn,
.news-panel.newspaper .story-create-submit {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}
.news-panel.newspaper .stories-create-btn:hover,
.news-panel.newspaper .story-create-submit:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
.news-panel.newspaper .stories-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .stories-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}
.news-panel.newspaper .timeline-dot {
  border-color: rgba(0, 0, 0, 0.25);
}
.news-panel.newspaper .timeline-line {
  background: rgba(0, 0, 0, 0.1);
}
.news-panel.newspaper .stories-tracking-header {
  color: rgba(0, 0, 0, 0.35);
}
.news-panel.newspaper .quick-follow-chip {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.55);
}
.news-panel.newspaper .quick-follow-chip:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.85);
}
/* Story detail - newspaper overrides */
.news-panel.newspaper .stories-detail-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.news-panel.newspaper .stories-back-btn {
  color: rgba(0, 0, 0, 0.5);
}
.news-panel.newspaper .stories-back-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.06);
}
.news-panel.newspaper .stories-detail-title {
  color: #1a1a1a;
}
.news-panel.newspaper .story-summary {
  background: none;
  border: none;
  border-left: 3px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  padding: 8px 16px;
  margin: 0;
}
.news-panel.newspaper .story-summary h4 {
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.news-panel.newspaper .story-summary p {
  color: rgba(0, 0, 0, 0.7);
  font-family: 'Lora', 'Georgia', serif;
  font-size: 0.88rem;
  line-height: 1.7;
  font-style: italic;
}
.news-panel.newspaper .story-updated {
  color: rgba(0, 0, 0, 0.3);
  font-style: normal;
  font-size: 0.65rem;
}
.news-panel.newspaper .story-background {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.news-panel.newspaper .story-background h4 {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .story-background p {
  color: rgba(0, 0, 0, 0.55);
}
.news-panel.newspaper .story-tags-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.news-panel.newspaper .story-tags-group h4 {
  color: rgba(0, 0, 0, 0.35);
}
.news-panel.newspaper .story-actor-tag {
  background: rgba(37, 99, 235, 0.08);
  color: rgba(37, 99, 235, 0.75);
  border-color: rgba(37, 99, 235, 0.15);
}
.news-panel.newspaper .story-keyword-tag {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.12);
}
.news-panel.newspaper .story-keyword-tag.ai-keyword {
  background: rgba(139, 87, 42, 0.08);
  color: rgba(139, 87, 42, 0.75);
  border-color: rgba(139, 87, 42, 0.2);
}
.news-panel.newspaper .keyword-add-input {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.45) !important;
  caret-color: rgba(0, 0, 0, 0.5) !important;
  border: 1px dashed rgba(0, 0, 0, 0.12) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.45) !important;
  -webkit-box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.news-panel.newspaper .keyword-add-input::placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.3) !important;
}
.news-panel.newspaper .keyword-add-input:focus,
.news-panel.newspaper .keyword-add-input:focus-visible,
.news-panel.newspaper .keyword-add-input:active {
  background: rgba(0, 0, 0, 0.04) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  border-style: solid !important;
  color: rgba(0, 0, 0, 0.6) !important;
  caret-color: rgba(0, 0, 0, 0.5) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.6) !important;
  -webkit-box-shadow: none !important;
}
.news-panel.newspaper .keyword-add-input:-webkit-autofill,
.news-panel.newspaper .keyword-add-input:-webkit-autofill:hover,
.news-panel.newspaper .keyword-add-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #eee4d2 inset !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.45) !important;
}
.news-panel.newspaper .timeline-group-time {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .timeline-group-line {
  background: rgba(0, 0, 0, 0.08);
}
.news-panel.newspaper .story-timeline h4 {
  color: rgba(0, 0, 0, 0.45);
}
.news-panel.newspaper .story-timeline-empty {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .timeline-headline {
  color: rgba(0, 0, 0, 0.85);
}
.news-panel.newspaper .timeline-details {
  color: rgba(0, 0, 0, 0.6);
}
.news-panel.newspaper .timeline-insight {
  color: rgba(139, 87, 42, 0.7);
}
.news-panel.newspaper .timeline-source-link {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .timeline-source-link:hover {
  color: rgba(0, 0, 0, 0.7);
}
.news-panel.newspaper .story-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
.news-panel.newspaper .story-card:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}
.news-panel.newspaper .story-card-title {
  color: #1a1a1a;
}
.news-panel.newspaper .story-card-meta {
  color: rgba(0, 0, 0, 0.4);
}
.news-panel.newspaper .analyze-dialog { background: rgba(139, 87, 42, 0.04); border-bottom-color: rgba(0, 0, 0, 0.06); }
.news-panel.newspaper .analyze-dialog-header { color: rgba(139, 87, 42, 0.7); }
.news-panel.newspaper .analyze-dialog-close { color: rgba(0, 0, 0, 0.3); }
.news-panel.newspaper .analyze-dialog-close:hover { color: rgba(0, 0, 0, 0.6); }
.news-panel.newspaper .analyze-dialog-input { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.8); }
.news-panel.newspaper .analyze-dialog-input:focus { border-color: rgba(139, 87, 42, 0.3); }
.news-panel.newspaper .analyze-dialog-input::placeholder { color: rgba(0, 0, 0, 0.3); }
.news-panel.newspaper .analyze-dialog-cancel { color: rgba(0, 0, 0, 0.4); }
.news-panel.newspaper .analyze-dialog-cancel:hover { color: rgba(0, 0, 0, 0.6); }
.news-panel.newspaper .analyze-dialog-submit { background: rgba(139, 87, 42, 0.08); border-color: rgba(139, 87, 42, 0.2); color: rgba(139, 87, 42, 0.8); }
.news-panel.newspaper .analyze-dialog-submit:hover { background: rgba(139, 87, 42, 0.15); }
/* ============================================
   YOUTUBE VIDEOS — Netflix-style rows
   ============================================ */
.videos-section {
  overflow: visible !important;
}
.videos-netflix {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 16px 0;
  overflow: visible;
}
.video-row {
  overflow: visible;
}
/* Scroll container with arrow buttons */
.video-row-container {
  position: relative;
}
.video-scroll-btn {
  position: absolute;
  top: 0;
  bottom: 40px; /* stop above the text info area */
  width: 28px;
  border: none;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.video-row-container:hover .video-scroll-btn {
  opacity: 1;
}
.video-scroll-btn.left {
  left: 0;
  background: linear-gradient(to right, rgba(245, 240, 230, 0.85) 40%, transparent);
  border-radius: 4px 0 0 4px;
}
.video-scroll-btn.right {
  right: 0;
  background: linear-gradient(to left, rgba(245, 240, 230, 0.85) 40%, transparent);
  border-radius: 0 4px 4px 0;
}
.video-scroll-btn:hover {
  color: rgba(0, 0, 0, 0.9);
}
/* Category grid layout (when viewing a single category) */
.videos-category-grid {
  padding: 16px 0;
}
.video-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 0 4px;
}
.video-grid-wrap .video-card-netflix {
  width: auto;
}
/* Time filter pills */
.video-time-filters {
  display: flex;
  gap: 6px;
  padding: 0 4px 12px;
}
.video-time-btn {
  padding: 4px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}
.video-time-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}
.video-time-btn.active {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
}
.news-panel:not(.newspaper) .video-time-btn { border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.45); }
.news-panel:not(.newspaper) .video-time-btn:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); }
.news-panel:not(.newspaper) .video-time-btn.active { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.85); }
/* Dark theme scroll buttons */
.news-panel:not(.newspaper) .video-scroll-btn { color: rgba(255, 255, 255, 0.7); }
.news-panel:not(.newspaper) .video-scroll-btn.left { background: linear-gradient(to right, rgba(30, 30, 40, 0.95) 60%, transparent); }
.news-panel:not(.newspaper) .video-scroll-btn.right { background: linear-gradient(to left, rgba(30, 30, 40, 0.95) 60%, transparent); }
.news-panel:not(.newspaper) .video-scroll-btn:hover { color: rgba(255, 255, 255, 0.95); }
/* Category row */
.video-row-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px 8px;
}
.video-row-title {
  font-family: 'Georgia', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.8);
}
.video-row-count {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.35);
  font-family: -apple-system, sans-serif;
}
.video-row-title-link:hover {
  text-decoration: underline;
}
.video-row-arrow {
  opacity: 0;
  color: rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s ease;
}
.video-row-header:hover .video-row-arrow {
  opacity: 1;
}
.news-panel:not(.newspaper) .video-row-arrow { color: rgba(255, 255, 255, 0.3); }
.video-cat-refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.35);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
  margin-left: auto;
}
.video-cat-refresh-btn:hover {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.05);
}
.video-cat-refresh-btn.refreshing svg {
  animation: spin 1s linear infinite;
}
.news-panel:not(.newspaper) .video-cat-refresh-btn {
  color: rgba(255, 255, 255, 0.35);
}
.news-panel:not(.newspaper) .video-cat-refresh-btn:hover {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
/* Horizontal scrolling row */
.video-row-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.video-row-scroll::-webkit-scrollbar {
  height: 4px;
}
.video-row-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.video-row-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}
.video-row-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}
.news-panel:not(.newspaper) .video-row-scroll {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.news-panel:not(.newspaper) .video-row-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}
.news-panel:not(.newspaper) .video-row-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Individual card */
.video-card-netflix {
  flex-shrink: 0;
  width: 220px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.video-card-netflix:hover {
  transform: scale(1.03);
}
.video-thumbnail-netflix {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}
.video-thumbnail-netflix img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.15s ease;
  color: white;
}
.video-card-netflix:hover .video-play-overlay {
  opacity: 1;
}
.video-info-netflix {
  padding: 6px 2px 0;
}
.video-title-netflix {
  font-family: -apple-system, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-meta-netflix {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Full-width player (when a video is selected) */
.video-player-fullwidth {
  padding: 8px 0;
}
.video-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  margin-bottom: 12px;
  transition: all 0.15s ease;
}
.video-back-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
.video-player-centered {
  max-width: 800px;
  margin: 0 auto;
}
.video-player-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}
.video-player-wrapper iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}
.video-player-loading {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-player-loading-icon {
  position: relative;
  z-index: 1;
  color: rgba(0, 0, 0, 0.2);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}
.news-panel:not(.newspaper) .video-player-wrapper { background: rgba(255, 255, 255, 0.05); }
.news-panel:not(.newspaper) .video-player-loading-icon { color: rgba(255, 255, 255, 0.15); }
.video-player-details {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
}
.video-player-title {
  font-family: 'Georgia', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.3;
}
.video-player-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  gap: 12px;
}
.video-player-meta {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.45);
}
.video-player-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.video-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 5px;
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.video-action-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.7);
}
.video-player-desc {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 8px;
  line-height: 1.5;
}
/* Related videos below player */
.video-related {
  margin-top: 8px;
}
.video-related-title {
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 12px;
}
.video-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.video-related-grid .video-card-netflix {
  width: auto;
}
.video-close-player {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  white-space: nowrap;
}
.video-close-player:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}
/* Newspaper-style loading indicator */
.videos-loading-newspaper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 4rem 2rem;
}
.videos-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.videos-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.videos-loading-text {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 0.02em;
}
.videos-loading-sub {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.35);
  font-style: italic;
}
.news-panel:not(.newspaper) .videos-loading-spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.4);
}
.news-panel:not(.newspaper) .videos-loading-text {
  color: rgba(255, 255, 255, 0.8);
}
.news-panel:not(.newspaper) .videos-loading-sub {
  color: rgba(255, 255, 255, 0.35);
}
/* Skeleton loading placeholders (legacy) */
.videos-skeleton .skeleton-card {
  pointer-events: none;
}
.skeleton-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.08);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}
.skeleton-info {
  padding: 6px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skeleton-text {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.news-panel:not(.newspaper) .skeleton-thumb { background: rgba(255, 255, 255, 0.08); }
.news-panel:not(.newspaper) .skeleton-text { background: rgba(255, 255, 255, 0.06); }
/* Dark theme overrides */
.news-panel:not(.newspaper) .video-row-title { color: rgba(255, 255, 255, 0.9); }
.news-panel:not(.newspaper) .video-row-count { color: rgba(255, 255, 255, 0.35); }
.news-panel:not(.newspaper) .video-title-netflix { color: rgba(255, 255, 255, 0.9); }
.news-panel:not(.newspaper) .video-meta-netflix { color: rgba(255, 255, 255, 0.4); }
.news-panel:not(.newspaper) .video-thumbnail-netflix { background: rgba(255, 255, 255, 0.05); }
.news-panel:not(.newspaper) .video-player-title { color: rgba(255, 255, 255, 0.9); }
.news-panel:not(.newspaper) .video-player-meta { color: rgba(255, 255, 255, 0.4); }
.news-panel:not(.newspaper) .video-close-player { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); }
.news-panel:not(.newspaper) .video-close-player:hover { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); }
.news-panel:not(.newspaper) .video-back-btn { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.news-panel:not(.newspaper) .video-back-btn:hover { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); }
.news-panel:not(.newspaper) .video-player-title { color: rgba(255, 255, 255, 0.9); }
.news-panel:not(.newspaper) .video-player-meta { color: rgba(255, 255, 255, 0.4); }
.news-panel:not(.newspaper) .video-player-desc { color: rgba(255, 255, 255, 0.45); }
.news-panel:not(.newspaper) .video-player-details { border-bottom-color: rgba(255, 255, 255, 0.08); }
.news-panel:not(.newspaper) .video-related-title { color: rgba(255, 255, 255, 0.7); }
.news-panel:not(.newspaper) .video-action-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); }
.news-panel:not(.newspaper) .video-action-btn:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }
/* Rhythm Panel (Daily Briefing) Styles */
/* Uses shared collapsible-panel styles from CommandCenterPanels.css */
/* Briefing body content */
.briefing-body {
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
body.light .briefing-body {
  color: rgba(0, 0, 0, 0.9);
}
.briefing-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 2rem;
}
body.light .briefing-loading {
  color: rgba(0, 0, 0, 0.7);
}
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
body.light .loading-spinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: var(--accent);
}
.briefing-fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, transparent, rgba(15, 15, 20, 0.95));
  pointer-events: none;
}
.briefing-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.6rem;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
body.light .briefing-expand-btn {
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}
.briefing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.light .briefing-footer {
  border-color: rgba(0, 0, 0, 0.06);
}
.briefing-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
body.light .briefing-meta {
  color: rgba(0, 0, 0, 0.7);
}
.progress-focus { color: #38bdf8; }
.progress-done { color: #4ade80; }
.progress-pending { color: #facc15; }
/* Refresh Button - matches shared icon button pattern */
.briefing-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.briefing-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}
.briefing-refresh-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.briefing-refresh-btn:disabled:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}
/* Briefing Actions (header buttons) */
.briefing-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
body.light .briefing-header,
body.light .briefing-footer {
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .briefing-header h2 {
  color: rgba(0, 0, 0, 0.85);
}
body.light .briefing-fade-overlay {
  background: linear-gradient(to bottom, transparent, #FFFFFF);
}
body.light .briefing-refresh-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
body.light .briefing-refresh-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.8);
}
body.zen .briefing-refresh-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
}
body.zen .briefing-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}
body.batman .briefing-refresh-btn {
  background: rgba(0, 100, 200, 0.1);
  border-color: rgba(0, 100, 200, 0.2);
  color: rgba(255, 255, 255, 0.5);
}
body.batman .briefing-refresh-btn:hover {
  background: rgba(0, 100, 200, 0.2);
  border-color: rgba(0, 100, 200, 0.3);
  color: rgba(255, 255, 255, 0.9);
}
/* Target Lanes Panel */
.target-lanes-panel {
  padding: 2rem !important;
  padding-top: 3rem !important;
}
.lanes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 1400px) {
  .lanes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .lanes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .lanes-grid {
    grid-template-columns: 1fr;
  }
}
.lane-card {
  padding: 20px;
}
.lane-card h3 {
  margin: 0 0 16px;
  font-size: 1.05rem;
}
.lane-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lane-section {
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 15, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .lane-section {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
body.zen .lane-section {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}
.lane-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  opacity: 0.6;
  margin-bottom: 6px;
}
/* ===========================================
   WEEKLY OBJECTIVES PANEL (Command Center)
   Uses shared collapsible-panel styles from CommandCenterPanels.css
   =========================================== */
.objectives-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.objectives-list-wrapper,
.objectives-content {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
  padding: 0.25rem;
  margin: -0.25rem;
}
.objectives-list-wrapper:hover,
.objectives-content:hover {
  background: rgba(15, 15, 20, 0.75);
}
body.light .objectives-list-wrapper:hover,
body.light .objectives-content:hover {
  background: rgba(0, 0, 0, 0.03);
}
.objective-item {
  margin: 0;
  padding: 0;
}
.objective-item.checked .objective-text {
  opacity: 0.5;
  text-decoration: line-through;
}
.objective-content {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.3rem 0;
  line-height: 1.5;
}
.objective-bullet {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.objective-bullet.done {
  color: #22c55e;
}
body.light .objective-bullet {
  color: rgba(0, 0, 0, 0.35);
}
.objective-text {
  flex: 1;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}
body.light .objective-text {
  color: rgba(0, 0, 0, 0.8);
}
.objective-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.objectives-content {
  padding: 0.5rem;
}
.objectives-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
.objectives-empty svg {
  opacity: 0.5;
}
.objectives-empty p {
  margin: 0;
  font-size: 0.9rem;
}
.objectives-empty {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.objectives-empty:hover {
  background: rgba(15, 15, 20, 0.75);
}
.objectives-empty-hint {
  font-size: 0.75rem;
  opacity: 0.6;
  font-style: italic;
}
body.light .objectives-empty:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .objectives-empty {
  color: rgba(0, 0, 0, 0.5);
}
.set-objectives-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.set-objectives-link:hover {
  background: rgba(251, 146, 60, 0.25);
}
body.light .set-objectives-link {
  background: rgba(249, 115, 22, 0.1);
  color: #ea580c;
}
body.light .set-objectives-link:hover {
  background: rgba(249, 115, 22, 0.2);
}
.objectives-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}
body.light .objectives-loading {
  color: rgba(0, 0, 0, 0.5);
}
.week-badge {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  margin-left: auto;
  margin-right: 0.5rem;
}
body.light .week-badge {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.05);
}
/* -----------------------------------------------------------------------------
 * 4. SYSTEM - Overlays, modals, player, timer
 * -------------------------------------------------------------------------- */
/* AI Chat uses global --accent / --accent-rgb from themes.css (set via Settings > Accent) */
/* AI Context Mention & Hashtag Menus - Hardened */
.ai-chat-mention-menu {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--os-context-bg) !important;
  border: 2px solid var(--accent) !important;
  border-radius: 12px !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5) !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  animation: slideUpFade 0.15s ease-out !important;
}
body.light .ai-chat-mention-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15) !important;
}
.ai-chat-mention-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
body.light .ai-chat-mention-header {
  background: rgba(0, 0, 0, 0.02) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}
.ai-chat-mention-list {
  max-height: 300px !important;
  overflow-y: auto !important;
  padding: 0.5rem 0 !important;
}
.ai-chat-mention-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 0.6rem 1rem !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.85rem !important;
  text-align: left !important;
  cursor: pointer !important;
}
.ai-chat-mention-item:hover,
.ai-chat-mention-item.selected {
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: #fff !important;
}
body.light .ai-chat-mention-item {
  color: rgba(0, 0, 0, 0.75) !important;
}
body.light .ai-chat-mention-item:hover,
body.light .ai-chat-mention-item.selected {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent) !important;
}
.ai-chat-mention-title {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ai-chat-mention-type {
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 0.1rem 0.4rem !important;
  border-radius: 4px !important;
}
body.light .ai-chat-mention-type {
  color: rgba(0, 0, 0, 0.4) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
/* News item styling */
.ai-chat-mention-item.news-item {
  border-left: 2px solid #c9a227 !important;
}
.ai-chat-mention-item.news-item:hover,
.ai-chat-mention-item.news-item.selected {
  background: rgba(201, 162, 39, 0.12) !important;
  border-left-color: #e6c74c !important;
}
.ai-chat-mention-type.news-type {
  background: rgba(201, 162, 39, 0.2) !important;
  color: #c9a227 !important;
}
body.light .ai-chat-mention-item.news-item {
  border-left-color: #8b6914 !important;
}
body.light .ai-chat-mention-item.news-item:hover,
body.light .ai-chat-mention-item.news-item.selected {
  background: rgba(139, 105, 20, 0.1) !important;
}
body.light .ai-chat-mention-type.news-type {
  background: rgba(139, 105, 20, 0.15) !important;
  color: #8b6914 !important;
}
.ai-chat-mention-hint {
  padding: 0.6rem 1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.35) !important;
  display: flex !important;
  gap: 1rem !important;
}
body.light .ai-chat-mention-hint {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.4) !important;
}
/* AI Chat Overlay & Panel */
.ai-chat-overlay {
  position: fixed !important;
  top: 28px !important;
  right: 0 !important;
  bottom: 80px !important;
  left: auto !important;
  /* Width is set via inline style for dynamic sizing */
  max-width: 100vw !important;
  z-index: 99000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s, width 0.15s ease-out;
  overflow: hidden;
}
/* Drop below maximized app windows */
.ai-chat-overlay.app-maximized {
  z-index: 10002;
}
.ai-chat-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* Focus mode specific - ensure proper positioning */
.ai-chat-overlay.focus-mode,
.ai-chat-overlay.thoughts-focus-mode,
.ai-chat-overlay.daily-focus-mode,
.ai-chat-overlay.activity-focus-mode,
.ai-chat-overlay.notes-focus-mode {
  /* Width is set via inline style */
  left: auto !important;
  right: 0 !important;
}
/* When maximized, overlay takes full width */
.ai-chat-overlay.maximized,
.ai-chat-overlay.thoughts-focus-mode.maximized,
.ai-chat-overlay.daily-focus-mode.maximized,
.ai-chat-overlay.activity-focus-mode.maximized,
.ai-chat-overlay.notes-focus-mode.maximized {
  width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
}
/* Standalone mode - fills the entire browser tab */
.ai-chat-overlay.standalone {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
}
/* When maximized in focus mode, overlay takes full width */
.ai-chat-overlay.focus-mode.maximized {
  width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
}
.ai-chat-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  /* Glassmorphism — uses OS glass variables so gray theme applies */
  background: var(--os-glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-left: 1px solid var(--os-glass-border);
  box-shadow:
    -8px 0 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
  pointer-events: auto;
  overflow: hidden;
  box-sizing: border-box;
  /* Ensure all children are constrained */
  contain: layout style;
}
/* Top shine effect for glassmorphism - matching desktop widgets */
.ai-chat-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
/* Ensure all direct children of panel are properly constrained */
.ai-chat-panel > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}
/* Ensure all descendants are contained within their parent width */
.ai-chat-panel * {
  box-sizing: border-box;
  min-width: 0;
}
.ai-chat-panel.open {
  transform: translateX(0) !important;
}
/* Bonded window state - matching accent border on left edge */
.ai-chat-panel.open.has-bonded-window {
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  position: relative;
  box-shadow:
    -8px 0 32px rgba(0, 0, 0, 0.4),
    inset 12px 0 40px -30px rgba(var(--accent-rgb), 0.08);
}
/* Soft glow on the left edge */
.ai-chat-panel.open.has-bonded-window::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-rgb), 0.1) 0%,
    rgba(var(--accent-rgb), 0.4) 50%,
    rgba(var(--accent-rgb), 0.1) 100%
  );
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
  animation: panelBondEdgeGlow 4s ease-in-out infinite;
  z-index: 100;
  pointer-events: none;
}
/* Resize grip handle on AI panel left edge */
.ai-panel-resize-grip {
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: col-resize;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-panel-resize-grip::before {
  content: '';
  width: 6px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  transition: all 0.15s ease;
}
.ai-panel-resize-grip:hover::before {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
  width: 8px;
  height: 64px;
}
.has-bonded-window .ai-panel-resize-grip::before {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}
body.light .ai-panel-resize-grip::before {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .ai-panel-resize-grip:hover::before {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: none;
}
@keyframes panelBondEdgeGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.2);
    opacity: 0.7;
  }
  50% {
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.35);
    opacity: 1;
  }
}
/* Smooth transition when bond is released */
.ai-chat-panel.open:not(.has-bonded-window) {
  transition: 
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s,
    box-shadow 0.3s ease,
    border-left 0.3s ease;
}
/* Focus mode specific - constrain panel width */
.ai-chat-panel.focus-mode,
.ai-chat-panel.thoughts-focus-mode,
.ai-chat-panel.daily-focus-mode,
.ai-chat-panel.activity-focus-mode,
.ai-chat-panel.notes-focus-mode {
  width: 100% !important;
  /* max-width is controlled by parent overlay's inline style */
}
.ai-chat-panel.maximized {
  width: 100% !important;
  max-width: 100% !important;
  border-left: none;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.85) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
}
/* Maximized overrides focus-mode width */
.ai-chat-panel.focus-mode.maximized {
  max-width: 100% !important;
}
.ai-chat-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 0.75rem 0 1rem;
  background: transparent;
  border-bottom: 1px solid var(--os-divider);
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.ai-chat-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--os-text-muted);
  letter-spacing: 0.3px;
}
.ai-chat-title svg {
  opacity: 0.5;
}
.ai-chat-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}
.ai-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-chat-btn:hover {
  background: var(--os-hover-bg);
  color: var(--os-text-primary);
}
.ai-chat-btn.active { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.ai-chat-btn.clear:hover { color: #f87171; background: rgba(239, 68, 68, 0.1); }
.ai-chat-btn.maximize:hover { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.ai-chat-btn.close:hover { color: var(--os-text-primary); background: var(--os-hover-bg); }
/* ── Bond Banner ────────────────────────────────────────────────────── */
.ai-chat-bonded-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: rgba(var(--accent-rgb), 0.22);
  border-top: 1px solid rgba(var(--accent-rgb), 0.45);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
  padding: 0.55rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  animation: bondedRowIn 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}
/* Shimmer sweep on entry */
.ai-chat-bonded-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(var(--accent-rgb), 0.12) 50%,
    transparent 70%
  );
  animation: bondRowShimmer 0.6s ease-out forwards;
  pointer-events: none;
}
/* Left accent bar */
.ai-chat-bonded-row::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-rgb), 0.6) 0%,
    rgba(var(--accent-rgb), 1) 50%,
    rgba(var(--accent-rgb), 0.6) 100%
  );
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
  animation: bondBarPulse 3s ease-in-out infinite;
}
@keyframes bondedRowIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bondRowShimmer {
  from { transform: translateX(-100%); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
@keyframes bondBarPulse {
  0%, 100% { opacity: 0.7; box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4); }
  50%       { opacity: 1;   box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7); }
}
/* Live dot */
.ai-chat-bond-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 1);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.8);
  flex-shrink: 0;
  animation: bondLiveDot 2s ease-in-out infinite;
}
@keyframes bondLiveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}
/* Label area: dot + "BONDED" label + app chip */
.ai-chat-bonded-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-left: 0.35rem;
}
.ai-chat-bond-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}
/* App chip */
.ai-chat-bond-app-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  background: rgba(var(--accent-rgb), 0.18);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-light, rgba(var(--accent-rgb), 0.95));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ai-chat-bond-app-chip:hover {
  background: rgba(var(--accent-rgb), 0.28);
  border-color: rgba(var(--accent-rgb), 0.55);
}
.ai-chat-bond-app-chip svg {
  flex-shrink: 0;
  color: var(--accent);
}
.ai-chat-bond-app-chip .bond-chip-close {
  display: flex;
  align-items: center;
  margin-left: 0.15rem;
  opacity: 0.5;
  transition: opacity 0.12s;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}
.ai-chat-bond-app-chip:hover .bond-chip-close {
  opacity: 1;
}
/* Multi-Bond Tabs */
.ai-chat-bonded-tabs {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  overflow-x: auto;
  min-width: 0;
  padding-left: 0.25rem;
  position: relative;
  z-index: 1;
}
.ai-chat-bonded-tabs::-webkit-scrollbar { display: none; }
.ai-chat-bonded-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.75);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-chat-bonded-tab svg { color: rgba(var(--accent-rgb), 0.6); }
.ai-chat-bonded-tab:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-light);
}
.ai-chat-bonded-tab.active {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--accent-lighter, #fff);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}
.ai-chat-bonded-tab.active svg { color: var(--accent-light); }
.ai-chat-bonded-tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 0.1rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: inherit;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.12s;
}
.ai-chat-bonded-tab:hover .ai-chat-bonded-tab-close { opacity: 1; }
.ai-chat-bonded-tab-close:hover { background: rgba(255,255,255,0.15); color: #fff; opacity: 1; }
.ai-chat-bonded-tab.active .ai-chat-bonded-tab-close:hover { background: rgba(var(--accent-rgb), 0.3); }
/* Multi-bond layout tweak */
.ai-chat-bonded-row.multi-bond { padding: 0.45rem 0.6rem; }
.ai-chat-bonded-row.multi-bond::after { display: none; }
/* Light theme */
body.light .ai-chat-bonded-row {
  background: rgba(var(--accent-rgb), 0.15);
  border-top-color: rgba(var(--accent-rgb), 0.35);
  border-bottom-color: rgba(var(--accent-rgb), 0.2);
}
body.light .ai-chat-bond-label { color: rgba(var(--accent-rgb), 0.6); }
body.light .ai-chat-bond-live-dot { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.6); }
body.light .ai-chat-bond-app-chip {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}
body.light .ai-chat-bond-app-chip:hover {
  background: rgba(var(--accent-rgb), 0.18);
}
body.light .ai-chat-bonded-tab {
  background: rgba(var(--accent-rgb), 0.07);
  border-color: rgba(var(--accent-rgb), 0.18);
  color: rgba(var(--accent-rgb), 0.7);
}
body.light .ai-chat-bonded-tab:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
body.light .ai-chat-bonded-tab.active {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--accent-dark);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2);
}
body.light .ai-chat-bonded-tab-close:hover { background: rgba(0,0,0,0.1); color: #000; }
body.light .ai-chat-bonded-tab.active .ai-chat-bonded-tab-close:hover { background: rgba(var(--accent-rgb), 0.2); }
/* Bonded Action Button */
.ai-chat-bonded-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-chat-bonded-action:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-light);
}
.ai-chat-bonded-action:active {
  transform: scale(0.95);
}
body.light .ai-chat-bonded-action {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
body.light .ai-chat-bonded-action:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-dark);
}
/* Context Inspector — fullscreen dialog */
.ai-context-inspector-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ai-context-inspector-dialog {
  width: 720px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 30, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.ai-context-inspector-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.ai-context-inspector-header svg:first-child {
  color: var(--accent);
  opacity: 0.8;
}
.ai-context-inspector-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.ai-context-inspector-meta {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}
.ai-context-inspector-copy {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  margin-left: 4px;
  transition: all 0.15s ease;
}
.ai-context-inspector-copy:hover {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
.ai-context-inspector-copy.copied {
  color: #4ade80;
}
.ai-context-inspector-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  margin-left: 4px;
}
.ai-context-inspector-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.ai-context-inspector-body {
  flex: 1;
  overflow: auto;
  padding: 18px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.ai-context-inspector-body::-webkit-scrollbar {
  width: 6px;
}
.ai-context-inspector-body::-webkit-scrollbar-track {
  background: transparent;
}
.ai-context-inspector-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
.ai-context-inspector-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}
/* Context tab — markdown rendering */
.ai-context-inspector-context {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ai-context-inspector-context .markdown-block {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.ai-context-inspector-context .markdown-block h1,
.ai-context-inspector-context .markdown-block h2,
.ai-context-inspector-context .markdown-block h3,
.ai-context-inspector-context .markdown-block h4 {
  color: rgba(255, 255, 255, 0.92);
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  font-weight: 600;
}
.ai-context-inspector-context .markdown-block h1 { font-size: 16px; }
.ai-context-inspector-context .markdown-block h2 { font-size: 14px; }
.ai-context-inspector-context .markdown-block h3 { font-size: 13px; }
.ai-context-inspector-context .markdown-block p {
  margin: 0.4em 0;
}
.ai-context-inspector-context .markdown-block ul,
.ai-context-inspector-context .markdown-block ol {
  padding-left: 1.4em;
  margin: 0.3em 0;
}
.ai-context-inspector-context .markdown-block li {
  margin: 0.15em 0;
}
.ai-context-inspector-context .markdown-block code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent-light);
}
.ai-context-inspector-context .markdown-block pre {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0.5em 0;
  overflow-x: auto;
}
.ai-context-inspector-context .markdown-block pre code {
  background: none;
  padding: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}
.ai-context-inspector-context .markdown-block strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
.ai-context-inspector-context .markdown-block em {
  color: rgba(255, 255, 255, 0.65);
}
.ai-context-inspector-context .markdown-block hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 1em 0;
}
.ai-context-inspector-context .markdown-block blockquote {
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  padding-left: 12px;
  margin: 0.5em 0;
  color: rgba(255, 255, 255, 0.6);
}
/* Inspector section labels & loading */
.ai-context-inspector-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 10px;
  margin-top: 8px;
}
.ai-context-inspector-section-label:first-child {
  margin-top: 0;
}
.ai-context-inspector-loading {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  padding: 40px 0;
  text-align: center;
}
.ai-context-inspector-context hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 16px 0;
}
/* Inspector Tabs */
.ai-context-inspector-tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 2px;
}
.ai-context-inspector-tab {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-context-inspector-tab:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}
.ai-context-inspector-tab.active {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.1);
}
/* Bond Tab Content */
.ai-context-inspector-bond {
  white-space: normal;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.bond-section {
  margin-bottom: 18px;
}
.bond-section:last-child {
  margin-bottom: 0;
}
.bond-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 6px;
}
.bond-section-value {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}
.bond-section-pre {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'SF Mono', 'Fira Code', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 200px;
  overflow: auto;
}
.bond-section-instructions {
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 240px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.bond-section-instructions::-webkit-scrollbar {
  width: 5px;
}
.bond-section-instructions::-webkit-scrollbar-track {
  background: transparent;
}
.bond-section-instructions::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.bond-section-instructions .markdown-block {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}
.bond-section-instructions .markdown-block h1,
.bond-section-instructions .markdown-block h2,
.bond-section-instructions .markdown-block h3 {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  font-weight: 600;
}
.bond-section-instructions .markdown-block h2 { font-size: 13px; }
.bond-section-instructions .markdown-block h3 { font-size: 12px; }
.bond-section-instructions .markdown-block p {
  margin: 0.3em 0;
}
.bond-section-instructions .markdown-block ul,
.bond-section-instructions .markdown-block ol {
  padding-left: 1.3em;
  margin: 0.2em 0;
}
.bond-section-instructions .markdown-block li {
  margin: 0.1em 0;
}
.bond-section-instructions .markdown-block code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent-light);
}
.bond-section-instructions .markdown-block strong {
  color: rgba(255, 255, 255, 0.85);
}
.bond-tools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bond-tool-item {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.bond-tool-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.bond-tool-type {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.bond-tool-type.read {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}
.bond-tool-type.write {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}
.bond-tool-type.action {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}
.bond-tool-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.bond-tool-badge {
  font-size: 9px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}
.bond-tool-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.45;
}
.bond-tool-params {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.bond-tool-param {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}
.bond-tool-param code {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
}
.bond-tool-param-type {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
}
/* Bond Channel (Inspector App tab) */
.bond-channel-cooldowns {
  padding: 6px 12px;
}
.bond-channel-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.72rem;
}
.bond-channel-type {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 1px 6px;
  border-radius: 3px;
}
.bond-channel-time {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.68rem;
}
.bond-channel-history {
  padding: 6px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.bond-channel-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.7rem;
  color: rgba(var(--accent-rgb), 0.5);
}
.bond-channel-msg svg {
  opacity: 0.4;
  flex-shrink: 0;
}
.bond-channel-msg-type {
  color: rgba(255, 255, 255, 0.5);
}
.bond-channel-msg-time {
  color: rgba(255, 255, 255, 0.25);
  margin-left: auto;
  font-size: 0.65rem;
}
body.light .bond-channel-type {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
body.light .bond-channel-time {
  color: rgba(0, 0, 0, 0.35);
}
body.light .bond-channel-msg {
  color: rgba(var(--accent-rgb), 0.5);
}
body.light .bond-channel-msg-type {
  color: rgba(0, 0, 0, 0.5);
}
body.light .bond-channel-msg-time {
  color: rgba(0, 0, 0, 0.25);
}
/* Inspector Groups & Collapsible Sections */
.inspector-group {
  margin-bottom: 16px;
}
.inspector-group:last-child {
  margin-bottom: 0;
}
.inspector-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}
.inspector-group-header svg {
  opacity: 0.7;
}
.inspector-group-meta {
  margin-left: auto;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.inspector-group-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s ease;
}
.inspector-group-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
.inspector-section {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  margin-bottom: 4px;
  overflow: hidden;
}
.inspector-section:last-child {
  margin-bottom: 0;
}
.inspector-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.15s ease;
  user-select: none;
}
.inspector-section-header:hover {
  background: rgba(255, 255, 255, 0.06);
}
.inspector-section-header svg:first-child {
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}
.inspector-section-title {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspector-section-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.inspector-section-meta svg {
  color: rgba(255, 255, 255, 0.2);
}
.inspector-section-source {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  font-family: 'SF Mono', 'Fira Code', monospace;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspector-section-chars {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}
.inspector-section-copy {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: all 0.15s ease;
}
.inspector-section-header:hover .inspector-section-copy {
  opacity: 1;
}
.inspector-section-copy:hover {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}
.inspector-section-copy.copied {
  opacity: 1;
  color: #4ade80;
}
.inspector-section-content {
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.inspector-section-content::-webkit-scrollbar {
  width: 5px;
}
.inspector-section-content::-webkit-scrollbar-track {
  background: transparent;
}
.inspector-section-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.inspector-section-content .markdown-block {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}
.inspector-section-content .markdown-block h1,
.inspector-section-content .markdown-block h2,
.inspector-section-content .markdown-block h3 {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  font-weight: 600;
}
.inspector-section-content .markdown-block h1 { font-size: 14px; }
.inspector-section-content .markdown-block h2 { font-size: 13px; }
.inspector-section-content .markdown-block h3 { font-size: 12px; }
.inspector-section-content .markdown-block p {
  margin: 0.3em 0;
}
.inspector-section-content .markdown-block ul,
.inspector-section-content .markdown-block ol {
  padding-left: 1.3em;
  margin: 0.2em 0;
}
.inspector-section-content .markdown-block li {
  margin: 0.1em 0;
}
.inspector-section-content .markdown-block code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent-light);
}
.inspector-section-content .markdown-block pre {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0.5em 0;
  overflow-x: auto;
}
.inspector-section-content .markdown-block pre code {
  background: none;
  padding: 0;
  font-size: 10.5px;
}
.inspector-section-content .markdown-block strong {
  color: rgba(255, 255, 255, 0.85);
}
.inspector-section-content .markdown-block hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 10px 0;
}
.inspector-section-content .markdown-block blockquote {
  border-left: 2px solid rgba(var(--accent-rgb), 0.3);
  padding-left: 10px;
  margin: 0.4em 0;
  color: rgba(255, 255, 255, 0.55);
}
/* Light theme — Inspector section labels */
body.light .ai-context-inspector-section-label {
  color: var(--accent);
}
body.light .ai-context-inspector-loading {
  color: rgba(0, 0, 0, 0.35);
}
body.light .ai-context-inspector-context hr {
  border-top-color: rgba(0, 0, 0, 0.08);
}
/* Light theme — Inspector Tabs & Bond */
body.light .ai-context-inspector-tabs {
  background: rgba(0, 0, 0, 0.05);
}
body.light .ai-context-inspector-tab {
  color: rgba(0, 0, 0, 0.4);
}
body.light .ai-context-inspector-tab:hover {
  color: rgba(0, 0, 0, 0.65);
  background: rgba(0, 0, 0, 0.04);
}
body.light .ai-context-inspector-tab.active {
  color: rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.08);
}
body.light .bond-section-label {
  color: rgba(0, 0, 0, 0.4);
}
body.light .bond-section-value {
  color: rgba(0, 0, 0, 0.75);
}
body.light .bond-section-pre {
  color: rgba(0, 0, 0, 0.65);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .bond-section-instructions {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
body.light .bond-section-instructions .markdown-block {
  color: rgba(0, 0, 0, 0.6);
}
body.light .bond-section-instructions .markdown-block h1,
body.light .bond-section-instructions .markdown-block h2,
body.light .bond-section-instructions .markdown-block h3 {
  color: rgba(0, 0, 0, 0.8);
}
body.light .bond-section-instructions .markdown-block code {
  background: rgba(0, 0, 0, 0.06);
  color: var(--accent);
}
body.light .bond-section-instructions .markdown-block strong {
  color: rgba(0, 0, 0, 0.8);
}
body.light .bond-tool-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .bond-tool-name {
  color: rgba(0, 0, 0, 0.85);
}
body.light .bond-tool-desc {
  color: rgba(0, 0, 0, 0.5);
}
body.light .bond-tool-param {
  background: rgba(0, 0, 0, 0.04);
}
body.light .bond-tool-param code {
  color: rgba(0, 0, 0, 0.65);
}
body.light .bond-tool-param-type {
  color: rgba(0, 0, 0, 0.35);
}
body.light .ai-context-inspector-overlay {
  background: rgba(0, 0, 0, 0.3);
}
body.light .ai-context-inspector-dialog {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
}
body.light .ai-context-inspector-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .ai-context-inspector-header svg:first-child {
  color: var(--accent);
}
body.light .ai-context-inspector-title {
  color: rgba(0, 0, 0, 0.85);
}
body.light .ai-context-inspector-meta {
  color: rgba(0, 0, 0, 0.35);
}
body.light .ai-context-inspector-copy {
  color: rgba(0, 0, 0, 0.3);
}
body.light .ai-context-inspector-copy:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}
body.light .ai-context-inspector-copy.copied {
  color: #16a34a;
}
body.light .ai-context-inspector-close {
  color: rgba(0, 0, 0, 0.35);
}
body.light .ai-context-inspector-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}
body.light .ai-context-inspector-body {
  color: rgba(0, 0, 0, 0.65);
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
body.light .ai-context-inspector-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}
body.light .ai-context-inspector-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.18);
}
body.light .ai-context-inspector-context .markdown-block {
  color: rgba(0, 0, 0, 0.7);
}
body.light .ai-context-inspector-context .markdown-block h1,
body.light .ai-context-inspector-context .markdown-block h2,
body.light .ai-context-inspector-context .markdown-block h3,
body.light .ai-context-inspector-context .markdown-block h4 {
  color: rgba(0, 0, 0, 0.85);
}
body.light .ai-context-inspector-context .markdown-block code {
  background: rgba(0, 0, 0, 0.06);
  color: var(--accent);
}
body.light .ai-context-inspector-context .markdown-block pre {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .ai-context-inspector-context .markdown-block pre code {
  color: rgba(0, 0, 0, 0.65);
}
body.light .ai-context-inspector-context .markdown-block strong {
  color: rgba(0, 0, 0, 0.85);
}
body.light .ai-context-inspector-context .markdown-block em {
  color: rgba(0, 0, 0, 0.55);
}
body.light .ai-context-inspector-context .markdown-block hr {
  border-top-color: rgba(0, 0, 0, 0.08);
}
body.light .ai-context-inspector-context .markdown-block blockquote {
  border-left-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(0, 0, 0, 0.5);
}
/* Light theme — Inspector Groups & Sections */
body.light .inspector-group-header {
  color: var(--accent);
  border-bottom-color: rgba(var(--accent-rgb), 0.12);
}
body.light .inspector-group-meta {
  color: rgba(0, 0, 0, 0.3);
}
body.light .inspector-group-toggle {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.35);
}
body.light .inspector-group-toggle:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
body.light .inspector-section {
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .inspector-section-header {
  background: rgba(0, 0, 0, 0.02);
}
body.light .inspector-section-header:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .inspector-section-header svg:first-child {
  color: rgba(0, 0, 0, 0.3);
}
body.light .inspector-section-title {
  color: rgba(0, 0, 0, 0.75);
}
body.light .inspector-section-meta svg {
  color: rgba(0, 0, 0, 0.2);
}
body.light .inspector-section-source {
  color: rgba(0, 0, 0, 0.25);
}
body.light .inspector-section-chars {
  color: rgba(0, 0, 0, 0.2);
}
body.light .inspector-section-copy {
  color: rgba(0, 0, 0, 0.2);
}
body.light .inspector-section-copy:hover {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.06);
}
body.light .inspector-section-copy.copied {
  color: #16a34a;
}
body.light .inspector-section-content {
  border-top-color: rgba(0, 0, 0, 0.04);
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
body.light .inspector-section-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}
body.light .inspector-section-content .markdown-block {
  color: rgba(0, 0, 0, 0.65);
}
body.light .inspector-section-content .markdown-block h1,
body.light .inspector-section-content .markdown-block h2,
body.light .inspector-section-content .markdown-block h3 {
  color: rgba(0, 0, 0, 0.8);
}
body.light .inspector-section-content .markdown-block code {
  background: rgba(0, 0, 0, 0.06);
  color: var(--accent);
}
body.light .inspector-section-content .markdown-block pre {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .inspector-section-content .markdown-block pre code {
  color: rgba(0, 0, 0, 0.65);
}
body.light .inspector-section-content .markdown-block strong {
  color: rgba(0, 0, 0, 0.8);
}
body.light .inspector-section-content .markdown-block hr {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .inspector-section-content .markdown-block blockquote {
  border-left-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(0, 0, 0, 0.5);
}
/* Bonded Row with Vibe Mode Active */
.ai-chat-bonded-row.vibe-active {
  background: linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.15) 0%,
    rgba(139, 92, 246, 0.1) 30%,
    rgba(236, 72, 153, 0.08) 70%,
    rgba(16, 185, 129, 0.12) 100%
  );
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #10b981, #8b5cf6, #ec4899, #10b981) 1;
  overflow: visible;
  padding: 0.65rem 0.85rem;
  position: relative;
}
.ai-chat-bonded-row.vibe-active::after {
  background: linear-gradient(
    180deg,
    #10b981 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
  width: 3px;
  box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.5);
}
/* Vibe Mode Indicator - shown when vibe mode is active */
.ai-chat-vibe-indicator {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  border: none;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.9) 0%,
    rgba(139, 92, 246, 0.85) 50%,
    rgba(236, 72, 153, 0.8) 100%
  );
  color: white;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  position: relative;
  overflow: visible;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Glow ring */
.ai-chat-vibe-indicator::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    #10b981 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
  z-index: -1;
  filter: blur(6px);
  opacity: 0.7;
}
.ai-chat-vibe-indicator:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.ai-chat-vibe-indicator svg {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}
body.light .ai-chat-bonded-row.vibe-active {
  background: linear-gradient(
    90deg,
    rgba(5, 150, 105, 0.12) 0%,
    rgba(124, 58, 237, 0.08) 30%,
    rgba(219, 39, 119, 0.06) 70%,
    rgba(5, 150, 105, 0.1) 100%
  );
  border-image: linear-gradient(90deg, #059669, #7c3aed, #db2777, #059669) 1;
}
body.light .ai-chat-bonded-row.vibe-active::after {
  background: linear-gradient(
    180deg,
    #059669 0%,
    #7c3aed 50%,
    #db2777 100%
  );
  box-shadow: 0 0 6px 2px rgba(5, 150, 105, 0.4);
}
body.light .ai-chat-vibe-indicator {
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, 0.95) 0%,
    rgba(124, 58, 237, 0.9) 50%,
    rgba(219, 39, 119, 0.85) 100%
  );
  color: white;
}
body.light .ai-chat-vibe-indicator::before {
  background: linear-gradient(
    135deg,
    #059669 0%,
    #7c3aed 50%,
    #db2777 100%
  );
}
/* Tool-only messages (no text content, just action indicator) - compact inline row */
.ai-chat-message.tool-only {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.ai-chat-message.tool-only .ai-chat-message-avatar {
  align-self: center;
  opacity: 0.5;
  margin-bottom: 0;
}
.ai-chat-message.tool-only .ai-chat-message-content {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ai-chat-message.tool-only .ai-chat-tool-calls {
  margin-bottom: 0;
}
/* Tool Call Results - Show tool name and message */
.ai-chat-tool-calls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.ai-chat-tool-result {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-chat-tool-result.success {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}
.ai-chat-tool-result.error {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.12);
}
.ai-chat-tool-result:hover {
  transform: none;
}
.ai-chat-tool-result.success:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.2);
}
.ai-chat-tool-result.error:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}
.ai-chat-tool-result-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.ai-chat-tool-result.success .ai-chat-tool-result-header {
  color: var(--accent-light);
}
.ai-chat-tool-result.success .ai-chat-tool-result-header svg {
  color: var(--accent);
}
.ai-chat-tool-result.error .ai-chat-tool-result-header {
  color: #fca5a5;
}
.ai-chat-tool-result.error .ai-chat-tool-result-header svg {
  color: #f87171;
}
.ai-chat-tool-name {
  text-transform: capitalize;
}
.ai-chat-tool-duration {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
/* Inline message for simple results */
.ai-chat-tool-inline-message {
  margin-left: 0.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
}
.ai-chat-tool-inline-message::before {
  content: '→ ';
  opacity: 0.5;
}
/* Rich message with markdown */
.ai-chat-tool-rich-message {
  padding: 0.5rem 0 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
.ai-chat-tool-rich-message p {
  margin: 0.25rem 0;
}
.ai-chat-tool-rich-message strong {
  color: rgba(255, 255, 255, 0.95);
}
.ai-chat-tool-rich-message ul,
.ai-chat-tool-rich-message ol {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}
.ai-chat-tool-rich-message li {
  margin: 0.15rem 0;
}
/* Rich result styling */
.ai-chat-tool-result.rich {
  padding: 0.6rem 0.75rem;
}
.ai-chat-tool-result.rich .ai-chat-tool-result-header {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.25rem;
}
.ai-chat-tool-result-message {
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  padding-left: 1.1rem;
}
.ai-chat-tool-result-message.error {
  color: #fca5a5;
  padding-left: 0;
  padding-top: 0.25rem;
}
/* Implement missing tool button */
.ai-chat-implement-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.15));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ai-chat-implement-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.25));
  border-color: rgba(var(--accent-rgb), 0.5);
  transform: translateY(-1px);
}
.ai-chat-implement-btn:active {
  transform: translateY(0);
}
/* Light theme */
body.light .ai-chat-tool-result.success {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.12);
}
body.light .ai-chat-tool-result.success:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
}
body.light .ai-chat-tool-result.success .ai-chat-tool-result-header {
  color: #4f46e5;
}
body.light .ai-chat-tool-result.success .ai-chat-tool-result-header svg {
  color: #6366f1;
}
body.light .ai-chat-tool-result.error {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.12);
}
body.light .ai-chat-tool-result.error:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}
body.light .ai-chat-tool-result.error .ai-chat-tool-result-header {
  color: #dc2626;
}
body.light .ai-chat-tool-result.error .ai-chat-tool-result-header svg {
  color: #ef4444;
}
body.light .ai-chat-tool-duration {
  color: rgba(0, 0, 0, 0.35);
}
body.light .ai-chat-tool-result-message {
  color: #1e293b;
}
body.light .ai-chat-tool-result-message.error {
  color: #dc2626;
}
body.light .ai-chat-tool-inline-message {
  color: rgba(0, 0, 0, 0.6);
}
body.light .ai-chat-tool-rich-message {
  color: #1e293b;
}
body.light .ai-chat-tool-rich-message strong {
  color: #0f172a;
}
body.light .ai-chat-tool-result.rich .ai-chat-tool-result-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .ai-chat-implement-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.08));
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
body.light .ai-chat-implement-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.15));
  border-color: rgba(var(--accent-rgb), 0.4);
}
/* Tool Call Detail Modal */
.ai-chat-tool-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100010;
  animation: fadeIn 0.15s ease;
}
.ai-chat-tool-modal-content {
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ai-chat-tool-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ai-chat-tool-modal-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  text-transform: capitalize;
}
.ai-chat-tool-modal-title svg {
  color: var(--accent);
}
.ai-chat-tool-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ai-chat-tool-modal-copy {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  padding: 0.4rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.15s ease;
}
.ai-chat-tool-modal-copy:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.ai-chat-tool-modal-copy.copied {
  color: #4ade80;
}
.ai-chat-tool-modal-close {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  padding: 0.4rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.15s ease;
}
.ai-chat-tool-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.ai-chat-tool-modal-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ai-chat-tool-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ai-chat-tool-section-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
}
.ai-chat-tool-section-label.success {
  color: #4ade80;
}
.ai-chat-tool-section-label.success svg {
  color: #22c55e;
}
.ai-chat-tool-section-label.error {
  color: #f87171;
}
.ai-chat-tool-section-label.error svg {
  color: #ef4444;
}
.ai-chat-tool-section-label.user {
  color: #60a5fa;
}
.ai-chat-tool-section-label.user svg {
  color: #3b82f6;
}
.ai-chat-tool-code.user-message {
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
}
.ai-chat-tool-code {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #e2e8f0;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-chat-tool-code.error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}
body.light .ai-chat-tool-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .ai-chat-tool-modal-header {
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .ai-chat-tool-modal-title {
  color: #1e293b;
}
body.light .ai-chat-tool-modal-copy {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-chat-tool-modal-copy:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1e293b;
}
body.light .ai-chat-tool-modal-copy.copied {
  color: #16a34a;
}
body.light .ai-chat-tool-modal-close {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-chat-tool-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1e293b;
}
body.light .ai-chat-tool-section-label {
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-chat-tool-section-label.user {
  color: #2563eb;
}
body.light .ai-chat-tool-code.user-message {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.15);
  color: #1e40af;
}
body.light .ai-chat-tool-code {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #334155;
}
body.light .ai-chat-tool-code.error {
  background: rgba(239, 68, 68, 0.05);
  color: #dc2626;
}
/* Debug Modal - Request/Response Viewer */
.ai-chat-debug-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  animation: fadeIn 0.15s ease-out;
}
.ai-chat-debug-modal-content {
  background: rgba(20, 20, 25, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease-out;
}
.ai-chat-debug-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.ai-chat-debug-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.ai-chat-debug-modal-title svg {
  color: var(--accent);
}
.ai-chat-debug-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-chat-debug-copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-chat-debug-copy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.ai-chat-debug-copy-btn.small {
  padding: 4px 8px;
  font-size: 0.7rem;
}
.ai-chat-debug-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-chat-debug-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.ai-chat-debug-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ai-chat-debug-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-chat-debug-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-chat-debug-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}
.ai-chat-debug-section-label svg {
  color: #60a5fa;
}
.ai-chat-debug-section-label.success svg {
  color: #4ade80;
}
.ai-chat-debug-section-label.tool svg {
  color: var(--accent);
}
.ai-chat-debug-section-label.error svg {
  color: #f87171;
}
.ai-chat-debug-code {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 350px;
  overflow-y: auto;
}
/* Light theme for debug modal */
body.light .ai-chat-debug-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .ai-chat-debug-modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .ai-chat-debug-modal-title {
  color: #1e293b;
}
body.light .ai-chat-debug-modal-title svg {
  color: var(--accent);
}
body.light .ai-chat-debug-copy-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
body.light .ai-chat-debug-copy-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1e293b;
}
body.light .ai-chat-debug-modal-close {
  color: rgba(0, 0, 0, 0.4);
}
body.light .ai-chat-debug-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1e293b;
}
body.light .ai-chat-debug-section-label {
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-chat-debug-section-label svg {
  color: #2563eb;
}
body.light .ai-chat-debug-section-label.success svg {
  color: #16a34a;
}
body.light .ai-chat-debug-section-label.tool svg {
  color: var(--accent);
}
body.light .ai-chat-debug-section-label.error svg {
  color: #dc2626;
}
body.light .ai-chat-debug-code {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #334155;
}
/* Tool Metrics */
.ai-chat-debug-section-label.metrics svg {
  color: #38bdf8;
}
.ai-chat-debug-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ai-chat-debug-metric-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.75rem;
}
.ai-chat-debug-metric-row .metric-tool {
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-transform: capitalize;
}
.ai-chat-debug-metric-row .metric-calls {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
}
.ai-chat-debug-metric-row .metric-success {
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
}
.ai-chat-debug-metric-row .metric-success.all {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}
.ai-chat-debug-metric-row .metric-success.some {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
.ai-chat-debug-metric-row .metric-success.none {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}
.ai-chat-debug-metric-row .metric-duration {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.65rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
body.light .ai-chat-debug-section-label.metrics svg {
  color: #0284c7;
}
body.light .ai-chat-debug-metric-row {
  background: rgba(0, 0, 0, 0.03);
}
body.light .ai-chat-debug-metric-row .metric-tool {
  color: #1e293b;
}
body.light .ai-chat-debug-metric-row .metric-calls {
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-chat-debug-metric-row .metric-success.all {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}
body.light .ai-chat-debug-metric-row .metric-success.some {
  background: rgba(202, 138, 4, 0.12);
  color: #ca8a04;
}
body.light .ai-chat-debug-metric-row .metric-success.none {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
body.light .ai-chat-debug-metric-row .metric-duration {
  color: rgba(0, 0, 0, 0.4);
}
body.light .ai-chat-message-model:hover {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.06);
}
/* Context Row & Chips */
.ai-chat-context-row {
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.5rem 0.75rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}
.ai-chat-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ai-chat-context-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: var(--accent-light);
  font-size: 0.75rem;
  font-weight: 500;
}
.ai-chat-context-chip button {
  background: transparent;
  border: none;
  padding: 0;
  color: rgba(196, 181, 253, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.ai-chat-context-chip button:hover { color: #fff; }
/* Messages Area */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0; /* Allow flex shrinking */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.ai-chat-messages::-webkit-scrollbar {
  width: 6px;
}
.ai-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.ai-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.ai-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
body.light .ai-chat-messages {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
body.light .ai-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}
body.light .ai-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}
.ai-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.4);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.ai-chat-empty-icon {
  margin-bottom: 1.5rem;
  color: var(--accent);
  opacity: 0.8;
  animation: float 3s ease-in-out infinite;
}
.ai-chat-empty h3 { color: rgba(255, 255, 255, 0.9); margin-bottom: 0.5rem; }
.ai-chat-empty p { font-size: 0.9rem; margin-bottom: 1.5rem; }
.ai-chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: min(300px, 100%);
  box-sizing: border-box;
}
.ai-chat-suggestions button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
}
.ai-chat-suggestions button:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: #fff;
  transform: translateY(-1px);
}
/* Message Bubbles */
.ai-chat-message {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  align-items: flex-start;
}
.ai-chat-message.user {
  margin-top: 0.5rem;
  flex-direction: row-reverse;
}
.ai-chat-message.assistant {
  align-items: flex-start;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.ai-chat-message.assistant:first-child {
  border-top: none;
  padding-top: 0;
}
/* System messages (window bond notifications) */
.ai-chat-message.system {
  justify-content: center;
  padding: 0.5rem 0;
}
.ai-chat-message.system .ai-chat-message-avatar {
  display: none;
}
.ai-chat-system-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.06));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 20px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  animation: systemMessageIn 0.25s ease-out;
}
.ai-chat-system-content p {
  margin: 0;
}
.ai-chat-system-content strong {
  color: var(--accent-light);
  font-weight: 600;
}
.ai-chat-system-content svg {
  color: var(--accent);
  opacity: 0.8;
}
@keyframes systemMessageIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
body.light .ai-chat-system-content {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.04));
  border-color: rgba(var(--accent-rgb), 0.15);
  color: rgba(0, 0, 0, 0.75);
}
body.light .ai-chat-system-content strong {
  color: var(--accent);
}
body.light .ai-chat-system-content svg {
  color: var(--accent);
}
/* Context update — compact inline status (tab open/close/switch) */
.ai-chat-context-update {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  justify-content: center;
}
.ai-chat-context-update svg {
  opacity: 0.4;
  flex-shrink: 0;
}
.ai-chat-context-update .markdown-block {
  display: inline;
}
.ai-chat-context-update .markdown-block p {
  display: inline;
  margin: 0;
}
.ai-chat-context-update strong {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
body.light .ai-chat-context-update {
  color: rgba(0, 0, 0, 0.3);
}
body.light .ai-chat-context-update strong {
  color: rgba(0, 0, 0, 0.45);
}
/* Bond/unbond event chips */
.ai-chat-bond-event {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 12px;
  font-size: 0.7rem;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}
.ai-chat-bond-event svg { opacity: 0.5; flex-shrink: 0; }
.ai-chat-bond-event strong { font-weight: 500; color: rgba(255, 255, 255, 0.45); }
.ai-chat-bond-event.connect { color: rgba(var(--accent-rgb), 0.5); }
.ai-chat-bond-event.connect svg { opacity: 0.7; color: rgba(var(--accent-rgb), 0.7); }
.ai-chat-bond-event.connect strong { color: rgba(var(--accent-rgb), 0.8); }
body.light .ai-chat-bond-event { color: rgba(0,0,0,0.3); }
body.light .ai-chat-bond-event strong { color: rgba(0,0,0,0.45); }
body.light .ai-chat-bond-event.connect { color: rgba(var(--accent-rgb), 0.6); }
body.light .ai-chat-bond-event.connect strong { color: var(--accent-dark); }
/* App-initiated messages (bond channel) */
.ai-chat-app-message {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.72rem;
  color: rgba(251, 191, 36, 0.6);
  justify-content: center;
}
.ai-chat-app-message svg {
  opacity: 0.5;
  color: #f59e0b;
  flex-shrink: 0;
}
body.light .ai-chat-app-message {
  color: rgba(217, 119, 6, 0.5);
}
body.light .ai-chat-app-message svg {
  color: #d97706;
}
.ai-chat-message-avatar {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  margin-top: 2px;
}
.ai-chat-message.user .ai-chat-message-avatar {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}
.ai-chat-message-content {
  padding: 0;
  border-radius: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  flex: 1;
  overflow-x: hidden;
  box-sizing: border-box;
  user-select: text;
  -webkit-user-select: text;
}
/* User messages get padding since they have a background */
.ai-chat-message.user .ai-chat-message-content {
  padding: 0.5rem 0.85rem;
}
.ai-chat-message-content p {
  margin: 0;
}
.ai-chat-message-content p + p {
  margin-top: 0.35rem;
}
.ai-chat-message-content ul,
.ai-chat-message-content ol {
  margin: 0.25rem 0;
  padding-left: 1.1rem;
}
.ai-chat-message-content li {
  margin: 0.1rem 0;
}
.ai-chat-message.assistant .ai-chat-message-content {
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.9);
}
.ai-chat-message.user .ai-chat-message-content {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 12px;
  color: #fff;
  padding: 0.5rem 0.85rem;
}
/* Thinking Block */
.ai-chat-thinking-block {
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
.ai-chat-thinking-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}
.ai-chat-thinking-header:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); }
.ai-chat-thinking-tokens { margin-left: auto; font-family: monospace; opacity: 0.6; }
.ai-chat-thinking-content {
  padding: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* Message Footer & Actions */
.ai-chat-message-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0;
  border-top: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ai-chat-message:hover .ai-chat-message-footer {
  opacity: 1;
}
.ai-chat-message-model {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: auto;
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-chat-message-model:hover {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}
.ai-chat-message-copy {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 0.7rem !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
}
.ai-chat-message-copy:hover { color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.1) !important; }
.ai-chat-message-copy.copied { color: #4ade80 !important; background: rgba(74, 222, 128, 0.1) !important; }
/* Feedback Buttons */
.ai-chat-feedback-buttons {
  display: flex;
  gap: 0.25rem;
  margin-left: 0.5rem;
}
.ai-chat-feedback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}
.ai-chat-feedback-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
}
.ai-chat-feedback-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.ai-chat-feedback-btn.active.positive {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.ai-chat-feedback-btn.active.negative {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}
/* Input Container & Toolbar */
.ai-chat-input-container {
  margin: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  flex-shrink: 0;
  box-shadow: none;
  max-width: calc(100% - 1.5rem);
  box-sizing: border-box;
}
.ai-chat-input-wrapper { position: relative; }
.ai-chat-input-container textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  resize: none;
  padding: 0.25rem;
  outline: none;
  line-height: 1.5;
}
.ai-chat-input-container textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.ai-chat-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: none;
}
.ai-chat-toolbar-left { display: none; }
/* Hidden - context/sessions/history icons */
.ai-chat-toolbar-right { display: flex; align-items: center; gap: 0.5rem; }
.ai-chat-toolbar-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.ai-chat-toolbar-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ai-chat-toolbar-btn.active.image { color: #fb923c; background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.3); }
.ai-chat-toolbar-btn.active.thinking { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.3); }
.ai-chat-toolbar-btn.active.voice { color: #f87171; background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); animation: pulse 1.5s ease-in-out infinite; }
.ai-chat-toolbar-btn.active.transcribing { color: #60a5fa; background: rgba(96, 165, 250, 0.1); border-color: rgba(96, 165, 250, 0.3); }
.ai-chat-toolbar-btn.active.transcribing svg { animation: spin 1s linear infinite; }
.ai-chat-context-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #121216;
}
.ai-chat-send-inline {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}
.ai-chat-send-inline:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); }
.ai-chat-send-inline:disabled { opacity: 0.3; cursor: not-allowed; }
.ai-chat-send-inline.image-mode { background: #fb923c; }
/* Context & Session inline containers - need relative positioning for dropdown menus */
.ai-chat-context-inline,
.ai-chat-sessions-inline {
  position: relative;
}
/* Menus & Toolbars */
.toolbar-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: rgba(25, 25, 30, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  width: 280px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: slideUpFade 0.2s ease-out;
}
.ai-chat-context-menu-header, .ai-chat-session-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.6);
}
.ai-chat-context-menu-list, .ai-chat-session-list { flex: 1; overflow-y: auto; padding: 0.5rem; }
.ai-chat-context-group-label {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.3);
}
.ai-chat-context-menu-item, .ai-chat-session-item {
  width: 100%;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: transparent; border: none; border-radius: 8px;
  color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; text-align: left;
  cursor: pointer; transition: all 0.15s;
}
.ai-chat-context-menu-item:hover, .ai-chat-session-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.ai-chat-context-menu-hint {
  padding: 0.6rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
}
.ai-chat-context-menu-hint strong {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-family: monospace;
}
.ai-chat-context-menu-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}
/* Prompt History Panel */
.ai-chat-history-inline {
  position: relative;
}
.ai-chat-history-menu {
  width: 320px;
  max-height: 450px;
}
.ai-chat-history-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
.ai-chat-history-header span {
  flex: 1;
}
.ai-chat-history-clear {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ai-chat-history-clear:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.ai-chat-history-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.ai-chat-history-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
}
.ai-chat-history-search input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.ai-chat-history-search button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}
.ai-chat-history-search button:hover {
  color: rgba(255, 255, 255, 0.8);
}
.ai-chat-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0.5rem;
  max-height: 320px;
}
.ai-chat-history-group {
  margin-bottom: 0.5rem;
}
.ai-chat-history-group-label {
  padding: 0.5rem 0.5rem 0.25rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}
.ai-chat-history-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.ai-chat-history-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.ai-chat-history-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.ai-chat-history-item-app {
  font-size: 0.65rem;
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.ai-chat-history-item-delete {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.15s;
  flex-shrink: 0;
}
.ai-chat-history-item:hover .ai-chat-history-item-delete {
  opacity: 1;
}
.ai-chat-history-item-delete:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
}
.ai-chat-history-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}
.ai-chat-history-empty p {
  margin: 0.25rem 0;
}
.ai-chat-toolbar-btn.has-history {
  color: rgba(var(--accent-rgb), 0.8);
}
/* Image Generation Specifics */
.ai-chat-image-loading { padding: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ai-chat-image-loading-animation { position: relative; width: 64px; height: 64px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ai-chat-image-loading-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); animation: shimmer 1.5s infinite; }
.ai-chat-image-loading-text { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }
.ai-chat-image-container { margin-bottom: 1rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }
.ai-chat-generated-image { width: 100%; display: block; cursor: zoom-in; }
.ai-chat-image-prompt { padding: 0.75rem; background: rgba(0, 0, 0, 0.3); font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); display: flex; gap: 0.5rem; }
/* Footer Hint */
.ai-chat-footer {
  padding: 0.6rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  font-size: 0.7rem; color: rgba(255, 255, 255, 0.3);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}
.ai-chat-shortcut { color: rgba(255, 255, 255, 0.5); font-weight: 600; }
/* Sync indicator */
.ai-chat-sync-indicator {
  display: flex; align-items: center; justify-content: center;
  opacity: 0.5; transition: opacity 0.2s ease;
}
.ai-chat-sync-indicator.connected { color: #4ade80; opacity: 0.7; }
.ai-chat-sync-indicator.disconnected { color: #f87171; opacity: 0.6; }
body.light .ai-chat-sync-indicator.connected { color: #22c55e; }
body.light .ai-chat-sync-indicator.disconnected { color: #ef4444; }
.ai-chat-model-badge { margin-left: auto; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(255, 255, 255, 0.05); font-size: 0.65rem; letter-spacing: 0.02em; font-weight: 500; border: none; }
.ai-chat-model-badge.clickable { cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.15s ease; }
.ai-chat-model-badge.clickable:hover { filter: brightness(1.2); }
.ai-chat-model-badge.thinking { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.ai-chat-model-badge.image { color: #fb923c; background: rgba(251, 146, 60, 0.1); cursor: default; }
/* Provider-specific colors */
.ai-chat-model-badge.provider-google { color: #4285f4; background: rgba(66, 133, 244, 0.12); }
.ai-chat-model-badge.provider-anthropic { color: #cc7722; background: rgba(204, 119, 34, 0.12); }
.ai-chat-model-badge.provider-openai { color: #10a37f; background: rgba(16, 163, 127, 0.12); }
.ai-chat-model-badge.provider-deepseek { color: #4d6bfe; background: rgba(77, 107, 254, 0.12); }
/* Model Switcher Menu */
.ai-chat-model-switcher { position: relative; margin-left: auto; }
.ai-chat-model-switcher-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: rgba(25, 25, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  animation: slideUpFade 0.15s ease-out;
}
.ai-chat-model-switcher-group { margin-bottom: 8px; }
.ai-chat-model-switcher-group:last-child { margin-bottom: 0; }
.ai-chat-model-switcher-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--provider-color);
  padding: 4px 8px 6px;
  opacity: 0.9;
}
.ai-chat-model-switcher-group button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.1s ease;
}
.ai-chat-model-switcher-group button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.ai-chat-model-switcher-group button.active {
  background: color-mix(in srgb, var(--provider-color) 18%, transparent);
  color: var(--provider-color);
  font-weight: 600;
}
/* Animations */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* =============================================
   LIGHT THEME SUPPORT - Comprehensive
   ============================================= */
/* Panel & Header */
body.light .ai-chat-panel {
  background: var(--os-glass-bg-solid);
  border-left: none;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.light .ai-chat-panel::after {
  display: none;
}
body.light .ai-chat-panel.open.has-bonded-window {
  border-left: none;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
}
body.light .ai-chat-panel.open.has-bonded-window::before {
  display: none;
}
body.light .ai-chat-panel.maximized {
  background: var(--os-glass-bg-solid);
}
/* Header & buttons use OS variables — adapt automatically */
/* Context Row & Chips */
body.light .ai-chat-context-row { 
  background: rgba(0, 0, 0, 0.03); 
  border-bottom-color: rgba(0, 0, 0, 0.06); 
}
body.light .ai-chat-context-chip {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
body.light .ai-chat-context-chip button { color: rgba(var(--accent-rgb), 0.5); }
body.light .ai-chat-context-chip button:hover { color: var(--accent); }
/* Empty State */
body.light .ai-chat-empty { color: rgba(0, 0, 0, 0.5); }
body.light .ai-chat-empty-icon { color: var(--accent); }
body.light .ai-chat-empty h3 { color: rgba(0, 0, 0, 0.85); }
body.light .ai-chat-empty p { color: rgba(0, 0, 0, 0.55); }
/* Suggestion Buttons */
body.light .ai-chat-suggestions button {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}
body.light .ai-chat-suggestions button:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
/* Messages */
body.light .ai-chat-message.assistant .ai-chat-message-content {
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.88);
}
body.light .ai-chat-message.assistant {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .ai-chat-message.user .ai-chat-message-content {
  background: rgba(0, 0, 0, 0.04);
  border: none;
  color: rgba(0, 0, 0, 0.88);
}
body.light .ai-chat-message.assistant .ai-chat-message-avatar { 
  background: rgba(var(--accent-rgb), 0.12); 
  color: var(--accent); 
}
body.light .ai-chat-message.user .ai-chat-message-avatar { 
  background: rgba(0, 0, 0, 0.08); 
  color: rgba(0, 0, 0, 0.7); 
}
/* Message Footer */
body.light .ai-chat-message-footer { border-top-color: rgba(0, 0, 0, 0.06); }
body.light .ai-chat-message-model { color: rgba(0, 0, 0, 0.35); }
body.light .ai-chat-message-copy { color: rgba(0, 0, 0, 0.4) !important; }
body.light .ai-chat-message-copy:hover { color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.08) !important; }
/* Feedback Buttons - Light Theme */
body.light .ai-chat-feedback-btn {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.35);
}
body.light .ai-chat-feedback-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}
/* Thinking Block */
body.light .ai-chat-thinking-block {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}
body.light .ai-chat-thinking-header {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-chat-thinking-header:hover { 
  background: rgba(0, 0, 0, 0.05); 
  color: rgba(0, 0, 0, 0.7); 
}
body.light .ai-chat-thinking-content {
  color: rgba(0, 0, 0, 0.6);
  border-top-color: rgba(0, 0, 0, 0.06);
}
/* Input Container */
body.light .ai-chat-input-container { 
  background: rgba(255, 255, 255, 0.95); 
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
body.light .ai-chat-input-container textarea { color: rgba(0, 0, 0, 0.88); }
body.light .ai-chat-input-container textarea::placeholder { color: rgba(0, 0, 0, 0.4); }
body.light .ai-chat-input-toolbar { border-top-color: rgba(0, 0, 0, 0.08); }
/* Toolbar Buttons */
body.light .ai-chat-toolbar-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.55);
}
body.light .ai-chat-toolbar-btn:hover { 
  background: rgba(0, 0, 0, 0.08); 
  color: rgba(0, 0, 0, 0.85); 
}
body.light .ai-chat-toolbar-btn.active.thinking { 
  color: var(--accent); 
  background: rgba(var(--accent-rgb), 0.1); 
  border-color: rgba(var(--accent-rgb), 0.3); 
}
body.light .ai-chat-toolbar-btn.active.voice { color: #dc2626; background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.3); }
body.light .ai-chat-toolbar-btn.active.transcribing { color: #2563eb; background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.3); }
body.light .ai-chat-toolbar-btn.active.image {
  color: #ea580c;
  background: rgba(234, 88, 12, 0.1);
  border-color: rgba(234, 88, 12, 0.3);
}
/* Context Count Badge */
body.light .ai-chat-context-count {
  background: var(--accent);
  border-color: #fff;
}
/* Send Button */
body.light .ai-chat-send-inline { background: var(--accent); }
body.light .ai-chat-send-inline:hover:not(:disabled) { box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); }
body.light .ai-chat-send-inline.image-mode { background: #ea580c; }
/* Menus */
body.light .toolbar-menu { 
  background: rgba(255, 255, 255, 0.98); 
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .ai-chat-context-menu-header, 
body.light .ai-chat-session-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
body.light .ai-chat-context-group-label { color: rgba(0, 0, 0, 0.4); }
body.light .ai-chat-context-menu-item, 
body.light .ai-chat-session-item { color: rgba(0, 0, 0, 0.75); }
body.light .ai-chat-context-menu-item:hover, 
body.light .ai-chat-session-item:hover { 
  background: rgba(0, 0, 0, 0.04); 
  color: rgba(0, 0, 0, 0.92); 
}
body.light .ai-chat-context-menu-hint { 
  border-top-color: rgba(0, 0, 0, 0.06); 
  color: rgba(0, 0, 0, 0.45); 
}
body.light .ai-chat-context-menu-hint strong { 
  color: rgba(0, 0, 0, 0.65); 
  background: rgba(0, 0, 0, 0.06); 
}
body.light .ai-chat-context-menu-empty { color: rgba(0, 0, 0, 0.45); }
/* History - Light theme */
body.light .ai-chat-history-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
body.light .ai-chat-history-clear { color: rgba(0, 0, 0, 0.4); }
body.light .ai-chat-history-clear:hover { color: #dc2626; background: rgba(220, 38, 38, 0.08); }
body.light .ai-chat-history-search {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .ai-chat-history-search input { color: rgba(0, 0, 0, 0.85); }
body.light .ai-chat-history-search input::placeholder { color: rgba(0, 0, 0, 0.35); }
body.light .ai-chat-history-search button { color: rgba(0, 0, 0, 0.4); }
body.light .ai-chat-history-search button:hover { color: rgba(0, 0, 0, 0.7); }
body.light .ai-chat-history-group-label { color: rgba(0, 0, 0, 0.4); }
body.light .ai-chat-history-item { color: rgba(0, 0, 0, 0.75); }
body.light .ai-chat-history-item:hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.92); }
body.light .ai-chat-history-item-app { color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
body.light .ai-chat-history-item-delete { color: rgba(0, 0, 0, 0.25); }
body.light .ai-chat-history-item-delete:hover { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
body.light .ai-chat-history-empty { color: rgba(0, 0, 0, 0.45); }
body.light .ai-chat-toolbar-btn.has-history { color: var(--accent); }
/* Footer */
body.light .ai-chat-footer {
  background: rgba(0, 0, 0, 0.03);
  border-top-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}
body.light .ai-chat-shortcut { color: rgba(0, 0, 0, 0.55); }
body.light .ai-chat-model-badge { 
  background: rgba(0, 0, 0, 0.05); 
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-chat-model-badge.thinking { 
  color: var(--accent); 
  background: rgba(var(--accent-rgb), 0.1); 
}
body.light .ai-chat-model-badge.image {
  color: #ea580c;
  background: rgba(234, 88, 12, 0.1);
}
/* Provider colors work in light theme too - slightly bolder */
body.light .ai-chat-model-badge.provider-google { color: #1a73e8; background: rgba(26, 115, 232, 0.1); }
body.light .ai-chat-model-badge.provider-anthropic { color: #b35c00; background: rgba(179, 92, 0, 0.1); }
body.light .ai-chat-model-badge.provider-openai { color: #0d9373; background: rgba(13, 147, 115, 0.1); }
body.light .ai-chat-model-badge.provider-deepseek { color: #3a52cc; background: rgba(58, 82, 204, 0.1); }
/* Model switcher menu light theme */
body.light .ai-chat-model-switcher-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .ai-chat-model-switcher-group button {
  color: rgba(0, 0, 0, 0.7);
}
body.light .ai-chat-model-switcher-group button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #000;
}
/* Image Generation */
body.light .ai-chat-image-loading-animation { background: rgba(0, 0, 0, 0.04); }
body.light .ai-chat-image-loading-text { color: rgba(0, 0, 0, 0.55); }
body.light .ai-chat-image-container { border-color: rgba(0, 0, 0, 0.1); }
body.light .ai-chat-image-prompt { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.55); }
/* Loading State */
body.light .ai-chat-message.assistant.loading .ai-chat-message-content {
  background: rgba(0, 0, 0, 0.02);
}
/* Failed message retry styles */
.ai-chat-message-failed-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: #f87171;
  font-weight: 500;
}
.ai-chat-message-retry {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  padding: 0.25rem 0.5rem !important;
  background: rgba(248, 113, 113, 0.1) !important;
  border: none !important;
  border-radius: 4px !important;
  color: #f87171 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  margin-left: auto !important;
}
.ai-chat-message-retry:hover {
  background: rgba(248, 113, 113, 0.2) !important;
  color: #fca5a5 !important;
}
body.light .ai-chat-message-failed-label {
  color: #dc2626;
}
body.light .ai-chat-message-retry {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
}
/* Error banner styles */
.ai-chat-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  margin: 0 0.75rem 0.5rem;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 8px;
  color: #f87171;
  font-size: 0.8rem;
  line-height: 1.4;
}
.ai-chat-error > svg:first-child {
  flex-shrink: 0;
}
.ai-chat-error > span {
  flex: 1;
  word-break: break-word;
}
.ai-chat-error-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.ai-chat-error-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem;
  background: rgba(248, 113, 113, 0.15);
  border: none;
  border-radius: 4px;
  color: #f87171;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.7rem;
  font-weight: 500;
}
.ai-chat-error-actions button:hover {
  background: rgba(248, 113, 113, 0.25);
  color: #fca5a5;
}
.ai-chat-error-retry {
  padding: 0.3rem 0.6rem !important;
}
body.light .ai-chat-error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: #dc2626;
}
body.light .ai-chat-error-actions button {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}
body.light .ai-chat-error-actions button:hover {
  background: rgba(220, 38, 38, 0.18);
  color: #b91c1c;
}
/* Enhanced numbered lists in AI chat */
.ai-chat-message-content ol {
  margin: 0.75rem 0;
  padding-left: 0;
  list-style: none;
  counter-reset: ai-counter;
}
.ai-chat-message-content ol > li {
  counter-increment: ai-counter;
  position: relative;
  padding-left: 2.25em;
  margin: 0.6em 0;
  line-height: 1.65;
}
.ai-chat-message-content ol > li::before {
  content: counter(ai-counter);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-radius: 5px;
  font-size: 0.75em;
  font-weight: 600;
  font-family: 'SF Mono', Monaco, monospace;
}
body.light .ai-chat-message-content ol > li::before {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}
/* Loading skeleton - Robust & Highly Visible */
.ai-chat-message.assistant.loading .ai-chat-message-content {
  min-width: 260px;
  background: rgba(255, 255, 255, 0.03);
}
.ai-chat-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.25rem 0;
  width: 100%;
}
.ai-chat-skeleton-line {
  height: 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  animation: skeletonPulse 2s ease-in-out infinite;
}
.ai-chat-skeleton-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.05) 30%,
    rgba(var(--accent-rgb), 0.4) 50%,
    rgba(var(--accent-rgb), 0.05) 70%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skeletonShimmer 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ai-chat-skeleton-line:nth-child(1) { height: 14px; width: 40% !important; animation-delay: 0s; }
.ai-chat-skeleton-line:nth-child(2) { width: 90% !important; animation-delay: 0.1s; }
.ai-chat-skeleton-line:nth-child(3) { width: 80% !important; animation-delay: 0.2s; }
.ai-chat-skeleton-line:nth-child(4) { width: 60% !important; animation-delay: 0.3s; }
/* Thinking indicator — shown during non-agent loading */
.ai-chat-thinking-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.25rem 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  animation: thinkingFadeIn 0.3s ease;
}
.ai-chat-thinking-indicator svg {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}
body.light .ai-chat-thinking-indicator {
  color: rgba(0, 0, 0, 0.45);
}
@keyframes thinkingFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Nudge loading — shown when AI responds to an app-initiated message */
.ai-chat-nudge-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0;
  font-size: 0.78rem;
  color: rgba(251, 191, 36, 0.7);
}
.ai-chat-nudge-loading svg {
  color: #f59e0b;
}
body.light .ai-chat-nudge-loading {
  color: rgba(217, 119, 6, 0.6);
}
body.light .ai-chat-nudge-loading svg {
  color: #d97706;
}
@keyframes skeletonPulse {
  0%, 100% { background: rgba(255, 255, 255, 0.06); }
  50% { background: rgba(255, 255, 255, 0.09); }
}
@keyframes skeletonShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
body.light .ai-chat-skeleton-line {
  background: rgba(0, 0, 0, 0.05);
}
body.light .ai-chat-skeleton-line::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.05) 30%,
    rgba(var(--accent-rgb), 0.25) 50%,
    rgba(var(--accent-rgb), 0.05) 70%,
    transparent 100%
  );
}
/* Pulsing avatar for loading state */
.ai-chat-message.loading .ai-chat-message-avatar {
  animation: avatarPulse 1.5s ease-in-out infinite;
}
@keyframes avatarPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
/* Agent Progress UI - Real-time tool execution feedback */
.ai-agent-progress {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
}
/* Header with animated indicator */
.ai-agent-progress-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ai-agent-progress-indicator {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 8px;
}
.ai-agent-progress-indicator svg {
  color: var(--accent);
}
.ai-agent-progress-indicator svg.spin,
.ai-agent-step-icon svg.spin {
  animation: spin 1s linear infinite;
}
.ai-agent-progress-indicator svg.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}
.ai-agent-progress-indicator svg.flash {
  animation: flash 0.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.ai-agent-progress-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-height: 32px;
}
.ai-agent-progress-status {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
}
.ai-agent-progress-iteration {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Timeline of completed tools */
.ai-agent-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-left: 15px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 12px;
}
.ai-agent-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0;
  position: relative;
}
.ai-agent-timeline-dot {
  position: absolute;
  left: -19px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1a1a1f;
}
.ai-agent-timeline-item.success .ai-agent-timeline-dot {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}
.ai-agent-timeline-item.error .ai-agent-timeline-dot {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}
.ai-agent-timeline-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.ai-agent-timeline-tool {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}
.ai-agent-timeline-tool svg {
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.ai-agent-timeline-name {
  font-weight: 500;
}
.ai-agent-timeline-item.success .ai-agent-timeline-tool {
  color: #4ade80;
}
.ai-agent-timeline-item.error .ai-agent-timeline-tool {
  color: #f87171;
}
.ai-agent-timeline-summary {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  padding-left: 1rem;
  font-style: italic;
}
.ai-agent-timeline-item.success .ai-agent-timeline-summary {
  color: rgba(74, 222, 128, 0.7);
}
.ai-agent-timeline-error {
  font-size: 0.7rem;
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.25rem;
}
/* Currently executing tools */
.ai-agent-executing {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 15px;
  padding-left: 12px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.3);
}
.ai-agent-executing-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  animation: slideIn 0.2s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
.ai-agent-executing-spinner {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-agent-executing-spinner svg {
  color: var(--accent);
}
.ai-agent-executing-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--accent);
  flex: 1;
  min-width: 0;
}
.ai-agent-executing-info svg {
  opacity: 0.7;
  flex-shrink: 0;
}
.ai-agent-executing-summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Light mode */
body.light .ai-agent-progress {
  background: rgba(var(--accent-rgb), 0.05);
  border-color: rgba(var(--accent-rgb), 0.15);
}
body.light .ai-agent-progress-indicator {
  background: rgba(var(--accent-rgb), 0.1);
}
body.light .ai-agent-progress-indicator svg {
  color: var(--accent);
}
body.light .ai-agent-progress-status {
  color: rgba(0, 0, 0, 0.9);
}
body.light .ai-agent-progress-iteration {
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-agent-timeline {
  border-left-color: rgba(0, 0, 0, 0.1);
}
body.light .ai-agent-timeline-dot {
  background: #fff;
}
body.light .ai-agent-timeline-item.success .ai-agent-timeline-dot {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}
body.light .ai-agent-timeline-item.error .ai-agent-timeline-dot {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}
body.light .ai-agent-timeline-tool {
  color: rgba(0, 0, 0, 0.8);
}
body.light .ai-agent-timeline-tool svg {
  color: rgba(0, 0, 0, 0.4);
}
body.light .ai-agent-timeline-item.success .ai-agent-timeline-tool {
  color: #16a34a;
}
body.light .ai-agent-timeline-item.error .ai-agent-timeline-tool {
  color: #dc2626;
}
body.light .ai-agent-timeline-summary {
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-agent-timeline-item.success .ai-agent-timeline-summary {
  color: rgba(22, 163, 74, 0.8);
}
body.light .ai-agent-executing {
  border-left-color: rgba(var(--accent-rgb), 0.3);
}
body.light .ai-agent-executing-item {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
}
body.light .ai-agent-executing-spinner svg,
body.light .ai-agent-executing-info {
  color: var(--accent);
}
/* Granular Steps Timeline - Replit-style detailed progress */
.ai-agent-steps {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.ai-agent-step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  animation: stepFadeIn 0.2s ease-out;
}
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-agent-step-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
}
/* Step status colors */
.ai-agent-step-item.success {
  background: rgba(74, 222, 128, 0.08);
}
.ai-agent-step-item.success .ai-agent-step-icon {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}
.ai-agent-step-item.success .ai-agent-step-text {
  color: rgba(74, 222, 128, 0.9);
}
.ai-agent-step-item.error {
  background: rgba(248, 113, 113, 0.08);
}
.ai-agent-step-item.error .ai-agent-step-icon {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}
.ai-agent-step-item.error .ai-agent-step-text {
  color: rgba(248, 113, 113, 0.9);
}
.ai-agent-step-item.warning {
  background: rgba(251, 191, 36, 0.08);
}
.ai-agent-step-item.warning .ai-agent-step-icon {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
.ai-agent-step-item.warning .ai-agent-step-text {
  color: rgba(251, 191, 36, 0.9);
}
.ai-agent-step-item.thinking {
  background: rgba(var(--accent-rgb), 0.08);
}
.ai-agent-step-item.thinking .ai-agent-step-icon {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
.ai-agent-step-item.thinking .ai-agent-step-text {
  color: rgba(var(--accent-rgb), 0.9);
}
.ai-agent-step-item.executing {
  background: rgba(56, 189, 248, 0.08);
}
.ai-agent-step-item.executing .ai-agent-step-icon {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}
.ai-agent-step-item.executing .ai-agent-step-text {
  color: rgba(56, 189, 248, 0.9);
}
.ai-agent-step-item.validating {
  background: rgba(45, 212, 191, 0.08);
}
.ai-agent-step-item.validating .ai-agent-step-icon {
  background: rgba(45, 212, 191, 0.2);
  color: #2dd4bf;
}
.ai-agent-step-item.validating .ai-agent-step-text {
  color: rgba(45, 212, 191, 0.9);
}
.ai-agent-step-item.info,
.ai-agent-step-item.complete {
  background: rgba(255, 255, 255, 0.03);
}
.ai-agent-step-item.info .ai-agent-step-icon,
.ai-agent-step-item.complete .ai-agent-step-icon {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}
.ai-agent-step-item.info .ai-agent-step-text,
.ai-agent-step-item.complete .ai-agent-step-text {
  color: rgba(255, 255, 255, 0.7);
}
.ai-agent-step-text {
  flex: 1;
  line-height: 1.4;
  word-break: break-word;
}
.ai-agent-step-detail {
  display: block;
  font-size: 0.65rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}
/* Warning state for progress indicator */
.ai-agent-progress-indicator.warning {
  background: rgba(251, 191, 36, 0.15);
}
.ai-agent-progress-indicator.warning svg {
  color: #fbbf24;
}
/* Light mode steps */
body.light .ai-agent-steps {
  background: rgba(0, 0, 0, 0.04);
}
body.light .ai-agent-step-item.success {
  background: rgba(34, 197, 94, 0.08);
}
body.light .ai-agent-step-item.success .ai-agent-step-icon {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}
body.light .ai-agent-step-item.success .ai-agent-step-text {
  color: #16a34a;
}
body.light .ai-agent-step-item.error {
  background: rgba(239, 68, 68, 0.08);
}
body.light .ai-agent-step-item.error .ai-agent-step-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}
body.light .ai-agent-step-item.error .ai-agent-step-text {
  color: #dc2626;
}
body.light .ai-agent-step-item.warning {
  background: rgba(245, 158, 11, 0.08);
}
body.light .ai-agent-step-item.warning .ai-agent-step-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}
body.light .ai-agent-step-item.warning .ai-agent-step-text {
  color: #d97706;
}
body.light .ai-agent-step-item.thinking {
  background: rgba(var(--accent-rgb), 0.06);
}
body.light .ai-agent-step-item.thinking .ai-agent-step-icon {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
body.light .ai-agent-step-item.thinking .ai-agent-step-text {
  color: var(--accent);
}
body.light .ai-agent-step-item.executing {
  background: rgba(14, 165, 233, 0.06);
}
body.light .ai-agent-step-item.executing .ai-agent-step-icon {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
}
body.light .ai-agent-step-item.executing .ai-agent-step-text {
  color: #0284c7;
}
body.light .ai-agent-step-item.validating {
  background: rgba(20, 184, 166, 0.06);
}
body.light .ai-agent-step-item.validating .ai-agent-step-icon {
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
}
body.light .ai-agent-step-item.validating .ai-agent-step-text {
  color: #0d9488;
}
body.light .ai-agent-step-item.info,
body.light .ai-agent-step-item.complete {
  background: rgba(0, 0, 0, 0.02);
}
body.light .ai-agent-step-item.info .ai-agent-step-icon,
body.light .ai-agent-step-item.complete .ai-agent-step-icon {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}
body.light .ai-agent-step-item.info .ai-agent-step-text,
body.light .ai-agent-step-item.complete .ai-agent-step-text {
  color: rgba(0, 0, 0, 0.6);
}
body.light .ai-agent-progress-indicator.warning {
  background: rgba(245, 158, 11, 0.12);
}
body.light .ai-agent-progress-indicator.warning svg {
  color: #d97706;
}
/* Edit Bar (above input when editing a message) */
.ai-chat-edit-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--accent-light);
}
.ai-chat-edit-bar svg:first-child {
  opacity: 0.7;
}
.ai-chat-edit-bar span {
  flex: 1;
}
.ai-chat-edit-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-chat-edit-bar button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
body.light .ai-chat-edit-bar {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
body.light .ai-chat-edit-bar button {
  color: rgba(0, 0, 0, 0.35);
}
body.light .ai-chat-edit-bar button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}
/* Right-click context menu on user messages */
.ai-chat-msg-context-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}
.ai-chat-msg-context-menu {
  position: fixed;
  background: rgba(25, 25, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-width: 160px;
  z-index: 1000000;
  animation: contextMenuIn 0.1s ease-out;
}
@keyframes contextMenuIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.ai-chat-msg-context-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.1s ease;
}
.ai-chat-msg-context-menu button:hover {
  background: rgba(var(--accent-rgb), 0.15);
}
.ai-chat-msg-context-menu button svg {
  color: rgba(255, 255, 255, 0.5);
}
.ai-chat-msg-context-delete:hover {
  background: rgba(248, 113, 113, 0.15) !important;
  color: #f87171;
}
.ai-chat-msg-context-delete:hover svg {
  color: #f87171;
}
body.light .ai-chat-msg-context-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
body.light .ai-chat-msg-context-menu button {
  color: rgba(0, 0, 0, 0.85);
}
body.light .ai-chat-msg-context-menu button:hover {
  background: rgba(var(--accent-rgb), 0.08);
}
body.light .ai-chat-msg-context-menu button svg {
  color: rgba(0, 0, 0, 0.45);
}
/**
 * App Overlay Styles
 * 
 * Full-screen container for sandbox apps.
 * Apps open in true fullscreen mode with ESC to exit.
 */
.app-overlay {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: flex;
  flex-direction: column;
  background: #0a0a0f;
  animation: appOverlayFadeIn 0.2s ease-out;
}
@keyframes appOverlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Content - true fullscreen (Press ESC to close) */
.app-overlay-content {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Light theme */
.app-overlay.theme-light {
  background: #f8fafc;
}
/* Zen theme */
.app-overlay.theme-zen {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
/* Batman theme */
.app-overlay.theme-batman {
  background: #050510;
}
/* ============================================
   Focus Mode Overlay - Unified overlay for all focus modes
   ============================================ */
.focus-mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  /* Below pomodoro completion (10000) but above everything else */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
  /* Full background - covers the page completely */
  background: #0a0a0a;
}
body.light .focus-mode-overlay {
  background: #f5f5f5;
}
body.zen .focus-mode-overlay {
  /* Use the same wallpaper as the main app */
  background: linear-gradient(135deg, #F5F1E8 0%, #E8E3D8 100%);
  background-image:
    var(--app-bg-image),
    radial-gradient(circle at 20% 50%, rgba(139, 195, 74, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(76, 175, 80, 0.08) 0%, transparent 50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@keyframes panelSlideIn {
  from {
    opacity: 0.5;
    transform: scale(0.99);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.focus-mode-panel {
  width: 100%;
  max-width: 1100px;
  animation: panelSlideIn 0.15s ease-out;
  height: 88vh;
  /* Fixed height for consistency */
  margin: 0 auto;
  padding: 1.5rem 2rem;
  background: rgba(15, 15, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: auto;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
body.light .focus-mode-panel {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}
body.zen .focus-mode-panel {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}
.focus-mode-panel.ai-panel-open {
  max-width: 700px;
  margin-right: 430px;
}
.focus-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
.focus-empty-state h2 {
  margin: 1rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}
.focus-empty-state p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
}
body.light .focus-empty-state {
  color: rgba(0, 0, 0, 0.4);
}
body.light .focus-empty-state h2 {
  color: rgba(0, 0, 0, 0.6);
}
body.light .focus-empty-state p {
  color: rgba(0, 0, 0, 0.4);
}
body.light .focus-mode-panel-title-row h3 {
  color: rgba(0, 0, 0, 0.7);
}
body.light .focus-mode-panel-content {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.focus-mode-panel-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  transition: opacity 0.3s ease;
}
.focus-mode-panel-header.faded {
  opacity: 0;
  pointer-events: none;
}
/* Fade out entire panel background while typing */
.focus-mode-panel.header-hidden {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Focus mode editor - rounded corners */
.focus-mode-panel .editable-markdown-editor-wrapper {
  border-radius: 16px;
  position: relative;
  border: none !important;
  outline: none;
}
/* Gradient at bottom removed for seamless editor look */
.focus-mode-panel .editable-markdown-editor-wrapper::after {
  display: none;
}
/* Make editor background more solid when panel fades away */
.focus-mode-panel.header-hidden .editable-markdown-editor-wrapper {
  background: rgba(15, 15, 20, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
}
body.light .focus-mode-panel.header-hidden .editable-markdown-editor-wrapper {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
body.zen .focus-mode-panel.header-hidden .editable-markdown-editor-wrapper {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
/* Hide cursor after inactivity in focus mode */
body.cursor-hidden,
body.cursor-hidden * {
  cursor: none !important;
}
.focus-mode-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.focus-mode-panel-title-row h3 {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  opacity: 0.7;
  color: rgba(255, 255, 255, 0.95);
}
.focus-mode-panel-title-row h3.clickable {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.focus-mode-panel-title-row h3.clickable:hover {
  opacity: 1;
}
.focus-mode-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
/* Show actions on hover of header area */
.focus-mode-panel-header:hover .focus-mode-panel-actions,
.focus-mode-panel-actions:hover {
  opacity: 1;
  pointer-events: auto;
}
/* Hide actions when editing */
.focus-mode-panel.is-editing .focus-mode-panel-actions {
  display: none !important;
}
.focus-mode-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* Allow shrinking in flexbox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  will-change: transform, opacity;
}
.focus-mode-panel-content::-webkit-scrollbar {
  width: 6px;
}
.focus-mode-panel-content::-webkit-scrollbar-track {
  background: transparent;
}
.focus-mode-panel-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
body.light .focus-mode-panel-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}
/* Content transitions - subtle directional slide + fade */
/* Horizontal: Moving left through pages (pressing right arrow) */
.focus-content-slide-left {
  animation: contentSlideLeft 0.2s ease-out;
}
/* Horizontal: Moving right through pages (pressing left arrow) */
.focus-content-slide-right {
  animation: contentSlideRight 0.2s ease-out;
}
/* Vertical: Moving up through entries (pressing down arrow) */
.focus-content-slide-up {
  animation: contentSlideUp 0.15s ease-out;
}
/* Vertical: Moving down through entries (pressing up arrow) */
.focus-content-slide-down {
  animation: contentSlideDown 0.15s ease-out;
}
/* Bounce animation for scroll limits */
.focus-content-bounce {
  animation: contentBounce 0.3s ease-out;
}
@keyframes contentSlideLeft {
  0% {
    opacity: 0.4;
    transform: translateX(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes contentSlideRight {
  0% {
    opacity: 0.4;
    transform: translateX(-12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes contentSlideUp {
  0% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes contentSlideDown {
  0% {
    opacity: 0.5;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes contentBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
/* ============================================
   Focus Overlay UI - Clock, Hints, Indicators
   ============================================ */
/* Focus overlay UI container - hidden by default, no layout impact */
/* Container is always pointer-events: none, children handle their own */
.focus-overlay-ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1000;
}
.focus-overlay-ui .focus-clock,
.focus-overlay-ui .focus-journal-indicator {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.focus-overlay-ui.visible .focus-clock,
.focus-overlay-ui.visible .focus-journal-indicator {
  opacity: 1;
}
/* Focus Clock - positioned top right */
.focus-clock {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.focus-clock.time-display-wrapper {
  pointer-events: auto;
  cursor: default;
}
body.light .focus-clock {
  color: rgba(0, 0, 0, 0.4);
}
.focus-clock-time {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}
.focus-clock-date {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
/* Timezone tooltip */
.timezone-tooltip {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: rgba(20, 20, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.75rem;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s ease;
  pointer-events: none;
}
.focus-clock:hover .timezone-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
body.light .timezone-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.timezone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  gap: 1rem;
  font-size: 0.75rem;
}
.timezone-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.light .timezone-row:not(:last-child) {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.timezone-label {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
body.light .timezone-label {
  color: rgba(0, 0, 0, 0.5);
}
.timezone-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}
.timezone-day {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
}
body.light .timezone-day {
  color: rgba(0, 0, 0, 0.4);
}
.timezone-time {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
body.light .timezone-time {
  color: rgba(0, 0, 0, 0.8);
}
/* ============================================
   Focus Shortcuts - Help button and tooltip
   ============================================ */
.focus-shortcuts-wrapper {
  position: fixed;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  pointer-events: auto !important;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
.focus-shortcuts-wrapper:hover {
  opacity: 1;
}
.focus-shortcuts-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(8px);
}
.focus-shortcuts-btn:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  transform: scale(1.05);
}
body.light .focus-shortcuts-btn {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}
body.light .focus-shortcuts-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  color: rgba(0, 0, 0, 0.6);
}
/* Shortcuts tooltip - shows on hover */
.focus-shortcuts-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  background: rgba(20, 20, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  min-width: 280px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
  pointer-events: none;
}
.focus-shortcuts-wrapper:hover .focus-shortcuts-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
body.light .focus-shortcuts-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.focus-shortcuts-tooltip .shortcuts-section {
  margin-bottom: 0.75rem;
}
.focus-shortcuts-tooltip .shortcuts-section:last-child {
  margin-bottom: 0;
}
.focus-shortcuts-tooltip .shortcuts-section h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .focus-shortcuts-tooltip .shortcuts-section h4 {
  color: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.08);
}
.focus-shortcuts-tooltip .shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  gap: 1rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}
body.light .focus-shortcuts-tooltip .shortcut-row {
  color: rgba(0, 0, 0, 0.6);
}
.focus-shortcuts-tooltip .shortcut-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
}
body.light .focus-shortcuts-tooltip .shortcut-key {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.08);
}
/* ============================================
   Focus Journal Indicator - Bottom center
   ============================================ */
.focus-journal-indicator {
  position: fixed;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 0.8rem;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.8);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.3s ease;
  pointer-events: none;
}
.focus-journal-indicator.ai-panel-open {
  transform: translateX(calc(-50% - 210px));
}
.focus-journal-current {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.focus-journal-mode {
  opacity: 0.6;
}
.focus-journal-separator {
  opacity: 0.4;
  font-size: 0.5rem;
}
.focus-journal-section {
  opacity: 1;
  font-weight: 500;
}
body.light .focus-journal-indicator {
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.9);
}
/* ============================================
   Focus Navigation Guide - Tile Grid (Top Left)
   ============================================ */
.focus-nav-guide {
  position: fixed;
  top: 3rem;
  /* Lowered to avoid Mac window traffic light buttons */
  left: 1.5rem;
  z-index: 600;
  /* Above focus-mode-overlay (500) */
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.focus-nav-guide.visible {
  opacity: 0.7;
  pointer-events: auto;
}
.focus-nav-guide.visible:hover {
  opacity: 1;
}
.focus-nav-guide.hidden {
  opacity: 0;
  pointer-events: none;
}
.focus-nav-grid {
  display: flex;
  gap: 10px;
  position: relative;
}
.focus-nav-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.focus-nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
  padding: 0;
}
.focus-nav-dot.clickable {
  cursor: pointer;
  position: relative;
  outline: none;
}
.focus-nav-dot.clickable:focus {
  outline: none;
}
.focus-nav-dot.clickable:hover {
  transform: scale(1.3);
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}
.focus-nav-dot.clickable:active {
  transform: scale(1.1);
}
.focus-nav-dot.current-mode {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.25);
}
.focus-nav-dot.active {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
.focus-nav-dot.active.clickable:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
}
/* Drag and drop styles for mind journal dots */
.focus-nav-column.dragging .focus-nav-dot {
  cursor: grabbing;
}
.focus-nav-dot.dragging {
  opacity: 0.5;
  transform: scale(0.9);
}
.focus-nav-dot.drag-over {
  transform: scale(1.4);
  background: rgba(var(--accent-rgb), 0.6);
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
}
.focus-nav-dot[draggable="true"] {
  cursor: grab;
}
.focus-nav-dot[draggable="true"]:active {
  cursor: grabbing;
}
.focus-nav-more {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  font-weight: 500;
}
/* Light theme adjustments */
body.light .focus-nav-dot {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .focus-nav-dot.clickable:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
body.light .focus-nav-dot.current-mode {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(0, 0, 0, 0.2);
}
body.light .focus-nav-dot.active {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}
body.light .focus-nav-dot.active.clickable:hover {
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.35);
}
body.light .focus-nav-more {
  color: rgba(0, 0, 0, 0.5);
}
/* Nav guide tooltip - single unified tooltip */
.focus-nav-tooltip {
  position: absolute;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  background: #111;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focus-nav-tooltip.visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
body.light .focus-nav-tooltip {
  background: #fff;
  color: #111;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* ============================================
   Focus Page Hint - Subtle indicator
   ============================================ */
.focus-page-hint {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.focus-page-hint.visible {
  opacity: 1;
}
.focus-page-hint.hidden {
  opacity: 0;
}
.focus-page-hint-label {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75rem;
  font-weight: 450;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
body.light .focus-page-hint-label {
  color: rgba(0, 0, 0, 0.4);
}
body.zen .focus-page-hint-label {
  color: rgba(90, 110, 70, 0.55);
}
/* ============================================
   Flush Message - Save confirmation
   ============================================ */
.flush-message {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  animation: flushFadeIn 0.2s ease;
}
.flush-message.success {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}
.flush-message.error {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
@keyframes flushFadeIn {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ============================================
   Tree Controls in Focus Mode
   ============================================ */
.focus-mode-panel .tree-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.focus-mode-panel .tree-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}
.focus-mode-panel .tree-control-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}
.focus-mode-panel .tree-control-btn.ai-context-btn {
  width: auto;
  padding: 0 0.5rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
.focus-mode-panel .tree-control-btn.ai-context-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-light);
}
.focus-mode-panel .tree-control-btn .ai-btn-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.focus-mode-panel .tree-control-btn.copy-btn.success {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
body.light .focus-mode-panel .tree-control-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
body.light .focus-mode-panel .tree-control-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.9);
}
body.light .focus-mode-panel .tree-control-btn.ai-context-btn {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}
body.light .focus-mode-panel .tree-control-btn.ai-context-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
}
/* ============================================
   Todo Area Groups - Grouped Next items by area
   ============================================ */
.todo-area-group {
  margin-bottom: 1rem;
}
.todo-area-group:last-child {
  margin-bottom: 0;
}
.todo-area-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.todo-area-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--accent-rgb), 0.9);
}
body.light .todo-area-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .todo-area-label {
  color: rgba(var(--accent-rgb), 0.9);
}
/* ===========================================
   MUSIC PLAYER - Simple Widget Styling
   =========================================== */
/* Headless mode: no visible UI, just the YouTube iframe container */
.music-player-headless {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.music-player {
  /* Match panel / navigation hint glass style */
  --widget-bg: rgba(255, 255, 255, 0.06);
  --widget-bg-hover: rgba(255, 255, 255, 0.12);
  --widget-border: rgba(255, 255, 255, 0.08);
  --widget-border-hover: rgba(255, 255, 255, 0.12);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: var(--widget-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--widget-border);
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease;
  overflow: hidden;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.music-player:hover,
.music-player.music-player-expanded {
  background: var(--widget-bg-hover);
  border-color: var(--widget-border-hover);
}
.music-player-expanded {
  width: auto;
  height: 3rem;
  padding: 0.35rem 0.5rem;
  gap: 0.35rem;
  overflow: visible;
  /* Dark solid background when expanded - matches standard panels */
  background: rgba(15, 15, 20, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}
/* Playlist thumbnail in expanded widget */
.music-player-widget-thumb {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
}
.music-player-widget-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Base Music Player Button */
.music-player-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 0.4rem !important;
  background: transparent !important;
  border: none !important;
  color: rgba(0, 0, 0, 0.8) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.music-player-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 1) !important;
  transform: scale(1.1) !important;
}
.music-player-btn:active {
  transform: scale(0.95) !important;
  background: rgba(0, 0, 0, 0.12) !important;
}
.music-player-icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}
.music-player-icon-btn:active {
  transform: scale(0.95) !important;
}
.music-player-loader {
  animation: spin 1s linear infinite;
}
.music-player-btn:disabled,
.music-player-icon-btn:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}
/* Shuffle button */
.music-player-shuffle-btn {
  opacity: 0.5 !important;
  padding: 0.35rem !important;
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
}
.music-player-shuffle-btn.active {
  opacity: 1 !important;
  color: #38bdf8 !important;
}
.music-player-shuffle-btn:hover {
  opacity: 1;
}
/* Star Button */
.music-player-star-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.music-player-star-btn:hover {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.1) !important;
}
.music-player-star-btn.starred {
  color: #fbbf24 !important;
}
.music-player-star-btn.starred:hover {
  color: #f59e0b !important;
}
.music-player-star-btn.inline {
  width: 20px !important;
  height: 20px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
/* Dislike Button */
.music-player-dislike-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.music-player-dislike-btn:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}
.music-player-dislike-btn.disliked {
  color: #ef4444 !important;
}
.music-player-dislike-btn.disliked:hover {
  color: #dc2626 !important;
}
/* Tooltip */
.music-player-tooltip {
  position: absolute;
  bottom: 3rem;
  right: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  animation: tooltipFadeIn 0.2s ease;
  pointer-events: none;
}
.music-player-tooltip p {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
}
@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Music player title */
.music-player-title-wrapper {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  overflow: visible;
}
.music-player-title-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.35rem;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 0;
  max-width: 140px;
}
.music-player-title-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.music-player-title {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.music-player-title-chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease;
}
.music-player-title-btn:hover .music-player-title {
  color: rgba(255, 255, 255, 0.95);
}
.music-player-title-btn:hover .music-player-title-chevron {
  color: rgba(255, 255, 255, 0.8);
}
/* Playlist dropdown menu */
.music-player-playlist-menu {
  position: absolute !important;
  bottom: calc(100% + 0.25rem) !important;
  right: 0 !important;
  transform: translateY(10px) !important;
  background: rgba(30, 30, 35, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.75rem !important;
  width: 100% !important;
  min-width: 220px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.music-player-playlist-menu.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
/* Now Playing section */
.music-player-now-playing {
  padding: 0.75rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.music-player-now-playing:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
.music-player-now-playing.copied {
  background: rgba(34, 197, 94, 0.15) !important;
}
.music-player-now-playing-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-size: 0.55rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.35rem !important;
}
.music-player-now-icon {
  color: #a855f7;
  animation: pulse 1.5s ease-in-out infinite;
}
.music-player-now-playing-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  min-width: 0 !important;
}
.music-player-now-playing-track {
  color: rgba(255, 255, 255, 0.4) !important;
  margin-right: 0.35rem !important;
  font-size: 0.7rem !important;
}
.music-player-now-playing-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
}
/* Starred and Disliked Sections */
.music-player-starred-section,
.music-player-disliked-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.music-player-starred-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}
.music-player-starred-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex: 1 !important;
  padding: 0.5rem 0.75rem !important;
  background: transparent !important;
  border: none !important;
  color: #fbbf24 !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.music-player-starred-header:hover {
  background: rgba(251, 191, 36, 0.08) !important;
}
.music-player-starred-header.disliked {
  color: rgba(239, 68, 68, 0.7) !important;
}
.music-player-starred-header.disliked:hover {
  color: #ef4444 !important;
}
.music-player-starred-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin-right: 0.5rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0.35rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.music-player-starred-copy:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.music-player-starred-copy.copied {
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.15) !important;
}
.music-player-starred-list {
  max-height: 120px !important;
  overflow-y: auto !important;
  padding: 0 0.5rem 0.5rem !important;
}
.music-player-starred-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.4rem 0.5rem !important;
  border-radius: 0.35rem !important;
  transition: background 0.15s ease !important;
}
.music-player-starred-item.playable { cursor: pointer !important; }
.music-player-starred-item:hover { background: rgba(255, 255, 255, 0.05) !important; }
.music-player-starred-item.playable:hover { background: rgba(251, 191, 36, 0.1) !important; }
.music-player-starred-play {
  color: rgba(255, 255, 255, 0.3) !important;
  flex-shrink: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease !important;
}
.music-player-starred-item.playable:hover .music-player-starred-play {
  opacity: 1 !important;
  color: #fbbf24 !important;
}
.music-player-starred-title {
  flex: 1 !important;
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.music-player-starred-item.disliked-item .music-player-starred-title {
  color: rgba(239, 68, 68, 0.8) !important;
}
.music-player-starred-item.disliked-item:hover .music-player-starred-title {
  color: #ef4444 !important;
}
.music-player-starred-remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: all 0.15s ease !important;
}
.music-player-starred-item:hover .music-player-starred-remove { opacity: 1 !important; }
.music-player-starred-remove:hover { color: #ef4444 !important; background: rgba(239, 68, 68, 0.15) !important; }
/* Track list */
.music-player-playlist-items {
  max-height: 180px !important;
  overflow-y: auto !important;
  padding: 0.25rem 0 !important;
}
.music-player-playlist-items::-webkit-scrollbar { width: 3px !important; }
.music-player-playlist-items::-webkit-scrollbar-track { background: transparent !important; }
.music-player-playlist-items::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15) !important; border-radius: 2px !important; }
.music-player-playlist-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.4rem 0.75rem !important;
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.65rem !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.music-player-playlist-item:hover { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.95) !important; }
.music-player-playlist-item.active { background: rgba(168, 85, 247, 0.15) !important; color: #a855f7 !important; }
.music-player-playlist-index {
  min-width: 1.25rem !important;
  color: rgba(255, 255, 255, 0.25) !important;
  font-size: 0.55rem !important;
}
.music-player-playlist-title {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.music-player-loading,
.music-player-no-tracks {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.65rem !important;
}
.music-player-loading .music-player-loader {
  animation: spin 1s linear infinite !important;
}
/* Track list panel - left side */
/* Note: .music-player-container is position: fixed in AppLayout.css
   Absolute children (.music-player-tracks-panel) still work with fixed parent */
.music-player-tracks-panel {
  position: absolute !important;
  right: calc(100% + 0.75rem) !important;
  bottom: 0 !important;
  width: 240px !important;
  max-height: 320px !important;
  background: rgba(20, 20, 25, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  animation: tracksPanelSlide 0.2s ease-out !important;
  display: flex !important;
  flex-direction: column !important;
}
@keyframes tracksPanelSlide {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.music-player-tracks-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.6rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}
.music-player-tracks-count {
  margin-left: auto !important;
  background: rgba(255, 255, 255, 0.1) !important;
  padding: 0.15rem 0.4rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.55rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
.music-player-tracks-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0.25rem 0 !important;
}
.music-player-tracks-list::-webkit-scrollbar { width: 4px !important; }
.music-player-tracks-list::-webkit-scrollbar-track { background: transparent !important; }
.music-player-tracks-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15) !important; border-radius: 2px !important; }
.music-player-track-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.65rem !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.music-player-track-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
.music-player-track-item.active {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #a855f7 !important;
}
.music-player-track-item.disliked {
  opacity: 0.4 !important;
}
.music-player-track-index {
  min-width: 1.25rem !important;
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 0.55rem !important;
  text-align: right !important;
}
.music-player-track-item.active .music-player-track-index {
  color: rgba(168, 85, 247, 0.7) !important;
}
.music-player-track-title {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.music-player-track-star {
  flex-shrink: 0 !important;
  color: #fbbf24 !important;
  opacity: 0.7 !important;
}
/* Light Theme Support */
body.light .music-player {
  --widget-bg: rgba(255, 255, 255, 0.85);
  --widget-bg-hover: rgba(255, 255, 255, 0.95);
  --widget-border: rgba(0, 0, 0, 0.1);
  --widget-border-hover: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.85);
}
body.light .music-player.music-player-expanded {
  /* Keep dark background even in light theme for contrast over light content */
  background: rgba(15, 15, 20, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}
body.light .music-player.music-player-expanded .music-player-btn {
  color: rgba(255, 255, 255, 0.8) !important;
}
body.light .music-player.music-player-expanded .music-player-btn:hover {
  color: rgba(255, 255, 255, 1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
body.light .music-player.music-player-expanded .music-player-title {
  color: rgba(255, 255, 255, 0.7) !important;
}
body.light .music-player.music-player-expanded .music-player-title:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}
body.light .music-player-btn { color: rgba(0, 0, 0, 0.7) !important; }
body.light .music-player-star-btn { color: rgba(0, 0, 0, 0.25) !important; }
body.light .music-player-star-btn:hover { color: #f59e0b !important; background: rgba(251, 191, 36, 0.15) !important; }
body.light .music-player-dislike-btn { color: rgba(0, 0, 0, 0.25) !important; }
body.light .music-player-dislike-btn:hover { color: #ef4444 !important; background: rgba(239, 68, 68, 0.15) !important; }
body.light .music-player-playlist-menu { background: rgba(250, 250, 252, 0.98) !important; border-color: rgba(0, 0, 0, 0.1) !important; }
body.light .music-player-now-playing { border-color: rgba(0, 0, 0, 0.06) !important; }
body.light .music-player-starred-header { color: #f59e0b !important; }
body.light .music-player-starred-copy { color: rgba(0, 0, 0, 0.35) !important; }
body.light .music-player-starred-copy.copied { color: #16a34a !important; }
/* Zen Theme Support */
.theme-zen .music-player {
  --widget-bg: rgba(255, 255, 255, 0.12);
  --widget-bg-hover: rgba(255, 255, 255, 0.18);
  --widget-border: rgba(255, 255, 255, 0.15);
  --widget-border-hover: rgba(255, 255, 255, 0.2);
}
.theme-zen .music-player.music-player-expanded {
  background: rgba(15, 15, 20, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}
.theme-zen .music-player-playlist-menu { background: rgba(40, 40, 45, 0.95) !important; border-color: rgba(255, 255, 255, 0.15) !important; }
/* ============================================
   MISSING STYLES RESTORED FROM ORIGINAL CSS
   ============================================ */
/* Music player icon (collapsed state) */
.music-player-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.music-player-icon:hover,
.music-player-icon.music-player-hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
body.light .music-player-icon {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
.theme-zen .music-player-icon,
.theme-zen .music-player-icon:hover,
.theme-zen .music-player-icon.music-player-hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9) !important;
}
.theme-zen .music-player-icon svg,
.theme-zen .music-player-icon.music-player-hover svg {
  color: rgba(255, 255, 255, 0.9) !important;
  stroke: rgba(255, 255, 255, 0.9) !important;
}
/* Music player controls wrapper */
.music-player-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* Disliked playlist item styles */
.music-player-playlist-item.disliked {
  color: rgba(239, 68, 68, 0.6) !important;
}
.music-player-playlist-item.disliked:hover {
  color: rgba(239, 68, 68, 0.9) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}
.music-player-playlist-item.disliked .music-player-playlist-title {
  color: rgba(239, 68, 68, 0.7) !important;
}
.music-player-playlist-item.disliked:hover .music-player-playlist-title {
  color: #ef4444 !important;
}
.music-player-disliked-indicator {
  color: rgba(239, 68, 68, 0.5) !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
.music-player-playlist-item.active .music-player-playlist-index {
  color: rgba(168, 85, 247, 0.5) !important;
}
/* Light theme disliked items */
body.light .music-player-playlist-item.disliked {
  color: rgba(220, 38, 38, 0.6) !important;
}
body.light .music-player-playlist-item.disliked:hover {
  color: rgba(220, 38, 38, 0.9) !important;
  background: rgba(220, 38, 38, 0.08) !important;
}
body.light .music-player-playlist-item.disliked .music-player-playlist-title {
  color: rgba(220, 38, 38, 0.7) !important;
}
body.light .music-player-playlist-item.disliked:hover .music-player-playlist-title {
  color: #dc2626 !important;
}
body.light .music-player-disliked-indicator {
  color: rgba(220, 38, 38, 0.5) !important;
}
body.light .music-player-icon-btn {
  color: rgba(0, 0, 0, 0.8) !important;
}
body.light .music-player-tooltip {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light .music-player-tooltip p {
  color: rgba(0, 0, 0, 0.8) !important;
}
/* Disliked section styles */
.music-player-disliked-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.music-player-disliked-icon {
  color: rgba(239, 68, 68, 0.5) !important;
  flex-shrink: 0 !important;
}
.music-player-starred-item.disliked-item {
  opacity: 0.8 !important;
}
.music-player-starred-item.disliked-item .music-player-starred-title {
  color: rgba(239, 68, 68, 0.8) !important;
}
.music-player-starred-item.disliked-item:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}
.music-player-starred-item.disliked-item:hover .music-player-starred-title {
  color: #ef4444 !important;
}
body.light .music-player-disliked-section {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .music-player-starred-header.disliked {
  color: rgba(220, 38, 38, 0.7) !important;
}
body.light .music-player-starred-header.disliked:hover {
  color: #dc2626 !important;
}
body.light .music-player-starred-item.disliked-item .music-player-starred-title {
  color: rgba(220, 38, 38, 0.8) !important;
}
body.light .music-player-starred-item.disliked-item:hover {
  background: rgba(220, 38, 38, 0.08) !important;
}
body.light .music-player-starred-item.disliked-item:hover .music-player-starred-title {
  color: #dc2626 !important;
}
/* Zen theme overrides */
.theme-zen .music-player-btn {
  color: rgba(255, 255, 255, 0.8) !important;
}
.theme-zen .music-player-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 1) !important;
}
.theme-zen .music-player-icon-btn {
  color: rgba(255, 255, 255, 0.9) !important;
}
.theme-zen .music-player-title {
  color: rgba(255, 255, 255, 0.8) !important;
}
.theme-zen .music-player-title:hover {
  color: rgba(255, 255, 255, 1) !important;
}
.theme-zen .music-player-now-playing {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.theme-zen .music-player-now-playing:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
.theme-zen .music-player-now-playing.copied {
  background: rgba(168, 85, 247, 0.2) !important;
}
.theme-zen .music-player-now-playing-label {
  color: rgba(255, 255, 255, 0.4) !important;
}
.theme-zen .music-player-now-playing-title {
  color: rgba(255, 255, 255, 0.9) !important;
}
.theme-zen .music-player-playlist-item {
  color: rgba(255, 255, 255, 0.6) !important;
}
.theme-zen .music-player-playlist-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
.theme-zen .music-player-playlist-index {
  color: rgba(255, 255, 255, 0.25) !important;
}
.theme-zen .music-player-playlist-items::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}
.theme-zen .music-player-starred-section {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.theme-zen .music-player-starred-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
.theme-zen .music-player-now-playing-track {
  color: rgba(255, 255, 255, 0.4) !important;
}
/* Light theme additional overrides */
body.light .music-player-now-playing:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}
body.light .music-player-now-playing.copied {
  background: rgba(168, 85, 247, 0.1) !important;
}
body.light .music-player-now-playing-label {
  color: rgba(0, 0, 0, 0.4) !important;
}
body.light .music-player-now-playing-title {
  color: rgba(0, 0, 0, 0.85) !important;
}
body.light .music-player-playlist-item {
  color: rgba(0, 0, 0, 0.6) !important;
}
body.light .music-player-playlist-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}
body.light .music-player-playlist-index {
  color: rgba(0, 0, 0, 0.25) !important;
}
body.light .music-player-playlist-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}
body.light .music-player-starred-section {
  border-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .music-player-starred-header:hover {
  background: rgba(251, 191, 36, 0.1) !important;
}
body.light .music-player-starred-item:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}
body.light .music-player-starred-item.playable:hover {
  background: rgba(251, 191, 36, 0.1) !important;
}
body.light .music-player-starred-play {
  color: rgba(0, 0, 0, 0.25) !important;
}
body.light .music-player-starred-item.playable:hover .music-player-starred-play {
  color: #f59e0b !important;
}
body.light .music-player-starred-title {
  color: rgba(0, 0, 0, 0.7) !important;
}
body.light .music-player-starred-remove {
  color: rgba(0, 0, 0, 0.3) !important;
}
body.light .music-player-now-playing-track {
  color: rgba(0, 0, 0, 0.35) !important;
}
body.light .music-player-starred-copy:hover {
  color: rgba(0, 0, 0, 0.7) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .music-player-starred-copy.copied {
  color: #16a34a !important;
  background: rgba(34, 197, 94, 0.1) !important;
}
/* Music player playlist selector */
.music-player-playlist-selector {
  padding: 0.5rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
}
.music-player-playlist-selector-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.5rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.7rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.music-player-playlist-selector-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.music-player-playlist-selector-name {
  flex: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.light .music-player-playlist-selector {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .music-player-playlist-selector-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.8) !important;
}
body.light .music-player-playlist-selector-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
.theme-zen .music-player-playlist-selector {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.theme-zen .music-player-playlist-selector-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.theme-zen .music-player-playlist-selector-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
/* Playlist selector dropdown */
.music-player-playlist-selector-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0.5rem !important;
  right: 0.5rem !important;
  background: rgba(30, 30, 35, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  z-index: 10 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  padding: 0.25rem !important;
}
/* Scrollbar for playlist selector dropdown */
.music-player-playlist-selector-dropdown::-webkit-scrollbar {
  width: 4px !important;
}
.music-player-playlist-selector-dropdown::-webkit-scrollbar-track {
  background: transparent !important;
}
.music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 2px !important;
}
.music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}
.music-player-playlist-selector-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.5rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0.35rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.7rem !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.music-player-playlist-selector-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
.music-player-playlist-selector-item.active {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #a855f7 !important;
}
.music-player-playlist-selector-thumb {
  width: 28px !important;
  height: 28px !important;
  object-fit: cover !important;
  border-radius: 0.35rem !important;
  flex-shrink: 0 !important;
}
/* Larger thumbnails in the dropdown items */
.music-player-playlist-selector-item .music-player-playlist-selector-thumb {
  width: 48px !important;
  height: 36px !important;
  border-radius: 0.25rem !important;
}
/* Placeholder when no thumbnail */
.music-player-playlist-selector-thumb-placeholder {
  width: 48px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.25rem !important;
  flex-shrink: 0 !important;
  color: rgba(255, 255, 255, 0.4) !important;
}
body.light .music-player-playlist-selector-thumb-placeholder {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.35) !important;
}
.music-player-playlist-selector-item-name {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.light .music-player-playlist-selector-dropdown {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}
body.light .music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}
body.light .music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}
body.light .music-player-playlist-selector-item {
  color: rgba(0, 0, 0, 0.65) !important;
}
body.light .music-player-playlist-selector-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}
body.light .music-player-playlist-selector-item.active {
  background: rgba(147, 51, 234, 0.1) !important;
  color: #9333ea !important;
}
.theme-zen .music-player-playlist-selector-dropdown {
  background: rgba(40, 40, 45, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.theme-zen .music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
}
.theme-zen .music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}
/* Pomodoro Timer - Main Widget */
.pomodoro-timer {
  /* Match panel / navigation hint glass style */
  --widget-bg: rgba(255, 255, 255, 0.06);
  --widget-bg-hover: rgba(255, 255, 255, 0.12);
  --widget-border: rgba(255, 255, 255, 0.08);
  --widget-border-hover: rgba(255, 255, 255, 0.12);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--widget-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--widget-border);
  border-radius: 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.pomodoro-timer:hover,
.pomodoro-timer.pomodoro-expanded {
  background: var(--widget-bg-hover);
  border-color: var(--widget-border-hover);
}
.pomodoro-timer.pomodoro-running {
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 50%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--activity-color, #38bdf8) 30%, transparent);
}
.pomodoro-timer.pomodoro-running::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
      var(--activity-color, #38bdf8) var(--progress, 0%),
      transparent var(--progress, 0%));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 2px;
  pointer-events: none;
  opacity: 0.8;
}
.pomodoro-expanded {
  width: 260px !important;
  height: 3rem !important;
  padding: 0.35rem 0.6rem !important;
  gap: 0.4rem !important;
  overflow: visible !important;
  justify-content: space-between !important;
  /* Dark solid background when expanded - matches standard panels */
  background: rgba(15, 15, 20, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}
.pomodoro-daily-total-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}
.pomodoro-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0.4rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
.pomodoro-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 1) !important;
  transform: scale(1.1) !important;
}
.pomodoro-btn:active {
  transform: scale(0.95) !important;
  background: rgba(255, 255, 255, 0.2) !important;
}
/* Specialized Buttons */
.pomodoro-time-btn {
  width: auto !important;
  height: auto !important;
  padding: 0.3rem 0.5rem !important;
}
.pomodoro-time-display {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
}
/* Activity Selector & Menu */
.pomodoro-activity-selector {
  position: relative !important;
  z-index: 10 !important;
  overflow: visible !important;
}
.pomodoro-activity-toggle {
  position: relative !important;
  z-index: 2 !important;
}
.pomodoro-activity-toggle-icon {
  font-size: 1.1rem !important;
  line-height: 1 !important;
}
.pomodoro-activity-menu {
  position: absolute !important;
  bottom: calc(100% + 0.5rem) !important;
  right: 0 !important;
  width: 260px !important; /* Slightly wider for the 4-column grid */
  z-index: 1001 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.4rem !important;
  padding: 0.6rem !important;
  background: rgba(30, 30, 35, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.pomodoro-activity-menu.show-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.pomodoro-activity-menu-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
  font-size: 1.2rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid transparent !important;
  border-left: 3px solid var(--activity-color, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 0.5rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}
.pomodoro-activity-menu-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: scale(1.05) !important;
}
.pomodoro-activity-menu-item.active {
  background: color-mix(in srgb, var(--activity-color) 30%, transparent) !important;
  border-color: var(--activity-color) !important;
}
/* Quick Select Popup */
.pomodoro-quick-select {
  background: rgba(20, 20, 25, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  padding: 2rem !important;
  min-width: 650px !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(20px) !important;
}
/* Daily Totals */
.pomodoro-daily-total {
  font-size: 0.65rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  white-space: nowrap !important;
}
/* Light Theme Support */
body.light .pomodoro-timer {
  --widget-bg: rgba(255, 255, 255, 0.65);
  --widget-bg-hover: rgba(255, 255, 255, 0.8);
  --widget-border: rgba(0, 0, 0, 0.1);
  --widget-border-hover: rgba(0, 0, 0, 0.15);
}
body.light .pomodoro-timer.pomodoro-expanded {
  /* Keep dark background even in light theme for contrast over light content */
  background: rgba(15, 15, 20, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}
body.light .pomodoro-timer.pomodoro-expanded .pomodoro-btn {
  color: rgba(255, 255, 255, 0.8) !important;
}
body.light .pomodoro-timer.pomodoro-expanded .pomodoro-btn:hover {
  color: rgba(255, 255, 255, 1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
body.light .pomodoro-timer.pomodoro-expanded .pomodoro-time-display {
  color: #fff !important;
}
body.light .pomodoro-timer.pomodoro-expanded .pomodoro-daily-total {
  color: rgba(255, 255, 255, 0.6) !important;
}
body.light .pomodoro-btn { color: rgba(0, 0, 0, 0.7) !important; }
body.light .pomodoro-btn:hover { background: rgba(0, 0, 0, 0.08) !important; color: rgba(0, 0, 0, 0.9) !important; }
body.light .pomodoro-time-display { color: #111827 !important; }
body.light .pomodoro-activity-menu { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.1) !important; }
body.light .pomodoro-activity-menu-item { background: rgba(0, 0, 0, 0.04) !important; }
/* Zen Theme Support */
.theme-zen .pomodoro-timer {
  --widget-bg: rgba(255, 255, 255, 0.12);
  --widget-bg-hover: rgba(255, 255, 255, 0.18);
  --widget-border: rgba(255, 255, 255, 0.15);
  --widget-border-hover: rgba(255, 255, 255, 0.2);
}
.theme-zen .pomodoro-timer.pomodoro-expanded {
  background: rgba(15, 15, 20, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}
.theme-zen .pomodoro-activity-menu { background: rgba(40, 40, 45, 0.95) !important; border-color: rgba(255, 255, 255, 0.15) !important; }
/* ============================================
   MISSING STYLES RESTORED FROM ORIGINAL CSS
   ============================================ */
/* Icon Button (collapsed state) */
.pomodoro-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
}
.pomodoro-icon-btn:active {
  transform: scale(0.95);
}
/* Mini time display (collapsed running state) */
.pomodoro-mini-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.pomodoro-mini-activity {
  font-size: 0.85rem;
}
body.light .pomodoro-mini-time {
  color: rgba(0, 0, 0, 0.85);
  text-shadow: none;
}
.theme-zen .pomodoro-mini-time {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
body.light .pomodoro-icon-btn {
  color: rgba(0, 0, 0, 0.7);
}
.theme-zen .pomodoro-btn,
.theme-zen .pomodoro-icon-btn {
  color: rgba(255, 255, 255, 0.8);
}
.theme-zen .pomodoro-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
}
/* Presets menu */
.pomodoro-presets {
  display: flex;
  gap: 0.2rem;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}
.pomodoro-preset-btn {
  padding: 0.3rem 0.45rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 600;
  color: #fff !important;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.pomodoro-preset-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1);
}
.pomodoro-preset-btn.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  color: rgb(56, 189, 248);
}
body.light .pomodoro-preset-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}
body.light .pomodoro-preset-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.9);
}
.theme-zen .pomodoro-preset-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
/* Progress ring */
.pomodoro-progress-ring {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}
.pomodoro-progress-bg {
  display: none;
}
.pomodoro-progress-bar {
  display: none;
}
body.light .pomodoro-progress-bg {
  stroke: rgba(0, 0, 0, 0.1);
}
/* Progress ring */
.pomodoro-daily-total-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  min-width: 140px;
  padding: 0.5rem;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: all 0.15s ease;
  z-index: 1002;
}
.pomodoro-daily-total-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 1rem;
  border: 5px solid transparent;
  border-top-color: rgba(30, 30, 35, 0.95);
}
.pomodoro-daily-total-wrapper:hover .pomodoro-daily-total-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pomodoro-tooltip-header {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pomodoro-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
}
.pomodoro-tooltip-icon {
  font-size: 0.85rem;
}
.pomodoro-tooltip-label {
  flex: 1;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
}
.pomodoro-tooltip-time {
  font-size: 0.65rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
.pomodoro-tooltip-empty {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}
body.light .pomodoro-daily-total {
  color: rgba(0, 0, 0, 0.6);
}
body.light .pomodoro-daily-total-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .pomodoro-daily-total-tooltip::after {
  border-top-color: rgba(255, 255, 255, 0.95);
}
body.light .pomodoro-tooltip-header {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .pomodoro-tooltip-label {
  color: rgba(0, 0, 0, 0.8);
}
body.light .pomodoro-tooltip-time {
  color: rgba(0, 0, 0, 0.6);
}
body.light .pomodoro-tooltip-empty {
  color: rgba(0, 0, 0, 0.4);
}
.theme-zen .pomodoro-daily-total {
  color: rgba(255, 255, 255, 0.7);
}
.theme-zen .pomodoro-daily-total-tooltip {
  background: rgba(40, 40, 45, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
}
/* Reset options buttons */
.pomodoro-reset-options {
  display: flex;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}
.pomodoro-reset-option-btn {
  padding: 0.4rem 0.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: #fff;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.pomodoro-reset-option-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.15) 100%);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
.pomodoro-reset-option-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
/* Log & Reset - Green */
.pomodoro-reset-option-btn.pomodoro-log-reset {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  border-color: rgba(34, 197, 94, 0.6);
  color: #052e16;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.pomodoro-reset-option-btn.pomodoro-log-reset:hover {
  background: linear-gradient(180deg, #86efac 0%, #4ade80 100%);
  border-color: rgba(74, 222, 128, 0.8);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
/* Reset Day - Orange */
.pomodoro-reset-option-btn.pomodoro-reset-daily {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  border-color: rgba(234, 88, 12, 0.6);
  color: #431407;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.pomodoro-reset-option-btn.pomodoro-reset-daily:hover {
  background: linear-gradient(180deg, #fdba74 0%, #fb923c 100%);
  border-color: rgba(251, 146, 60, 0.8);
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.5), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
body.light .pomodoro-reset-option-btn {
  background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
  border-color: rgba(0, 0, 0, 0.15);
  color: #334155;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
body.light .pomodoro-reset-option-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #fff 100%);
  border-color: rgba(0, 0, 0, 0.2);
  color: #1e293b;
}
body.light .pomodoro-reset-option-btn.pomodoro-log-reset {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  border-color: rgba(22, 163, 74, 0.5);
  color: #052e16;
}
body.light .pomodoro-reset-option-btn.pomodoro-reset-daily {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  border-color: rgba(194, 65, 12, 0.5);
  color: #431407;
}
/* Activity menu tooltip */
.pomodoro-activity-menu-icon {
  transition: transform 0.15s ease;
}
.pomodoro-activity-menu-tooltip {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.3rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.85);
  border-radius: 0.35rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.15s ease;
  z-index: 10;
}
.pomodoro-activity-menu-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
}
.pomodoro-activity-menu-item:hover .pomodoro-activity-menu-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.pomodoro-activity-menu-item:hover .pomodoro-activity-menu-icon {
  transform: scale(1.1);
}
body.light .pomodoro-activity-menu-tooltip {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(30, 30, 35, 0.9);
}
body.light .pomodoro-activity-menu-tooltip::after {
  border-top-color: rgba(30, 30, 35, 0.9);
}
/* Quick Select Overlay */
.pomodoro-quick-select-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.15s ease;
  overflow: hidden;
}
body.pomodoro-popup-open {
  overflow: hidden;
}
body.pomodoro-popup-open .focus-mode-panel-content {
  overflow: hidden;
}
body.light .pomodoro-quick-select {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}
.pomodoro-quick-select-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.light .pomodoro-quick-select-header {
  color: rgba(0, 0, 0, 0.45);
}
.pomodoro-quick-status {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.pomodoro-quick-status.running {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}
.pomodoro-quick-status.paused {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
}
.pomodoro-section-label {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 0.75rem;
}
body.light .pomodoro-section-label {
  color: rgba(0, 0, 0, 0.3);
}
.pomodoro-quick-select-options {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.pomodoro-quick-option {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(15, 15, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pomodoro-quick-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: scale(1.03);
}
.pomodoro-quick-option.active {
  background: color-mix(in srgb, var(--activity-color, #38bdf8) 15%, transparent);
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 40%, transparent);
}
.pomodoro-quick-option.highlighted {
  background: color-mix(in srgb, var(--activity-color, #38bdf8) 12%, transparent);
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 30%, transparent);
  transform: scale(1.03);
}
.pomodoro-quick-option.playing,
.pomodoro-activity-btn.playing {
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 60%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--activity-color, #38bdf8) 30%, transparent);
}
.pomodoro-playing-indicator {
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  font-size: 0.6rem;
  color: var(--activity-color, #38bdf8);
  animation: pulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px var(--activity-color, #38bdf8));
}
.pomodoro-activity-btn .pomodoro-playing-indicator {
  bottom: auto;
  top: 0.35rem;
  right: auto;
  left: 0.35rem;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
body.light .pomodoro-quick-option {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .pomodoro-quick-option:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light .pomodoro-quick-option.active {
  background: color-mix(in srgb, var(--activity-color, #38bdf8) 10%, transparent);
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 25%, transparent);
}
body.light .pomodoro-quick-option.highlighted {
  background: color-mix(in srgb, var(--activity-color, #38bdf8) 10%, transparent);
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 25%, transparent);
}
.pomodoro-quick-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.02em;
}
body.light .pomodoro-quick-key {
  color: rgba(0, 0, 0, 0.35);
}
.pomodoro-quick-label {
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff !important;
  letter-spacing: -0.02em;
}
body.light .pomodoro-quick-label {
  color: rgba(0, 0, 0, 0.8);
}
/* Activity Categories in Quick Select */
.pomodoro-quick-activities {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.pomodoro-activity-btn {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  background: rgba(15, 15, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--activity-color, rgba(255, 255, 255, 0.15));
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
}
.pomodoro-activity-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: scale(1.03);
}
.pomodoro-activity-btn.active {
  background: color-mix(in srgb, var(--activity-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--activity-color) 35%, transparent);
}
.pomodoro-activity-btn.highlighted {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.pomodoro-activity-btn.active.highlighted {
  background: color-mix(in srgb, var(--activity-color) 18%, transparent);
  border-color: color-mix(in srgb, var(--activity-color) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--activity-color) 20%, transparent);
}
body.light .pomodoro-activity-btn.highlighted {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}
.pomodoro-activity-key {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.02em;
}
.pomodoro-activity-btn.active .pomodoro-activity-key {
  color: var(--activity-color);
}
body.light .pomodoro-activity-key {
  color: rgba(0, 0, 0, 0.3);
}
body.light .pomodoro-activity-btn.active .pomodoro-activity-key {
  color: var(--activity-color);
}
.pomodoro-activity-icon {
  font-size: 1.75rem;
  line-height: 1;
}
.pomodoro-activity-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: -0.01em;
}
.pomodoro-activity-btn.active .pomodoro-activity-label {
  color: var(--activity-color);
}
.pomodoro-activity-time {
  font-size: 0.55rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'JetBrains Mono', monospace;
}
.pomodoro-activity-btn.active .pomodoro-activity-time {
  color: color-mix(in srgb, var(--activity-color) 70%, white);
}
body.light .pomodoro-activity-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}
body.light .pomodoro-activity-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .pomodoro-activity-label {
  color: rgba(0, 0, 0, 0.7);
}
body.light .pomodoro-activity-time {
  color: rgba(0, 0, 0, 0.4);
}
.pomodoro-quick-select-hint {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 1.5rem;
}
.pomodoro-quick-select-hint kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0.1rem;
}
body.light .pomodoro-quick-select-hint {
  color: rgba(0, 0, 0, 0.35);
}
body.light .pomodoro-quick-select-hint kbd {
  color: rgba(0, 0, 0, 0.4);
}
/* Focus mode indicator */
.pomodoro-focus-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 3rem;
  height: 3rem;
  pointer-events: auto;
  z-index: 1001;
  color: rgba(255, 255, 255, 0.35);
}
body.light .pomodoro-focus-indicator {
  color: rgba(0, 0, 0, 0.25);
}
.theme-zen .pomodoro-focus-indicator {
  color: rgba(255, 255, 255, 0.3);
}
/* Container states */
.pomodoro-container.pomodoro-focus-idle {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.pomodoro-container.pomodoro-focus-idle .pomodoro-timer {
  width: 3rem;
  height: 3rem;
  padding: 0;
}
.pomodoro-container.pomodoro-focus-idle .pomodoro-timer.pomodoro-expanded {
  width: 3rem;
  height: 3rem;
  padding: 0;
}
/* Completion Overlay */
.pomodoro-completion-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000 !important;
  pointer-events: auto !important;
  cursor: pointer;
  animation: overlayFadeIn 0.5s ease forwards;
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pomodoro-completion-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  animation: contentSlideUp 0.6s ease 0.2s forwards;
  opacity: 0;
}
@keyframes contentSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.pomodoro-completion-icon {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pomodoro-completion-circle {
  position: absolute;
  width: 100%;
  height: 100%;
}
.pomodoro-completion-circle circle {
  stroke: rgba(56, 189, 248, 0.3);
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  animation: circleReveal 1s ease 0.4s forwards;
}
@keyframes circleReveal {
  to { stroke-dashoffset: 0; }
}
.pomodoro-completion-check {
  font-size: 3rem;
  color: rgb(56, 189, 248);
  opacity: 0;
  animation: checkFadeIn 0.4s ease 0.8s forwards;
}
@keyframes checkFadeIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
.pomodoro-completion-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.pomodoro-completion-title {
  font-size: 1.75rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pomodoro-completion-duration {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
}
.pomodoro-completion-total {
  font-size: 0.875rem;
  color: rgb(56, 189, 248);
  font-family: 'JetBrains Mono', monospace;
  padding: 0.5rem 1rem;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 2rem;
  margin-top: 0.5rem;
}
.pomodoro-completion-dismiss {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
  animation: pulseFade 2s ease infinite;
}
@keyframes pulseFade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}
body.light .pomodoro-completion-overlay {
  background: rgba(255, 255, 255, 0.9);
}
body.light .pomodoro-completion-title {
  color: rgba(0, 0, 0, 0.85);
}
body.light .pomodoro-completion-duration {
  color: rgba(0, 0, 0, 0.5);
}
body.light .pomodoro-completion-dismiss {
  color: rgba(0, 0, 0, 0.3);
}
/* Confirmation Modal */
.pomodoro-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: confirmOverlayFadeIn 0.2s ease-out;
}
@keyframes confirmOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pomodoro-confirm-modal {
  background: linear-gradient(145deg, rgba(30, 30, 35, 0.98), rgba(20, 20, 25, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  padding: 2rem 2.5rem;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  animation: confirmModalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes confirmModalSlideIn {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.pomodoro-confirm-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pomodoro-confirm-icon.reset {
  color: rgba(148, 163, 184, 0.9);
}
.pomodoro-confirm-icon.resetDay {
  color: rgba(251, 146, 60, 0.9);
}
.pomodoro-confirm-content {
  margin-bottom: 1.75rem;
}
.pomodoro-confirm-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.pomodoro-confirm-message {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.35rem;
  line-height: 1.5;
}
.pomodoro-confirm-subtitle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  font-style: italic;
}
.pomodoro-confirm-actions {
  display: flex;
  gap: 0.75rem;
}
.pomodoro-confirm-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pomodoro-confirm-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pomodoro-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
.pomodoro-confirm-proceed {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(252, 165, 165, 0.95);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.pomodoro-confirm-proceed:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
}
.pomodoro-confirm-proceed.resetDay {
  background: rgba(251, 146, 60, 0.15);
  color: rgba(253, 186, 116, 0.95);
  border-color: rgba(251, 146, 60, 0.25);
}
.pomodoro-confirm-proceed.resetDay:hover {
  background: rgba(251, 146, 60, 0.25);
  border-color: rgba(251, 146, 60, 0.4);
}
body.light .pomodoro-confirm-modal {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
}
body.light .pomodoro-confirm-icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .pomodoro-confirm-icon.reset {
  color: rgba(71, 85, 105, 0.9);
}
body.light .pomodoro-confirm-icon.resetDay {
  color: rgba(234, 88, 12, 0.9);
}
body.light .pomodoro-confirm-title {
  color: rgba(0, 0, 0, 0.9);
}
body.light .pomodoro-confirm-message {
  color: rgba(0, 0, 0, 0.65);
}
body.light .pomodoro-confirm-subtitle {
  color: rgba(0, 0, 0, 0.45);
}
body.light .pomodoro-confirm-cancel {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.65);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .pomodoro-confirm-cancel:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.85);
}
body.light .pomodoro-confirm-proceed {
  background: rgba(239, 68, 68, 0.1);
  color: rgba(185, 28, 28, 0.9);
  border-color: rgba(239, 68, 68, 0.2);
}
body.light .pomodoro-confirm-proceed:hover {
  background: rgba(239, 68, 68, 0.18);
}
body.light .pomodoro-confirm-proceed.resetDay {
  background: rgba(234, 88, 12, 0.1);
  color: rgba(194, 65, 12, 0.9);
  border-color: rgba(234, 88, 12, 0.2);
}
body.light .pomodoro-confirm-proceed.resetDay:hover {
  background: rgba(234, 88, 12, 0.18);
}
/* ============================================
   HYPNOTIC BREATHING INTERFACE
   Designed to induce calm, trance-like state
   ============================================ */
.breath-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #000;
  opacity: 1;
}
.breath-overlay.entering {
  animation: fadeIn 0.8s ease-out;
}
.breath-overlay.exiting {
  animation: fadeOut 0.5s ease-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* Theme backgrounds - deep, dark, calming */
.breath-reactor { background: radial-gradient(ellipse at center, #0a0a12 0%, #000 70%); }
.breath-forest { background: radial-gradient(ellipse at center, #0a120a 0%, #020502 70%); }
.breath-ocean { background: radial-gradient(ellipse at center, #0a1218 0%, #020508 70%); }
/* ============================================
   HYPNOTIC RINGS - Concentric circles that pulse
   ============================================ */
.breath-rings {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.breath-ring-outer {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  opacity: 0;
  animation: ringPulseOut 15s ease-out infinite;
}
.breath-ring-outer:nth-child(1) { animation-delay: 0s; }
.breath-ring-outer:nth-child(2) { animation-delay: 3s; }
.breath-ring-outer:nth-child(3) { animation-delay: 6s; }
.breath-ring-outer:nth-child(4) { animation-delay: 9s; }
.breath-ring-outer:nth-child(5) { animation-delay: 12s; }
@keyframes ringPulseOut {
  0% {
    width: 200px;
    height: 200px;
    opacity: 0.3;
  }
  100% {
    width: 800px;
    height: 800px;
    opacity: 0;
  }
}
.breath-reactor .breath-ring-outer { border-color: rgba(0, 255, 255, 0.15); }
.breath-forest .breath-ring-outer { border-color: rgba(74, 222, 128, 0.12); }
.breath-ocean .breath-ring-outer { border-color: rgba(56, 189, 248, 0.12); }
/* ============================================
   SLOW ROTATING SPIRAL GLOW
   ============================================ */
.breath-spiral {
  position: fixed;
  width: 600px;
  height: 600px;
  pointer-events: none;
  opacity: 0.4;
  animation: spiralRotate 60s linear infinite;
}
.breath-spiral::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--glow, rgba(0, 255, 255, 0.08)) 30deg,
    transparent 60deg,
    var(--glow, rgba(0, 255, 255, 0.05)) 120deg,
    transparent 150deg,
    var(--glow, rgba(0, 255, 255, 0.08)) 210deg,
    transparent 240deg,
    var(--glow, rgba(0, 255, 255, 0.05)) 300deg,
    transparent 330deg
  );
  border-radius: 50%;
  filter: blur(30px);
}
@keyframes spiralRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.breath-reactor .breath-spiral { --glow: rgba(0, 255, 255, 0.08); }
.breath-forest .breath-spiral { --glow: rgba(74, 222, 128, 0.06); }
.breath-ocean .breath-spiral { --glow: rgba(56, 189, 248, 0.07); }
/* ============================================
   MAIN CONTAINER - Gentle float
   ============================================ */
.breath-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  animation: gentleFloat 8s ease-in-out infinite;
}
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
/* ============================================
   THE BREATHING CIRCLE - Hypnotic center
   ============================================ */
.breath-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Soft, glowing border */
  border: 2px solid var(--color, #00ffff);
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--color) 5%, transparent) 0%,
    transparent 70%
  );
  
  /* Layered glow for depth */
  box-shadow: 
    0 0 40px color-mix(in srgb, var(--color) 30%, transparent),
    0 0 80px color-mix(in srgb, var(--color) 15%, transparent),
    0 0 120px color-mix(in srgb, var(--color) 8%, transparent),
    inset 0 0 60px color-mix(in srgb, var(--color) 8%, transparent);
  
  transform: scale(0.7);
  transition: border-color 0.8s ease, box-shadow 0.8s ease;
}
/* Inner glow ring */
.breath-circle::before {
  content: '';
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color) 30%, transparent);
  animation: innerRingPulse 4s ease-in-out infinite;
}
@keyframes innerRingPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.02); }
}
/* Breathing animations - SMOOTH like actual lungs */
.breath-circle.breath-phase-inhale {
  animation: lungInhale 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.breath-circle.breath-phase-topup {
  animation: lungTopup 0.5s ease-out forwards;
}
.breath-circle.breath-phase-hold {
  animation: lungHold 4s ease-in-out forwards;
}
.breath-circle.breath-phase-exhale {
  animation: lungExhale 6s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.breath-circle.breath-phase-complete {
  animation: lungComplete 3s ease-in-out infinite;
}
.breath-circle.breath-phase-rest {
  transform: scale(0.7);
  opacity: 0.5;
}
@keyframes lungInhale {
  0% { transform: scale(0.7); }
  100% { transform: scale(1.15); }
}
@keyframes lungTopup {
  0% { transform: scale(1.15); filter: brightness(1); }
  50% { transform: scale(1.2); filter: brightness(1.2); }
  100% { transform: scale(1.15); filter: brightness(1); }
}
@keyframes lungHold {
  0%, 100% { transform: scale(1.15); }
  50% { transform: scale(1.12); }
}
@keyframes lungExhale {
  0% { transform: scale(1.15); }
  100% { transform: scale(0.7); }
}
@keyframes lungComplete {
  0%, 100% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(0.95); opacity: 0.9; }
}
/* ============================================
   CENTER TEXT - Minimal, non-distracting
   ============================================ */
.breath-inner {
  text-align: center;
  z-index: 2;
}
.breath-label {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  margin-bottom: 0.3rem;
  opacity: 0.9;
  transition: color 0.8s ease;
}
.breath-reactor .breath-label {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.breath-forest .breath-label,
.breath-ocean .breath-label {
  font-family: 'Inter', -apple-system, sans-serif;
  text-transform: capitalize;
  letter-spacing: 0.15em;
  font-weight: 300;
}
.breath-instruction {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.1em;
  font-weight: 300;
}
.breath-reactor .breath-instruction {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
}
/* ============================================
   CYCLE COUNTER - Subtle
   ============================================ */
.breath-cycle-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  opacity: 0.6;
}
.breath-cycle-number {
  font-size: 1.5rem;
  font-weight: 200;
  color: var(--color);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.breath-reactor .breath-cycle-number {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
}
.breath-cycle-label {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* ============================================
   HINT - Very subtle
   ============================================ */
.breath-hint {
  position: fixed;
  bottom: 2rem;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.12);
  letter-spacing: 0.1em;
  transition: opacity 0.3s ease;
}
.breath-overlay:hover .breath-hint {
  color: rgba(255, 255, 255, 0.25);
}
.breath-reactor .breath-hint {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}
/* ============================================
   THEME PICKER - Minimal
   ============================================ */
.breath-theme-btn {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  opacity: 0.5;
  transition: all 0.3s ease;
}
.breath-theme-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
.breath-theme-menu {
  position: fixed;
  top: 4.5rem;
  right: 1.5rem;
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.5rem;
  backdrop-filter: blur(20px);
  z-index: 10;
  animation: menuFade 0.2s ease-out;
}
@keyframes menuFade {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.breath-theme-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: none;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.breath-theme-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.breath-theme-item.active {
  background: rgba(255, 255, 255, 0.1);
}
.screensaver-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #0a0a0f;
  cursor: default;
  opacity: 0;
  transition: opacity 0.8s ease-out;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
/* Centered layer for main content to prevent layout shifts */
.screensaver-main-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.screensaver-main-layer > * {
  pointer-events: auto;
}
.screensaver-overlay.visible {
  opacity: 1;
}
/* Wallpaper background for zen theme */
.screensaver-overlay.has-wallpaper {
  background: transparent;
}
.screensaver-wallpaper {
  position: absolute;
  inset: 0;
  /* Use screensaver-specific bg if set, otherwise fall back to app bg image */
  background-image: var(--screensaver-bg-image, var(--app-bg-image));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.4) saturate(0.8);
  animation: screensaver-wallpaper-zoom 30s ease-in-out infinite alternate;
}
@keyframes screensaver-wallpaper-zoom {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}
/* Ambient background effects */
.screensaver-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.screensaver-gradient {
  position: absolute;
  /* Extend 15% beyond viewport on all sides to prevent edges showing during animation */
  inset: -15%;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(var(--accent-rgb), 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(var(--accent-rgb), 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(16, 185, 129, 0.08) 0%, transparent 40%);
  animation: screensaver-ambient-shift 20s ease-in-out infinite;
}
@keyframes screensaver-ambient-shift {

  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }

  25% {
    transform: scale(1.1) translate(5%, -3%);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.05) translate(-3%, 5%);
    opacity: 1;
  }

  75% {
    transform: scale(1.15) translate(-5%, -5%);
    opacity: 0.85;
  }
}
.screensaver-particles {
  position: absolute;
  /* Extend beyond viewport to prevent edges showing during drift animation */
  inset: -5%;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(2px 2px at 70% 40%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(2px 2px at 15% 85%, rgba(255, 255, 255, 0.08), transparent);
  background-size: 100% 100%;
  animation: screensaver-particles-drift 30s linear infinite;
}
@keyframes screensaver-particles-drift {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-20px);
  }
}
/* Main content container */
.screensaver-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  animation: screensaver-content-float 8s ease-in-out infinite;
}
@keyframes screensaver-content-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}
/* Time block */
.screensaver-time-block {
  text-align: center;
}
.screensaver-greeting {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.screensaver-time {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: clamp(4rem, 15vw, 10rem);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 4px 30px rgba(var(--accent-rgb), 0.3);
}
.screensaver-date {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
  letter-spacing: 0.05em;
}
/* Weather and location block - single line */
.screensaver-weather-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}
.screensaver-location-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.screensaver-location-inline svg {
  opacity: 0.6;
}
.screensaver-weather-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.screensaver-weather-inline svg {
  opacity: 0.7;
}
.screensaver-divider {
  opacity: 0.3;
}
/* Timer block - with large centered icon */
.screensaver-timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.screensaver-timer-ring-container {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Centered content inside the ring */
.screensaver-timer-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  z-index: 1;
}
.screensaver-timer-center-icon {
  font-size: 4rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
/* Label below the ring */
.screensaver-timer-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
}
.screensaver-timer-ring {
  position: absolute;
  width: 160px;
  height: 160px;
  /* Filter is applied inline with the actual color */
  animation: screensaver-ring-glow 3s ease-in-out infinite;
}
.screensaver-timer-ring-bg {
  stroke: rgba(255, 255, 255, 0.08);
}
.screensaver-timer-ring-progress {
  transition: stroke-dashoffset 1s linear;
}
.screensaver-timer-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.02em;
}
@keyframes screensaver-ring-glow {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}
/* Music block - compact single row */
.screensaver-music-block {
  display: flex;
  align-items: center;
  justify-content: center;
}
.screensaver-music-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(15, 15, 20, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.screensaver-music-row svg {
  opacity: 0.5;
  flex-shrink: 0;
}
.screensaver-music-title {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}
.screensaver-music-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  flex-shrink: 0;
}
.screensaver-music-visualizer .bar {
  width: 2px;
  background: linear-gradient(to top, var(--accent-dark), var(--accent));
  border-radius: 1px;
  animation: screensaver-music-bar 0.5s ease-in-out infinite alternate;
}
.screensaver-music-visualizer .bar:nth-child(1) {
  height: 40%;
  animation-delay: 0s;
}
.screensaver-music-visualizer .bar:nth-child(2) {
  height: 70%;
  animation-delay: 0.1s;
}
.screensaver-music-visualizer .bar:nth-child(3) {
  height: 100%;
  animation-delay: 0.2s;
}
@keyframes screensaver-music-bar {
  0% {
    transform: scaleY(0.3);
  }

  100% {
    transform: scaleY(1);
  }
}
/* Quote block - compact */
.screensaver-quote-block {
  max-width: 550px;
  text-align: center;
  padding: 0.75rem;
  animation: screensaver-quote-fade 0.8s ease-out 0.3s both;
}
@keyframes screensaver-quote-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.screensaver-quote-text {
  font-family: 'Inter', serif;
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}
.screensaver-quote-author {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}
/* Dismiss hint */
.screensaver-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.05em;
  animation: screensaver-hint-pulse 3s ease-in-out infinite;
}
@keyframes screensaver-hint-pulse {

  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.4;
  }
}
/* Screensaver Command Menu */
.screensaver-command-menu {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 0.75rem;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 100002;
  animation: screensaver-menu-appear 0.2s ease-out;
}
@keyframes screensaver-menu-appear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
.screensaver-command-menu-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.25rem 0.5rem 0.5rem;
  margin-bottom: 0.25rem;
}
.screensaver-command-menu-title.music {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.screensaver-command-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.screensaver-command-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.screensaver-command-item.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.screensaver-command-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: system-ui, -apple-system, sans-serif;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.7);
}
.screensaver-command-label {
  flex: 1;
}
/* Individual Notes List in Command Menu */
.screensaver-command-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 180px;
  overflow-y: auto;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.screensaver-command-notes-list::-webkit-scrollbar {
  width: 4px;
}
.screensaver-command-notes-list::-webkit-scrollbar-track {
  background: transparent;
}
.screensaver-command-notes-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.screensaver-command-note-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.15s ease;
}
.screensaver-command-note-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.screensaver-command-note-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
}
.screensaver-command-note-text {
  flex: 1;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screensaver-command-note-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}
.screensaver-command-note-item:hover .screensaver-command-note-delete {
  opacity: 1;
}
.screensaver-command-note-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}
/* Cursor Trail Effect */
.screensaver-cursor-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100003;
  overflow: hidden;
}
.screensaver-trail-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;

  /* Gradient glow effect */
  background: radial-gradient(circle at center,
      rgba(147, 197, 253, 0.9) 0%,
      rgba(139, 92, 246, 0.6) 40%,
      rgba(236, 72, 153, 0.3) 70%,
      transparent 100%);

  /* Dynamic sizing based on position in trail */
  --scale: calc(0.3 + (var(--particle-index) / var(--particle-total)) * 0.7);
  --opacity: calc(0.2 + (var(--particle-index) / var(--particle-total)) * 0.8);

  animation: trailFade 0.6s ease-out forwards;
  box-shadow:
    0 0 10px rgba(147, 197, 253, 0.5),
    0 0 20px rgba(var(--accent-rgb), 0.3),
    0 0 30px rgba(236, 72, 153, 0.2);
}
@keyframes trailFade {
  0% {
    opacity: var(--opacity, 0.8);
    transform: translate(-50%, -50%) scale(var(--scale, 1));
  }

  50% {
    opacity: calc(var(--opacity, 0.8) * 0.6);
    transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 1.5));
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 0.3));
  }
}
/* Every other particle has slightly different color */
.screensaver-trail-particle:nth-child(odd) {
  background: radial-gradient(circle at center,
      rgba(52, 211, 153, 0.9) 0%,
      rgba(59, 130, 246, 0.6) 40%,
      rgba(168, 85, 247, 0.3) 70%,
      transparent 100%);
  box-shadow:
    0 0 10px rgba(52, 211, 153, 0.5),
    0 0 20px rgba(59, 130, 246, 0.3),
    0 0 30px rgba(168, 85, 247, 0.2);
}
/* Delete Mode Overlay */
.screensaver-delete-mode {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 16px;
  padding: 1rem;
  min-width: 320px;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.2s ease;
  z-index: 100001;
}
.screensaver-delete-mode-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fca5a5;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(239, 68, 68, 0.15);
}
.screensaver-delete-mode-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 280px;
  overflow-y: auto;
}
.screensaver-delete-mode-list::-webkit-scrollbar {
  width: 4px;
}
.screensaver-delete-mode-list::-webkit-scrollbar-track {
  background: transparent;
}
.screensaver-delete-mode-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.screensaver-delete-mode-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-left: 3px solid var(--sticky-accent, rgba(255, 255, 255, 0.2));
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.screensaver-delete-mode-item:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}
.screensaver-delete-mode-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #fca5a5;
}
.screensaver-delete-mode-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screensaver-delete-mode-hint {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}
.screensaver-delete-mode-hint kbd {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
  font-family: system-ui, -apple-system, sans-serif;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
}
/* ===========================================
   SCREENSAVER CORNER PANEL (Remote Control)
   =========================================== */
.screensaver-corner-panel {
  position: fixed;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(20, 20, 25, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0.85rem;
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 100002;
  animation: screensaver-panel-appear 0.2s ease-out;
}
@keyframes screensaver-panel-appear {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.screensaver-panel-section {
  padding: 0.5rem 0;
}
.screensaver-panel-section:first-child {
  padding-top: 0;
}
.screensaver-panel-section:last-child {
  padding-bottom: 0;
}
.screensaver-panel-section+.screensaver-panel-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.5rem;
}
.screensaver-panel-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.5rem;
}
.screensaver-panel-section-header svg {
  opacity: 0.7;
}
/* Timer Controls */
.screensaver-panel-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.screensaver-panel-timer-category {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 30px;
  padding: 0 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.75rem;
}
.screensaver-panel-timer-category:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--timer-color, rgba(255, 255, 255, 0.3));
  box-shadow: 0 0 0 1px var(--timer-color, rgba(255, 255, 255, 0.1));
}
.screensaver-panel-timer-category svg.rotated {
  transform: rotate(180deg);
}
.screensaver-panel-timer-icon {
  font-size: 0.9rem;
}
.screensaver-panel-timer-label {
  font-weight: 500;
}
.screensaver-panel-timer-time-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 30px;
  padding: 0 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--timer-color, #38bdf8);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.screensaver-panel-timer-time-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--timer-color, rgba(255, 255, 255, 0.3));
}
.screensaver-panel-timer-time-btn.paused {
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.6);
}
.screensaver-panel-timer-time-btn svg.rotated {
  transform: rotate(180deg);
}
.screensaver-panel-timer-time {
  font-variant-numeric: tabular-nums;
}
.screensaver-panel-timer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}
.screensaver-panel-timer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--timer-color, #38bdf8);
}
.screensaver-panel-timer-btn.running {
  background: rgba(var(--timer-color, 56, 189, 248), 0.15);
  border-color: var(--timer-color, #38bdf8);
  color: var(--timer-color, #38bdf8);
}
/* Category Picker */
.screensaver-panel-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease,
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.25s ease,
              padding 0.25s ease;
  pointer-events: none;
}
.screensaver-panel-categories.expanded {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 0.5rem;
  padding: 0.35rem;
  pointer-events: auto;
}
.screensaver-panel-category {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--cat-color, rgba(255, 255, 255, 0.15));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-panel-category:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  border-left-color: var(--cat-color, rgba(255, 255, 255, 0.3));
}
.screensaver-panel-category.active {
  background: color-mix(in srgb, var(--cat-color) 20%, transparent);
  border-color: var(--cat-color, #a78bfa);
  border-left-color: var(--cat-color, #a78bfa);
  box-shadow: 0 0 8px var(--cat-color, rgba(167, 139, 250, 0.4));
}
.screensaver-panel-category-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}
.screensaver-panel-category-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screensaver-panel-category.active .screensaver-panel-category-label {
  color: var(--cat-color, #a78bfa);
}
/* Duration Picker */
.screensaver-panel-durations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease,
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.25s ease,
              padding 0.25s ease;
  pointer-events: none;
}
.screensaver-panel-durations.expanded {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 0.5rem;
  padding: 0.5rem;
  pointer-events: auto;
}
.screensaver-panel-duration {
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-panel-duration:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}
.screensaver-panel-duration.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}
/* Music Controls */
.screensaver-panel-music-title {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screensaver-panel-music-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.screensaver-panel-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
/* Music Visualizer Canvas */
.screensaver-panel-visualizer-canvas {
  width: 100%;
  height: 48px;
  padding: 0;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.screensaver-panel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-panel-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}
.screensaver-panel-btn.play {
  width: 36px;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}
.screensaver-panel-btn.play:hover {
  background: rgba(34, 197, 94, 0.25);
}
.screensaver-panel-btn.play.playing {
  background: rgba(34, 197, 94, 0.2);
}
.screensaver-panel-btn.active.star {
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.3);
  background: rgba(250, 204, 21, 0.15);
}
.screensaver-panel-btn.active.dislike {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.15);
}
/* AI Button */
.screensaver-panel-ai-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 10px;
  color: var(--accent-light);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-panel-ai-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: #e0d4fc;
}
.screensaver-panel-ai-btn svg {
  color: var(--accent);
}
.screensaver-panel-ai-badge {
  margin-left: auto;
  padding: 0.15rem 0.4rem;
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 4px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
}
/* Light Theme for Corner Panel */
.screensaver-overlay.theme-light .screensaver-corner-panel {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.screensaver-overlay.theme-light .screensaver-panel-section+.screensaver-panel-section {
  border-top-color: rgba(0, 0, 0, 0.08);
}
.screensaver-overlay.theme-light .screensaver-panel-section-header {
  color: rgba(0, 0, 0, 0.45);
}
.screensaver-overlay.theme-light .screensaver-panel-timer-category {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}
.screensaver-overlay.theme-light .screensaver-panel-timer-category:hover {
  background: rgba(0, 0, 0, 0.08);
}
.screensaver-overlay.theme-light .screensaver-panel-timer-time-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
.screensaver-overlay.theme-light .screensaver-panel-timer-time-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.screensaver-overlay.theme-light .screensaver-panel-timer-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}
.screensaver-overlay.theme-light .screensaver-panel-timer-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}
.screensaver-overlay.theme-light .screensaver-panel-categories,
.screensaver-overlay.theme-light .screensaver-panel-durations {
  background: rgba(0, 0, 0, 0.03);
}
.screensaver-overlay.theme-light .screensaver-panel-category {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  border-left-color: var(--cat-color, rgba(0, 0, 0, 0.15));
}
.screensaver-overlay.theme-light .screensaver-panel-category:hover {
  background: rgba(0, 0, 0, 0.08);
  border-left-color: var(--cat-color, rgba(0, 0, 0, 0.25));
}
.screensaver-overlay.theme-light .screensaver-panel-category.active {
  background: color-mix(in srgb, var(--cat-color) 15%, transparent);
  border-color: var(--cat-color);
}
.screensaver-overlay.theme-light .screensaver-panel-category-label {
  color: rgba(0, 0, 0, 0.75);
}
.screensaver-overlay.theme-light .screensaver-panel-category.active .screensaver-panel-category-label {
  color: var(--cat-color);
}
.screensaver-overlay.theme-light .screensaver-panel-duration {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
.screensaver-overlay.theme-light .screensaver-panel-duration:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}
.screensaver-overlay.theme-light .screensaver-panel-music-title {
  color: rgba(0, 0, 0, 0.6);
}
.screensaver-overlay.theme-light .screensaver-panel-visualizer-canvas {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
.screensaver-overlay.theme-light .screensaver-panel-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
.screensaver-overlay.theme-light .screensaver-panel-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}
.screensaver-overlay.theme-light .screensaver-panel-ai-btn {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}
.screensaver-overlay.theme-light .screensaver-panel-ai-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.screensaver-overlay.theme-light .screensaver-panel-ai-badge {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(0, 0, 0, 0.6);
}
/* Page Picker for AI Context */
.screensaver-page-picker {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 16px;
  padding: 1rem;
  min-width: 340px;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(var(--accent-rgb), 0.15);
  animation: slideUp 0.2s ease;
  z-index: 100003;
}
.screensaver-page-picker-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.9);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}
.screensaver-page-picker-header svg {
  color: rgba(var(--accent-rgb), 0.8);
}
.screensaver-page-picker-close {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-page-picker-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.screensaver-page-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 320px;
  overflow-y: auto;
}
.screensaver-page-picker-list::-webkit-scrollbar {
  width: 4px;
}
.screensaver-page-picker-list::-webkit-scrollbar-track {
  background: transparent;
}
.screensaver-page-picker-list::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 2px;
}
.screensaver-page-picker-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.screensaver-page-picker-item:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.screensaver-page-picker-item.sticky-notes {
  background: linear-gradient(135deg, rgba(255, 243, 176, 0.12), rgba(255, 213, 130, 0.08));
  border-color: rgba(234, 179, 8, 0.2);
}
.screensaver-page-picker-item.sticky-notes:hover {
  background: linear-gradient(135deg, rgba(255, 243, 176, 0.2), rgba(255, 213, 130, 0.15));
  border-color: rgba(234, 179, 8, 0.4);
}
.screensaver-page-picker-item svg {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}
.screensaver-page-picker-item.sticky-notes svg {
  color: rgba(234, 179, 8, 0.9);
}
.screensaver-page-picker-plus {
  margin-left: auto;
  font-size: 0.65rem;
  color: rgba(234, 179, 8, 0.7);
  background: rgba(234, 179, 8, 0.15);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.screensaver-page-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
}
.screensaver-page-picker-empty svg {
  opacity: 0.5;
}
.screensaver-page-picker-hint {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}
.screensaver-page-picker-hint kbd {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
  font-family: system-ui, -apple-system, sans-serif;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
}
/* Music Controls in Command Menu */
.screensaver-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
}
.screensaver-music-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 44px;
  height: 52px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-music-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
.screensaver-music-btn.play {
  width: 52px;
  height: 52px;
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-light);
}
.screensaver-music-btn.play:hover {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.screensaver-music-btn.play.playing {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}
.screensaver-music-btn.active.favorite {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fcd34d;
}
.screensaver-music-btn.active.favorite svg {
  fill: currentColor;
}
.screensaver-music-btn.active.dislike {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.screensaver-music-btn-key {
  font-size: 0.6rem;
  opacity: 0.5;
  font-family: system-ui, -apple-system, sans-serif;
}
.screensaver-music-btn .spinning {
  animation: spin 1s linear infinite;
}
/* Sticky Notes */
.screensaver-sticky-notes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100001;
}
.screensaver-sticky-note {
  position: absolute;
  width: 160px;
  min-height: 100px;
  padding: 1rem;
  background: var(--sticky-bg);
  border: 1px solid var(--sticky-border);
  border-radius: 2px;
  color: var(--sticky-text);
  font-size: 0.85rem;
  line-height: 1.4;
  transform: rotate(var(--sticky-rotation, 0deg));
  box-shadow:
    2px 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: grab;
}
.screensaver-sticky-note:hover {
  transform: rotate(var(--sticky-rotation, 0deg)) scale(1.02);
  box-shadow:
    3px 5px 15px rgba(0, 0, 0, 0.2),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
}
.screensaver-sticky-note.dragging {
  cursor: grabbing;
  transform: rotate(0deg) scale(1.05);
  box-shadow:
    8px 12px 30px rgba(0, 0, 0, 0.35),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
  z-index: 100;
  transition: none;
}
.screensaver-sticky-note.selected {
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.8),
    2px 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
}
.screensaver-sticky-note.selected:hover {
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.9),
    3px 5px 15px rgba(0, 0, 0, 0.2),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
}
.screensaver-sticky-note.multi-dragging {
  cursor: grabbing;
  transform: rotate(0deg) scale(1.03);
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.9),
    6px 10px 25px rgba(0, 0, 0, 0.3),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
  z-index: 100;
  transition: none;
}
.screensaver-sticky-selected-indicator {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: rgba(59, 130, 246, 0.9);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
/* Selection Rectangle */
.screensaver-selection-rect {
  position: fixed;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 2px;
  pointer-events: none;
  z-index: 99999;
  animation: selectionPulse 1s ease infinite;
}
@keyframes selectionPulse {

  0%,
  100% {
    background: rgba(59, 130, 246, 0.1);
  }

  50% {
    background: rgba(59, 130, 246, 0.15);
  }
}
.screensaver-sticky-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 12px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent);
  border-radius: 2px 2px 0 0;
}
.screensaver-sticky-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--sticky-text);
  opacity: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-sticky-note:hover .screensaver-sticky-delete {
  opacity: 0.6;
}
.screensaver-sticky-delete:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.3);
  color: #b91c1c;
}
.screensaver-sticky-content {
  word-wrap: break-word;
  overflow: hidden;
  cursor: pointer;
}
.screensaver-sticky-content .markdown-block {
  font-size: 0.85rem;
  line-height: 1.5;
}
.screensaver-sticky-content .markdown-block p {
  margin: 0 0 0.5em 0;
}
.screensaver-sticky-content .markdown-block p:last-child {
  margin-bottom: 0;
}
.screensaver-sticky-content .markdown-block ul,
.screensaver-sticky-content .markdown-block ol {
  margin: 0.25em 0;
  padding-left: 1.25em;
}
.screensaver-sticky-content .markdown-block li {
  margin: 0.15em 0;
}
.screensaver-sticky-content .markdown-block code {
  background: rgba(0, 0, 0, 0.15);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-size: 0.85em;
}
.screensaver-sticky-content .markdown-block pre {
  background: rgba(0, 0, 0, 0.15);
  padding: 0.5em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.5em 0;
}
.screensaver-sticky-content .markdown-block strong {
  font-weight: 600;
}
.screensaver-sticky-content .markdown-block a {
  color: inherit;
  text-decoration: underline;
  opacity: 0.8;
}
.screensaver-sticky-content .markdown-block a:hover {
  opacity: 1;
}
.screensaver-sticky-content .markdown-block blockquote {
  border-left: 2px solid currentColor;
  margin: 0.5em 0;
  padding-left: 0.75em;
  opacity: 0.85;
}
/* Inline Edit Mode for Sticky Notes */
.screensaver-sticky-edit-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: -0.25rem;
}
.screensaver-sticky-edit-input {
  width: 100%;
  min-height: 60px;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--sticky-border);
  border-radius: 4px;
  color: var(--sticky-text);
  font-size: 0.85rem;
  line-height: 1.4;
  font-family: inherit;
  resize: none;
  outline: none;
}
.screensaver-sticky-edit-input:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.screensaver-sticky-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}
.screensaver-sticky-edit-btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-sticky-edit-btn.cancel {
  background: rgba(0, 0, 0, 0.1);
  color: var(--sticky-text);
}
.screensaver-sticky-edit-btn.cancel:hover {
  background: rgba(0, 0, 0, 0.15);
}
.screensaver-sticky-edit-btn.save {
  background: rgba(59, 130, 246, 0.9);
  color: white;
}
.screensaver-sticky-edit-btn.save:hover {
  background: rgba(59, 130, 246, 1);
}
.screensaver-sticky-date {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 0.65rem;
  opacity: 0.5;
}
/* Resize Handle */
.screensaver-sticky-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.screensaver-sticky-resize::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.4;
}
.screensaver-sticky-note:hover .screensaver-sticky-resize {
  opacity: 1;
}
.screensaver-sticky-note.resizing {
  cursor: se-resize;
}
.screensaver-sticky-note.resizing .screensaver-sticky-resize {
  opacity: 1;
}
/* Note Input Modal */
.screensaver-note-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100003;
}
.screensaver-note-modal {
  width: 90%;
  max-width: 700px;
  height: 80vh;
  max-height: 80vh;
  background: rgba(25, 25, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: screensaver-modal-appear 0.25s ease-out;
  display: flex;
  flex-direction: column;
}
/* Make note editor fill the modal */
.screensaver-note-modal .note-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.screensaver-note-modal .note-editor-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.screensaver-note-modal .note-editor-input {
  flex: 1;
  min-height: 200px;
  height: 100%;
  resize: none;
}
.screensaver-note-modal .note-editor-footer {
  flex-shrink: 0;
}
.screensaver-note-modal .note-editor-color-picker {
  flex-shrink: 0;
}
.screensaver-note-modal-header {
  flex-shrink: 0;
}
@keyframes screensaver-modal-appear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.screensaver-note-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
}
.screensaver-note-modal-header svg {
  opacity: 0.6;
}
.screensaver-note-input-wrapper {
  position: relative;
  padding: 1rem 1.25rem;
}
.screensaver-note-input {
  width: 100%;
  min-height: 350px;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.75;
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
  tab-size: 2;
}
.screensaver-note-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.screensaver-note-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.screensaver-note-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.screensaver-note-char-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
}
.screensaver-note-modal-actions {
  display: flex;
  gap: 0.5rem;
}
.screensaver-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-note-btn.cancel {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
}
.screensaver-note-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}
.screensaver-note-btn.save {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: white;
}
.screensaver-note-btn.save:hover {
  filter: brightness(1.1);
}
.screensaver-note-btn.save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Mini Insert Menu */
.screensaver-mini-insert-menu {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 260px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  z-index: 100010;
  backdrop-filter: blur(12px);
  animation: insertMenuAppear 0.15s ease-out;
}
@keyframes insertMenuAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.screensaver-mini-insert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.4rem;
}
.screensaver-mini-insert-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-mini-insert-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.screensaver-mini-insert-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease;
  text-align: left;
}
.screensaver-mini-insert-item:hover,
.screensaver-mini-insert-item.selected {
  background: rgba(255, 255, 255, 0.1);
}
.screensaver-mini-insert-icon {
  font-size: 1rem;
}
.screensaver-mini-insert-label {
  flex: 1;
}
.screensaver-mini-insert-key {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
}
.screensaver-mini-insert-arrow {
  font-size: 0.75rem;
  opacity: 0.4;
}
/* Tag Menu in Screensaver */
.screensaver-tag-menu {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 260px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  z-index: 100010;
  backdrop-filter: blur(12px);
  animation: tagMenuAppear 0.15s ease-out;
}
@keyframes tagMenuAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.screensaver-tag-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.4rem;
}
.screensaver-tag-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}
.screensaver-tag-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.screensaver-tag-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease;
  text-align: left;
}
.screensaver-tag-menu-item:hover,
.screensaver-tag-menu-item.selected {
  background: rgba(255, 255, 255, 0.1);
}
.screensaver-tag-menu-icon {
  font-size: 1rem;
}
.screensaver-tag-menu-label {
  flex: 1;
}
.screensaver-tag-menu-tag {
  font-size: 0.75rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  color: rgba(147, 197, 253, 0.8);
  background: rgba(147, 197, 253, 0.15);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
/* Emoji Picker in Screensaver */
.screensaver-emoji-picker-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100010;
  animation: emojiPickerAppear 0.15s ease-out;
}
@keyframes emojiPickerAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.screensaver-emoji-picker-container .emoji-picker {
  width: 380px;
  max-height: 450px;
  background: rgba(30, 30, 35, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px);
  overflow: hidden;
}
/* Sun countdown in weather block */
.screensaver-sun-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}
.screensaver-sun-countdown.daytime {
  color: rgba(251, 191, 36, 0.7);
}
.screensaver-sun-countdown.nighttime {
  color: rgba(147, 197, 253, 0.7);
}
.screensaver-sun-countdown svg {
  opacity: 0.8;
}
/* Light theme adjustments */
.screensaver-overlay.theme-light {
  background: #fafafa;
}
.screensaver-overlay.theme-light .screensaver-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(var(--accent-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(16, 185, 129, 0.06) 0%, transparent 40%);
}
.screensaver-overlay.theme-light .screensaver-particles {
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(0, 0, 0, 0.08), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(0, 0, 0, 0.06), transparent),
    radial-gradient(2px 2px at 70% 40%, rgba(0, 0, 0, 0.07), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(0, 0, 0, 0.05), transparent);
}
.screensaver-overlay.theme-light .screensaver-greeting {
  color: rgba(0, 0, 0, 0.4);
}
.screensaver-overlay.theme-light .screensaver-time {
  color: rgba(0, 0, 0, 0.85);
  text-shadow: 0 4px 30px rgba(var(--accent-rgb), 0.15);
}
.screensaver-overlay.theme-light .screensaver-date {
  color: rgba(0, 0, 0, 0.5);
}
.screensaver-overlay.theme-light .screensaver-weather,
.screensaver-overlay.theme-light .screensaver-temp {
  color: rgba(0, 0, 0, 0.6);
}
.screensaver-overlay.theme-light .screensaver-location {
  color: rgba(0, 0, 0, 0.4);
}
.screensaver-overlay.theme-light .screensaver-timer-block {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
.screensaver-overlay.theme-light .screensaver-timer-label {
  color: rgba(0, 0, 0, 0.5);
}
.screensaver-overlay.theme-light .screensaver-timer-time {
  color: rgba(0, 0, 0, 0.85);
}
.screensaver-overlay.theme-light .screensaver-music-block {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
.screensaver-overlay.theme-light .screensaver-music-label {
  color: rgba(0, 0, 0, 0.4);
}
.screensaver-overlay.theme-light .screensaver-music-title {
  color: rgba(0, 0, 0, 0.7);
}
.screensaver-overlay.theme-light .screensaver-quote-text {
  color: rgba(0, 0, 0, 0.6);
}
.screensaver-overlay.theme-light .screensaver-quote-author {
  color: rgba(0, 0, 0, 0.35);
}
.screensaver-overlay.theme-light .screensaver-hint {
  color: rgba(0, 0, 0, 0.2);
}
/* Zen theme adjustments */
.screensaver-overlay.theme-zen {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.screensaver-overlay.theme-zen.has-wallpaper {
  background: transparent;
}
.screensaver-overlay.theme-zen .screensaver-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(34, 197, 94, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(74, 222, 128, 0.08) 0%, transparent 40%);
}
.screensaver-overlay.theme-zen.has-wallpaper .screensaver-gradient {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%),
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(34, 197, 94, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(16, 185, 129, 0.12) 0%, transparent 50%);
}
/* Settings page screensaver section */
.screensaver-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.screensaver-timeout-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.screensaver-timeout-pill {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}
.screensaver-timeout-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.screensaver-timeout-pill.active {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border-color: transparent;
  color: white;
}
body.light .screensaver-timeout-pill {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}
body.light .screensaver-timeout-pill:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .screensaver-timeout-pill.active {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border-color: transparent;
  color: white;
}
/* ============================================
   ACTIVITY TIMELINE
   ============================================ */
.activity-with-timeline {
  display: flex;
  gap: 2rem;
  height: 100%;
  min-height: 0;
}
.activity-log-section {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.activity-timeline {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 1.5rem;
  overflow-y: auto;
}
.activity-timeline-header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.activity-timeline-date {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: 0.5rem;
}
.activity-timeline-summary {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
}
.timeline-stat {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.timeline-stat.focus {
  color: rgba(129, 230, 217, 0.9);
}
.timeline-stat.idle,
.timeline-stat.gap {
  color: rgba(255, 255, 255, 0.35);
}
.activity-timeline-track {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 0;
}
.timeline-entry {
  display: grid;
  grid-template-columns: 70px 20px 1fr;
  gap: 0.5rem;
  align-items: stretch;
}
/* Absolute positioned entries */
.timeline-abs-entry {
  display: grid;
  grid-template-columns: 70px 20px 1fr;
  gap: 0.5rem;
  align-items: start;
}
.timeline-line-background {
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}
/* -----------------------------------------------------------------------------
 * 5. COMMON - Reusable component styles
 * -------------------------------------------------------------------------- */
/* Editable Markdown Block Styles */
.editable-markdown-view {
  cursor: text;
  min-height: 100px;
  padding: 0.5rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.editable-markdown-view:hover {
  background: rgba(255, 255, 255, 0.02);
}
body.light .editable-markdown-view:hover {
  background: rgba(0, 0, 0, 0.02);
}
.editable-markdown-edit-mode {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
}
.editable-markdown-editor-wrapper {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.25);
  outline: none !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  isolation: isolate;
  position: relative;
  z-index: 1;
}
body.light .editable-markdown-editor-wrapper {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}
.editable-markdown-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 0 0.25rem;
}
body.light .editable-markdown-hint {
  color: rgba(0, 0, 0, 0.4);
}
.editable-markdown-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.editable-markdown-cancel-btn,
.editable-markdown-save-btn {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.editable-markdown-cancel-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
.editable-markdown-save-btn {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(56, 189, 248, 0.1));
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}
/* Spinner */
.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* Insert Menu Popup */
.insert-menu {
  position: fixed;
  min-width: 260px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  z-index: 100010;
  backdrop-filter: blur(12px);
}
.insert-menu-header {
  padding: 0.4rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.4rem;
}
.insert-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease;
  text-align: left;
}
.insert-menu-item.selected {
  background: rgba(255, 255, 255, 0.1);
}
.insert-menu-icon {
  font-size: 1rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}
.insert-menu-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.insert-menu-label {
  font-size: 0.85rem;
}
.insert-menu-preview {
  font-size: 0.7rem;
  color: rgba(147, 197, 253, 0.6);
}
.insert-menu-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.insert-menu-kbd {
  font-size: 0.65rem;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 1px 5px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}
.insert-menu-arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
}
/* Light theme for insert menu */
body.light .insert-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.15);
}
body.light .insert-menu-header {
  color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .insert-menu-item {
  color: rgba(0, 0, 0, 0.8);
}
body.light .insert-menu-item.selected {
  background: rgba(0, 0, 0, 0.06);
}
body.light .insert-menu-kbd {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light .insert-menu-preview {
  color: rgba(59, 130, 246, 0.7);
}
body.light .insert-menu-arrow {
  color: rgba(0, 0, 0, 0.4);
}
/* Voice Recording Overlay */
.voice-recording-overlay {
  position: fixed;
  inset: 0;
  z-index: 100020;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.voice-recording-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  position: relative;
}
.voice-recording-indicator.transcribing {
  cursor: default;
}
.voice-recording-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  animation: voice-pulse 1s ease-in-out infinite;
}
.voice-recording-indicator.transcribing .voice-recording-pulse {
  background: var(--accent);
  animation: voice-pulse 1.5s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.voice-recording-icon {
  font-size: 1.4rem;
}
.voice-recording-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
}
/* Tag Menu Popup */
.tag-menu {
  position: fixed;
  min-width: 200px;
  max-width: 280px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  z-index: 100010;
  backdrop-filter: blur(12px);
}
.tag-menu-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.4rem;
}
.tag-search-text {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(147, 197, 253, 0.8);
}
.tag-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.04);
}
.tag-menu-list::-webkit-scrollbar {
  width: 8px;
}
.tag-menu-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}
.tag-menu-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.tag-menu-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
  background-clip: padding-box;
}
.tag-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease;
  text-align: left;
}
.tag-menu-item:hover,
.tag-menu-item.selected {
  background: rgba(255, 255, 255, 0.1);
}
.tag-menu-hash {
  color: rgba(147, 197, 253, 0.7);
  font-weight: 500;
}
.tag-menu-text {
  flex: 1;
}
.tag-menu-new {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(74, 222, 128, 0.9);
  background: rgba(74, 222, 128, 0.15);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.tag-menu-empty {
  padding: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  font-style: italic;
}
.tag-menu-hints {
  padding: 0.5rem 0.6rem 0.25rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.4rem;
  display: flex;
  gap: 1rem;
}
/* People menu */
.people-menu-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(148, 163, 184, 0.6);
}
.people-menu-circle[data-circle="core"] { background: #f472b6; }
.people-menu-circle[data-circle="inner"] { background: #a78bfa; }
.people-menu-circle[data-circle="orbit"] { background: #38bdf8; }
.people-menu-circle[data-circle="distant"] { background: #94a3b8; }
.people-menu-badge {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
  margin-left: auto;
  text-transform: capitalize;
}
/* Light theme support */
body.light .tag-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.15);
}
body.light .tag-menu-header {
  color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .tag-search-text {
  color: rgba(59, 130, 246, 0.9);
}
body.light .tag-menu-item {
  color: rgba(0, 0, 0, 0.8);
}
body.light .tag-menu-item:hover,
body.light .tag-menu-item.selected {
  background: rgba(0, 0, 0, 0.06);
}
body.light .tag-menu-hash {
  color: rgba(59, 130, 246, 0.8);
}
body.light .tag-menu-empty {
  color: rgba(0, 0, 0, 0.4);
}
body.light .tag-menu-hints {
  color: rgba(0, 0, 0, 0.35);
  border-top-color: rgba(0, 0, 0, 0.08);
}
body.light .tag-menu-list {
  scrollbar-color: rgba(100, 116, 139, 0.45) rgba(15, 23, 42, 0.06);
}
body.light .tag-menu-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.06);
}
body.light .tag-menu-list::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.45);
  background-clip: padding-box;
}
body.light .tag-menu-list::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 85, 105, 0.6);
  background-clip: padding-box;
}
/* File Link Menu ([[wikilinks]]) */
.file-link-menu {
  min-width: 300px;
  max-width: 400px;
}
.file-link-menu .tag-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
}
.file-link-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
}
.file-link-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.file-link-info .tag-menu-text {
  font-weight: 500;
}
.file-link-path {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.light .file-link-path {
  color: rgba(0, 0, 0, 0.4);
}
/* Emoji Picker */
.emoji-picker {
  position: fixed;
  min-width: 320px;
  max-width: 360px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  z-index: 100010;
  backdrop-filter: blur(12px);
}
.emoji-picker-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.4rem;
}
.emoji-back-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.emoji-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.emoji-picker-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.emoji-search-container {
  position: relative;
  margin-bottom: 0.5rem;
}
.emoji-search-input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  outline: none;
}
.emoji-search-input:focus {
  border-color: rgba(147, 197, 253, 0.5);
  background: rgba(255, 255, 255, 0.1);
}
.emoji-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.emoji-search-clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem;
}
.emoji-search-clear:hover {
  color: rgba(255, 255, 255, 0.8);
}
.emoji-categories {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.emoji-categories::-webkit-scrollbar {
  height: 3px;
}
.emoji-categories::-webkit-scrollbar-track {
  background: transparent;
}
.emoji-categories::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.emoji-categories::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
.emoji-category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.emoji-category-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.emoji-category-btn.active,
.emoji-category-btn.focused {
  background: rgba(147, 197, 253, 0.2);
}
.emoji-category-icon {
  font-size: 1.2rem;
}
.emoji-category-num {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.25rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.emoji-grid::-webkit-scrollbar {
  width: 4px;
}
.emoji-grid::-webkit-scrollbar-track {
  background: transparent;
}
.emoji-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.emoji-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
.emoji-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.1s ease;
}
.emoji-grid button:hover,
.emoji-grid button.selected {
  background: rgba(255, 255, 255, 0.15);
}
.emoji-picker-hints {
  padding: 0.5rem 0.6rem 0.25rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.4rem;
  display: flex;
  gap: 1rem;
}
/* Light theme emoji picker */
body.light .emoji-picker {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.15);
}
body.light .emoji-picker-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .emoji-back-btn {
  color: rgba(0, 0, 0, 0.6);
}
body.light .emoji-back-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.9);
}
body.light .emoji-picker-title {
  color: rgba(0, 0, 0, 0.7);
}
body.light .emoji-search-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}
body.light .emoji-search-input:focus {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(0, 0, 0, 0.06);
}
body.light .emoji-search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
body.light .emoji-search-clear {
  color: rgba(0, 0, 0, 0.4);
}
body.light .emoji-search-clear:hover {
  color: rgba(0, 0, 0, 0.8);
}
body.light .emoji-category-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .emoji-category-btn.active,
body.light .emoji-category-btn.focused {
  background: rgba(59, 130, 246, 0.15);
}
body.light .emoji-category-num {
  color: rgba(0, 0, 0, 0.4);
}
body.light .emoji-grid button:hover,
body.light .emoji-grid button.selected {
  background: rgba(0, 0, 0, 0.08);
}
body.light .emoji-picker-hints {
  color: rgba(0, 0, 0, 0.35);
  border-top-color: rgba(0, 0, 0, 0.08);
}
/* Cursor Ping Animation - shows where cursor was placed on double-click */
.cursor-ping {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(147, 197, 253, 0.9);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100;
  animation: cursorPingAnimation 0.4s ease-out forwards;
}
@keyframes cursorPingAnimation {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.5);
  }
}
/* Light theme cursor ping */
body.light .cursor-ping {
  background: rgba(59, 130, 246, 0.8);
}
/* ============================================
   CodeMirror Search Panel — Zen Styling
   ============================================ */
.cm-panels {
  background: transparent !important;
  border: none !important;
}
.cm-search {
  background: rgba(20, 20, 28, 0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
/* Search input fields */
.cm-search input[type="text"],
.cm-search .cm-textfield {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 13px !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  outline: none !important;
  min-width: 180px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cm-search input[type="text"]:focus,
.cm-search .cm-textfield:focus {
  border-color: rgba(56, 189, 248, 0.5) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
}
.cm-search input[type="text"]::placeholder,
.cm-search .cm-textfield::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}
/* Buttons */
.cm-search button,
.cm-search .cm-button {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px !important;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.cm-search button:hover,
.cm-search .cm-button:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
.cm-search button:active,
.cm-search .cm-button:active {
  background: rgba(255, 255, 255, 0.18) !important;
}
/* Close button */
.cm-search button[name="close"],
.cm-search .cm-panel-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 16px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  position: absolute;
  right: 8px;
  top: 8px;
}
.cm-search button[name="close"]:hover,
.cm-search .cm-panel-close:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
/* Checkboxes */
.cm-search input[type="checkbox"] {
  accent-color: #38bdf8;
  margin-right: 4px;
}
/* Labels */
.cm-search label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  cursor: pointer;
  white-space: nowrap;
}
.cm-search label:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}
/* Match highlight in document */
.cm-searchMatch {
  background: rgba(250, 204, 21, 0.25) !important;
  border-radius: 2px;
  outline: 1px solid rgba(250, 204, 21, 0.4);
}
.cm-searchMatch-selected {
  background: rgba(250, 204, 21, 0.45) !important;
  outline: 2px solid rgba(250, 204, 21, 0.7);
}
/* "by word" label cleanup */
.cm-search br {
  display: none;
}
/* Light theme overrides */
body.light .cm-search {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85) !important;
}
body.light .cm-search input[type="text"],
body.light .cm-search .cm-textfield {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}
body.light .cm-search input[type="text"]:focus,
body.light .cm-search .cm-textfield:focus {
  border-color: rgba(59, 130, 246, 0.5) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
body.light .cm-search input[type="text"]::placeholder,
body.light .cm-search .cm-textfield::placeholder {
  color: rgba(0, 0, 0, 0.35) !important;
}
body.light .cm-search button,
body.light .cm-search .cm-button {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: rgba(0, 0, 0, 0.7) !important;
}
body.light .cm-search button:hover,
body.light .cm-search .cm-button:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}
body.light .cm-search button[name="close"],
body.light .cm-search .cm-panel-close {
  color: rgba(0, 0, 0, 0.35) !important;
}
body.light .cm-search button[name="close"]:hover,
body.light .cm-search .cm-panel-close:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.7) !important;
}
body.light .cm-search label {
  color: rgba(0, 0, 0, 0.55) !important;
}
body.light .cm-searchMatch {
  background: rgba(250, 204, 21, 0.3) !important;
  outline-color: rgba(202, 138, 4, 0.5);
}
body.light .cm-searchMatch-selected {
  background: rgba(250, 204, 21, 0.5) !important;
  outline-color: rgba(202, 138, 4, 0.7);
}
/* LiveEditorCompat — wrapper + built-in toolbar */
.live-editor-compat {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}
/* MarkdownEditor uses display:contents, so LivePreviewEditor is a direct flex child */
.live-editor-compat .live-preview-editor {
  width: 100%;
  flex: 1;
  min-height: 0;
}
.live-editor-compat .cm-editor {
  width: 100%;
}
/* ── Toolbar ──────────────────────────────────────────────────── */
.live-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
body.light .live-editor-toolbar {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
.live-editor-toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .live-editor-toolbar-group {
  border-right-color: rgba(0, 0, 0, 0.08);
}
.live-editor-toolbar-group:last-child {
  border-right: none;
}
.live-editor-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
body.light .live-editor-toolbar-btn {
  color: rgba(0, 0, 0, 0.45);
}
.live-editor-toolbar-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
body.light .live-editor-toolbar-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}
.live-editor-toolbar-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.live-editor-toolbar-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
body.light .live-editor-toolbar-btn.active {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.85);
}
.live-editor-toolbar-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  min-width: 18px;
  text-align: center;
  letter-spacing: 0.02em;
}
body.light .live-editor-toolbar-label {
  color: rgba(0, 0, 0, 0.4);
}
/* ── Font size scaling ────────────────────────────────────────── */
.live-editor-font-xs  .cm-editor { font-size: 11px; }
.live-editor-font-sm  .cm-editor { font-size: 13px; }
.live-editor-font-base .cm-editor { font-size: 15px; }
.live-editor-font-lg  .cm-editor { font-size: 17px; }
.live-editor-font-xl  .cm-editor { font-size: 19px; }
.live-editor-font-2xl .cm-editor { font-size: 22px; }
.live-editor-font-3xl .cm-editor { font-size: 26px; }
/* ============================================
   Reusable Note Editor Component
   ============================================ */
.note-editor {
  display: flex;
  flex-direction: column;
}
.note-editor-input-wrapper {
  position: relative;
  padding: 1rem 1.25rem;
}
.note-editor-input {
  width: 100%;
  min-height: 350px;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.75;
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
  tab-size: 2;
}
.note-editor-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.note-editor-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  white-space: pre-line;
}
/* Popups (Insert Menu & Tag Menu) */
.note-editor-popup {
  position: fixed;
  min-width: 220px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  z-index: 100010;
  backdrop-filter: blur(12px);
  animation: noteEditorPopupAppear 0.15s ease-out;
}
@keyframes noteEditorPopupAppear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.note-editor-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.4rem;
}
.note-editor-popup-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}
.note-editor-popup-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.note-editor-popup-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease;
  text-align: left;
}
.note-editor-popup-item:hover,
.note-editor-popup-item.selected {
  background: rgba(255, 255, 255, 0.1);
}
.note-editor-popup-icon {
  font-size: 1rem;
}
.note-editor-popup-label {
  flex: 1;
}
.note-editor-popup-key {
  font-size: 0.7rem;
  font-weight: 600;
  font-family: system-ui, -apple-system, sans-serif;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
}
.note-editor-popup-arrow {
  font-size: 0.75rem;
  opacity: 0.4;
}
.note-editor-popup-tag {
  font-size: 0.75rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  color: rgba(147, 197, 253, 0.8);
  background: rgba(147, 197, 253, 0.15);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.note-editor-popup-empty {
  padding: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  font-style: italic;
}
/* Emoji Picker Container */
.note-editor-emoji-picker-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100010;
  animation: noteEditorPopupAppear 0.15s ease-out;
}
.note-editor-emoji-picker-container .emoji-picker {
  width: 380px;
  max-height: 450px;
  background: rgba(30, 30, 35, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px);
  overflow: hidden;
}
/* Footer */
.note-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.note-editor-footer-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.note-editor-char-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
}
.note-editor-actions {
  display: flex;
  gap: 0.5rem;
}
.note-editor-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.note-editor-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.note-editor-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}
.note-editor-btn.save {
  background: rgba(var(--accent-rgb), 0.9);
  color: white;
}
.note-editor-btn.save:hover {
  background: rgba(var(--accent-rgb), 1);
}
.note-editor-btn.save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.note-editor-btn.organize {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.note-editor-btn.organize:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  color: rgba(var(--accent-rgb), 1);
}
.note-editor-btn.organize:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.note-editor-btn.organize .spinning {
  animation: spin 1s linear infinite;
}
/* Light theme support */
body.light .note-editor-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.9);
}
body.light .note-editor-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
body.light .note-editor-popup {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .note-editor-popup-header {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .note-editor-popup-close {
  color: rgba(0, 0, 0, 0.4);
}
body.light .note-editor-popup-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}
body.light .note-editor-popup-item {
  color: rgba(0, 0, 0, 0.8);
}
body.light .note-editor-popup-item:hover,
body.light .note-editor-popup-item.selected {
  background: rgba(0, 0, 0, 0.08);
}
body.light .note-editor-popup-key {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
body.light .note-editor-footer {
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .note-editor-char-count {
  color: rgba(0, 0, 0, 0.4);
}
body.light .note-editor-btn.cancel {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}
body.light .note-editor-btn.cancel:hover {
  background: rgba(0, 0, 0, 0.1);
}
/* Color Picker for Sticky Notes */
.note-editor-color-picker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.note-editor-color-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.note-editor-color-swatches {
  display: flex;
  gap: 0.5rem;
}
.note-editor-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.note-editor-color-swatch:hover {
  transform: scale(1.1);
}
.note-editor-color-swatch.selected {
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.note-editor-color-swatch svg {
  color: inherit;
  opacity: 0.8;
}
body.light .note-editor-color-picker {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .note-editor-color-label {
  color: rgba(0, 0, 0, 0.5);
}
body.light .note-editor-color-swatch.selected {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
/* -----------------------------------------------------------------------------
 * 6. FEATURES - Feature-specific styles
 * -------------------------------------------------------------------------- */
/* AI Context Mention & Hashtag Menus - Hardened */
.ai-chat-mention-menu {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(25, 25, 30, 0.98) !important;
  border: 2px solid var(--accent) !important;
  /* Visible border for debug */
  border-radius: 12px !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5) !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  animation: slideUpFade 0.15s ease-out !important;
}
body.light .ai-chat-mention-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--accent-dark) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15) !important;
}
.ai-chat-mention-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
body.light .ai-chat-mention-header {
  background: rgba(0, 0, 0, 0.02) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}
.ai-chat-mention-list {
  max-height: 300px !important;
  overflow-y: auto !important;
  padding: 0.5rem 0 !important;
}
.ai-chat-mention-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 0.6rem 1rem !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.85rem !important;
  text-align: left !important;
  cursor: pointer !important;
}
.ai-chat-mention-item:hover,
.ai-chat-mention-item.selected {
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: #fff !important;
}
body.light .ai-chat-mention-item {
  color: rgba(0, 0, 0, 0.75) !important;
}
body.light .ai-chat-mention-item:hover,
body.light .ai-chat-mention-item.selected {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent-dark) !important;
}
.ai-chat-mention-title {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ai-chat-mention-type {
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 0.1rem 0.4rem !important;
  border-radius: 4px !important;
  margin-left: auto !important;
}
/* Settings Page Styles */
/* Uses shared .page-panel styles from AppLayout.css */
.settings-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.settings-section {
  background: rgba(15, 15, 20, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
body.light .settings-section {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}
body.zen .settings-section {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
}
body.zen .settings-section svg {
  color: var(--zen-panel-font-color, rgba(0, 0, 0, 0.6));
}
.settings-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1rem;
}
body.light .settings-section-header {
  color: rgba(0, 0, 0, 0.5);
}
body.zen .settings-section-header {
  color: var(--zen-section-header-color, rgba(0, 0, 0, 0.5));
  opacity: 0.7;
}
body.zen .settings-section-header svg {
  color: var(--zen-section-header-color, rgba(0, 0, 0, 0.5));
  opacity: 0.7;
}
/* Theme Pills */
.theme-pills {
  display: flex;
  gap: 0.5rem;
}
.theme-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}
.theme-pill.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
  color: #c084fc;
}
body.light .theme-pill {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.6);
}
body.light .theme-pill:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.8);
}
body.light .theme-pill.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--accent);
  color: var(--accent-dark);
}
body.zen .theme-pill {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.5);
  color: var(--zen-panel-font-color, rgba(0, 0, 0, 0.65));
}
body.zen .theme-pill:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--zen-panel-font-color, rgba(0, 0, 0, 0.85));
}
body.zen .theme-pill.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
  color: var(--accent-dark);
}
/* Wallpaper Grid */
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}
@media (max-width: 800px) {
  .wallpaper-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 600px) {
  .wallpaper-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.wallpaper-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wallpaper-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.light .wallpaper-label {
  color: rgba(0, 0, 0, 0.6);
}
body.zen .wallpaper-label {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.6));
}
.wallpaper-item {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.wallpaper-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wallpaper-item:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.02);
}
.wallpaper-item.selected {
  border-color: #22c55e;
}
.wallpaper-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #22c55e;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Custom URL Input - Premium style */
.custom-url-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.custom-url-input:focus-within {
  border-color: #c084fc;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15), 0 2px 8px rgba(0, 0, 0, 0.15);
}
.custom-url-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 400;
}
.custom-url-input input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.custom-url-input .clear-btn {
  padding: 0.35rem;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.15s ease;
}
.custom-url-input .clear-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}
/* Light theme URL input */
body.light .custom-url-input {
  border-color: rgba(0, 0, 0, 0.15);
  background: #fff;
  color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
body.light .custom-url-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}
body.light .custom-url-input input {
  color: #1e293b;
  font-weight: 500;
}
body.light .custom-url-input input::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-weight: 400;
}
body.light .custom-url-input .clear-btn {
  color: rgba(0, 0, 0, 0.45);
}
body.light .custom-url-input .clear-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.08);
}
/* Zen theme URL input - Dark style matching sidebar */
body.zen .custom-url-input {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
body.zen .custom-url-input:focus-within {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2), 0 2px 10px rgba(0, 0, 0, 0.25);
}
body.zen .custom-url-input svg {
  color: rgba(255, 255, 255, 0.6);
}
body.zen .custom-url-input input {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}
body.zen .custom-url-input input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}
body.zen .custom-url-input .clear-btn {
  color: rgba(255, 255, 255, 0.5);
}
body.zen .custom-url-input .clear-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}
/* Panel Style Controls */
.panel-style-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.style-control {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.style-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
body.light .style-label {
  color: rgba(0, 0, 0, 0.5);
}
body.zen .style-label {
  color: var(--zen-panel-font-color, rgba(0, 0, 0, 0.5));
  opacity: 0.7;
}
.slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.style-slider {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.style-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
body.zen .style-slider {
  background: rgba(255, 255, 255, 0.2);
}
body.zen .style-slider::-webkit-slider-thumb {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
}
.style-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  min-width: 36px;
  text-align: right;
}
body.light .style-value {
  color: rgba(0, 0, 0, 0.6);
}
body.zen .style-value {
  color: var(--zen-panel-font-color, rgba(0, 0, 0, 0.6));
}
.color-controls {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.color-control {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.color-input {
  width: 48px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  padding: 0;
}
body.zen .color-input {
  border-color: rgba(0, 0, 0, 0.12);
}
.style-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 44px;
}
.settings-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.5rem;
}
body.light .settings-hint {
  color: rgba(0, 0, 0, 0.4);
}
body.zen .settings-hint {
  color: var(--zen-panel-font-color, rgba(0, 0, 0, 0.4));
  opacity: 0.6;
}
/* Data Sources Section */
.data-sources-content {
  margin-top: 0.5rem;
}
.data-sources-loading {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 1rem;
  text-align: center;
}
body.light .data-sources-loading {
  color: rgba(0, 0, 0, 0.5);
}
/* Data Sources Tree Structure */
.data-sources-tree {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.data-tree-category {
  border-radius: 6px;
  overflow: hidden;
}
.data-tree-category-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.data-tree-category-header:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.3);
}
body.light .data-tree-category-header {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .data-tree-category-header:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.data-tree-category-header svg:first-child {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}
body.light .data-tree-category-header svg:first-child {
  color: rgba(0, 0, 0, 0.4);
}
.data-tree-category-header svg:nth-child(2) {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}
.data-tree-category-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
}
body.light .data-tree-category-name {
  color: rgba(0, 0, 0, 0.8);
}
body.zen .data-tree-category-name {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.85));
}
.data-tree-category-count {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
}
body.light .data-tree-category-count {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.06);
}
.data-tree-files {
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.25rem;
}
body.light .data-tree-files {
  border-left-color: rgba(0, 0, 0, 0.08);
}
.data-tree-file {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0;
  position: relative;
}
.data-tree-connector {
  position: absolute;
  left: -0.75rem;
  top: 0;
  bottom: 0;
  width: 0.75rem;
  display: flex;
  align-items: center;
}
.data-tree-line {
  position: absolute;
  left: 0;
  width: 0.75rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  top: 50%;
}
body.light .data-tree-line {
  background: rgba(0, 0, 0, 0.08);
}
.data-tree-line.last::before {
  content: '';
  position: absolute;
  left: 0;
  top: -50%;
  bottom: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}
body.light .data-tree-line.last::before {
  background: rgba(0, 0, 0, 0.08);
}
.data-tree-file > svg {
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
body.light .data-tree-file > svg {
  color: rgba(0, 0, 0, 0.35);
}
.data-tree-file-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.data-tree-file-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
body.light .data-tree-file-name {
  color: rgba(0, 0, 0, 0.75);
}
body.zen .data-tree-file-name {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.8));
}
.data-tree-file-path {
  font-size: 0.65rem;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.35);
  word-break: break-all;
}
body.light .data-tree-file-path {
  color: rgba(0, 0, 0, 0.4);
}
body.zen .data-tree-file-path {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.35));
  opacity: 0.6;
}
/* Version Section */
.settings-version-section {
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.5rem;
}
body.light .settings-version-section {
  border-top-color: rgba(0, 0, 0, 0.08);
}
.version-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.version-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}
.version-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}
.version-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'JetBrains Mono', monospace;
}
body.light .version-label {
  color: rgba(0, 0, 0, 0.5);
}
body.light .version-value {
  color: rgba(0, 0, 0, 0.8);
}
.refresh-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}
.refresh-app-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}
body.light .refresh-app-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
body.light .refresh-app-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.8);
}
/* Data Management Section */
.data-management-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.settings-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}
.settings-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}
.settings-action-btn.export-btn:hover {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: rgb(34, 197, 94);
}
.settings-action-btn.import-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: rgb(59, 130, 246);
}
.settings-action-btn.clear-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: rgb(239, 68, 68);
}
body.light .settings-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
body.light .settings-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.8);
}
body.light .settings-action-btn.export-btn:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: rgb(22, 163, 74);
}
body.light .settings-action-btn.import-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: rgb(37, 99, 235);
}
body.light .settings-action-btn.clear-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: rgb(220, 38, 38);
}
.import-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
}
.import-status.success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: rgb(34, 197, 94);
}
.import-status.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: rgb(239, 68, 68);
}
body.light .import-status.success {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(22, 163, 74);
}
body.light .import-status.error {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(220, 38, 38);
}
/* TTS Settings Section */
.tts-setting {
  margin-bottom: 1rem;
}
.tts-setting:last-child {
  margin-bottom: 0;
}
.tts-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}
body.light .tts-label {
  color: rgba(0, 0, 0, 0.5);
}
.tts-select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.15s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.5rem;
}
.tts-select:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.tts-select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
}
.tts-select option {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.9);
}
body.light .tts-select {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
body.light .tts-select:hover {
  background-color: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .tts-select option {
  background: white;
  color: rgba(0, 0, 0, 0.8);
}
.tts-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}
.tts-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
  cursor: pointer;
}
body.light .tts-toggle {
  color: rgba(0, 0, 0, 0.7);
}
.test-voice-btn {
  margin-top: 0.5rem;
}
/* TTS Advanced Section */
.tts-advanced {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1rem;
}
body.light .tts-advanced {
  border-top-color: rgba(0, 0, 0, 0.08);
}
.tts-advanced-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0.4rem 0;
  transition: color 0.15s ease;
}
.tts-advanced-header:hover {
  color: rgba(255, 255, 255, 0.8);
}
.tts-enabled-badge {
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border-radius: 4px;
}
body.light .tts-enabled-badge {
  background: rgba(22, 163, 74, 0.15);
  color: #16a34a;
}
.tts-provider-pills {
  display: flex;
  gap: 0.5rem;
}
.tts-provider-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tts-provider-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}
.tts-provider-pill.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
  color: #c084fc;
}
body.light .tts-provider-pill {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.6);
}
body.light .tts-provider-pill:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.8);
}
body.light .tts-provider-pill.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--accent);
  color: var(--accent-dark);
}
body.zen .tts-provider-pill {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.5);
  color: var(--zen-panel-font-color, rgba(0, 0, 0, 0.65));
}
body.zen .tts-provider-pill:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.2);
}
body.zen .tts-provider-pill.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.tts-provider-settings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tts-engine-indicator {
  margin-left: 0.75rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 4px;
  opacity: 0.8;
}
.tts-engine-indicator.openai {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.tts-engine-indicator.cloud,
.tts-engine-indicator.google {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.tts-engine-indicator.elevenlabs {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.tts-engine-indicator.browser {
  background: rgba(156, 163, 175, 0.15);
  color: rgba(255, 255, 255, 0.6);
}
body.light .tts-engine-indicator.browser {
  color: rgba(0, 0, 0, 0.5);
}
.tts-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  font-size: 0.75rem;
  color: #f87171;
  line-height: 1.4;
}
.tts-error span {
  flex: 1;
  word-break: break-word;
}
.tts-error-dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.tts-error-dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}
body.light .tts-error {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}
body.light .tts-error-dismiss {
  background: rgba(0, 0, 0, 0.05);
}
body.light .tts-error-dismiss:hover {
  background: rgba(0, 0, 0, 0.1);
}
body.light .tts-advanced-header {
  color: rgba(0, 0, 0, 0.5);
}
body.light .tts-advanced-header:hover {
  color: rgba(0, 0, 0, 0.7);
}
.tts-advanced-content {
  margin-top: 1rem;
  padding-left: 1.25rem;
}
.tts-advanced-content .settings-hint a {
  color: #3b82f6;
  text-decoration: none;
}
.tts-advanced-content .settings-hint a:hover {
  text-decoration: underline;
}
/* Screensaver Settings */
.screensaver-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.screensaver-timeout-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.screensaver-timeout-pill {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}
.screensaver-timeout-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.screensaver-timeout-pill.active {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border-color: transparent;
  color: white;
}
body.light .screensaver-timeout-pill {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}
body.light .screensaver-timeout-pill:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .screensaver-timeout-pill.active {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border-color: transparent;
  color: white;
}
/* Location Settings */
.location-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.location-coords {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
/* Settings page playlist management */
.playlist-add-section {
  margin-bottom: 1rem;
}
.playlist-preview {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
}
.playlist-preview-info {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.playlist-preview-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.5rem;
  flex-shrink: 0;
}
.playlist-preview-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.playlist-name-input {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.35rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.85rem;
  font-weight: 500;
}
.playlist-name-input:focus {
  outline: none;
  border-color: #a855f7;
  background: rgba(255, 255, 255, 0.1);
}
.playlist-name-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.playlist-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.playlist-preview-author {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.playlist-preview-tracks {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.playlist-preview-id {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  font-family: monospace;
}
.playlist-preview-actions {
  display: flex;
  gap: 0.5rem;
}
.playlists-list {
  margin-top: 1rem;
}
.playlists-list-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.playlist-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}
.playlist-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.playlist-item.active {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.2);
}
.playlist-item-thumb {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 0.35rem;
  flex-shrink: 0;
}
.playlist-item-info {
  flex: 1;
  min-width: 0;
}
.playlist-item-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlist-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.playlist-item-author {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
}
.playlist-item-tracks {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}
.playlist-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.playlist-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.35rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}
.playlist-item-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.playlist-item-btn.play-btn:hover {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}
.playlist-item-btn.remove-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.playlist-active-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 1rem;
  color: #22c55e;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Light theme playlist management */
body.light .playlist-preview {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .playlist-name-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.9);
}
body.light .playlist-name-input:focus {
  border-color: #9333ea;
  background: #fff;
}
body.light .playlist-name-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
body.light .playlist-preview-author {
  color: rgba(0, 0, 0, 0.5);
}
body.light .playlist-preview-tracks {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.06);
}
body.light .playlist-preview-id {
  color: rgba(0, 0, 0, 0.35);
}
body.light .playlists-list-header {
  color: rgba(0, 0, 0, 0.45);
}
body.light .playlist-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .playlist-item:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light .playlist-item.active {
  background: rgba(147, 51, 234, 0.06);
  border-color: rgba(147, 51, 234, 0.2);
}
body.light .playlist-item-name {
  color: rgba(0, 0, 0, 0.85);
}
body.light .playlist-item-author {
  color: rgba(0, 0, 0, 0.45);
}
body.light .playlist-item-tracks {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.05);
}
body.light .playlist-item-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
body.light .playlist-item-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
body.light .playlist-item-btn.play-btn:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
  color: #16a34a;
}
body.light .playlist-item-btn.remove-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #dc2626;
}
body.light .playlist-active-badge {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
/* Zen theme playlist management */
body.zen .playlist-preview {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
body.zen .playlist-name-input {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
}
body.zen .playlist-name-input:focus {
  border-color: #a855f7;
  background: rgba(255, 255, 255, 0.15);
}
body.zen .playlist-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
body.zen .playlist-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
/* Music Settings - Card Layout */
.music-settings .settings-description {
  margin-bottom: 1.25rem;
}
.music-playlists-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.music-playlist-card {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.15s ease;
}
.music-playlist-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.music-playlist-card.active {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
}
/* Reorder buttons */
.music-playlist-card-order {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0 2px 0 6px;
  flex-shrink: 0;
}
.music-playlist-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.15s ease;
}
.music-playlist-order-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.music-playlist-order-btn:disabled {
  opacity: 0.15;
  cursor: default;
}
body.light .music-playlist-order-btn {
  color: rgba(0, 0, 0, 0.25);
}
body.light .music-playlist-order-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}
.music-playlist-card-thumb {
  position: relative;
  width: 100px;
  flex-shrink: 0;
  overflow: hidden;
}
.music-playlist-card-thumb .playlist-preview-thumb,
.music-playlist-card-thumb .playlist-thumb-fallback.large {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.music-playlist-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.music-playlist-card-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 4px;
  color: #4ade80;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.music-playlist-card-body {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}
.music-playlist-card-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-playlist-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.music-playlist-card-author {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
}
.music-playlist-card-tracks {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
}
.music-playlist-card-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
.music-playlist-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.music-playlist-card-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}
.music-playlist-card-btn.primary {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: #4ade80;
}
.music-playlist-card-btn.primary:hover {
  background: rgba(34, 197, 94, 0.2);
}
.music-playlist-card-btn.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.music-playlist-card-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Thumbnail fallback */
.playlist-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%);
  color: rgba(var(--accent-rgb), 0.3);
}
.playlist-thumb-fallback.small {
  width: 48px;
  height: 36px;
  border-radius: 0.35rem;
  flex-shrink: 0;
}
.playlist-thumb-fallback.large {
  width: 100%;
  height: 100%;
  min-height: 60px;
  border-radius: 0.5rem;
}
/* Empty state */
.music-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
}
.music-empty-state p {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
}
.music-empty-hint {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.2) !important;
}
/* Add section */
.music-add-section {
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
}
.music-add-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.music-add-input-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.music-add-input-row .custom-url-input {
  flex: 1;
}
.music-add-input-row .settings-action-btn {
  flex-shrink: 0;
  height: 36px;
  width: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}
.music-add-section .playlist-preview {
  margin-top: 0.75rem;
}
/* Light theme overrides */
body.light .music-playlist-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .music-playlist-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light .music-playlist-card.active {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.2);
}
body.light .music-playlist-card-name {
  color: rgba(0, 0, 0, 0.85);
}
body.light .music-playlist-card-author {
  color: rgba(0, 0, 0, 0.45);
}
body.light .music-playlist-card-tracks {
  color: rgba(0, 0, 0, 0.4);
}
body.light .music-playlist-card-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
body.light .music-playlist-card-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
body.light .music-add-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .music-add-header {
  color: rgba(0, 0, 0, 0.45);
}
body.light .music-empty-state {
  color: rgba(0, 0, 0, 0.3);
}
body.light .music-empty-hint {
  color: rgba(0, 0, 0, 0.2) !important;
}
body.light .playlist-thumb-fallback {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.1) 0%, rgba(var(--accent-rgb), 0.04) 100%);
  color: rgba(var(--accent-rgb), 0.45);
}
/* Zen theme overrides */
body.zen .music-playlist-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
body.zen .music-playlist-card:hover {
  background: rgba(255, 255, 255, 0.08);
}
body.zen .music-add-section {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
/* Habits Configuration Page Styles */
/* Uses shared .page-panel styles from AppLayout.css */
.habits-config-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* Loading State */
.habits-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}
body.light .habits-loading {
  color: rgba(0, 0, 0, 0.5);
}
body.zen .habits-loading {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.6));
}
/* Header Section - matches settings-section */
.habits-header {
  background: rgba(15, 15, 20, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
body.light .habits-header {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}
body.zen .habits-header {
  background: rgb(255 255 255 / var(--zen-panel-opacity, 15%));
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
}
.habits-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
/* Header title styling */
.habits-header h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
body.light .habits-header h1 {
  color: rgba(0, 0, 0, 0.85);
}
body.zen .habits-header h1 {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
}
.habits-subtitle {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
}
body.light .habits-subtitle {
  color: rgba(0, 0, 0, 0.4);
}
body.zen .habits-subtitle {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.4));
  opacity: 0.6;
}
body.zen .habits-header svg {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.6));
}
/* Add Habit Button - matches settings action button style */
.habits-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #c084fc;
  cursor: pointer;
  transition: all 0.2s ease;
}
.habits-add-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  color: #d8b4fe;
}
.habits-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body.light .habits-add-btn {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--accent);
  color: var(--accent-dark);
}
body.light .habits-add-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.15);
}
/* Add Habit Form - matches settings-section */
.habit-add-form {
  background: rgba(15, 15, 20, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  animation: slideUpFade 0.2s ease-out;
}
body.light .habit-add-form {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}
body.zen .habit-add-form {
  background: rgb(255 255 255 / var(--zen-panel-opacity, 15%));
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
}
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.habit-form-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.habit-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.habit-form-field label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
body.light .habit-form-field label {
  color: rgba(0, 0, 0, 0.5);
}
body.zen .habit-form-field label {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.6));
  opacity: 0.8;
}
.habit-form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.habit-icon-field {
  flex: 0 0 auto;
}
.habit-name-field {
  flex: 1;
  min-width: 200px;
}
/* Category Pills - matches theme-pills style */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}
.category-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}
.category-pill.active {
  background: color-mix(in srgb, var(--cat-color) 15%, transparent);
  border-color: var(--cat-color);
  color: var(--cat-color);
}
.cat-icon {
  font-size: 1rem;
}
body.light .category-pill {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
body.light .category-pill:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.8);
}
body.light .category-pill.active {
  background: color-mix(in srgb, var(--cat-color) 10%, transparent);
}
body.zen .category-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.7));
}
body.zen .category-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
body.zen .category-pill.active {
  background: color-mix(in srgb, var(--cat-color) 15%, transparent);
}
/* Icon Picker */
.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 280px;
}
.icon-picker-small {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.icon-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.icon-option.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
}
body.light .icon-option {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .icon-option:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .icon-option.active {
  background: rgba(var(--accent-rgb), 0.1);
}
body.zen .icon-option {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
body.zen .icon-option:hover {
  background: rgba(255, 255, 255, 0.1);
}
body.zen .icon-option.active {
  background: rgba(var(--accent-rgb), 0.15);
}
/* Text Input - matches settings input style */
.habit-form-field input[type="text"],
.habit-name-input {
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.15s ease;
}
.habit-form-field input[type="text"]:focus,
.habit-name-input:focus {
  outline: none;
  border-color: #c084fc;
  background: rgba(255, 255, 255, 0.1);
}
.habit-form-field input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
body.light .habit-form-field input[type="text"],
body.light .habit-name-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
body.light .habit-form-field input[type="text"]:focus,
body.light .habit-name-input:focus {
  border-color: var(--accent);
  background: #fff;
}
body.light .habit-form-field input[type="text"]::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
body.zen .habit-form-field input[type="text"],
body.zen .habit-name-input {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
}
body.zen .habit-form-field input[type="text"]:focus,
body.zen .habit-name-input:focus {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.55);
}
body.zen .habit-form-field input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
/* Target Input Group */
.target-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.target-input-group.compact {
  gap: 0.35rem;
}
.target-input-group input[type="number"] {
  width: 70px;
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  transition: all 0.15s ease;
}
.target-input-group input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
}
.target-input-group select {
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.15s ease;
}
.target-input-group select:focus {
  outline: none;
  border-color: var(--accent);
}
.target-input-group select option {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.9);
}
body.light .target-input-group input[type="number"] {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.9);
}
body.light .target-input-group input[type="number"]:focus {
  border-color: var(--accent);
  background: #fff;
}
body.light .target-input-group select {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
body.light .target-input-group select option {
  background: white;
  color: rgba(0, 0, 0, 0.8);
}
body.zen .target-input-group input[type="number"] {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
}
body.zen .target-input-group input[type="number"]:focus {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.55);
}
body.zen .target-input-group select {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
body.zen .target-input-group select:focus {
  border-color: var(--accent);
}
body.zen .target-input-group select option {
  background: #1a1a2e;
  color: rgba(255, 255, 255, 0.9);
}
/* Form Actions */
.habit-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .habit-form-actions {
  border-top-color: rgba(0, 0, 0, 0.08);
}
body.zen .habit-form-actions {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.habit-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}
.habit-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}
body.light .habit-cancel-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
body.light .habit-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.8);
}
.habit-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  color: rgb(34, 197, 94);
  cursor: pointer;
  transition: all 0.15s ease;
}
.habit-save-btn:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
}
.habit-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body.light .habit-save-btn {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: rgb(22, 163, 74);
}
body.light .habit-save-btn:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
}
/* Habits Categories Grid */
.habits-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}
/* Category Card - matches settings-section */
.habits-category {
  background: rgba(15, 15, 20, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}
.habits-category:hover {
  border-color: color-mix(in srgb, var(--cat-color) 40%, transparent);
}
body.light .habits-category {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .habits-category:hover {
  border-color: color-mix(in srgb, var(--cat-color) 40%, transparent);
}
body.zen .habits-category {
  background: rgb(255 255 255 / var(--zen-panel-opacity, 15%));
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
}
/* Category Header - matches settings-section-header style */
.category-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .category-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.zen .category-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.category-icon {
  font-size: 1.25rem;
}
.category-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cat-color, rgba(255, 255, 255, 0.9));
  flex: 1;
}
.category-count {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
}
body.light .category-count {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.06);
}
body.zen .category-count {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.4));
  background: rgba(255, 255, 255, 0.1);
}
/* Empty State */
.category-empty {
  padding: 1rem;
  text-align: center;
}
.empty-text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}
body.light .empty-text {
  color: rgba(0, 0, 0, 0.35);
}
body.zen .empty-text {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.35));
}
/* Habits List */
.habits-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Habit Item - matches settings style */
.habit-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: all 0.15s ease;
}
.habit-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.habit-item.inactive {
  opacity: 0.5;
}
.habit-item.editing {
  padding: 0.85rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
}
body.light .habit-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .habit-item:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .habit-item.editing {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
}
body.zen .habit-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
body.zen .habit-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
/* Toggle Switch */
.habit-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 16px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.toggle-dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition: all 0.2s ease;
  transform: translateX(-5px);
}
.toggle-dot.active {
  background: #22c55e;
  transform: translateX(5px);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}
body.light .habit-toggle {
  background: rgba(0, 0, 0, 0.08);
}
body.light .toggle-dot {
  background: rgba(0, 0, 0, 0.3);
}
body.light .toggle-dot.active {
  background: #16a34a;
}
body.zen .habit-toggle {
  background: rgba(255, 255, 255, 0.15);
}
body.zen .toggle-dot {
  background: rgba(255, 255, 255, 0.4);
}
body.zen .toggle-dot.active {
  background: #22c55e;
}
/* Habit Content */
.habit-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.habit-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.light .habit-name {
  color: rgba(0, 0, 0, 0.85);
}
body.zen .habit-name {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.9));
}
.habit-target {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
body.light .habit-target {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.04);
}
body.zen .habit-target {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.4));
  background: rgba(255, 255, 255, 0.08);
}
/* Habit Actions */
.habit-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}
.habit-item:hover .habit-actions {
  opacity: 1;
}
.habit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}
.habit-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.habit-btn.edit:hover {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
.habit-btn.delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.habit-btn.save:hover {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.habit-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}
body.light .habit-btn {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.4);
}
body.light .habit-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
body.light .habit-btn.edit:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
body.light .habit-btn.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
body.light .habit-btn.save:hover {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}
body.zen .habit-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.5));
}
body.zen .habit-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.9));
}
/* Edit Form */
.habit-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}
.habit-edit-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.habit-edit-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
/* Saving Indicator - matches settings style */
.habits-saving-indicator {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 500;
  z-index: 1000;
  animation: slideUpFade 0.2s ease-out;
}
body.light .habits-saving-indicator {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
body.zen .habits-saving-indicator {
  background: rgb(255 255 255 / var(--zen-panel-opacity, 15%));
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.7));
}
/* Responsive */
@media (max-width: 600px) {
  .habits-categories {
    grid-template-columns: 1fr;
  }
  
  .habits-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .habit-form-row {
    flex-direction: column;
  }
  
  .habit-name-field {
    min-width: 100%;
  }
}
/* Backlog Tables - Styles for backlog, ledger, and related tables */
/* Base Backlog Table */
.backlog-table {
  width: 100%;
  overflow-x: auto;
}
.backlog-table table {
  width: 100%;
  border-collapse: collapse;
}
.backlog-table th,
.backlog-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.backlog-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  font-weight: 500;
}
.backlog-table td {
  font-size: 0.9rem;
}
.backlog-table tr:hover {
  background: rgba(15, 15, 20, 0.75);
}
.backlog-table .pull-column {
  width: 80px;
  text-align: center;
}
/* Light theme backlog table */
body.light .backlog-table th,
body.light .backlog-table td {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .backlog-table tr:hover {
  background: rgba(0, 0, 0, 0.03);
}
/* Pull Button */
.pull-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}
.pull-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.05);
}
.pull-btn.small {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  min-width: 28px;
}
.pull-btn:active {
  transform: scale(0.95);
}
.pull-btn.has-pull {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
  color: rgb(251, 191, 36);
}
.pull-btn.high-pull {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: rgb(239, 68, 68);
  animation: pulse-pull 2s infinite;
}
@keyframes pulse-pull {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
  }
}
.pull-count {
  min-width: 1rem;
  text-align: center;
}
body.light .pull-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
body.light .pull-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
/* Drag and Drop Reorder */
.drag-column {
  width: 40px;
  padding: 0.5rem !important;
}
.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: grab;
  color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: all 0.15s ease;
}
.drag-handle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.drag-handle:active {
  cursor: grabbing;
}
.backlog-table tr {
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.backlog-table tr.dragging {
  opacity: 0.5;
  background: rgba(56, 189, 248, 0.1);
}
.backlog-table tr.drag-over {
  background: rgba(56, 189, 248, 0.15);
  box-shadow: inset 0 -2px 0 0 rgb(56, 189, 248);
}
.backlog-table tr[draggable="true"] {
  user-select: none;
}
body.light .drag-handle {
  color: rgba(0, 0, 0, 0.25);
}
body.light .drag-handle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
}
body.light .backlog-table tr.drag-over {
  background: rgba(56, 189, 248, 0.1);
}
/* Category Tags */
.category-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.category-tag.category-body {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06));
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.category-tag.category-builder {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.12), rgba(251, 146, 60, 0.06));
  border-color: rgba(251, 146, 60, 0.25);
  color: #fb923c;
}
.category-tag.category-village {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.06));
  border-color: rgba(34, 197, 94, 0.25);
  color: #4ade80;
}
.category-tag.category-still {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.06));
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
.category-tag.category-admin {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.1), rgba(148, 163, 184, 0.05));
  border-color: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}
.category-tag.category-nest {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(74, 222, 128, 0.06));
  border-color: rgba(74, 222, 128, 0.25);
  color: #4ade80;
}
.category-tag.category-errands {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06));
  border-color: rgba(245, 158, 11, 0.25);
  color: #f59e0b;
}
.category-health {
  background: rgba(34, 197, 94, 0.2);
  color: rgb(34, 197, 94);
}
.category-project {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
.category-career {
  background: rgba(56, 189, 248, 0.2);
  color: rgb(56, 189, 248);
}
.category-social {
  background: rgba(236, 72, 153, 0.2);
  color: rgb(236, 72, 153);
}
/* Light theme category tags */
body.light .category-tag {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
body.light .category-tag.category-body {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05));
  border-color: rgba(220, 38, 38, 0.2);
  color: #dc2626;
}
body.light .category-tag.category-builder {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(234, 88, 12, 0.05));
  border-color: rgba(234, 88, 12, 0.2);
  color: #ea580c;
}
body.light .category-tag.category-village {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.1), rgba(22, 163, 74, 0.05));
  border-color: rgba(22, 163, 74, 0.2);
  color: #16a34a;
}
body.light .category-tag.category-still {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.05));
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}
body.light .category-tag.category-admin {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.08), rgba(100, 116, 139, 0.04));
  border-color: rgba(100, 116, 139, 0.15);
  color: #64748b;
}
body.light .category-health {
  background: rgba(34, 197, 94, 0.15);
  color: rgb(22, 163, 74);
}
body.light .category-project {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgb(109, 40, 217);
}
body.light .category-career {
  background: rgba(56, 189, 248, 0.15);
  color: rgb(2, 132, 199);
}
body.light .category-social {
  background: rgba(236, 72, 153, 0.15);
  color: rgb(219, 39, 119);
}
/* P1 Table Styles */
.p1-table .p1-item-name {
  font-weight: 600;
}
/* When Tags - Elegant Pill Style */
.when-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.when-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}
.when-tag.when-today {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08));
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}
.when-tag.when-tomorrow {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(251, 146, 60, 0.08));
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.12);
}
.when-tag.when-week {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.1));
  border-color: rgba(251, 146, 60, 0.4);
  color: #fb923c;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.15);
}
.when-tag.when-next-week {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
  border-color: rgba(59, 130, 246, 0.4);
  color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
}
.when-tag.when-later {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.1), rgba(148, 163, 184, 0.05));
  border-color: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}
.when-tag.when-freq {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1));
  border-color: rgba(168, 85, 247, 0.4);
  color: #a855f7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.15);
}
/* Light theme when tags */
body.light .when-tag {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
}
body.light .when-tag.when-today {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.06));
  border-color: rgba(220, 38, 38, 0.25);
  color: #dc2626;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.1);
}
body.light .when-tag.when-tomorrow {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.12), rgba(234, 88, 12, 0.06));
  border-color: rgba(234, 88, 12, 0.25);
  color: #ea580c;
  box-shadow: 0 0 8px rgba(234, 88, 12, 0.08);
}
body.light .when-tag.when-week {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(234, 88, 12, 0.08));
  border-color: rgba(234, 88, 12, 0.3);
  color: #ea580c;
  box-shadow: 0 0 8px rgba(234, 88, 12, 0.1);
}
body.light .when-tag.when-next-week {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.08));
  border-color: rgba(37, 99, 235, 0.3);
  color: #2563eb;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.1);
}
body.light .when-tag.when-later {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.08), rgba(100, 116, 139, 0.04));
  border-color: rgba(100, 116, 139, 0.15);
  color: #64748b;
}
body.light .when-tag.when-freq {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.12), rgba(147, 51, 234, 0.06));
  border-color: rgba(147, 51, 234, 0.25);
  color: #9333ea;
  box-shadow: 0 0 8px rgba(147, 51, 234, 0.1);
}
/* Table Action Buttons */
.actions-column {
  width: 70px;
  text-align: right;
  white-space: nowrap;
}
.item-actions-group {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(34, 197, 94, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  color: #4ade80;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.add-item-btn:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
  transform: translateY(-1px) scale(1.05);
  color: #22c55e;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.edit-item-btn,
.delete-item-btn,
.move-item-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0.3;
}
.backlog-table tr:hover .edit-item-btn,
.backlog-table tr:hover .delete-item-btn,
.backlog-table tr:hover .move-item-btn,
.ledger-table tr:hover .edit-item-btn,
.ledger-table tr:hover .delete-item-btn,
.ledger-table tr:hover .move-item-btn {
  opacity: 1;
}
.edit-item-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}
.move-item-btn:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.3);
  color: #a855f7;
}
.delete-item-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
body.light .edit-item-btn,
body.light .delete-item-btn,
body.light .move-item-btn {
  color: rgba(0, 0, 0, 0.3);
}
body.light .edit-item-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
  color: #2563eb;
}
body.light .move-item-btn:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.25);
  color: #9333ea;
}
body.light .delete-item-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #dc2626;
}
body.light .add-item-btn {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #166534;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
body.light .add-item-btn:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.45);
}
/* Subtask Styles */
.subtasks-display {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.subtask-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
}
body.light .subtask-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
/* Generic Table Styles - for Table component and markdown tables */
/* Ensure markdown tables have proper layout and visibility in nested contexts */
.markdown-block table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1em 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: table !important;
  table-layout: auto !important;
}
/* Tables rendered by MarkdownText component (for tree nodes) */
.markdown-table-container {
  width: 100% !important;
  margin: 0.5em 0 !important;
  overflow-x: auto !important;
}
.markdown-text-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  font-size: 0.9em !important;
  background: transparent !important;
}
.markdown-text-table th {
  background: rgba(255, 255, 255, 0.08) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 0.5em 0.75em !important;
  text-align: left !important;
  vertical-align: top !important;
}
.markdown-text-table td {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 0.5em 0.75em !important;
  text-align: left !important;
  vertical-align: top !important;
  background: transparent !important;
}
.markdown-text-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
/* Light theme for MarkdownText tables */
body.light .markdown-text-table th {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light .markdown-text-table td {
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
body.light .markdown-text-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}
/* Zen theme for MarkdownText tables */
body.zen .markdown-text-table th {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
body.zen .markdown-text-table td {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
body.zen .markdown-text-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
/* Gray theme for MarkdownText tables */
body.gray .markdown-text-table th {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
body.gray .markdown-text-table td {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
body.gray .markdown-text-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
/* Batman theme for MarkdownText tables */
body.batman .markdown-text-table th {
  background: rgba(0, 100, 200, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(0, 100, 200, 0.2) !important;
}
body.batman .markdown-text-table td {
  border-color: rgba(0, 100, 200, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
body.batman .markdown-text-table tbody tr:hover {
  background: rgba(0, 100, 200, 0.05) !important;
}
/* Force table elements to be visible */
.markdown-block table,
.markdown-block table thead,
.markdown-block table tbody,
.markdown-block table tr,
.markdown-block table th,
.markdown-block table td {
  display: table, table-header-group, table-row-group, table-row, table-cell !important;
}
/* Header styling */
.markdown-block table th {
  background: rgba(255, 255, 255, 0.08) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 0.75em 1em !important;
  text-align: left !important;
  vertical-align: top !important;
}
/* Cell styling */
.markdown-block table td {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 0.75em 1em !important;
  text-align: left !important;
  vertical-align: top !important;
  background: transparent !important;
}
/* Hover effects */
.markdown-block table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
/* Ensure table container has proper width */
.body-content .markdown-block table,
.markdown-content .markdown-block table {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}
/* Light theme for markdown tables */
body.light .markdown-block table th {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light .markdown-block table td {
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
body.light .markdown-block table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}
/* Gray theme for markdown tables */
body.gray .markdown-block table th {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
body.gray .markdown-block table td {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
body.gray .markdown-block table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
/* Zen theme for markdown tables */
body.zen .markdown-block table th {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
body.zen .markdown-block table td {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
body.zen .markdown-block table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
/* Batman theme for markdown tables */
body.batman .markdown-block table th {
  background: rgba(0, 100, 200, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(0, 100, 200, 0.2) !important;
}
body.batman .markdown-block table td {
  border-color: rgba(0, 100, 200, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
body.batman .markdown-block table tbody tr:hover {
  background: rgba(0, 100, 200, 0.05) !important;
}
/* Table wrapper for horizontal scrolling on small screens */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  margin: 1em 0;
}
/* Generic table styling */
table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: 0.95rem;
}
table th,
table td {
  padding: 0.75em 1em;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  vertical-align: top;
}
table th {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}
table td {
  color: rgba(255, 255, 255, 0.9);
}
table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
/* Light theme */
body.light table th,
body.light table td {
  border-color: rgba(0, 0, 0, 0.1);
}
body.light table th {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.6);
}
body.light table td {
  color: rgba(0, 0, 0, 0.85);
}
body.light table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}
/* Gray theme */
body.gray table th,
body.gray table td {
  border-color: rgba(255, 255, 255, 0.1);
}
body.gray table th {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}
body.gray table td {
  color: rgba(255, 255, 255, 0.9);
}
body.gray table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
/* Zen theme */
body.zen table th,
body.zen table td {
  border-color: rgba(255, 255, 255, 0.15);
}
body.zen table th {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
body.zen table td {
  color: rgba(255, 255, 255, 0.95);
}
body.zen table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* Batman theme */
body.batman table th,
body.batman table td {
  border-color: rgba(0, 100, 200, 0.2);
}
body.batman table th {
  background: rgba(0, 100, 200, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
body.batman table td {
  color: rgba(255, 255, 255, 0.9);
}
body.batman table tbody tr:hover {
  background: rgba(0, 100, 200, 0.05);
}
/* Roadmap-specific table styling (objectives tables) */
.roadmap-objectives table {
  margin-top: 0.5em;
}
.roadmap-objectives table th {
  background: rgba(251, 146, 60, 0.08);
  color: #fb923c;
}
body.light .roadmap-objectives table th {
  background: rgba(251, 146, 60, 0.1);
  color: #ea580c;
}
/* Badge styling within tables */
table .badge {
  font-size: 0.75rem;
  padding: 0.25em 0.6em;
}
/* Soul Timeline - Image gallery visualization for Soul Journal */
.mind-timeline-section {
  padding: 1rem 1.5rem;
}
.mind-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.mind-timeline-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}
body.light .mind-timeline-header h3 {
  color: rgba(0, 0, 0, 0.85);
}
.mind-timeline-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mind-timeline-actions button {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
}
.mind-timeline-actions .spin {
  animation: spin 1s linear infinite;
}
.mind-timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
body.light .mind-timeline-empty {
  color: rgba(0, 0, 0, 0.4);
}
.mind-timeline-empty p {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}
.mind-timeline-empty p.muted {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
}
body.light .mind-timeline-empty p.muted {
  color: rgba(0, 0, 0, 0.35);
}
.mind-timeline-progress {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 1rem;
  overflow: hidden;
}
body.light .mind-timeline-progress {
  background: rgba(0, 0, 0, 0.08);
}
.mind-timeline-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.8), rgba(168, 85, 247, 0.8));
  border-radius: 2px;
  transition: width 0.3s ease;
}
body.light .mind-timeline-progress-bar {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.8), rgba(147, 51, 234, 0.8));
}
.mind-timeline-gallery {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 0.5rem 0 1rem;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.mind-timeline-gallery::-webkit-scrollbar {
  height: 6px;
}
.mind-timeline-gallery::-webkit-scrollbar-track {
  background: transparent;
}
.mind-timeline-gallery::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
body.light .mind-timeline-gallery::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}
.mind-timeline-item {
  flex: 0 0 auto;
  width: 180px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mind-timeline-item:hover {
  transform: translateY(-4px);
}
.mind-timeline-item.active {
  transform: translateY(-4px);
}
.mind-timeline-item.active .mind-timeline-image {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.6), 0 8px 24px rgba(0, 0, 0, 0.3);
}
body.light .mind-timeline-item.active .mind-timeline-image {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.5), 0 8px 24px rgba(0, 0, 0, 0.15);
}
.mind-timeline-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.2s ease;
}
body.light .mind-timeline-image {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.mind-timeline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mind-timeline-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.2);
}
body.light .mind-timeline-placeholder {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.15);
}
.mind-timeline-item.placeholder {
  opacity: 0.6;
  cursor: default;
}
.mind-timeline-item.placeholder:hover {
  transform: none;
}
.mind-timeline-item.generating .mind-timeline-image {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.mind-timeline-item.generating .mind-timeline-placeholder {
  color: rgba(var(--accent-rgb), 0.6);
}
body.light .mind-timeline-item.generating .mind-timeline-placeholder {
  color: rgba(var(--accent-rgb), 0.6);
}
.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
.mind-timeline-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.5rem;
  text-align: center;
}
.mind-timeline-month {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--accent-rgb), 0.9);
}
body.light .mind-timeline-month {
  color: rgba(var(--accent-rgb), 0.9);
}
.mind-timeline-title {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.light .mind-timeline-title {
  color: rgba(0, 0, 0, 0.5);
}
.mind-timeline-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.5rem;
}
body.light .mind-timeline-hint {
  color: rgba(0, 0, 0, 0.35);
}
.mind-timeline-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mind-timeline-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}
body.light .mind-timeline-toggle {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .mind-timeline-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
}
/*
 * Tags Page Styles
 * Styles for the TagsPage component (/tags route)
 */
/* Synthesis Follow-up Actions */
.tag-search-synthesis-followup,
.tags-synthesis-followup {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid rgba(251, 191, 36, 0.15);
  background: rgba(0, 0, 0, 0.1);
}
body.light .tag-search-synthesis-followup,
body.light .tags-synthesis-followup {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(217, 119, 6, 0.1);
}
.synthesis-action-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid;
  background: transparent;
}
.synthesis-action-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.synthesis-action-btn.expand {
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}
.synthesis-action-btn.expand:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.6);
}
.synthesis-action-btn.reflect {
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}
.synthesis-action-btn.reflect:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.6);
}
.synthesis-action-btn.introspect {
  border-color: rgba(236, 72, 153, 0.4);
  color: #ec4899;
}
.synthesis-action-btn.introspect:hover:not(:disabled) {
  background: rgba(236, 72, 153, 0.15);
  border-color: rgba(236, 72, 153, 0.6);
}
.synthesis-action-btn.challenge {
  border-color: rgba(251, 146, 60, 0.4);
  color: #fb923c;
}
.synthesis-action-btn.challenge:hover:not(:disabled) {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.6);
}
body.light .synthesis-action-btn.expand {
  border-color: rgba(37, 99, 235, 0.3);
  color: #2563eb;
}
body.light .synthesis-action-btn.expand:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.1);
}
body.light .synthesis-action-btn.reflect {
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-dark);
}
body.light .synthesis-action-btn.reflect:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.1);
}
body.light .synthesis-action-btn.introspect {
  border-color: rgba(219, 39, 119, 0.3);
  color: #db2777;
}
body.light .synthesis-action-btn.introspect:hover:not(:disabled) {
  background: rgba(219, 39, 119, 0.1);
}
body.light .synthesis-action-btn.challenge {
  border-color: rgba(234, 88, 12, 0.3);
  color: #ea580c;
}
body.light .synthesis-action-btn.challenge:hover:not(:disabled) {
  background: rgba(234, 88, 12, 0.1);
}
/* Visualization / Mind Map Styles */
.tag-search-visualization,
.tags-visualization-section {
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(16, 185, 129, 0.06));
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 10px;
  overflow: hidden;
}
.tag-search-visualization-header,
.tags-visualization-section .tags-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: rgba(34, 197, 94, 0.1);
  font-size: 0.75rem;
  font-weight: 600;
  color: #22c55e;
}
.tag-search-visualization-actions,
.tags-visualization-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.tag-search-visualization-close,
.tag-search-visualization-expand,
.tags-section-close,
.tags-visualization-expand {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(34, 197, 94, 0.6);
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.15s ease;
}
.tag-search-visualization-close:hover,
.tag-search-visualization-expand:hover,
.tags-section-close:hover,
.tags-visualization-expand:hover {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
/* Fullscreen mode */
.tag-search-visualization.fullscreen,
.tags-visualization-section.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  margin: 0;
  border-radius: 0;
  background: rgba(10, 10, 12, 0.98);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.tag-search-visualization.fullscreen .tag-search-visualization-header,
.tags-visualization-section.fullscreen .tags-section-header {
  padding: 1rem 1.5rem;
  font-size: 1rem;
}
.tag-search-visualization.fullscreen .tag-search-visualization-content,
.tags-visualization-section.fullscreen .tags-visualization-content {
  flex: 1;
  overflow: auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tag-search-visualization.fullscreen .mind-map,
.tags-visualization-section.fullscreen .mind-map {
  transform: scale(1.3);
  gap: 2.5rem;
}
.tag-search-visualization.fullscreen .mind-map-center,
.tags-visualization-section.fullscreen .mind-map-center {
  padding: 1rem 2rem;
  font-size: 1.4rem;
}
.tag-search-visualization.fullscreen .mind-map-branches,
.tags-visualization-section.fullscreen .mind-map-branches {
  gap: 1.5rem;
}
.tag-search-visualization.fullscreen .mind-map-branch,
.tags-visualization-section.fullscreen .mind-map-branch {
  min-width: 180px;
  max-width: 220px;
}
.tag-search-visualization.fullscreen .mind-map-node,
.tags-visualization-section.fullscreen .mind-map-node {
  padding: 0.8rem 1.2rem;
}
.tag-search-visualization.fullscreen .mind-map-emoji,
.tags-visualization-section.fullscreen .mind-map-emoji {
  font-size: 2rem;
}
.tag-search-visualization.fullscreen .mind-map-label,
.tags-visualization-section.fullscreen .mind-map-label {
  font-size: 0.95rem;
}
.tag-search-visualization.fullscreen .mind-map-child,
.tags-visualization-section.fullscreen .mind-map-child {
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
}
.tag-search-visualization.fullscreen .mind-map-connections,
.tags-visualization-section.fullscreen .mind-map-connections {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  font-size: 0.9rem;
}
.tag-search-visualization.fullscreen .mind-map-summary,
.tags-visualization-section.fullscreen .mind-map-summary {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  max-width: 800px;
}
.fullscreen-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
body.light .tag-search-visualization.fullscreen,
body.light .tags-visualization-section.fullscreen {
  background: rgba(250, 250, 250, 0.98);
}
body.light .fullscreen-hint {
  color: rgba(0, 0, 0, 0.3);
}
.tag-search-visualization-content,
.tags-visualization-content {
  padding: 1rem;
}
/* Mind Map */
.mind-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
}
.mind-map-center {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.2));
  border: 2px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
}
.mind-map-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mind-map-branches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 100%;
}
.mind-map-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 140px;
  max-width: 180px;
}
.mind-map-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  text-align: center;
  transition: all 0.2s ease;
}
.mind-map-node:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.mind-map-emoji {
  font-size: 1.5rem;
}
.mind-map-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.mind-map-children {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 0.5rem;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}
.mind-map-child {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.2rem 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}
.mind-map-connections {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 8px;
}
.connections-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: #3b82f6;
  margin-bottom: 0.5rem;
}
.connection-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  padding: 0.25rem 0;
  color: rgba(255, 255, 255, 0.7);
}
.connection-from,
.connection-to {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.connection-arrow {
  color: rgba(59, 130, 246, 0.6);
}
.connection-relation {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}
.mind-map-summary {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
/* Light theme */
body.light .tag-search-visualization,
body.light .tags-visualization-section {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.06), rgba(16, 185, 129, 0.06));
  border-color: rgba(22, 163, 74, 0.15);
}
body.light .tag-search-visualization-header,
body.light .tags-visualization-section .tags-section-header {
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
}
body.light .mind-map-center {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(109, 40, 217, 0.1));
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-dark);
}
body.light .mind-map-node {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .mind-map-node:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .mind-map-label {
  color: rgba(0, 0, 0, 0.85);
}
body.light .mind-map-children {
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .mind-map-child {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.03);
}
body.light .mind-map-connections {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.12);
}
body.light .connections-header {
  color: #2563eb;
}
body.light .connection-item {
  color: rgba(0, 0, 0, 0.6);
}
body.light .connection-from,
body.light .connection-to {
  color: rgba(0, 0, 0, 0.8);
}
body.light .connection-arrow {
  color: rgba(37, 99, 235, 0.5);
}
body.light .connection-relation {
  color: rgba(0, 0, 0, 0.45);
}
body.light .mind-map-summary {
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.75);
}
/* =====================
   Tags Page Layout
   ===================== */
.tags-page {
  /* Inherits from body-layout */
}
/* Tags sidebar - follows body-nav pattern */
.tags-sidebar {
  /* Inherits width and layout from body-nav */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tags-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.light .tags-sidebar-header {
  border-color: rgba(0, 0, 0, 0.06);
}
body.zen .tags-sidebar-header {
  border-color: rgba(255, 255, 255, 0.08);
}
.tags-sidebar-header h2 {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin: 0;
}
body.light .tags-sidebar-header h2 {
  opacity: 0.8;
}
.tags-count {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  letter-spacing: 0.02em;
}
body.light .tags-count {
  color: var(--accent-dark);
  background: rgba(var(--accent-rgb), 0.08);
}
.tags-search {
  padding: 0 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
/* Search input wrapper for icon positioning */
.tags-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.tags-search-wrapper::before {
  content: '';
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  background-color: rgba(var(--accent-rgb), 0.6);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1;
}
.tags-search-wrapper:focus-within::before {
  opacity: 1;
  transform: scale(1.05);
}
body.light .tags-search-wrapper::before {
  background-color: rgba(var(--accent-rgb), 0.6);
}
.tags-search-input {
  width: 100%;
  padding: 0.9rem 1.1rem 0.9rem 2.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9rem;
  font-weight: 450;
  letter-spacing: 0.015em;
  outline: none;
  transition: 
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.tags-search-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}
.tags-search-input:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.25);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.tags-search-input:hover::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.tags-search-input:focus {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 
    0 0 0 3px rgba(var(--accent-rgb), 0.15),
    0 4px 16px rgba(var(--accent-rgb), 0.15);
}
.tags-search-input:focus::placeholder {
  color: rgba(var(--accent-rgb), 0.5);
}
/* Light theme */
body.light .tags-search-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.light .tags-search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
body.light .tags-search-input:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
body.light .tags-search-input:hover::placeholder {
  color: rgba(0, 0, 0, 0.5);
}
body.light .tags-search-input:focus {
  background: rgba(var(--accent-rgb), 0.04);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 
    0 0 0 3px rgba(var(--accent-rgb), 0.1),
    0 4px 16px rgba(var(--accent-rgb), 0.08);
}
body.light .tags-search-input:focus::placeholder {
  color: rgba(var(--accent-rgb), 0.5);
}
/* Zen theme tags search */
body.zen .tags-search-wrapper::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(100,85,70,0.5)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
}
body.zen .tags-search-input {
  background: rgba(255, 252, 247, 0.95);
  border-color: rgba(100, 85, 70, 0.2);
  color: #2d261f;
  box-shadow: 0 2px 8px rgba(60, 50, 40, 0.08);
}
body.zen .tags-search-input::placeholder {
  color: rgba(60, 50, 40, 0.45);
}
body.zen .tags-search-input:hover {
  background: rgba(255, 252, 247, 1);
  border-color: rgba(100, 85, 70, 0.3);
  box-shadow: 0 2px 12px rgba(60, 50, 40, 0.1);
}
body.zen .tags-search-input:hover::placeholder {
  color: rgba(60, 50, 40, 0.55);
}
body.zen .tags-search-input:focus {
  background: #ffffff;
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 
    0 0 0 3px rgba(var(--accent-rgb), 0.12),
    0 4px 16px rgba(60, 50, 40, 0.1);
}
body.zen .tags-search-input:focus::placeholder {
  color: rgba(var(--accent-rgb), 0.5);
}
/* Tags list - follows body-nav-list pattern */
.tags-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
  padding-right: 0.5rem;
}
/* Tags list item - follows body-nav-item pattern */
.tags-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  width: 100%;
  background: transparent;
  color: inherit;
  opacity: 0.65;
  border-radius: 10px;
  text-align: left;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tags-list-item:hover {
  background: rgba(255, 255, 255, 0.04);
  opacity: 0.9;
}
.tags-list-item.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  opacity: 1;
}
.tags-list-item.active .tags-list-hash {
  color: var(--accent);
}
body.light .tags-list-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .tags-list-item.active {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-dark);
}
body.light .tags-list-item.active .tags-list-hash {
  color: var(--accent-dark);
}
body.zen .tags-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
body.zen .tags-list-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-light);
}
body.zen .tags-list-hash {
  color: var(--accent-light);
}
body.batman .tags-list-item:hover {
  background: rgba(0, 100, 200, 0.08);
}
body.batman .tags-list-item.active {
  background: rgba(0, 150, 255, 0.15);
  color: #60a5fa;
}
.tags-list-hash {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0.7;
}
body.light .tags-list-hash {
  color: var(--accent-dark);
}
.tags-list-name {
  flex: 1;
  font-weight: 500;
}
.tags-list-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  min-width: 1.2rem;
  text-align: center;
}
.tags-list-item.active .tags-list-count {
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(var(--accent-rgb), 0.9);
}
body.light .tags-list-count {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.05);
}
body.light .tags-list-item.active .tags-list-count {
  background: rgba(var(--accent-rgb), 0.12);
  color: rgba(var(--accent-rgb), 0.85);
}
.tags-loading,
.tags-empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}
body.light .tags-loading,
body.light .tags-empty {
  color: rgba(0, 0, 0, 0.4);
}
/* Scrollbar for tags list */
.tags-list::-webkit-scrollbar {
  width: 4px;
}
.tags-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
body.light .tags-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
}
/* Tags Content Area */
/* Tags content - follows body-content pattern */
.tags-content {
  /* Inherits flex: 1 and padding from body-content */
  overflow-y: auto;
}
.tags-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}
body.light .tags-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.tags-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}
.tags-placeholder h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: rgba(255, 255, 255, 0.5);
}
body.light .tags-placeholder h3 {
  color: rgba(0, 0, 0, 0.5);
}
.tags-placeholder p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}
/* Tags content header - follows body-content-header pattern */
.tags-content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.light .tags-content-header {
  border-color: rgba(0, 0, 0, 0.06);
}
body.zen .tags-content-header {
  border-color: rgba(255, 255, 255, 0.08);
}
body.batman .tags-content-header {
  border-color: rgba(0, 100, 200, 0.15);
}
.tags-content-title h2 {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  color: var(--accent);
}
body.light .tags-content-title h2 {
  color: var(--accent-dark);
}
.tags-occurrence-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.35rem;
  display: block;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
body.light .tags-occurrence-count {
  color: rgba(0, 0, 0, 0.5);
}
.tags-content-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tags-action-btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid;
}
.tags-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tags-action-btn.synthesize {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
.tags-action-btn.synthesize:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.2);
}
.tags-action-btn.introspect {
  background: rgba(236, 72, 153, 0.1);
  border-color: rgba(236, 72, 153, 0.3);
  color: #ec4899;
}
.tags-action-btn.introspect:hover:not(:disabled) {
  background: rgba(236, 72, 153, 0.2);
}
.tags-action-btn.visualize {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}
.tags-action-btn.visualize:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.2);
}
.tags-action-btn.blog {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}
.tags-action-btn.blog:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.2);
}
.tags-action-btn.copy {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.tags-action-btn.copy:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
}
.tags-action-btn.custom-ai {
  background: rgba(236, 72, 153, 0.1);
  border-color: rgba(236, 72, 153, 0.3);
  color: #ec4899;
}
.tags-action-btn.custom-ai:hover:not(:disabled) {
  background: rgba(236, 72, 153, 0.2);
}
.tags-action-btn.copied {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}
.tags-action-btn.loading {
  animation: pulse 1.5s ease-in-out infinite;
}
/* Synthesis & Blog Sections - follows content-card pattern */
.tags-synthesis-section,
.tags-blog-section {
  margin-bottom: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.tags-synthesis-section {
  border-color: rgba(251, 191, 36, 0.15);
}
body.light .tags-synthesis-section {
  background: rgba(251, 191, 36, 0.04);
  border-color: rgba(251, 191, 36, 0.2);
}
.tags-blog-section {
  border-color: rgba(59, 130, 246, 0.15);
}
body.light .tags-blog-section {
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.2);
}
.tags-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.tags-section-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tags-section-actions .speak-btn {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  opacity: 0.6;
}
.tags-section-actions .speak-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}
body.light .tags-section-actions .speak-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
.tags-synthesis-section .tags-section-header {
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
}
body.light .tags-synthesis-section .tags-section-header {
  background: rgba(251, 191, 36, 0.08);
  color: #b45309;
}
.tags-blog-section .tags-section-header {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
body.light .tags-blog-section .tags-section-header {
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
}
.tags-section-copy {
  padding: 0.25rem 0.6rem;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.15s ease;
}
.tags-section-copy:hover {
  opacity: 1;
}
.tags-section-copy.copied {
  color: #22c55e;
  border-color: #22c55e;
}
.tags-synthesis-content,
.tags-blog-content {
  padding: 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
}
.tags-synthesis-content p,
.tags-blog-content p {
  margin: 0 0 0.75rem;
}
.tags-synthesis-content p:last-child,
.tags-blog-content p:last-child {
  margin-bottom: 0;
}
/* Blog Image */
.tags-blog-image {
  width: 100%;
  max-height: 300px;
  overflow: hidden;
  border-bottom: 1px solid rgba(34, 197, 94, 0.1);
}
.tags-blog-image img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.tags-blog-image img:hover {
  transform: scale(1.02);
}
body.light .tags-blog-image {
  border-bottom-color: rgba(34, 197, 94, 0.15);
}
body.zen .tags-blog-image {
  border-bottom-color: rgba(34, 197, 94, 0.08);
}
/* Synthesis Thread for Tags Page */
.tags-synthesis-thread {
  display: flex;
  flex-direction: column;
}
.tags-synthesis-thread .synthesis-thread-item {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tags-synthesis-thread .synthesis-thread-item:last-child {
  border-bottom: none;
}
body.light .tags-synthesis-thread .synthesis-thread-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
/* Occurrences List */
.tags-occurrences {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tags-loading-occurrences {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.5);
}
body.light .tags-loading-occurrences {
  color: rgba(0, 0, 0, 0.5);
}
.tags-no-occurrences {
  text-align: center;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}
body.light .tags-no-occurrences {
  color: rgba(0, 0, 0, 0.4);
}
/* File groups - follows content-card pattern */
.tags-file-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  overflow: hidden;
}
body.light .tags-file-group {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.zen .tags-file-group {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}
body.batman .tags-file-group {
  background: rgba(0, 100, 200, 0.04);
  border-color: rgba(0, 100, 200, 0.1);
}
.tags-file-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
body.light .tags-file-header {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}
.tags-file-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
body.light .tags-file-label {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.06);
}
.tags-file-name {
  font-size: 0.85rem;
  font-weight: 500;
}
.tags-file-items {
  display: flex;
  flex-direction: column;
}
.tags-occurrence-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
}
.tags-occurrence-item:last-child {
  border-bottom: none;
}
body.light .tags-occurrence-item {
  border-color: rgba(0, 0, 0, 0.04);
}
.tags-line-num {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'JetBrains Mono', monospace;
  padding-top: 0.15rem;
}
body.light .tags-line-num {
  color: rgba(0, 0, 0, 0.3);
}
.tags-occurrence-content {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
body.light .tags-occurrence-content {
  color: rgba(0, 0, 0, 0.8);
}
/* Clickable occurrence for editing */
.tags-occurrence-item.clickable {
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}
.tags-occurrence-item.clickable:hover {
  background: rgba(var(--accent-rgb), 0.08);
}
body.light .tags-occurrence-item.clickable:hover {
  background: rgba(var(--accent-rgb), 0.06);
}
.tags-edit-icon {
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: 0.8rem;
  padding: 0.25rem;
}
.tags-occurrence-item.clickable:hover .tags-edit-icon {
  opacity: 0.6;
}
/* Editing occurrence */
.tags-occurrence-item.editing {
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 8px;
  padding: 0.75rem;
  flex-direction: column;
  gap: 0.5rem;
}
body.light .tags-occurrence-item.editing {
  background: rgba(var(--accent-rgb), 0.06);
}
.tags-occurrence-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tags-occurrence-textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  background: #080808;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}
.tags-occurrence-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}
body.light .tags-occurrence-textarea {
  background: #ffffff;
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(0, 0, 0, 0.95);
}
body.light .tags-occurrence-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.7);
}
body.zen .tags-occurrence-textarea {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
}
body.zen .tags-occurrence-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.tags-occurrence-edit-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tags-edit-save,
.tags-edit-cancel {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tags-edit-save {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: white;
}
.tags-edit-save:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}
.tags-edit-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.tags-edit-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.tags-edit-cancel:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}
body.light .tags-edit-cancel {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .tags-edit-cancel:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
}
.tags-edit-hint {
  margin-left: auto;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}
body.light .tags-edit-hint {
  color: rgba(0, 0, 0, 0.4);
}
/* Tags Page - Edit/Delete buttons */
.tags-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tags-edit-btn,
.tags-delete-btn {
  padding: 0.25rem 0.4rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.15s ease;
}
.tags-edit-btn:hover {
  opacity: 1;
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.tags-delete-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}
.tags-delete-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
body.light .tags-edit-btn,
body.light .tags-delete-btn {
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .tags-edit-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
}
body.light .tags-delete-btn:hover {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.2);
}
/* Tags Modal */
.tags-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadeIn 0.15s ease;
}
.tags-modal {
  width: 100%;
  max-width: 420px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  overflow: hidden;
  animation: slideUp 0.2s ease;
}
body.light .tags-modal {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}
.tags-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .tags-modal-header {
  border-color: rgba(0, 0, 0, 0.08);
}
.tags-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.tags-modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tags-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
body.light .tags-modal-close {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.5);
}
body.light .tags-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
.tags-modal-body {
  padding: 1.25rem;
}
.tags-modal-info {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
body.light .tags-modal-info {
  color: rgba(0, 0, 0, 0.7);
}
.tags-modal-info strong {
  color: var(--accent);
}
body.light .tags-modal-info strong {
  color: var(--accent-dark);
}
.tags-modal-input-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
}
body.light .tags-modal-input-group {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}
.tags-modal-hash {
  padding: 0.75rem 0.5rem 0.75rem 0.75rem;
  color: rgba(var(--accent-rgb), 0.8);
  font-weight: 600;
  font-size: 1rem;
}
body.light .tags-modal-hash {
  color: rgba(var(--accent-rgb), 0.8);
}
.tags-modal-input {
  flex: 1;
  padding: 0.75rem 0.75rem 0.75rem 0;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1rem;
  outline: none;
}
.tags-modal-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
body.light .tags-modal-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.tags-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
body.light .tags-modal-footer {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}
.tags-modal-btn {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tags-modal-btn.cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
.tags-modal-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
}
body.light .tags-modal-btn.cancel {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}
body.light .tags-modal-btn.cancel:hover {
  background: rgba(0, 0, 0, 0.04);
}
.tags-modal-btn.confirm {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border: none;
  color: white;
}
.tags-modal-btn.confirm:hover:not(:disabled) {
  background: linear-gradient(135deg, #9d74fa, var(--accent));
  transform: translateY(-1px);
}
.tags-modal-btn.confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
/* Custom AI Prompt Modal */
.custom-prompt-modal {
  min-width: 500px;
  max-width: 600px;
}
.custom-prompt-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.custom-prompt-textarea {
  width: 100%;
  min-height: 120px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: inherit;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
}
.custom-prompt-textarea:focus {
  border-color: rgba(236, 72, 153, 0.5);
}
.custom-prompt-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
body.light .custom-prompt-textarea {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light .custom-prompt-textarea:focus {
  border-color: rgba(236, 72, 153, 0.5);
}
body.light .custom-prompt-textarea::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.custom-prompt-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-prompt-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}
body.light .custom-prompt-hint {
  color: rgba(0, 0, 0, 0.4);
}
.save-prompt-toggle {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: rgba(236, 72, 153, 0.1);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 4px;
  color: #ec4899;
  cursor: pointer;
  transition: all 0.15s ease;
}
.save-prompt-toggle:hover {
  background: rgba(236, 72, 153, 0.2);
}
/* Save Prompt Form */
.save-prompt-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .save-prompt-form {
  border-color: rgba(0, 0, 0, 0.08);
}
.save-prompt-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: inherit;
  font-size: 0.85rem;
  outline: none;
}
.save-prompt-input:focus {
  border-color: rgba(236, 72, 153, 0.5);
}
body.light .save-prompt-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}
.save-prompt-confirm,
.save-prompt-cancel {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.save-prompt-confirm {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}
.save-prompt-confirm:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.3);
}
.save-prompt-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.save-prompt-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
.save-prompt-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
}
body.light .save-prompt-cancel {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}
body.light .save-prompt-cancel:hover {
  background: rgba(0, 0, 0, 0.05);
}
/* Saved Prompts Section */
.saved-prompts-section {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .saved-prompts-section {
  border-color: rgba(0, 0, 0, 0.08);
}
.saved-prompts-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.saved-prompts-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
body.light .saved-prompts-label {
  color: rgba(0, 0, 0, 0.6);
}
.saved-prompts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.saved-prompt-item {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}
body.light .saved-prompt-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
.saved-prompt-select {
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-prompt-select:hover {
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
}
.saved-prompt-delete {
  padding: 0.4rem 0.5rem;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.saved-prompt-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
body.light .saved-prompt-delete {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}
body.light .saved-prompt-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
/* Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
/* Projects Page Styles */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  padding: 10px 0;
}
.project-manage-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.2s ease;
}
.project-manage-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.project-manage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.project-manage-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-blue);
}
.project-actions {
  display: flex;
  gap: 4px;
}
.project-description {
  font-size: 0.9rem;
  opacity: 0.8;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.project-description .markdown-block blockquote {
  margin: 8px 0;
  padding-left: 12px;
  border-left: 3px solid var(--accent-blue);
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
}
.project-description .markdown-block p {
  margin: 8px 0;
}
.project-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-manage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: grab;
}
.task-manage-item:active {
  cursor: grabbing;
}
.task-manage-item.editing {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-blue);
  cursor: default;
}
.task-manage-item.drag-over {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.task-manage-item.dragging {
  opacity: 0.5;
}
.task-drag-handle {
  opacity: 0.3;
  cursor: grab;
}
.task-manage-item:hover .task-drag-handle {
  opacity: 0.6;
}
.task-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.task-name {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-notes {
  font-size: 0.8rem;
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.task-manage-item:hover .task-item-actions {
  opacity: 1;
}
.task-edit-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-edit-form input,
.task-edit-form select {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 6px 10px;
  color: white;
  font-size: 0.9rem;
}
.task-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* Icon Buttons */
.btn-icon, .btn-icon-link {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  text-decoration: none;
}
.btn-icon:hover, .btn-icon-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.btn-icon.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.btn-icon.save {
  background: var(--accent-blue);
  color: white;
}
.btn-icon.save:hover {
  filter: brightness(1.2);
}
.empty-tasks {
  padding: 20px;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.5;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
/* Modal Task Form */
.modal-task-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 400px;
}
.modal-task-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-task-form .form-group label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modal-task-form input,
.modal-task-form textarea,
.modal-task-form select {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: white;
  font-size: 0.95rem;
  width: 100%;
}
.modal-task-form input:focus,
.modal-task-form textarea:focus {
  border-color: var(--accent-blue);
  outline: none;
  background: rgba(0, 0, 0, 0.3);
}
/* Status Selector */
.status-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.status-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.status-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.status-btn.active {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--accent-blue);
  color: white;
}
/* Modal Actions */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
.btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 16px;
  color: white;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* Subtasks Header */
.subtasks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-icon-small {
  background: transparent;
  border: none;
  padding: 2px;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.btn-icon-small:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.btn-icon-small.delete:hover {
  color: var(--accent-red);
}
/* Subtasks Manage List */
.subtasks-manage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding: 4px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.subtask-manage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 12px;
  transition: all 0.2s ease;
  cursor: grab;
}
.subtask-manage-item:active {
  cursor: grabbing;
}
.subtask-manage-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.subtask-manage-item.drag-over {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.subtask-manage-item.dragging {
  opacity: 0.5;
}
.subtask-check {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}
.subtask-check:hover {
  color: white;
}
.subtask-check.checked {
  color: var(--accent-green);
}
.subtask-drag-handle {
  opacity: 0.2;
  cursor: grab;
  display: flex;
  align-items: center;
}
.subtask-manage-item:hover .subtask-drag-handle {
  opacity: 0.5;
}
.subtask-manage-item input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  font-size: 0.85rem !important;
}
.subtask-manage-item input:focus {
  background: transparent !important;
}
/* Subtasks Display (in task cards) */
.subtasks-list-display, .project-subtasks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  list-style: none;
}
.subtask-item-row, .subtask-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 2px 0;
  transition: all 0.2s ease;
  line-height: 1.4;
}
.subtask-item-row:hover, .subtask-item:hover {
  color: rgba(255, 255, 255, 0.9);
}
.subtask-item-row.completed, .subtask-item.completed {
  opacity: 0.4;
}
.subtask-item-row .lucide, .subtask-item .lucide {
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--accent-blue);
  opacity: 0.7;
}
.subtask-item-row.completed span, .subtask-item.completed span {
  text-decoration: line-through;
}
.subtask-item-row.completed .lucide, .subtask-item.completed .lucide {
  color: var(--accent-green);
  opacity: 1;
}
/* Subtask Chips */
.subtasks-display {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.subtask-chip {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 2px 8px;
  color: var(--text-muted);
}
/* Delete Confirmation Modal */
.delete-confirm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 400px;
  padding: 10px;
}
.delete-warning-icon {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.delete-target-preview {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 20px;
  width: 100%;
  font-size: 1.1rem;
  color: white;
}
.btn-primary.delete-btn {
  background: #ef4444;
  color: white;
}
.btn-primary.delete-btn:hover {
  background: #dc2626;
}
/* Light theme overrides */
body.light .project-manage-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .project-manage-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light .project-description {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.light .task-manage-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}
body.light .btn-icon:hover,
body.light .btn-icon-link:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #111;
}
body.light .empty-tasks {
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .modal-task-form input,
body.light .modal-task-form textarea,
body.light .modal-task-form select {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #111;
}
body.light .status-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
body.light .status-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .status-btn.active {
  color: #111;
}
body.light .btn-secondary {
  border-color: rgba(0, 0, 0, 0.1);
  color: #111;
}
body.light .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.05);
}
body.light .subtasks-manage-list {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.03);
}
body.light .subtask-manage-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .subtask-manage-item:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .subtasks-list-display,
body.light .project-subtasks-list {
  border-left-color: rgba(0, 0, 0, 0.06);
}
body.light .subtask-item-row,
body.light .subtask-item {
  color: rgba(0, 0, 0, 0.6);
}
body.light .subtask-item-row:hover,
body.light .subtask-item:hover {
  color: rgba(0, 0, 0, 0.9);
}
body.light .delete-target-preview {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #111;
}
/* Zen theme overrides */
body.zen .project-manage-card {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}
body.zen .project-manage-card:hover {
  background: rgba(0, 0, 0, 0.4);
}
body.zen .task-manage-item {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
}
/* Batman theme overrides */
body.batman .project-manage-card {
  background: rgba(0, 100, 200, 0.05);
  border-color: rgba(0, 100, 200, 0.15);
}
body.batman .project-manage-card:hover {
  background: rgba(0, 100, 200, 0.08);
  border-color: rgba(0, 100, 200, 0.25);
}
body.batman .task-manage-item {
  background: rgba(0, 100, 200, 0.03);
  border-color: rgba(0, 100, 200, 0.1);
}
/* -----------------------------------------------------------------------------
 * 7. PAGES - Page-specific styles
 * -------------------------------------------------------------------------- */
/* Daily Journal Page Styles */
/* Navigation styles for daily journal */
.daily-journal-nav {
  gap: 0;
}
.daily-journal-month {
  display: flex;
  flex-direction: column;
}
.daily-journal-month-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.8;
  border-radius: 8px;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
.daily-journal-month-header:hover {
  background: rgba(255, 255, 255, 0.05);
  opacity: 1;
}
.daily-journal-month-header.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  opacity: 1;
}
body.light .daily-journal-month-header:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .daily-journal-month-header.active {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-dark);
}
.daily-journal-count {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.5;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
}
body.light .daily-journal-count {
  background: rgba(0, 0, 0, 0.06);
}
/* Day list */
.daily-journal-days {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 12px;
  margin: 4px 0 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}
body.light .daily-journal-days {
  border-left-color: rgba(0, 0, 0, 0.08);
}
.daily-journal-day {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  border-radius: 6px;
  text-align: left;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}
.daily-journal-day:hover {
  background: rgba(255, 255, 255, 0.05);
  opacity: 1;
}
.daily-journal-day.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  opacity: 1;
}
body.light .daily-journal-day:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .daily-journal-day.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}
.daily-journal-day-num {
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}
.daily-journal-day-name {
  opacity: 0.6;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.daily-journal-day-icons {
  display: flex;
  gap: 4px;
  opacity: 0.5;
  margin-left: auto;
}
.daily-journal-day-icons svg {
  width: 10px;
  height: 10px;
}
.daily-journal-focus {
  font-size: 0.7rem;
  opacity: 0.6;
  white-space: nowrap;
}
/* Content area - flat, no extra padding (handled by body-content) */
.daily-journal-content {
  /* No padding here - body-content handles it */
}
.daily-journal-consolidated {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Block sections (Mind Journal, Activity Log) */
.daily-journal-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.daily-journal-block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
body.light .daily-journal-block-header {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
.daily-journal-block-header svg {
  opacity: 0.7;
}
.daily-journal-block-header .content-actions {
  margin-left: auto;
}
.daily-journal-block-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Mind journal entries - very subtle cards */
.daily-journal-mind-entry {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}
body.light .daily-journal-mind-entry {
  background: rgba(0, 0, 0, 0.015);
  border-color: rgba(0, 0, 0, 0.03);
}
.daily-journal-source {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 8px;
  padding: 2px 8px;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  color: var(--accent);
}
body.light .daily-journal-source {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}
/* Activity log sections - very subtle cards */
.daily-journal-section {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.015);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.025);
}
body.light .daily-journal-section {
  background: rgba(0, 0, 0, 0.01);
  border-color: rgba(0, 0, 0, 0.025);
}
.daily-journal-section-title {
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
  color: #fb923c;
}
.daily-journal-section-content {
  padding-left: 4px;
}
.daily-journal-section-content ul {
  margin: 0;
  padding-left: 20px;
}
.daily-journal-section-content li {
  padding: 4px 0;
  opacity: 0.85;
  line-height: 1.5;
}
/* Responsive */
@media (max-width: 900px) {
  .body-layout {
    flex-direction: column;
  }
  
  .body-nav {
    width: 100%;
    max-height: 300px;
    position: static;
  }
  
  .daily-journal-days {
    max-height: 200px;
    overflow-y: auto;
  }
}
/* Roadmap Page Styles */
.roadmap-phase-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.roadmap-phase-card {
  padding: 24px;
}
.roadmap-phase-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.roadmap-phase-number {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1.4rem;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.08);
}
body.light .roadmap-phase-number {
  border-color: rgba(0, 0, 0, 0.1);
}
.roadmap-phase-heading {
  flex: 1;
  position: relative;
}
.roadmap-phase-heading h3 {
  margin: 4px 0 0;
  font-size: 1.5rem;
}
.phase-id-display {
  font-weight: 600;
  font-size: 1.2rem;
}
.roadmap-phase-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}
.phase-meta-item span {
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  opacity: 0.5;
}
.phase-meta-item p {
  margin: 6px 0 0;
  opacity: 0.95;
  line-height: 1.5;
}
.roadmap-objectives h4,
.roadmap-nonneg h4 {
  margin-bottom: 12px;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.roadmap-nonneg ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0.9;
  list-style: none;
}
.roadmap-nonneg li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.phase-visualization {
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
}
body.light .phase-visualization {
  border-top-color: rgba(0, 0, 0, 0.08);
}
.phase-visualization img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Daily War */
.daily-war-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.daily-war-card {
  padding: 16px;
  display: flex;
  gap: 16px;
}
.daily-war-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
}
body.light .daily-war-icon {
  background: rgba(0, 0, 0, 0.04);
}
.daily-war-body {
  flex: 1;
}
.daily-war-label {
  margin: 0;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
}
.daily-war-question {
  margin-top: 6px;
  opacity: 0.95;
  line-height: 1.6;
}
.daily-war-fix {
  margin: 12px 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}
.daily-war-fix span {
  font-weight: 600;
  margin-right: 6px;
}
/* Visualizer Button */
.visualize-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: inherit;
}
.visualize-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.visualize-btn:active:not(:disabled) {
  transform: scale(0.96);
}
.phase-actions {
  margin-top: 12px;
}
.phase-actions .visualize-btn {
  position: absolute;
  top: 0;
  right: 0;
}
.roadmap-section-header {
  position: relative;
}
.roadmap-section-header .visualize-btn {
  position: absolute;
  top: 0;
  right: 0;
}
/* Soul Synthesis Page Styles */
/* Page container */
.soul-synthesis-page {
  width: 100%;
}
/* Content area */
.soul-synthesis-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Panels container */
.soul-synthesis-panels {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Navigation label - shared with body-nav */
.body-nav-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.body-nav-label > span:first-child {
  font-weight: 500;
}
/* Synthesis meta in nav */
.synthesis-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  opacity: 0.6;
}
.entry-count {
  font-size: 0.7rem;
  opacity: 0.8;
}
/* Header panel */
.synthesis-header-panel {
  /* Uses content-card default padding */
}
.synthesis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1rem;
}
.synthesis-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.synthesis-title h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}
.synthesis-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.15));
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 12px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.15);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.25));
  border-color: rgba(var(--accent-rgb), 0.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary.loading svg {
  animation: spin 1s linear infinite;
}
body.light .btn-primary {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.08));
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent-dark);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.1);
}
body.light .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.15));
  border-color: rgba(var(--accent-rgb), 0.5);
}
/* Stats row */
.synthesis-stats-row {
  display: flex;
  gap: 24px;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .synthesis-stats-row {
  border-top-color: rgba(0, 0, 0, 0.08);
}
.synthesis-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent, var(--accent));
}
/* AI Panel */
.synthesis-ai-panel {
  /* Uses content-card default padding */
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .panel-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Synthesis sections */
.synthesis-section {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
body.light .synthesis-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}
.synthesis-section:last-child {
  margin-bottom: 0;
}
.synthesis-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
/* Section color accents */
.mirroring-section {
  border-left: 3px solid #60a5fa;
}
.mirroring-section h4 {
  color: #60a5fa;
}
.introspection-section {
  border-left: 3px solid var(--accent);
}
.introspection-section h4 {
  color: var(--accent);
}
.parts-analysis-section {
  border-left: 3px solid #fb923c;
}
.parts-analysis-section h4 {
  color: #fb923c;
}
.weather-arc-section {
  border-left: 3px solid #38bdf8;
}
.weather-arc-section h4 {
  color: #38bdf8;
}
.guidance-section {
  border-left: 3px solid #4ade80;
}
.guidance-section h4 {
  color: #4ade80;
}
.image-section {
  border-left: 3px solid #f472b6;
}
.image-section h4 {
  color: #f472b6;
}
/* Image container */
.synthesis-image-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.synthesis-image {
  margin-top: 1rem;
}
.synthesis-image img {
  width: 100%;
  max-width: 600px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body.light .synthesis-image img {
  border-color: rgba(0, 0, 0, 0.1);
}
/* Parts/Tags panel */
.synthesis-parts-panel {
  /* Uses content-card default padding */
}
.parts-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 1rem 0;
}
.part-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 100px;
  color: var(--accent);
  font-weight: 500;
  transition: all 0.2s ease;
}
.part-tag:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-1px);
}
body.light .part-tag {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}
body.light .part-tag:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.part-count {
  font-size: 0.75rem;
  opacity: 0.6;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
}
body.light .part-count {
  background: rgba(0, 0, 0, 0.08);
}
/* Entries panel */
.synthesis-entries-panel {
  /* Uses content-card default padding */
}
.synthesis-entries-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Individual entry */
.synthesis-entry {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
}
body.light .synthesis-entry {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
.synthesis-entry:hover {
  border-color: rgba(255, 255, 255, 0.12);
}
body.light .synthesis-entry:hover {
  border-color: rgba(0, 0, 0, 0.1);
}
.synthesis-entry.expanded {
  border-color: rgba(var(--accent-rgb), 0.25);
}
body.light .synthesis-entry.expanded {
  border-color: rgba(var(--accent-rgb), 0.2);
}
/* Entry header (clickable) */
.synthesis-entry-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.synthesis-entry-header:hover {
  background: rgba(255, 255, 255, 0.03);
}
body.light .synthesis-entry-header:hover {
  background: rgba(0, 0, 0, 0.02);
}
/* Date column */
.entry-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  padding: 8px 12px;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 12px;
}
body.light .entry-date {
  background: rgba(var(--accent-rgb), 0.08);
}
.entry-day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
body.light .entry-day {
  color: var(--accent-dark);
}
.entry-weekday {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  margin-top: 4px;
}
/* Entry info */
.entry-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.entry-title {
  font-weight: 500;
  font-size: 0.95rem;
}
.entry-location {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.85rem;
}
/* Entry meta (mood, tags) */
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.meta-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body.light .meta-badge {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
.mood-badge {
  background: rgba(255, 255, 255, 0.04);
  border-width: 1.5px;
}
.tag-badge {
  opacity: 0.7;
}
/* Entry content (expandable) */
.synthesis-entry-content {
  padding: 0 16px 16px 82px;
  animation: slideUpFade 0.2s ease;
}
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Responsive */
@media (max-width: 900px) {
  .synthesis-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .synthesis-stats-row {
    flex-wrap: wrap;
  }
  
  .synthesis-entry-content {
    padding-left: 16px;
  }
}
/* ===========================================
   WEEKLY PLAN PAGE
   Uses shared .page-panel styles from AppLayout.css
   =========================================== */
.weekly-plan-page,
.weekly-objectives-page {
  /* Base styles - zen glassmorphism handled by .page-panel class */
}
.weekly-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.light .weekly-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.week-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.week-nav-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}
.week-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}
body.light .week-nav-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
body.light .week-nav-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.8);
}
.week-title {
  text-align: center;
}
.week-title h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
}
.week-dates {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}
body.light .week-dates {
  color: rgba(0, 0, 0, 0.5);
}
.week-today-btn {
  padding: 0.4rem 0.8rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.week-today-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
}
/* Overall Progress Ring */
.overall-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.progress-ring {
  position: relative;
  width: 60px;
  height: 60px;
}
.progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.progress-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 3;
}
body.light .progress-ring-bg {
  stroke: rgba(0, 0, 0, 0.08);
}
.progress-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}
.progress-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  font-weight: 600;
}
.progress-label {
  display: flex;
  flex-direction: column;
}
.progress-count {
  font-size: 1rem;
  font-weight: 600;
}
.progress-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
body.light .progress-text {
  color: rgba(0, 0, 0, 0.5);
}
/* No Habits Message */
.no-habits-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
body.light .no-habits-message {
  color: rgba(0, 0, 0, 0.5);
}
.no-habits-message h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}
.no-habits-message p {
  margin: 0;
  font-size: 0.9rem;
}
.configure-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  color: white;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.configure-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}
/* Weekly Categories */
.weekly-categories {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.weekly-category {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
body.light .weekly-category {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.zen .weekly-category {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.category-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background 0.15s ease;
}
.category-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}
body.light .category-toggle:hover {
  background: rgba(0, 0, 0, 0.02);
}
.category-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}
.category-icon {
  font-size: 1.25rem;
}
.category-text {
  display: flex;
  flex-direction: column;
}
.category-name {
  font-size: 0.95rem;
  font-weight: 600;
}
.category-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}
body.light .category-desc {
  color: rgba(0, 0, 0, 0.45);
}
.category-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mini-progress-bar {
  width: 80px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
body.light .mini-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}
.mini-progress-fill {
  height: 100%;
  background: var(--cat-color);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.category-percentage {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cat-color);
  min-width: 40px;
}
/* Category Habits Grid */
.category-habits {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.75rem;
}
body.light .category-habits {
  border-top-color: rgba(0, 0, 0, 0.06);
}
.habits-grid-header {
  display: grid;
  grid-template-columns: 1fr repeat(7, 44px) 100px;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
}
.habit-info-col {
  /* Empty header for habit info column */
}
.day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}
body.light .day-header {
  color: rgba(0, 0, 0, 0.5);
}
.day-header.today {
  color: var(--accent);
}
.day-name {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.day-date {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
body.light .day-date {
  color: rgba(0, 0, 0, 0.7);
}
.day-header.today .day-date {
  color: var(--accent);
}
.progress-col {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
body.light .progress-col {
  color: rgba(0, 0, 0, 0.5);
}
/* Habit Row */
.habit-row {
  display: grid;
  grid-template-columns: 1fr repeat(7, 44px) 100px;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  align-items: center;
  transition: background 0.15s ease;
}
.habit-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
body.light .habit-row:hover {
  background: rgba(0, 0, 0, 0.02);
}
.habit-row.complete {
  background: rgba(34, 197, 94, 0.05);
}
.habit-row .habit-info-col {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.habit-row .habit-icon {
  font-size: 1rem;
}
.habit-row .habit-name {
  font-size: 0.85rem;
  font-weight: 500;
}
.habit-target-small {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
body.light .habit-target-small {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.04);
}
/* Day Cell */
.day-cell {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.day-cell:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
body.light .day-cell {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .day-cell:hover {
  background: rgba(0, 0, 0, 0.05);
}
.day-cell.today {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}
.day-cell.checked {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}
.day-cell.missed {
  background: rgba(239, 68, 68, 0.05);
  border-style: dashed;
}
.empty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
body.light .empty-dot {
  background: rgba(0, 0, 0, 0.1);
}
/* Habit Progress Bar */
.habit-row .progress-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.habit-progress-bar {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
body.light .habit-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}
.habit-progress-fill {
  height: 100%;
  background: var(--cat-color);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.habit-progress-text {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}
body.light .habit-progress-text {
  color: rgba(0, 0, 0, 0.5);
}
/* Weekly Stats */
.weekly-stats {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-width: 100px;
}
body.light .stat-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.zen .stat-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.stat-icon {
  font-size: 1.5rem;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cat-color);
}
.stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.light .stat-label {
  color: rgba(0, 0, 0, 0.5);
}
/* ===========================================
   WEEKLY FOCUS SECTION
   =========================================== */
.weekly-focus-section {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
body.light .weekly-focus-section {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.zen .weekly-focus-section {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.focus-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}
body.light .focus-title {
  color: rgba(0, 0, 0, 0.5);
}
/* Focus Editor Wrapper - uses EditableMarkdownBlock */
.focus-editor-wrapper {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
body.light .focus-editor-wrapper {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
}
body.zen .focus-editor-wrapper {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.08);
}
.focus-editor-wrapper .editable-markdown-edit-mode {
  min-height: 200px;
}
.focus-editor-wrapper .editable-markdown-editor {
  min-height: 200px !important;
}
.focus-editor-wrapper .editable-markdown-editor-wrapper {
  min-height: 200px;
}
.focus-editor-wrapper .markdown-view {
  min-height: 100px;
  padding: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.focus-editor-wrapper .markdown-view:hover {
  background: rgba(255, 255, 255, 0.02);
}
body.light .focus-editor-wrapper .markdown-view:hover {
  background: rgba(0, 0, 0, 0.02);
}
.focus-editor-wrapper .markdown-empty-placeholder,
.focus-editor-wrapper .muted {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  padding: 1rem;
  cursor: pointer;
  white-space: pre-line;
  line-height: 1.8;
  font-size: 0.9rem;
}
body.light .focus-editor-wrapper .markdown-empty-placeholder,
body.light .focus-editor-wrapper .muted {
  color: rgba(0, 0, 0, 0.35);
}
body.zen .focus-editor-wrapper .muted {
  color: rgba(255, 255, 255, 0.4);
}
/* Focus Tree View */
.focus-tree-view {
  padding: 0.75rem;
  min-height: 100px;
  cursor: pointer;
}
.focus-tree-view ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.focus-tree-view .todo-item-content {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0;
  line-height: 1.5;
}
.focus-tree-view .todo-expand-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: color 0.15s ease;
}
.focus-tree-view .todo-expand-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}
body.light .focus-tree-view .todo-expand-btn {
  color: rgba(0, 0, 0, 0.4);
}
body.light .focus-tree-view .todo-expand-btn:hover {
  color: rgba(0, 0, 0, 0.8);
}
.focus-tree-view .todo-expand-placeholder {
  width: 18px;
  flex-shrink: 0;
}
.focus-tree-view .bullet {
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 1px;
}
.focus-tree-view .todo-text {
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
}
body.light .focus-tree-view .todo-text {
  color: rgba(0, 0, 0, 0.8);
}
.focus-tree-view .todo-nested-list {
  margin-left: 0.5rem;
}
.focus-tree-view li.checked .todo-text {
  opacity: 0.5;
  text-decoration: line-through;
}
/* Weekly Habits Section */
.weekly-habits-section {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
body.light .weekly-habits-section {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.zen .weekly-habits-section {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.habits-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1rem;
}
body.light .habits-section-header {
  color: rgba(0, 0, 0, 0.5);
}
.habits-compact-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.habits-compact-grid .habits-grid-header {
  display: grid;
  grid-template-columns: 1fr repeat(7, 36px) 60px;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.25rem;
}
.habits-compact-grid .habit-row {
  display: grid;
  grid-template-columns: 1fr repeat(7, 36px) 60px;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  align-items: center;
  transition: background 0.15s ease;
}
.habits-compact-grid .habit-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
body.light .habits-compact-grid .habit-row:hover {
  background: rgba(0, 0, 0, 0.02);
}
.habits-compact-grid .habit-row.complete {
  background: rgba(34, 197, 94, 0.05);
}
.habits-compact-grid .habit-info-col {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}
.habits-compact-grid .habit-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.habits-compact-grid .habit-name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.habit-target-badge {
  font-size: 0.7rem;
  color: var(--cat-color);
  background: color-mix(in srgb, var(--cat-color) 15%, transparent);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.habits-compact-grid .day-cell {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.habits-compact-grid .day-cell:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
body.light .habits-compact-grid .day-cell {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .habits-compact-grid .day-cell:hover {
  background: rgba(0, 0, 0, 0.05);
}
.habits-compact-grid .day-cell.today {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}
.habits-compact-grid .day-cell.checked {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}
.habits-compact-grid .day-cell.missed {
  background: rgba(239, 68, 68, 0.05);
  border-style: dashed;
}
.habits-compact-grid .progress-col {
  display: flex;
  align-items: center;
}
.habits-compact-grid .habit-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
body.light .habits-compact-grid .habit-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}
.habits-compact-grid .habit-progress-fill {
  height: 100%;
  background: var(--cat-color);
  border-radius: 2px;
  transition: width 0.3s ease;
}
/* Category Summary */
.category-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.category-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  flex: 1;
  min-width: 150px;
}
body.light .category-stat {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.zen .category-stat {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.category-stat .stat-icon {
  font-size: 1.25rem;
}
.category-stat .stat-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.category-stat .stat-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
body.light .category-stat .stat-name {
  color: rgba(0, 0, 0, 0.6);
}
.category-stat .stat-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
body.light .category-stat .stat-bar {
  background: rgba(0, 0, 0, 0.08);
}
.category-stat .stat-bar-fill {
  height: 100%;
  background: var(--cat-color);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.category-stat .stat-percentage {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cat-color);
}
/* Loading State */
.habits-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.5);
}
body.light .habits-loading {
  color: rgba(0, 0, 0, 0.5);
}
/* Responsive */
@media (max-width: 900px) {
  .weekly-header {
    flex-direction: column;
    gap: 1rem;
  }

  .habits-grid-header,
  .habit-row {
    grid-template-columns: 1fr repeat(7, 36px) 70px;
  }

  .day-cell {
    width: 32px;
    height: 32px;
  }

  .habits-compact-grid .habits-grid-header,
  .habits-compact-grid .habit-row {
    grid-template-columns: 1fr repeat(7, 32px) 50px;
  }

  .habits-compact-grid .day-cell {
    width: 28px;
    height: 28px;
  }
}
@media (max-width: 700px) {
  .habit-row .habit-info-col {
    flex-wrap: wrap;
  }

  .habit-target-small {
    display: none;
  }

  .habits-grid-header,
  .habit-row {
    grid-template-columns: 1fr repeat(7, 32px) 60px;
  }

  .day-cell {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .day-header .day-name {
    font-size: 0.6rem;
  }

  .day-header .day-date {
    font-size: 0.75rem;
  }
}
@media (max-width: 600px) {
  .habits-compact-grid .habit-info-col {
    flex-wrap: wrap;
  }

  .habit-target-badge {
    display: none;
  }

  .habits-compact-grid .habits-grid-header,
  .habits-compact-grid .habit-row {
    grid-template-columns: 1fr repeat(7, 28px) 40px;
  }

  .habits-compact-grid .day-cell {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }

  .category-summary {
    flex-direction: column;
  }

  .category-stat {
    min-width: auto;
  }
}
/* Standalone App Page - fullscreen app container */
.standalone-app-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--os-bg, #0d0d0d);
}
/* Not found state */
.standalone-app-page.standalone-app-not-found {
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: var(--os-text-primary, rgba(255, 255, 255, 0.9));
  text-align: center;
}
.standalone-app-page.standalone-app-not-found h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}
.standalone-app-page.standalone-app-not-found p {
  color: var(--os-text-muted, rgba(255, 255, 255, 0.5));
  margin: 0;
}
.standalone-app-page.standalone-app-not-found a {
  color: var(--os-accent, #6366f1);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--os-accent, #6366f1);
  margin-top: 1rem;
  transition: all 0.15s ease;
}
.standalone-app-page.standalone-app-not-found a:hover {
  background: var(--os-accent, #6366f1);
  color: white;
}
.login-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 2.5rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 360px;
}
.login-logo {
  margin-bottom: 1.5rem;
}
.login-logo-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #a78bfa, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
}
.login-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.25rem;
  letter-spacing: -0.02em;
}
.login-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}
.login-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 1.75rem 0;
}
.login-google-btn {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-loading {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  margin: 0;
}
.login-error {
  color: #f87171;
  font-size: 0.8rem;
  margin: 1rem 0 0;
  text-align: center;
  max-width: 280px;
}
.login-footer {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
  margin: 1.5rem 0 0;
}
/* -----------------------------------------------------------------------------
 * 7b. DESKTOP MENU - Reusable menu component
 * -------------------------------------------------------------------------- */
/* DesktopMenu — Reusable menu component */
/* ── Main container ───────────────────────────────────────────── */
.dm-menu {
  position: fixed;
  z-index: 99999;
  min-width: 170px;
  max-width: 280px;
  padding: 4px 0;
  background: rgba(20, 20, 25, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.9);
  overflow: visible;
}
/* ── Scrollable content ───────────────────────────────────────── */
.dm-content {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
/* ── Items ────────────────────────────────────────────────────── */
.dm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.08s;
  user-select: none;
  white-space: nowrap;
}
.dm-item.dm-active,
.dm-item.dm-sub-trigger.dm-active {
  background: rgba(255, 255, 255, 0.1);
}
.dm-item.dm-disabled {
  opacity: 0.4;
  cursor: default;
}
.dm-item-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 13px;
}
.dm-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-item-shortcut {
  flex-shrink: 0;
  font-size: 11px;
  opacity: 0.5;
  margin-left: 16px;
}
.dm-item-chevron {
  flex-shrink: 0;
  font-size: 14px;
  opacity: 0.5;
  margin-left: 8px;
}
/* ── Divider ──────────────────────────────────────────────────── */
.dm-divider {
  height: 1px;
  margin: 4px 12px;
  background: rgba(255, 255, 255, 0.1);
}
/* ── Header ───────────────────────────────────────────────────── */
.dm-header {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  user-select: none;
}
/* ── Submenu ──────────────────────────────────────────────────── */
.dm-submenu {
  position: absolute;
  min-width: 200px;
  padding: 4px 0;
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  z-index: 3;
  max-height: min(72vh, 520px);
  overflow-y: auto;
}
.dm-submenu.right {
  left: calc(100% + 8px);
}
.dm-submenu.left {
  right: calc(100% + 8px);
}
/* ── Light theme ──────────────────────────────────────────────── */
body.light .dm-menu {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.85);
}
body.light .dm-item.dm-active {
  background: rgba(0, 0, 0, 0.06);
}
body.light .dm-divider {
  background: rgba(0, 0, 0, 0.08);
}
body.light .dm-header {
  color: rgba(0, 0, 0, 0.4);
}
body.light .dm-submenu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .dm-item-shortcut {
  color: rgba(0, 0, 0, 0.4);
}
/* OS components */
/* ── App Switcher — Vertical Spinning Wheel ── */
.app-switcher-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: switcherFadeIn 0.1s ease-out;
}
@keyframes switcherFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.app-switcher-overlay.dismissing {
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.app-switcher-stage {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}
.app-switcher-wheel-container {
  width: 200px;
  height: 180px;
  perspective: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.app-switcher-wheel {
  position: relative;
  width: 190px;
  height: 40px;
  transform-style: preserve-3d;
}
.app-switcher-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 10px;
  background: var(--os-glass-bg-solid);
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  box-sizing: border-box;
}
.app-switcher-card.selected {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.2);
}
.app-switcher-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-primary);
  flex-shrink: 0;
}
.app-switcher-card.selected .app-switcher-card-icon {
  color: var(--accent);
}
/* Preview thumbnail — right of wheel */
.app-switcher-preview {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--os-glass-border);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  animation: previewFadeIn 0.2s ease-out;
  width: 440px;
  height: 280px;
  flex-shrink: 0;
}
.app-switcher-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes previewFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.app-switcher-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--os-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-switcher-card.selected .app-switcher-card-name {
  color: var(--os-text-primary);
}
/* Single app — no wheel needed */
.app-switcher-single {
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-switcher-single .app-switcher-card {
  position: relative;
}
.app-switcher-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--os-text-primary);
  text-align: center;
  min-height: 18px;
}
/* macOS Cmd+Tab style app switcher */
.app-tab-switcher-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}
/* Transparent overlay when mission control is also open */
.app-tab-switcher-overlay.over-expose {
  background: none;
  pointer-events: none;
}
.app-tab-switcher-overlay.over-expose .app-tab-switcher-bar {
  pointer-events: auto;
}
.app-tab-switcher-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.app-tab-switcher-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.08s ease, border-color 0.08s ease;
  min-width: 72px;
}
.app-tab-switcher-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.app-tab-switcher-item.selected {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.app-tab-switcher-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.app-tab-switcher-kbd {
  position: absolute;
  bottom: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.app-tab-switcher-item.selected .app-tab-switcher-icon {
  background: rgba(255, 255, 255, 0.12);
}
.app-tab-switcher-name {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
/* "Open App" button uses same styling as .app-tab-switcher-item via shared class */
.app-tab-switcher-add .app-tab-switcher-icon {
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  background: none;
}
.app-tab-switcher-add.selected .app-tab-switcher-icon {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}
/* ── Command Center — Exposé with real windows ── */
/* Backdrop — dims desktop, below menubar */
.command-center-backdrop {
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999980;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ccFadeIn 0.08s ease-out;
  transition: background 0.15s ease, backdrop-filter 0.15s ease;
  display: flex;
}
/* Layout: top strip + main area */
.command-center-backdrop {
  flex-direction: column;
}
/* Main area — window tiles */
.command-center-main {
  flex: 1;
  position: relative;
}
/* Top strip — desktop tiles */
.command-center-sidebar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 14px 24px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
/* Hide scrollbar but keep scrolling */
.command-center-sidebar::-webkit-scrollbar {
  height: 4px;
}
.command-center-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.command-center-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.command-center-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
.command-center-sidebar-title {
  display: none;
}
.command-center-desktop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.2s ease;
  min-width: 200px;
  min-height: 120px;
  flex-shrink: 0;
  overflow: hidden;
}
/* Blurred wallpaper background per tile */
.command-center-desktop-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tile-bg);
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(1.1);
  z-index: 0;
  border-radius: inherit;
}
.command-center-desktop-item > * {
  position: relative;
  z-index: 1;
}
.command-center-desktop-item:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.command-center-desktop-item:hover::before {
  filter: brightness(0.65) saturate(1.2);
}
.command-center-desktop-item.active {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.25);
}
.command-center-desktop-item.active::before {
  filter: brightness(0.7) saturate(1.2);
}
.command-center-desktop-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.command-center-desktop-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.command-center-desktop-item.active .command-center-desktop-name {
  color: #fff;
  font-weight: 400;
}
.command-center-desktop-name svg {
  opacity: 0.5;
}
.command-center-desktop-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
}
/* Close button states */
.cc-action-btn.close.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cc-action-btn.close.disabled:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.3);
}
.cc-action-btn.close:not(.disabled):hover {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.95);
}
/* Toast for "Unpin desktop first" */
.cc-pinned-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  z-index: 9999999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cc-pinned-toast.show {
  opacity: 1;
}
/* Actions row — always at bottom of tile, visible on hover */
.command-center-desktop-actions {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.command-center-desktop-item:hover .command-center-desktop-actions {
  opacity: 1;
}
.cc-action-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}
.cc-action-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.95);
}
.cc-action-btn.pinned {
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.12);
}
.cc-action-btn.pinned:hover {
  color: rgba(var(--accent-rgb), 1);
  background: rgba(var(--accent-rgb), 0.22);
}
.cc-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.18);
  color: rgba(239, 68, 68, 0.95);
}
/* Drag reorder */
.command-center-desktop-item.dragging {
  opacity: 0.3;
}
.command-center-desktop-item.drop-above {
  box-shadow: -2px 0 0 0 rgba(var(--accent-rgb), 0.6);
}
.command-center-desktop-item.drop-below {
  box-shadow: 2px 0 0 0 rgba(var(--accent-rgb), 0.6);
}
/* Rename input — inline, matches name typography */
.command-center-space-rename {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  font-family: inherit;
  outline: none;
  padding: 0 0 2px;
  width: 100%;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.command-center-desktop-apps {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.command-center-desktop-app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0;
}
.command-center-desktop-app svg {
  flex-shrink: 0;
}
.command-center-desktop-app.more {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  background: none;
  width: auto;
  padding: 0 2px;
}
.command-center-desktop-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 200px;
  min-height: 100px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: none;
  color: rgba(255, 255, 255, 0.25);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.command-center-desktop-add:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
/* Space label (shown above window tiles) */
.command-center-space-label {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  z-index: 999995;
  pointer-events: none;
}
@keyframes ccFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Spaces strip — macOS Sequoia style: text tabs, pill on active */
.command-center-spaces {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 999995;
}
.command-center-space-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  position: relative;
}
.command-center-space-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}
.command-center-space-tab.active {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
.command-center-space-name {
  cursor: pointer;
}
.command-center-space-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.1s ease, background 0.1s ease, color 0.1s ease;
}
.command-center-space-tab:hover .command-center-space-delete {
  opacity: 1;
}
.command-center-space-delete:hover {
  background: rgba(255, 60, 60, 0.8);
  color: #fff;
}
.command-center-space-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: color 0.1s ease, background 0.1s ease, border-color 0.1s ease;
}
.command-center-space-add:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.3);
}
/* Labels below each window */
.command-center-window-label {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 999991;
  animation: ccLabelIn 0.1s ease-out 0.05s backwards;
}
@keyframes ccLabelIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.command-center-window-label svg {
  opacity: 0.5;
  flex-shrink: 0;
}
/* Other-space window cards — shown when previewing a different desktop */
.command-center-other-space {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 600px;
}
.command-center-other-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
  min-width: 100px;
}
.command-center-other-card:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}
/* Empty state — no windows open */
.command-center-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.command-center-empty-text {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}
.command-center-empty-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
}
.command-center-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  white-space: nowrap;
  pointer-events: none;
}
/* Override window overflow during expose so badge + label can escape */
.window.expose {
  overflow: visible !important;
}
/* Block all interaction with window content during expose */
.window.expose .window-body {
  pointer-events: none !important;
}
.window.expose .window-titlebar {
  pointer-events: none !important;
}
/* Close button — inline in the label pill, appears on hover */
.window-expose-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease, background 0.1s ease, color 0.1s ease;
}
.window.expose:hover .window-expose-close {
  opacity: 1;
}
.window-expose-close:hover {
  background: rgba(255, 60, 60, 0.85);
  border-color: rgba(255, 80, 80, 0.5);
  color: #fff;
}
/* Keyboard shortcut number inline with label */
.window-expose-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Anchor: zero-size point at center of window */
.window-expose-label-anchor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 10;
  pointer-events: none;
}
/* Label at center of window preview */
.window-expose-label {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center center;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  translate: -50% -50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.1s ease, background 0.1s ease;
}
/* Scale up label on window hover */
.window-expose-label-anchor {
  transition: transform 0.1s ease;
}
.window.expose:hover .window-expose-label-anchor {
  transform: scale(1.3);
}
.window.expose:hover .window-expose-label {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.3);
}
.window-expose-label svg {
  opacity: 0.5;
  flex-shrink: 0;
}
/* Window hover effect during expose */
.window.expose:hover {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.5), 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  z-index: 999999 !important;
}
/* Soul Companion — The boy who lives in the OS */
.soul-companion {
  position: fixed;
  /* The boy is ALWAYS visible on top of non-maximized windows. He
     only goes behind maximized (fullscreen) windows. Z-index is set
     dynamically by index.jsx each frame:
       - No maximized window: 10020 (above all windows at 10003+)
       - Maximized window + on ground: 10002 (behind it)
       - On elevated surface: 10020 (always on top, even with maximized) */
  z-index: 99999;
  cursor: pointer;
  user-select: none;
  image-rendering: pixelated;
  will-change: transform;
  /* Override inherited transition: all from .os-desktop. The companion
     positions via JS transform every frame — CSS transitions on
     transform cause visual wiggle from sub-pixel interpolation. */
  transition: none !important;
  /* GPU layer — prevents layout recalc on position changes */
  contain: layout style;
}
/* Hover/active scale on the SPRITE, not the container (container uses transform for position) */
.soul-companion:hover .companion-sprite {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}
.soul-companion:active .companion-sprite {
  transform: scale(0.95);
}
/* Don't scale sprite during control mode — animations handle it */
.soul-companion.player-controlled:hover .companion-sprite,
.soul-companion.player-controlled:active .companion-sprite {
  transform: none;
  transition: none;
}
.soul-companion.dragging {
  cursor: grabbing;
  transform: scale(1.1);
  opacity: 0.9;
}
/* Player control mode — pulsing glow */
.soul-companion.player-controlled {
  animation: companion-selected-pulse 1.5s ease-in-out infinite;
}
@keyframes companion-selected-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(var(--accent-rgb, 167, 139, 250), 0.4)); }
  50% { filter: drop-shadow(0 0 8px rgba(var(--accent-rgb, 167, 139, 250), 0.7)); }
}
.player-controlled .companion-sprite {
  animation: none !important; /* Override idle animations — player controls movement */
}
/* Debug panel open — subtle accent glow to show selection */
.soul-companion.debug-open {
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb, 167, 139, 250), 0.5));
}
/* === GROUND SHADOW — makes the boy feel grounded === */
.soul-companion::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 8px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
/* === THE CORNER — his little home === */
.companion-nook {
  position: fixed;
  bottom: 68px;
  left: 0;
  width: 120px;
  height: 24px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 100%
  );
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, transparent 100%);
  z-index: 10099;
  pointer-events: none;
}
/* === THE CHARACTER (CSS pixel art) === */
.companion-sprite {
  width: 48px;
  height: 56px;
  position: relative;
  transform-origin: bottom center;
  /* Override inherited transition: all from .os-desktop. Without this,
     every class change or transform update triggers CSS transition
     interpolation, causing visual bobbing/wiggling. */
  transition: none !important;
}
.companion-body {
  /* Pixel art is rendered via inline box-shadow from CharacterRenderer */
  position: absolute;
  image-rendering: pixelated;
}
/* Facing left — flip the sprite */
.companion-sprite.facing-left {
  transform: scaleX(-1);
}
/* === ANIMATION STATES === */
/* CSS animations removed — sprite animation is now driven by the brain
   via the tendency system. Previously, idle/curious/excited/sleeping/walking
   all had infinite CSS keyframe loops that overrode brain intent and caused
   jittery sprites. The brain controls all expression now. */
.companion-sprite.companion-sleeping {
  opacity: 0.7;
}
/* Frozen — all CSS animations killed across the ENTIRE companion
   tree. Applied when output is cut (freeze test). Targets both the
   sprite (companion-bob, companion-bounce) AND the presence wrapper
   (mero-curious-tilt, mero-panic-shake, etc.). */
.companion-sprite.companion-frozen,
.companion-sprite.companion-frozen *,
.soul-companion.companion-frozen-root .companion-presence,
.soul-companion.companion-frozen-root .companion-sprite {
  animation: none !important;
  transition: none !important;
}
/* Sitting — lower and still */
.companion-sprite.companion-sitting {
  transform: translateY(4px);
}
/* Reading — leaning forward with gentle page-turning motion */
@keyframes companion-read {
  0%, 100% { transform: rotate(-2deg) translateY(2px); }
  30% { transform: rotate(-4deg) translateY(1px); }
  60% { transform: rotate(-1deg) translateY(3px); }
}
.companion-sprite.companion-reading {
  animation: companion-read 4s ease-in-out infinite;
}
/* Book appears when reading */
.companion-sprite.companion-reading::after {
  content: '📖';
  position: absolute;
  bottom: 8px;
  left: -14px;
  font-size: 20px;
  animation: book-bob 3s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
@keyframes book-bob {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-2px) rotate(0deg); }
}
/* Waving — arm wave */
@keyframes companion-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg) translateY(-2px); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-3deg) translateY(-1px); }
}
.companion-sprite.companion-waving {
  animation: companion-wave 0.5s ease-in-out infinite;
}
/* Music — bobbing to the beat */
@keyframes companion-music {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(2deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-3px) rotate(-2deg); }
}
.companion-sprite.companion-music {
  animation: companion-music 0.6s ease-in-out infinite;
}
/* Landing squash */
@keyframes companion-squash {
  0% { transform: scaleX(1) scaleY(1); }
  30% { transform: scaleX(1.3) scaleY(0.7); }
  50% { transform: scaleX(0.9) scaleY(1.1); }
  70% { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scaleX(1) scaleY(1); }
}
.companion-sprite.companion-landing {
  animation: companion-squash 0.35s ease-out;
  transform-origin: bottom center;
}
/* === SPEECH BUBBLE === */
.companion-speech {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a2e;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: speech-appear 0.3s ease-out;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.2px;
}
.companion-speech::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
/* Right (default) */
.companion-speech.speech-right {
  top: 50%;
  left: 52px;
  transform: translateY(-50%);
}
.companion-speech.speech-right::after {
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid rgba(255, 255, 255, 0.95);
}
/* Left */
.companion-speech.speech-left {
  top: 50%;
  right: 52px;
  left: auto;
  transform: translateY(-50%);
}
.companion-speech.speech-left::after {
  top: 50%;
  right: -5px;
  left: auto;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid rgba(255, 255, 255, 0.95);
}
/* Above */
.companion-speech.speech-above {
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}
.companion-speech.speech-above::after {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(255, 255, 255, 0.95);
}
/* Below */
.companion-speech.speech-below {
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}
.companion-speech.speech-below::after {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(255, 255, 255, 0.95);
}
@keyframes speech-appear {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
/* === CONTROL HINT === */
.companion-controls-hint {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 2px;
  font-family: monospace;
  animation: hint-fade-in 0.3s ease-out;
}
@keyframes hint-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* === PARACHUTE === */
.companion-parachute {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 36px;
  background: conic-gradient(
    from 0deg at 50% 100%,
    var(--accent, #a78bfa) 0deg,
    rgba(255,255,255,0.8) 60deg,
    var(--accent, #a78bfa) 120deg,
    rgba(255,255,255,0.8) 180deg,
    var(--accent, #a78bfa) 240deg,
    rgba(255,255,255,0.8) 300deg,
    var(--accent, #a78bfa) 360deg
  );
  border-radius: 50% 50% 0 0;
  border: 2px solid rgba(var(--accent-rgb, 167, 139, 250), 0.5);
  border-bottom: none;
  animation: parachute-sway 2s ease-in-out infinite;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Strings connecting parachute to character */
.companion-parachute::before,
.companion-parachute::after {
  content: '';
  position: absolute;
  bottom: -14px;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.4);
}
.companion-parachute::before {
  left: 12px;
  transform: rotate(8deg);
}
.companion-parachute::after {
  right: 12px;
  transform: rotate(-8deg);
}
/* The sprite swings under the parachute */
.parachuting .companion-sprite {
  animation: parachute-swing 2.5s ease-in-out infinite !important;
}
@keyframes parachute-sway {
  0%, 100% { transform: translateX(-50%) rotate(-8deg); }
  50% { transform: translateX(-50%) rotate(8deg); }
}
@keyframes parachute-swing {
  0%, 100% { transform: translateX(0) rotate(-3deg); }
  25% { transform: translateX(-8px) rotate(-5deg); }
  50% { transform: translateX(0) rotate(3deg); }
  75% { transform: translateX(8px) rotate(5deg); }
}
/* === VISUAL EFFECTS === */
.companion-effect {
  position: fixed;
  /* z-index set inline dynamically — matches the boy's z-index */
  pointer-events: none;
}
/* Butterfly — flutters around */
.companion-effect.butterfly {
  font-size: 18px;
  animation: butterfly-flutter 2s ease-in-out infinite;
}
@keyframes butterfly-flutter {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(20px, -15px) rotate(10deg); }
  50% { transform: translate(40px, -5px) rotate(-5deg); }
  75% { transform: translate(15px, -20px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
/* Bubbles — float upward */
.companion-effect.bubbles {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: rgba(var(--accent-rgb, 167, 139, 250), 0.6);
}
.companion-effect.bubbles span {
  animation: bubble-float 2s ease-out infinite;
  opacity: 0.7;
}
.companion-effect.bubbles span:nth-child(2) { animation-delay: 0.3s; font-size: 8px; }
.companion-effect.bubbles span:nth-child(3) { animation-delay: 0.6s; font-size: 14px; }
@keyframes bubble-float {
  0% { transform: translateY(0) scale(1); opacity: 0.7; }
  100% { transform: translateY(-40px) scale(0.5); opacity: 0; }
}
/* Paper airplane — flies across screen */
.companion-effect.airplane {
  font-size: 16px;
  animation: airplane-fly 3s ease-in forwards;
}
@keyframes airplane-fly {
  0% { transform: translate(0, 0) rotate(-20deg); opacity: 1; }
  50% { transform: translate(200px, -60px) rotate(-10deg); opacity: 1; }
  100% { transform: translate(500px, -30px) rotate(0deg); opacity: 0; }
}
/* === SOCCER BALL === */
.companion-ball {
  position: fixed;
  font-size: 16px;
  /* z-index matches the boy — goes behind maximized windows */
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
  transition: none;
}
.companion-ball.waiting {
  animation: ball-bounce-idle 0.6s ease-in-out infinite;
}
.companion-ball.flying {
  animation: ball-spin 0.3s linear infinite;
}
@keyframes ball-bounce-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes ball-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* === FLOATING PLATFORMS === */
.companion-platform {
  position: fixed;
  height: 10px;
  z-index: 2147483639;
  pointer-events: none;
  border-radius: 5px;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-rgb, 167, 139, 250), 0.6) 0%,
    rgba(var(--accent-rgb, 167, 139, 250), 0.3) 100%
  );
  border: 1px solid rgba(var(--accent-rgb, 167, 139, 250), 0.5);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 12px rgba(var(--accent-rgb, 167, 139, 250), 0.2);
  animation: platform-appear 0.3s ease-out;
}
@keyframes platform-appear {
  from {
    opacity: 0;
    transform: scaleX(0.5);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
/* === NEW ACTION EFFECTS === */
@keyframes meroFloatUp {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}
@keyframes meroTwinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes meroSparkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.3) rotate(15deg); }
}
@keyframes meroSplat {
  0% { transform: scale(0.3); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes meroFlash {
  0% { opacity: 0.5; }
  100% { opacity: 0; }
}
/* === PART PRESENCE ANIMATIONS ===
 * These animate the companion-presence wrapper div.
 * Each part has a characteristic body language expressed through CSS. */
.companion-presence {
  transform-origin: center bottom;
}
/* Part-based body animations removed — will be replaced by brain-driven
   tendency system (PostureModulator). Previously had: mero-curious-tilt,
   mero-bounce, mero-breathe, mero-shiver, mero-nod, mero-proud-sway,
   mero-wild-pulse, mero-melancholic-sway. All were infinite CSS loops. */
/* === RESPONSIVE === */
/* Hide in fullscreen/zen mode — handled by parent conditional */
/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .companion-sprite.companion-idle,
  .companion-sprite.companion-curious,
  .companion-sprite.companion-excited,
  .companion-sprite.companion-sleeping,
  .companion-sprite.companion-walking,
  .companion-sprite.companion-reading,
  .companion-sprite.companion-waving {
    animation: none;
  }
}
/* Events Widget */
.events-widget .widget-close-btn {
  opacity: 1;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
.events-widget .widget-close-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
}
.events-widget-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}
.events-widget-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.events-widget-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.events-widget-item.past {
  opacity: 0.4;
}
.events-widget-item.now {
  background: rgba(var(--accent-rgb), 0.08);
  border-left: 2px solid var(--accent);
  padding-left: 6px;
}
.events-widget-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--os-text-muted);
  white-space: nowrap;
  min-width: 70px;
  flex-shrink: 0;
}
.events-widget-item.now .events-widget-time {
  color: var(--accent);
}
.events-widget-now-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: events-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes events-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.events-widget-name {
  font-size: 0.725rem;
  color: var(--os-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.events-widget-item.now .events-widget-name {
  color: var(--os-text-primary);
  font-weight: 500;
}
.events-widget-meet {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.12);
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.events-widget-meet:hover {
  background: rgba(var(--accent-rgb), 0.2);
}
/* Approaching event */
.events-widget-item.approaching {
  background: rgba(251, 191, 36, 0.08);
  border-left: 2px solid rgba(251, 191, 36, 0.7);
  padding-left: 6px;
}
.events-widget-item.approaching .events-widget-time {
  color: #fbbf24;
}
.events-widget-item.approaching .events-widget-name {
  color: var(--os-text-primary);
  font-weight: 500;
}
.events-widget-item.approaching .events-widget-now-dot {
  background: #fbbf24;
}
/* Reminder mode — subtle accent border to draw attention */
.events-widget-reminder {
  border-color: rgba(251, 191, 36, 0.3) !important;
}
/* Light theme */
body.light .events-widget-item.now {
  background: rgba(var(--accent-rgb), 0.06);
}
body.light .events-widget-item.approaching {
  background: rgba(251, 191, 36, 0.06);
}
/* -----------------------------------------------------------------------------
 * 8. SANDBOX APPS - Embedded app styles
 * -------------------------------------------------------------------------- */
/* ============================================
   APP NAME - Self-contained styles
   ============================================

   Pattern: Each app has ONE styles.css file that:
   1. Isolates from parent (Window) styles
   2. Defines app-specific CSS variables
   3. Organizes styles by component area

   Naming convention: --{app-prefix}-{property}
   Example: --dd- for daily-digest, --ex- for explorer

   ============================================ */
/* ============================================
   1. ISOLATION & VARIABLES
   ============================================ */
/* Remove window padding if app needs full bleed */
.window-body:has(.template-app) {
  padding: 0 !important;
}
/* App container - isolate text color from Window component */
.template-app {
  /* Override inherited text color from Window */
  color: var(--tpl-text-primary);

  /* Layout */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  /* App theme - customize these */
  background: var(--tpl-bg);

  /* ========== APP CSS VARIABLES ========== */

  /* Colors */
  --tpl-bg: #1a1a1a;
  --tpl-bg-secondary: #242424;
  --tpl-bg-tertiary: #2a2a2a;

  /* Text */
  --tpl-text-primary: rgba(255, 255, 255, 0.95);
  --tpl-text-secondary: rgba(255, 255, 255, 0.7);
  --tpl-text-muted: rgba(255, 255, 255, 0.5);

  /* Accent */
  --tpl-accent: #4a9eff;
  --tpl-accent-hover: #6bb3ff;
  --tpl-accent-bg: rgba(74, 158, 255, 0.15);

  /* Borders */
  --tpl-border: rgba(255, 255, 255, 0.1);
  --tpl-border-strong: rgba(255, 255, 255, 0.2);

  /* Spacing */
  --tpl-spacing-xs: 4px;
  --tpl-spacing-sm: 8px;
  --tpl-spacing-md: 16px;
  --tpl-spacing-lg: 24px;
  --tpl-spacing-xl: 32px;

  /* Radius */
  --tpl-radius-sm: 4px;
  --tpl-radius-md: 8px;
  --tpl-radius-lg: 12px;
}
/* Restore child elements box-sizing */
.template-app *,
.template-app *::before,
.template-app *::after {
  box-sizing: border-box;
}
/* ============================================
   2. LAYOUT
   ============================================ */
.template-app .app-header {
  flex-shrink: 0;
  padding: var(--tpl-spacing-md);
  border-bottom: 1px solid var(--tpl-border);
  background: var(--tpl-bg-secondary);
}
.template-app .app-content {
  flex: 1;
  overflow: auto;
  padding: var(--tpl-spacing-md);
}
.template-app .app-sidebar {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--tpl-border);
  background: var(--tpl-bg-secondary);
}
.template-app .app-footer {
  flex-shrink: 0;
  padding: var(--tpl-spacing-sm) var(--tpl-spacing-md);
  border-top: 1px solid var(--tpl-border);
  background: var(--tpl-bg-secondary);
}
/* ============================================
   3. TYPOGRAPHY
   ============================================ */
.template-app h1,
.template-app h2,
.template-app h3,
.template-app h4 {
  margin: 0 0 var(--tpl-spacing-sm) 0;
  color: var(--tpl-text-primary);
  font-weight: 600;
}
.template-app h1 { font-size: 1.5rem; }
.template-app h2 { font-size: 1.25rem; }
.template-app h3 { font-size: 1rem; }
.template-app h4 { font-size: 0.875rem; }
.template-app p {
  margin: 0 0 var(--tpl-spacing-md) 0;
  color: var(--tpl-text-secondary);
}
.template-app a {
  color: var(--tpl-accent);
  text-decoration: none;
}
.template-app a:hover {
  color: var(--tpl-accent-hover);
  text-decoration: underline;
}
/* ============================================
   4. BUTTONS
   ============================================ */
.template-app button,
.template-app .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tpl-spacing-xs);
  padding: var(--tpl-spacing-sm) var(--tpl-spacing-md);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--tpl-radius-md);
  border: 1px solid var(--tpl-border);
  background: var(--tpl-bg-tertiary);
  color: var(--tpl-text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.template-app button:hover,
.template-app .btn:hover {
  background: var(--tpl-bg-secondary);
  border-color: var(--tpl-border-strong);
}
.template-app button:disabled,
.template-app .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.template-app .btn-primary {
  background: var(--tpl-accent);
  border-color: var(--tpl-accent);
  color: white;
}
.template-app .btn-primary:hover {
  background: var(--tpl-accent-hover);
  border-color: var(--tpl-accent-hover);
}
/* ============================================
   5. INPUTS
   ============================================ */
.template-app input,
.template-app textarea,
.template-app select {
  padding: var(--tpl-spacing-sm) var(--tpl-spacing-md);
  font-size: 0.875rem;
  border-radius: var(--tpl-radius-md);
  border: 1px solid var(--tpl-border);
  background: var(--tpl-bg-tertiary);
  color: var(--tpl-text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}
.template-app input:focus,
.template-app textarea:focus,
.template-app select:focus {
  border-color: var(--tpl-accent);
}
.template-app input::placeholder,
.template-app textarea::placeholder {
  color: var(--tpl-text-muted);
}
/* ============================================
   6. LISTS
   ============================================ */
.template-app ul,
.template-app ol {
  margin: 0 0 var(--tpl-spacing-md) 0;
  padding-left: var(--tpl-spacing-lg);
  color: var(--tpl-text-secondary);
}
.template-app li {
  margin-bottom: var(--tpl-spacing-xs);
}
/* ============================================
   7. CUSTOM COMPONENTS
   Add app-specific components below
   ============================================ */
/**
 * Browser App Styles
 */
.sandbox-app-browser {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #1a1a1f;
  overflow: hidden;
  position: relative;
}
/* Toolbar */
.browser-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.browser-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.browser-btn:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.browser-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.browser-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.browser-btn-block:hover {
  background: rgba(255, 100, 100, 0.15);
  border-color: rgba(255, 100, 100, 0.3);
  color: #ff6b6b;
}
.browser-url-form {
  flex: 1;
  display: flex;
  gap: 0.5rem;
}
.browser-url-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 0.85rem;
  outline: none;
}
.browser-url-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.browser-url-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
/* Bookmarks bar */
.browser-bookmarks {
  display: flex;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  overflow-x: auto;
}
.browser-bookmark {
  padding: 0.25rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}
.browser-bookmark:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}
/* Loading bar */
.browser-loading-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-dark));
  background-size: 200% 100%;
  animation: loadingSlide 1s linear infinite;
}
@keyframes loadingSlide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Content area */
.browser-content {
  flex: 1;
  position: relative;
  background: white;
  overflow: hidden;
}
.browser-webview {
  width: 100%;
  height: 100%;
  border: none;
}
/* Home page */
.browser-home {
  position: absolute;
  inset: 0;
  background: #1a1a1f;
  display: flex;
  justify-content: center;
  overflow-y: auto;
}
.browser-home-inner {
  max-width: 600px;
  width: 100%;
  padding: 48px 24px 24px;
}
.browser-home-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  cursor: text;
  transition: all 0.15s;
  margin-bottom: 32px;
}
.browser-home-search:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.search-icon {
  font-size: 1rem;
  opacity: 0.5;
}
.search-placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
}
.browser-home-section {
  margin-bottom: 28px;
}
.section-label {
  display: block;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.quick-link:hover {
  background: rgba(255, 255, 255, 0.06);
}
.quick-link-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
}
.quick-link-name {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
}
.bookmarks-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bookmark-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  width: 100%;
}
.bookmark-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.bookmark-icon {
  font-size: 1rem;
}
.bookmark-text {
  display: flex;
  flex-direction: column;
}
.bookmark-name {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
}
.bookmark-domain {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
}
/* Blocked overlay */
.browser-blocked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 31, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.blocked-content {
  text-align: center;
  padding: 48px;
}
.blocked-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 16px;
}
.blocked-content h2 {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.5rem;
  margin: 0 0 8px;
}
.blocked-domain {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  margin: 0 0 8px;
}
.blocked-message {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  margin: 0 0 24px;
}
.blocked-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.blocked-btn {
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}
.blocked-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
}
.blocked-btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
.blocked-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* Blocked sites manager panel */
.browser-blocked-manager {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: rgba(20, 20, 25, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.blocked-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.blocked-manager-title {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-weight: 600;
}
.blocked-manager-add {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.blocked-manager-input {
  flex: 1;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 0.75rem;
  outline: none;
}
.blocked-manager-input:focus {
  border-color: rgba(255, 100, 100, 0.5);
}
.blocked-manager-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.blocked-manager-add-btn {
  padding: 6px 12px;
  background: rgba(255, 100, 100, 0.15);
  border: 1px solid rgba(255, 100, 100, 0.3);
  border-radius: 6px;
  color: #ff6b6b;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.blocked-manager-add-btn:hover {
  background: rgba(255, 100, 100, 0.25);
}
.blocked-manager-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.blocked-manager-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  transition: background 0.1s;
}
.blocked-manager-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.blocked-site-icon {
  font-size: 0.75rem;
  opacity: 0.6;
}
.blocked-site-name {
  flex: 1;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}
.blocked-remove-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
}
.blocked-manager-item:hover .blocked-remove-btn {
  opacity: 1;
}
.blocked-remove-btn:hover {
  background: rgba(255, 100, 100, 0.15);
  color: #ff6b6b;
}
/* Session timer */
.browser-session-bar {
  padding: 3px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.65rem;
  background: transparent;
  transition: all 0.3s;
}
.browser-session-bar.warning {
  background: rgba(255, 100, 100, 0.1);
  color: #ff6b6b;
  font-weight: 600;
}
/* Fallback */
.browser-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1a1a1f;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 2rem;
  z-index: 10;
}
/**
 * Example App Styles
 * 
 * All styles are scoped with .sandbox-app-example-app
 * to prevent conflicts with the main dashboard.
 */
.sandbox-app-example-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.9);
}
.sandbox-app-example-app .example-header {
  text-align: center;
  margin-bottom: 2rem;
}
.sandbox-app-example-app .example-header h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sandbox-app-example-app .example-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}
.sandbox-app-example-app .example-description code {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
}
.sandbox-app-example-app .example-input-section {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.sandbox-app-example-app .example-input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.sandbox-app-example-app .example-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(255, 255, 255, 0.08);
}
.sandbox-app-example-app .example-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.sandbox-app-example-app .example-add-btn {
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.sandbox-app-example-app .example-add-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.sandbox-app-example-app .example-add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.sandbox-app-example-app .example-entries {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sandbox-app-example-app .example-entry {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: background 0.15s;
}
.sandbox-app-example-app .example-entry:hover {
  background: rgba(255, 255, 255, 0.05);
}
.sandbox-app-example-app .example-entry-text {
  flex: 1;
  font-size: 0.95rem;
}
.sandbox-app-example-app .example-entry-time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}
.sandbox-app-example-app .example-delete-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.sandbox-app-example-app .example-delete-btn:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.sandbox-app-example-app .example-empty {
  text-align: center;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
}
.sandbox-app-example-app .example-loading {
  text-align: center;
  padding: 4rem;
  color: rgba(255, 255, 255, 0.5);
}
.sandbox-app-example-app .example-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}
.sandbox-app-example-app .example-clear-btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.sandbox-app-example-app .example-clear-btn:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.4);
}
/* Modal Styles */
.sandbox-app-example-app .example-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.sandbox-app-example-app .example-modal {
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: modalScaleIn 0.2s ease-out;
}
@keyframes modalScaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.sandbox-app-example-app .example-modal h3 {
  margin-top: 0;
  font-size: 1.25rem;
  color: #f87171;
}
.sandbox-app-example-app .example-modal p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  margin: 1rem 0 2rem;
  line-height: 1.5;
}
.sandbox-app-example-app .example-modal-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.sandbox-app-example-app .example-cancel-btn {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}
.sandbox-app-example-app .example-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.sandbox-app-example-app .example-confirm-btn {
  padding: 0.75rem 1.5rem;
  background: #ef4444;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}
.sandbox-app-example-app .example-confirm-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
}
.sandbox-app-example-app .example-footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}
/* ============================================
   DAILY DIGEST APP
   Self-contained styles with parent isolation
   ============================================ */
/* ============================================
   1. ISOLATION - Reset inherited styles
   ============================================ */
/* Remove window padding */
.window-body:has(.daily-digest-app) {
  padding: 0 !important;
}
/* Match window bg to newspaper theme so rounded corners blend with sidebar */
.window:has(.daily-digest-app) {
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
  border-color: rgba(180, 165, 140, 0.4) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
/* Light titlebar to match newspaper theme (including when maximized) */
.window:has(.daily-digest-app) .window-titlebar {
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
  border-bottom: 1px solid rgba(180, 165, 140, 0.3) !important;
}
.window:has(.daily-digest-app) .window-title {
  color: rgba(0, 0, 0, 0.7) !important;
}
.window:has(.daily-digest-app) .window-title svg {
  color: rgba(0, 0, 0, 0.5) !important;
}
.window:has(.daily-digest-app) .window-titlebar-right button {
  color: rgba(0, 0, 0, 0.5) !important;
}
.window:has(.daily-digest-app) .window-titlebar-right button:hover {
  color: rgba(0, 0, 0, 0.8) !important;
  background: rgba(0, 0, 0, 0.08) !important;
}
/* Remove news-panel's own border-radius — the window handles corner rounding */
.daily-digest-app .news-panel {
  border-radius: 0 !important;
}
/* App container - isolate text color from Window component */
.daily-digest-app {
  /* Override inherited text color - this is the key fix */
  color: rgba(0, 0, 0, 0.85);

  /* Layout */
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  /* App theme */
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);

  /* CSS Variables for this app */
  --dd-text-primary: rgba(0, 0, 0, 0.85);
  --dd-text-secondary: rgba(0, 0, 0, 0.7);
  --dd-text-muted: rgba(0, 0, 0, 0.5);
  --dd-accent: rgb(139, 105, 20);
  --dd-accent-light: rgba(139, 105, 20, 0.15);
  --dd-accent-border: rgba(139, 105, 20, 0.25);
  --dd-bg-paper: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  --dd-bg-sidebar: rgba(255, 250, 240, 0.95);
}
/* ============================================
   2. NEWS PANEL BASE
   ============================================ */
.daily-digest-app .news-panel {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  color: var(--dd-text-primary);
}
/* ============================================
   3. HEADLINES & TEXT COLORS
   ============================================ */
.daily-digest-app .headline-title {
  color: var(--dd-text-primary) !important;
}
.daily-digest-app .source-name {
  color: var(--dd-text-secondary) !important;
}
.daily-digest-app .source-count {
  color: var(--dd-text-muted) !important;
  background: var(--dd-accent-light) !important;
}
.daily-digest-app .more-header,
.daily-digest-app .more-header span {
  color: var(--dd-text-muted) !important;
}
.daily-digest-app .more-header svg {
  color: var(--dd-text-muted) !important;
}
.daily-digest-app .section-header {
  color: var(--dd-text-primary) !important;
  border-bottom-color: var(--dd-accent-border) !important;
}
.daily-digest-app .fetch-timestamp {
  color: var(--dd-text-muted) !important;
}
/* ============================================
   4. COLLECTIONS SIDEBAR
   ============================================ */
.daily-digest-app .news-sidebar {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 240px !important;
  background: var(--dd-bg-sidebar) !important;
  border-right: 1px solid var(--dd-accent-border) !important;
  z-index: 10 !important;
  transition: width 0.3s ease !important;
}
.daily-digest-app .news-sidebar.collapsed {
  width: 48px !important;
}
/* Fullscreen sidebar - ensure consistent width and position */
.daily-digest-app .news-panel.fullscreen .news-sidebar,
body > .news-panel.fullscreen.standalone-app .news-sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 240px !important;
  z-index: 300 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.daily-digest-app .news-panel.fullscreen .news-sidebar.collapsed,
body > .news-panel.fullscreen.standalone-app .news-sidebar.collapsed {
  width: 48px !important;
}
/* Ensure sidebar content doesn't overflow */
.daily-digest-app .news-panel.fullscreen .news-sidebar .sidebar-content,
body > .news-panel.fullscreen.standalone-app .news-sidebar .sidebar-content {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.daily-digest-app .news-sidebar.collapsed .sidebar-content,
.daily-digest-app .news-sidebar.collapsed .sidebar-section,
.daily-digest-app .news-sidebar.collapsed .sidebar-item {
  display: none !important;
}
.daily-digest-app .sidebar-toggle {
  position: absolute !important;
  top: 12px !important;
  right: 8px !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--dd-accent-light) !important;
  border: 1px solid rgba(139, 105, 20, 0.4) !important;
  border-radius: 50% !important;
  color: var(--dd-text-primary) !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}
.daily-digest-app .sidebar-toggle:hover {
  background: rgba(139, 105, 20, 0.25) !important;
}
.daily-digest-app .sidebar-section-title {
  color: var(--dd-text-muted) !important;
}
.daily-digest-app .sidebar-item {
  color: var(--dd-text-secondary) !important;
}
.daily-digest-app .sidebar-item:hover {
  background: rgba(139, 105, 20, 0.1) !important;
  color: var(--dd-text-primary) !important;
}
.daily-digest-app .sidebar-item.active {
  background: rgba(139, 105, 20, 0.2) !important;
  color: var(--dd-text-primary) !important;
}
.daily-digest-app .sidebar-divider {
  background: var(--dd-accent-border) !important;
}
/* Nested sidebar items (Pulse navigation) */
.daily-digest-app .sidebar-nested {
  border-left-color: var(--dd-accent-border) !important;
}
.daily-digest-app .sidebar-nested-item {
  color: var(--dd-text-secondary) !important;
}
.daily-digest-app .sidebar-nested-item:hover {
  background: rgba(139, 105, 20, 0.1) !important;
  color: var(--dd-text-primary) !important;
}
.daily-digest-app .sidebar-nested-item.active {
  background: rgba(139, 105, 20, 0.18) !important;
  color: var(--dd-text-primary) !important;
  font-weight: 600 !important;
}
.daily-digest-app .sidebar-nested-count {
  color: var(--dd-text-muted) !important;
  background: var(--dd-accent-light) !important;
}
.daily-digest-app .sidebar-nested-badge {
  color: rgba(34, 139, 34, 0.9) !important;
}
.daily-digest-app .sidebar-nested-divider {
  color: var(--dd-text-muted) !important;
}
.daily-digest-app .sidebar-linkedin-time {
  color: var(--dd-text-muted) !important;
}
.daily-digest-app .sidebar-linkedin-refresh-btn {
  color: var(--dd-text-muted) !important;
}
.daily-digest-app .sidebar-linkedin-refresh-btn:hover:not(:disabled) {
  background: var(--dd-accent-light) !important;
  color: var(--dd-text-secondary) !important;
}
/* Expand/collapse chevron for Pulse */
.daily-digest-app .sidebar-expand-chevron {
  color: var(--dd-text-muted) !important;
}
.daily-digest-app .sidebar-item-expandable:hover .sidebar-expand-chevron {
  color: var(--dd-text-secondary) !important;
}
/* ============================================
   5. CONTENT LAYOUT (respects sidebar)
   ============================================ */
/* Override NewsPanel's 280px margin to match our 240px sidebar */
.daily-digest-app .news-panel.has-sidebar .newspaper-body {
  margin-left: 240px !important;
  transition: margin-left 0.3s ease !important;
}
.daily-digest-app .news-panel.has-sidebar.sidebar-collapsed .newspaper-body {
  margin-left: 48px !important;
}
/* Override masthead padding to match sidebar width */
.daily-digest-app .news-panel.has-sidebar .newspaper-masthead,
.daily-digest-app .news-panel.has-sidebar .newspaper-masthead.nyt-style {
  padding-left: 260px !important;
  transition: padding-left 0.3s ease !important;
}
.daily-digest-app .news-panel.has-sidebar.sidebar-collapsed .newspaper-masthead,
.daily-digest-app .news-panel.has-sidebar.sidebar-collapsed .newspaper-masthead.nyt-style {
  padding-left: 60px !important;
}
/* Reading toolbar - needs margin to not overlap sidebar */
.daily-digest-app .news-panel.has-sidebar .reading-toolbar {
  margin-left: 240px !important;
  transition: margin-left 0.3s ease !important;
}
.daily-digest-app .news-panel.has-sidebar.sidebar-collapsed .reading-toolbar {
  margin-left: 48px !important;
}
/* ============================================
   6. MASTHEAD
   ============================================ */
.daily-digest-app .newspaper-masthead {
  background: var(--dd-bg-paper) !important;
  border-bottom: 1px solid var(--dd-accent-border) !important;
}
.daily-digest-app .masthead-date,
.daily-digest-app .masthead-edition {
  color: var(--dd-text-primary) !important;
}
.daily-digest-app .masthead-title {
  color: var(--dd-text-primary) !important;
  font-weight: 700 !important;
}
.daily-digest-app .masthead-btn {
  color: var(--dd-text-secondary) !important;
  background: var(--dd-accent-light) !important;
  border: 1px solid var(--dd-accent-border) !important;
}
.daily-digest-app .masthead-btn:hover {
  background: rgba(139, 105, 20, 0.25) !important;
}
/* ============================================
   7. SECTION TABS
   ============================================ */
.daily-digest-app .newspaper-sections {
  background: var(--dd-bg-paper) !important;
  border-bottom: 1px solid var(--dd-accent-border) !important;
  min-height: 56px !important;
}
.daily-digest-app .section-tab {
  color: var(--dd-text-secondary) !important;
}
.daily-digest-app .section-tab:hover {
  color: var(--dd-text-primary) !important;
  background: rgba(139, 105, 20, 0.1) !important;
}
.daily-digest-app .section-tab.active {
  color: var(--dd-text-primary) !important;
  background: var(--dd-accent-light) !important;
}
/* ============================================
   8. READING TOOLBAR
   ============================================ */
.daily-digest-app .reading-toolbar {
  background: var(--dd-bg-sidebar) !important;
  border-bottom: 1px solid var(--dd-accent-border) !important;
}
.daily-digest-app .reading-section-indicator,
.daily-digest-app .reading-section-name,
.daily-digest-app .reading-section-count {
  color: var(--dd-text-secondary) !important;
}
.daily-digest-app .reading-progress-bar {
  background: rgba(139, 105, 20, 0.6) !important;
}
.daily-digest-app .reading-progress-track {
  background: var(--dd-accent-light) !important;
}
.daily-digest-app .reading-font-btn {
  background: var(--dd-accent-light) !important;
  border: 1px solid var(--dd-accent-border) !important;
  color: var(--dd-text-secondary) !important;
}
.daily-digest-app .reading-font-btn:hover:not(:disabled) {
  background: rgba(139, 105, 20, 0.25) !important;
}
.daily-digest-app .reading-font-label,
.daily-digest-app .reading-progress-text {
  color: var(--dd-text-muted) !important;
}
/* Section action buttons */
.daily-digest-app .section-actions .action-btn {
  color: var(--dd-text-secondary) !important;
  background: var(--dd-accent-light) !important;
  border: 1px solid var(--dd-accent-border) !important;
}
.daily-digest-app .section-actions .action-btn:hover {
  color: var(--dd-text-primary) !important;
  background: rgba(139, 105, 20, 0.25) !important;
}
.daily-digest-app .section-actions .action-divider {
  background: var(--dd-accent-border) !important;
}
.daily-digest-app .section-actions .lang-code {
  color: var(--dd-text-secondary) !important;
}
/* ============================================
   9. PULSE SIDEBAR & CONTENT
   ============================================ */
.daily-digest-app .pulse-sidebar {
  background: rgba(255, 250, 240, 0.5) !important;
  border-right-color: var(--dd-accent-border) !important;
}
.daily-digest-app .pulse-sidebar-header {
  background: rgba(255, 250, 240, 0.8) !important;
  color: var(--dd-text-secondary) !important;
  border-bottom-color: var(--dd-accent-border) !important;
}
/* Pulse content should fill available width */
.daily-digest-app .pulse-content,
body > .news-panel.standalone-app .pulse-content {
  width: 100% !important;
  max-width: none !important;
}
/* Pulse content header - ensure button doesn't wrap */
.daily-digest-app .pulse-content-header,
body > .news-panel.standalone-app .pulse-content-header {
  width: 100% !important;
  flex-wrap: nowrap !important;
}
.daily-digest-app .pulse-content-header .action-btn,
body > .news-panel.standalone-app .pulse-content-header .action-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: fit-content !important;
  padding: 0.5rem 1rem !important;
}
/* Pulse layout - ensure full width */
.daily-digest-app .pulse-layout,
body > .news-panel.standalone-app .pulse-layout {
  width: 100% !important;
  max-width: none !important;
}
/* Pulse section view - remove max-width constraint */
.daily-digest-app .pulse-section-view,
body > .news-panel.standalone-app .pulse-section-view {
  max-width: none !important;
  width: 100% !important;
}
/* Pulse perspective view - remove max-width constraint */
.daily-digest-app .pulse-perspective-view,
body > .news-panel.standalone-app .pulse-perspective-view {
  max-width: none !important;
  width: 100% !important;
}
/* Pulse perspective empty state */
.daily-digest-app .pulse-perspective-empty,
body > .news-panel.standalone-app .pulse-perspective-empty {
  max-width: none !important;
  width: 100% !important;
}
.daily-digest-app .pulse-perspective-empty p,
body > .news-panel.standalone-app .pulse-perspective-empty p {
  max-width: none !important;
}
/* Pulse empty state - full width */
.daily-digest-app .pulse-empty,
body > .news-panel.standalone-app .pulse-empty {
  width: 100% !important;
  max-width: none !important;
}
/* ============================================
   10. BRIEFING CONTENT
   ============================================ */
.daily-digest-app .briefing-text {
  color: var(--dd-text-primary) !important;
}
.daily-digest-app .briefing-text strong {
  color: var(--dd-text-primary) !important;
}
.daily-digest-app .briefing-header {
  color: var(--dd-text-primary) !important;
}
/* ============================================
   11. FULLSCREEN MODE
   Note: Fullscreen content is portaled to document.body,
   so we can't use .daily-digest-app as ancestor
   ============================================ */
/* Fullscreen WITH sidebar - content needs margin, not centered */
.daily-digest-app .news-panel.fullscreen.has-sidebar .newspaper-body,
body > .news-panel.fullscreen.has-sidebar.standalone-app .newspaper-body {
  margin: 0 !important;
  margin-left: 240px !important;
  margin-right: 20px !important;
  max-width: none !important;
}
.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .newspaper-body,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .newspaper-body {
  margin-left: 48px !important;
}
.daily-digest-app .news-panel.fullscreen.has-sidebar .reading-toolbar,
body > .news-panel.fullscreen.has-sidebar.standalone-app .reading-toolbar {
  margin-left: 240px !important;
}
.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .reading-toolbar,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .reading-toolbar {
  margin-left: 48px !important;
}
.daily-digest-app .news-panel.fullscreen.has-sidebar .newspaper-masthead,
.daily-digest-app .news-panel.fullscreen.has-sidebar .newspaper-masthead.nyt-style,
body > .news-panel.fullscreen.has-sidebar.standalone-app .newspaper-masthead,
body > .news-panel.fullscreen.has-sidebar.standalone-app .newspaper-masthead.nyt-style {
  padding-left: 260px !important;
}
.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .newspaper-masthead,
.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .newspaper-masthead.nyt-style,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .newspaper-masthead,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .newspaper-masthead.nyt-style {
  padding-left: 60px !important;
}
/* Fullscreen pulse-layout - needs left offset for sidebar */
.daily-digest-app .news-panel.fullscreen.has-sidebar .pulse-section.pulse-layout,
.daily-digest-app .news-panel.fullscreen.has-sidebar .briefing-section.pulse-layout,
body > .news-panel.fullscreen.has-sidebar.standalone-app .pulse-section.pulse-layout,
body > .news-panel.fullscreen.has-sidebar.standalone-app .briefing-section.pulse-layout {
  position: fixed !important;
  top: 120px !important;
  left: 240px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: calc(100vw - 240px) !important;
  max-width: calc(100vw - 240px) !important;
  height: auto !important;
  max-height: none !important;
}
/* Fullscreen pulse content - constrain to available width */
.daily-digest-app .news-panel.fullscreen .pulse-content,
body > .news-panel.fullscreen.standalone-app .pulse-content {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
/* Fullscreen pulse content header - ensure it fits */
.daily-digest-app .news-panel.fullscreen .pulse-content-header,
body > .news-panel.fullscreen.standalone-app .pulse-content-header {
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 1rem !important;
}
.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .pulse-section.pulse-layout,
.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .briefing-section.pulse-layout,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .pulse-section.pulse-layout,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .briefing-section.pulse-layout {
  left: 48px !important;
  bottom: 0 !important;
  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;
}
/* Fullscreen WITHOUT sidebar - no margin needed */
.daily-digest-app .news-panel.fullscreen:not(.has-sidebar) .newspaper-body,
.daily-digest-app .news-panel.fullscreen:not(.has-sidebar) .reading-toolbar {
  margin-left: 0 !important;
}
.daily-digest-app .news-panel.fullscreen:not(.has-sidebar) .newspaper-masthead {
  padding-left: 0 !important;
}
.daily-digest-app .news-panel.fullscreen:not(.has-sidebar) .pulse-section.pulse-layout {
  left: 0 !important;
}
/* Pulse no-sidebar layout - single column, content fills width */
.daily-digest-app .pulse-layout.pulse-no-sidebar,
body > .news-panel.standalone-app .pulse-layout.pulse-no-sidebar {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
}
/* Pulse content header styling in standalone app */
.daily-digest-app .pulse-content-header,
body > .news-panel.standalone-app .pulse-content-header {
  background: rgba(255, 250, 240, 0.8) !important;
  border-bottom-color: var(--dd-accent-border) !important;
}
.daily-digest-app .pulse-content-title,
body > .news-panel.standalone-app .pulse-content-title {
  color: var(--dd-text-secondary) !important;
}
/* Protocol App */
.protocol-app {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background: rgba(13, 14, 18, 0.98);
  color: white;
  overflow: hidden;
}
/* Sidebar */
.protocol-sidebar {
  width: 240px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  padding: 20px 16px;
  flex-shrink: 0;
}
.protocol-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.protocol-day-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.protocol-day-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
}
.protocol-day-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--os-accent, #4a9eff);
  line-height: 1;
}
.protocol-date-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s;
}
.protocol-date-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.protocol-date-picker {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px;
}
.protocol-date-picker label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}
.protocol-date-picker input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 10px;
  color: white;
  font-size: 0.85rem;
}
.protocol-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.protocol-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  font-size: 0.85rem;
  outline: none;
}
.protocol-search input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.protocol-search svg {
  color: rgba(255, 255, 255, 0.3);
}
.protocol-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--os-accent, #4a9eff);
  border: none;
  border-radius: 10px;
  padding: 12px;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 20px;
}
.protocol-add-btn:hover {
  filter: brightness(1.1);
}
.protocol-add-btn.active {
  background: #ef4444;
}
.protocol-nav-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 10px;
  padding-left: 4px;
}
.protocol-month-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.protocol-month-list::-webkit-scrollbar {
  display: none;
}
.protocol-month-link {
  text-align: left;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.protocol-month-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}
.protocol-sidebar-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.protocol-total {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}
/* Main Content */
.protocol-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}
/* New Entry Form */
.protocol-new-entry {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 32px;
}
.protocol-entry-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.protocol-entry-meta {
  display: flex;
  gap: 24px;
  align-items: flex-end;
}
.protocol-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.protocol-input-group label,
.protocol-day-preview label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
}
.protocol-input-group input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 12px;
  color: white;
  font-size: 0.85rem;
  color-scheme: dark;
}
.protocol-day-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.protocol-day-preview span:last-child {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--os-accent, #4a9eff);
}
.protocol-new-entry textarea,
.protocol-edit-form textarea {
  width: 100%;
  min-height: 100px;
  background: transparent;
  border: none;
  color: white;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  margin-bottom: 16px;
}
.protocol-new-entry textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.protocol-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.protocol-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.protocol-btn.primary {
  background: var(--os-accent, #4a9eff);
  border: none;
  color: white;
}
.protocol-btn.primary:hover {
  filter: brightness(1.1);
}
.protocol-btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.protocol-btn.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}
.protocol-btn.secondary:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}
/* Timeline */
.protocol-timeline {
  padding-bottom: 40px;
}
.protocol-month-group {
  margin-bottom: 48px;
}
.protocol-month-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.protocol-month-header span {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.protocol-month-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
}
.protocol-notes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.protocol-timeline-item {
  position: relative;
  padding-left: 32px;
}
.protocol-marker {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.protocol-marker-dot {
  width: 10px;
  height: 10px;
  background: var(--os-accent, #4a9eff);
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 12px rgba(74, 158, 255, 0.4);
}
.protocol-marker-line {
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: -16px;
  width: 2px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 1;
}
.protocol-timeline-item:last-child .protocol-marker-line {
  display: none;
}
.protocol-note-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px 20px;
  transition: all 0.2s;
}
.protocol-note-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}
.protocol-note-card.editing {
  border-color: var(--os-accent, #4a9eff);
  background: rgba(255, 255, 255, 0.04);
}
.protocol-note-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.protocol-note-day {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--os-accent, #4a9eff);
}
.protocol-note-date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}
.protocol-note-relative {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.25);
  margin-left: auto;
}
.protocol-note-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.protocol-note-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}
.protocol-note-card:hover .protocol-note-actions {
  opacity: 1;
}
.protocol-note-actions button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.protocol-note-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.protocol-delete-confirm {
  display: flex;
  gap: 4px;
}
.protocol-delete-confirm button:first-child:hover {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.protocol-delete-confirm button:last-child:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
/* Empty State */
.protocol-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
  gap: 16px;
}
.protocol-empty p {
  font-size: 0.9rem;
  max-width: 280px;
}
/* Edit Form */
.protocol-edit-form {
  margin-top: -8px;
}
.protocol-edit-form textarea {
  margin-bottom: 12px;
}
/* ── Light Theme ── */
body.light .protocol-app {
  background: rgba(248, 249, 252, 0.98);
  color: #1a1a2e;
}
body.light .protocol-sidebar {
  background: rgba(0, 0, 0, 0.03);
  border-right-color: rgba(0, 0, 0, 0.08);
}
body.light .protocol-day-label {
  color: rgba(0, 0, 0, 0.4);
}
body.light .protocol-date-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
body.light .protocol-date-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}
body.light .protocol-date-picker {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .protocol-date-picker label {
  color: rgba(0, 0, 0, 0.4);
}
body.light .protocol-date-picker input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a2e;
  color-scheme: light;
}
body.light .protocol-search {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .protocol-search input {
  color: #1a1a2e;
}
body.light .protocol-search input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
body.light .protocol-search svg {
  color: rgba(0, 0, 0, 0.3);
}
body.light .protocol-nav-label {
  color: rgba(0, 0, 0, 0.3);
}
body.light .protocol-month-link {
  color: rgba(0, 0, 0, 0.5);
}
body.light .protocol-month-link:hover {
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.04);
}
body.light .protocol-sidebar-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}
body.light .protocol-total {
  color: rgba(0, 0, 0, 0.4);
}
body.light .protocol-month-header span {
  color: rgba(0, 0, 0, 0.5);
}
body.light .protocol-month-line {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
}
body.light .protocol-marker-line {
  background: rgba(0, 0, 0, 0.08);
}
body.light .protocol-note-card {
  background: white;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
body.light .protocol-note-card:hover {
  background: white;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
body.light .protocol-note-card.editing {
  background: rgba(74, 158, 255, 0.03);
}
body.light .protocol-note-date {
  color: rgba(0, 0, 0, 0.4);
}
body.light .protocol-note-relative {
  color: rgba(0, 0, 0, 0.3);
}
body.light .protocol-note-body {
  color: rgba(0, 0, 0, 0.8);
}
body.light .protocol-note-actions button {
  color: rgba(0, 0, 0, 0.25);
}
body.light .protocol-note-actions button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a2e;
}
body.light .protocol-new-entry {
  background: white;
  border-color: rgba(74, 158, 255, 0.3);
}
body.light .protocol-entry-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .protocol-input-group label,
body.light .protocol-day-preview label {
  color: rgba(0, 0, 0, 0.4);
}
body.light .protocol-input-group input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a2e;
  color-scheme: light;
}
body.light .protocol-new-entry textarea,
body.light .protocol-edit-form textarea {
  color: #1a1a2e;
}
body.light .protocol-new-entry textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
body.light .protocol-btn.secondary {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.5);
}
body.light .protocol-btn.secondary:hover {
  border-color: rgba(0, 0, 0, 0.2);
  color: #1a1a2e;
}
body.light .protocol-empty {
  color: rgba(0, 0, 0, 0.25);
}
.media-center {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: var(--os-glass-bg-solid);
  overflow: hidden;
}
.media-center-tabs {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 0.5rem;
  flex-shrink: 0;
}
.media-center-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.media-center-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.03);
}
.media-center-tab.active {
  color: rgba(255, 255, 255, 0.95);
}
.media-center-tab-icon { font-size: 0.9rem; }
.media-center-tab-name { font-size: 0.8rem; }
.media-center-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.media-center-frame {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  inset: 0;
}
.media-center-tab.external-tab { opacity: 0.7; }
.media-center-tab.external-tab:hover { opacity: 1; }
.media-center-tab-external { font-size: 0.6rem; opacity: 0.4; margin-left: 0.1rem; }
.media-center-open-external { margin-left: auto; text-decoration: none; font-size: 0.9rem; }
/* === Movie Search === */
.movie-search {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  background: #0d0d12;
}
.movie-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.movie-search-bar input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}
.movie-search-bar input:focus {
  border-color: rgba(167, 139, 250, 0.5);
}
.movie-search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.movie-search-spinner { font-size: 0.9rem; }
.movie-search-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.movie-search-message.success { background: rgba(74, 222, 128, 0.1); color: #4ade80; }
.movie-search-message.error { background: rgba(248, 113, 113, 0.1); color: #f87171; }
.movie-search-message button {
  background: none; border: none; color: inherit; cursor: pointer; font-size: 0.8rem; opacity: 0.6;
}
.movie-search-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.movie-search-results {
  width: 320px;
  min-width: 280px;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.movie-search-empty {
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
}
/* Movie Cards */
.movie-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.1s;
}
.movie-card:hover { background: rgba(255, 255, 255, 0.04); }
.movie-card.selected { background: rgba(167, 139, 250, 0.1); }
.movie-card-poster {
  width: 45px;
  height: 67px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}
.movie-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.movie-card-no-poster {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.movie-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.movie-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.movie-card-year {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}
.movie-card-badges {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.15rem;
}
.badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.badge-yellow { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.badge-dim { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.35); }
/* Movie Detail */
.movie-detail {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}
.movie-detail-header {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.movie-detail-poster {
  width: 140px;
  height: 210px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.movie-detail-meta {
  flex: 1;
}
.movie-detail-meta h2 {
  margin: 0 0 0.25rem 0;
  font-size: 1.3rem;
  font-weight: 700;
}
.movie-detail-year {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.75rem;
}
.movie-detail-overview {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1rem 0;
}
.movie-add-btn {
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #a78bfa;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.movie-add-btn:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.3);
}
.movie-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.movie-status-tag {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}
.movie-status-tag.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.movie-status-tag.yellow { background: rgba(250, 204, 21, 0.15); color: #facc15; }
/* Releases */
.movie-releases h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: rgba(255, 255, 255, 0.7);
}
.movie-releases-empty {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  padding: 0.5rem 0;
}
.movie-best-release {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  color: #4ade80;
  margin-bottom: 1rem;
}
.movie-release-group {
  margin-bottom: 0.75rem;
}
.movie-release-quality {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.movie-release-item {
  display: flex;
  gap: 1rem;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.release-seeders { color: #4ade80; min-width: 60px; }
.release-size { min-width: 50px; }
.release-indexer { color: rgba(255, 255, 255, 0.35); }
/* === Discover Page === */
.movie-discover-wrapper {
  height: 100%;
  position: relative;
  background: #0d0d12;
  color: rgba(255, 255, 255, 0.9);
}
.movie-discover {
  height: 100%;
  overflow-y: auto;
  padding: 1.25rem;
}
/* When showing trailers, disable scroll and let trailer view fill */
.movie-discover.trailers-active {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.movie-discover.trailers-active .discover-stats {
  padding: 0.5rem 1rem 0.5rem;
  margin-bottom: 0;
  border-bottom: none;
}
.discover-loading {
  padding: 3rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
}
.discover-stats {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
.stat-green { color: #4ade80; }
.stat-yellow { color: #facc15; }
.stat-clickable { cursor: pointer; border-radius: 6px; padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; transition: background 0.15s; }
.stat-clickable:hover { background: rgba(255, 255, 255, 0.06); }
.stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.discover-section {
  margin-bottom: 1.75rem;
}
.discover-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.discover-year-count {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.25);
}
.discover-expand {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(167, 139, 250, 0.6);
  margin-left: auto;
}
.discover-row {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.discover-row::-webkit-scrollbar { height: 4px; }
.discover-row::-webkit-scrollbar-track { background: transparent; }
.discover-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.discover-card {
  flex-shrink: 0;
  width: 120px;
  cursor: pointer;
  transition: transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.discover-card:hover { transform: translateY(-2px); }
.discover-card:active { transform: scale(0.97); }
.discover-poster {
  width: 120px;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
}
.discover-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.discover-no-poster {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.discover-rating {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.75);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}
.discover-downloading {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(250, 204, 21, 0.2);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.65rem;
}
.discover-card-title {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.8);
}
.discover-card-year {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
}
/* View tabs inside stats bar */
.discover-view-tabs {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  align-items: center;
}
.discover-view-tab {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.discover-view-tab:hover { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.04); }
.discover-view-tab.active { color: #a78bfa; border-color: rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.08); }
.discover-tab-count {
  background: rgba(250, 204, 21, 0.2);
  color: #facc15;
  padding: 0.05rem 0.35rem;
  border-radius: 8px;
  font-size: 0.6rem;
}
/* Not in library badge */
.discover-not-in-lib {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(167, 139, 250, 0.3);
  color: #a78bfa;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}
/* Library search */
.library-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 1rem;
  width: 100%;
}
.library-search-input {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}
.library-search-input:focus {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
.library-search-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.library-search-clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.3rem;
}
.library-search-clear:hover { color: rgba(255, 255, 255, 0.7); }
/* Decade filter */
.discover-decade-filter {
  display: flex;
  gap: 0.3rem;
  padding: 0 0 1rem;
  flex-wrap: wrap;
}
.discover-decade-filter button {
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.discover-decade-filter button:hover { color: rgba(255, 255, 255, 0.7); }
.discover-decade-filter button.active { color: #a78bfa; border-color: rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.08); }
/* Grid layout for suggestions */
.discover-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Suggestion year picker */
.suggestion-year-picker {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  align-items: center;
}
.suggestion-year-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.suggestion-year-btn:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.04); }
.suggestion-year-btn.active { color: #a78bfa; border-color: rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.1); }
.suggestion-year-input {
  width: 70px;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  color-scheme: dark;
  font-size: 0.75rem;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
.suggestion-year-input::placeholder { color: rgba(255, 255, 255, 0.25); }
.suggestion-year-input::-webkit-inner-spin-button,
.suggestion-year-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.discover-empty {
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.85rem;
}
/* ── Download List ── */
.dl-section h3 { margin-bottom: 0.75rem; }
.dl-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dl-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  align-items: center;
}
.dl-item:hover { background: rgba(255, 255, 255, 0.05); }
.dl-poster {
  width: 40px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
}
.dl-poster img { width: 100%; height: 100%; object-fit: cover; }
.dl-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dl-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dl-year {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
}
.dl-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
}
.dl-quality {
  background: rgba(167, 139, 250, 0.15);
  color: rgba(167, 139, 250, 0.9);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dl-eta { color: rgba(56, 189, 248, 0.7); }
.dl-progress-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1px;
}
.dl-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  border-radius: 2px;
  transition: width 0.5s ease;
}
.dl-percent {
  font-size: 0.62rem;
  font-weight: 700;
  color: #4ade80;
  text-align: right;
  margin-top: -14px;
  line-height: 1;
}
/* Queued / Warning states */
.dl-status-badge {
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.62rem;
}
.dl-status-badge.queued {
  background: rgba(250, 204, 21, 0.12);
  color: rgba(250, 204, 21, 0.85);
}
.dl-status-badge.warning {
  background: rgba(248, 113, 113, 0.12);
  color: rgba(248, 113, 113, 0.85);
}
.dl-warning { border-left: 2px solid rgba(248, 113, 113, 0.4); }
.dl-error {
  font-size: 0.62rem;
  color: rgba(248, 113, 113, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dl-completed { opacity: 0.7; }
.dl-completed:hover { opacity: 1; }
.dl-status-badge.completed {
  background: rgba(74, 222, 128, 0.12);
  color: rgba(74, 222, 128, 0.85);
}
.dl-time { color: rgba(255, 255, 255, 0.25); }
/* Download sub-tabs */
.dl-subtabs {
  display: flex;
  gap: 2px;
  padding: 0 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dl-subtab {
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.dl-subtab:hover { color: rgba(255, 255, 255, 0.6); }
.dl-subtab.active {
  color: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--accent, #a78bfa);
}
.dl-subtab-count {
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
}
.dl-subtab.active .dl-subtab-count {
  background: rgba(var(--accent-rgb, 167, 139, 250), 0.15);
}
/* Have badge */
.discover-badge-have {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(74, 222, 128, 0.25);
  color: #4ade80;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
}
/* === Detail Popup === */
.detail-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.detail-popup {
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 100%;
  max-width: 950px;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.detail-fanart {
  height: 200px;
  overflow: hidden;
  position: relative;
}
.detail-fanart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.detail-fanart::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(transparent, #141418);
}
.detail-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.detail-top {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.detail-poster-img {
  width: 130px;
  height: 195px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: -60px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.detail-info {
  flex: 1;
  min-width: 0;
}
.detail-info h2 {
  margin: 0 0 0.3rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}
.detail-year {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1rem;
}
.detail-meta-row {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.4rem;
}
.detail-cert {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
}
.detail-genres {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 0.75rem;
}
.detail-ratings {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.detail-rating-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.detail-rating-source {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.detail-rating-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
.detail-rating-votes {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.25);
}
.detail-overview {
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1rem 0;
}
.detail-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.detail-add-btn {
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #a78bfa;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.detail-add-btn:hover:not(:disabled) { background: rgba(167, 139, 250, 0.3); }
.detail-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.detail-search-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.detail-search-btn:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.1); }
.detail-status {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}
.detail-status.green { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.detail-status.yellow { background: rgba(250, 204, 21, 0.12); color: #facc15; }
.detail-plex-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(229, 160, 13, 0.15);
  color: #e5a00d;
  border: 1px solid rgba(229, 160, 13, 0.25);
  transition: background 0.15s;
  cursor: pointer;
}
.detail-plex-btn:hover { background: rgba(229, 160, 13, 0.25); }
.detail-message {
  margin-top: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.72rem;
}
.detail-message.success { background: rgba(74, 222, 128, 0.1); color: #4ade80; }
.detail-message.error { background: rgba(248, 113, 113, 0.1); color: #f87171; }
.detail-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}
.detail-close:hover { background: rgba(255, 255, 255, 0.15); }
/* Inline trailer - right side of detail */
.detail-trailer-inline {
  width: 100%;
  padding: 0 1.25rem 1rem;
}
.detail-trailer-frame {
  position: relative;
  width: 100%;
  padding-bottom: 40%;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.detail-trailer-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* Releases in detail popup */
.detail-releases {
  padding: 0 1.25rem 1.25rem;
}
.detail-releases h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.5rem 0;
}
.detail-releases-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.detail-release-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  align-items: center;
}
.detail-release-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}
.release-q {
  min-width: 80px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.release-seeds {
  min-width: 55px;
  font-weight: 600;
}
.release-sz {
  min-width: 45px;
  color: rgba(255, 255, 255, 0.4);
}
.release-idx {
  min-width: 70px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.65rem;
}
.release-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.65rem;
}
/* ── Trailer View ── */
.trailer-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.trailer-player {
  flex: 1;
  min-height: 0;
  background: #000;
}
.trailer-player iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* Bottom bar — always visible below the video */
.trailer-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem 0.75rem;
  background: #0d0d12;
}
.trailer-info {
  flex: 1;
  min-width: 0;
}
.trailer-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.trailer-title:hover { text-decoration: underline; }
.trailer-year {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
}
.trailer-rating {
  font-size: 0.7rem;
  font-weight: 700;
}
.trailer-genres {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 1px;
}
.trailer-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.trailer-filters {
  display: flex;
  gap: 2px;
}
.trailer-filter-btn {
  padding: 0.25rem 0.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.62rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.trailer-filter-btn:hover { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12); }
.trailer-filter-btn.active {
  background: rgba(var(--accent-rgb, 167, 139, 250), 0.2);
  color: rgba(255, 255, 255, 0.9);
}
.trailer-nav-btns {
  display: flex;
  gap: 3px;
}
.trailer-nav-btns button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.trailer-nav-btns button:hover { background: rgba(255, 255, 255, 0.18); }
.trailer-counter {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  min-width: 45px;
  text-align: center;
}
.trailer-watchlist-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.trailer-watchlist-btn:hover {
  background: rgba(250, 204, 21, 0.12);
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.3);
}
.trailer-watchlist-btn.active {
  background: rgba(250, 204, 21, 0.15);
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.35);
}
/**
 * Weather App — Scene on top, data below
 */
.weather-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.92);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  overflow: hidden;
  position: relative;
}
/* ── Toolbar ── */
.weather-app .weather-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.weather-app .weather-toolbar-location {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.weather-app .weather-toolbar-location:hover { color: white; }
.weather-app .weather-toolbar-country {
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.weather-app .weather-toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.weather-app .weather-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}
.weather-app .weather-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
.weather-app .weather-unit-toggle {
  font-size: 0.7rem;
  font-weight: 600;
  width: auto;
  padding: 0 0.5rem;
}
/* ── Search Overlay ── */
.weather-app .weather-search-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: rgba(15, 15, 20, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.weather-app .weather-search-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: white;
  outline: none;
  box-sizing: border-box;
}
.weather-app .weather-search-input:focus { border-color: rgba(56, 189, 248, 0.4); }
.weather-app .weather-search-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.weather-app .weather-search-results {
  margin-top: 0.4rem;
  background: rgba(25, 25, 32, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
}
.weather-app .weather-search-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: white;
  cursor: pointer;
  text-align: left;
}
.weather-app .weather-search-result:last-child { border-bottom: none; }
.weather-app .weather-search-result:hover { background: rgba(56, 189, 248, 0.08); }
.weather-app .weather-search-city { font-size: 0.8rem; font-weight: 500; }
.weather-app .weather-search-country { font-size: 0.65rem; color: rgba(255, 255, 255, 0.35); }
/* ── Error ── */
.weather-app .weather-error p {
  color: rgba(248, 113, 113, 0.9);
  background: rgba(248, 113, 113, 0.08);
  padding: 0.6rem 1rem;
  margin: 1rem;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.15);
  font-size: 0.8rem;
  text-align: center;
}
/* ── Loading ── */
.weather-app .weather-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.5rem;
}
.weather-app .weather-loading-icon { font-size: 2.5rem; }
.weather-app .weather-loading p { color: rgba(255, 255, 255, 0.35); font-size: 0.8rem; }
/* ── Body ── */
.weather-app .weather-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.weather-app .weather-body::-webkit-scrollbar { width: 4px; }
.weather-app .weather-body::-webkit-scrollbar-track { background: transparent; }
.weather-app .weather-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }
/* ── Hero: scene image on top + temp overlay ── */
.weather-app .weather-hero {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 120px;
}
/* When scene is loaded, hero is taller to show the image */
.weather-app .weather-hero.has-scene {
  min-height: 240px;
}
.weather-app .weather-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.weather-app .weather-hero-image.loaded {
  opacity: 1;
}
/* Gradient at bottom of scene for text readability */
.weather-app .weather-hero.has-scene::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Shimmer placeholder while generating */
.weather-app .weather-hero.generating {
  min-height: 200px;
  background: linear-gradient(135deg, rgba(120, 120, 140, 0.15) 0%, rgba(160, 160, 180, 0.08) 50%, rgba(120, 120, 140, 0.15) 100%);
  background-size: 200% 200%;
  animation: weather-shimmer 2s ease infinite;
}
@keyframes weather-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.weather-app .weather-scene-generating {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.weather-app .weather-scene-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: weather-spin 0.8s linear infinite;
}
.weather-app .weather-scene-generating-text {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
/* Weather info overlay at bottom of hero */
.weather-app .weather-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1rem 1rem 0.75rem;
  width: 100%;
}
.weather-app .weather-hero-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.1rem;
}
.weather-app .weather-hero-temp {
  font-size: 4rem;
  font-weight: 100;
  line-height: 1;
  color: white;
  letter-spacing: -2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.weather-app .weather-hero.has-scene .weather-hero-temp {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.weather-app .weather-hero-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.2rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.weather-app .weather-hero.has-scene .weather-hero-desc {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.weather-app .weather-hero-range {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.1rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.weather-app .weather-hero.has-scene .weather-hero-range {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
/* ── Data section below hero ── */
.weather-app .weather-data {
  flex: 1;
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* ── Details Row ── */
.weather-app .weather-details-row {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  flex-wrap: wrap;
}
.weather-app .weather-detail-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  min-width: 58px;
}
.weather-app .weather-detail-label {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.weather-app .weather-detail-val {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
/* ── Forecast ── */
.weather-app .weather-forecast {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}
.weather-app .weather-forecast-row {
  display: grid;
  grid-template-columns: 5.5rem 1.8rem 2.5rem 1fr;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.01);
  gap: 0.4rem;
}
.weather-app .weather-forecast-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.weather-app .weather-forecast-row.today {
  background: rgba(56, 189, 248, 0.04);
}
.weather-app .forecast-day {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.weather-app .forecast-icon { font-size: 1rem; text-align: center; }
.weather-app .forecast-rain {
  font-size: 0.65rem;
  color: rgba(56, 189, 248, 0.6);
  text-align: right;
}
.weather-app .forecast-temps {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.weather-app .forecast-lo {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  width: 2rem;
  text-align: right;
}
.weather-app .forecast-hi {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  width: 2rem;
}
.weather-app .forecast-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  min-width: 40px;
}
.weather-app .forecast-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.5), rgba(248, 113, 113, 0.5));
}
/* ── Footer ── */
.weather-app .weather-footer {
  text-align: center;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.12);
  padding: 0.25rem 0 0.5rem;
  flex-shrink: 0;
}
/* ── Refresh indicator ── */
.weather-app .weather-refreshing {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(56, 189, 248, 0.2);
  border-top-color: rgba(56, 189, 248, 0.8);
  border-radius: 50%;
  animation: weather-spin 0.7s linear infinite;
  z-index: 3;
}
/* ── Fullscreen scene overlay ── */
.weather-app .weather-scene-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: weather-fade-in 0.3s ease;
}
.weather-app .weather-scene-fullscreen img {
  max-width: 90%;
  max-height: 85%;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}
.weather-app .weather-scene-fullscreen-label {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  white-space: nowrap;
}
@keyframes weather-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes weather-spin {
  to { transform: rotate(360deg); }
}
/* ═══════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════ */
body.light .weather-app {
  color: rgba(0, 0, 0, 0.85);
}
body.light .weather-app .weather-toolbar {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .weather-app .weather-toolbar-location {
  color: rgba(0, 0, 0, 0.8);
}
body.light .weather-app .weather-toolbar-location:hover {
  color: rgba(0, 0, 0, 1);
}
body.light .weather-app .weather-toolbar-country {
  color: rgba(0, 0, 0, 0.4);
}
body.light .weather-app .weather-toolbar-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
body.light .weather-app .weather-toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
/* Hero text stays white (over scene image or dark bg) */
body.light .weather-app .weather-hero-temp {
  color: white;
}
/* Without scene, use dark text */
body.light .weather-app .weather-hero:not(.has-scene) .weather-hero-temp {
  color: rgba(0, 0, 0, 0.85);
  text-shadow: none;
}
body.light .weather-app .weather-hero:not(.has-scene) .weather-hero-desc {
  color: rgba(0, 0, 0, 0.5);
  text-shadow: none;
}
body.light .weather-app .weather-hero:not(.has-scene) .weather-hero-range {
  color: rgba(0, 0, 0, 0.35);
  text-shadow: none;
}
/* Data section in light theme */
body.light .weather-app .weather-detail-chip {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .weather-app .weather-detail-label {
  color: rgba(0, 0, 0, 0.4);
}
body.light .weather-app .weather-detail-val {
  color: rgba(0, 0, 0, 0.8);
}
body.light .weather-app .weather-forecast {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .weather-app .weather-forecast-row {
  background: transparent;
}
body.light .weather-app .weather-forecast-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .weather-app .weather-forecast-row.today {
  background: rgba(56, 189, 248, 0.06);
}
body.light .weather-app .forecast-day {
  color: rgba(0, 0, 0, 0.8);
}
body.light .weather-app .forecast-lo {
  color: rgba(0, 0, 0, 0.35);
}
body.light .weather-app .forecast-hi {
  color: rgba(0, 0, 0, 0.8);
}
body.light .weather-app .forecast-bar {
  background: rgba(0, 0, 0, 0.06);
}
body.light .weather-app .forecast-rain {
  color: rgba(56, 189, 248, 0.7);
}
body.light .weather-app .weather-footer {
  color: rgba(0, 0, 0, 0.12);
}
body.light .weather-app .weather-loading p {
  color: rgba(0, 0, 0, 0.4);
}
body.light .weather-app .weather-scene-spinner {
  border-color: rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.3);
}
body.light .weather-app .weather-scene-generating-text {
  color: rgba(0, 0, 0, 0.3);
}
body.light .weather-app .weather-hero.generating {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 100%);
  background-size: 200% 200%;
  animation: weather-shimmer 2s ease infinite;
}
/* Search overlay light */
body.light .weather-app .weather-search-overlay {
  background: rgba(240, 240, 245, 0.96);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .weather-app .weather-search-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}
body.light .weather-app .weather-search-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
body.light .weather-app .weather-search-results {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .weather-app .weather-search-result {
  color: rgba(0, 0, 0, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.light .weather-app .weather-search-country {
  color: rgba(0, 0, 0, 0.4);
}
.code-activity-app {
  height: 100%;
  color: var(--os-text-primary);
  background: transparent;
}
.code-activity-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 1rem;
  border-bottom: 1px solid var(--os-divider, rgba(255, 255, 255, 0.1));
  flex-shrink: 0;
}
.code-activity-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--os-text-muted, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  transition: all 0.15s;
}
.code-activity-tab:hover {
  background: var(--os-hover-bg, rgba(255, 255, 255, 0.06));
  color: var(--os-text-secondary, rgba(255, 255, 255, 0.7));
}
.code-activity-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent, #a78bfa);
  font-weight: 600;
}
.code-activity-music {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Music for Programming — native player */
.mfp-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0d0d14;
  color: rgba(255, 255, 255, 0.85);
}
.mfp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  background: #0d0d14;
}
.mfp-player {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.mfp-now-playing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mfp-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.mfp-eq-bars span {
  width: 3px;
  background: #4ade80;
  border-radius: 1px;
  animation: mfp-eq 1s ease-in-out infinite;
}
.mfp-eq-bars span:nth-child(1) { height: 5px; animation-delay: 0s; }
.mfp-eq-bars span:nth-child(2) { height: 10px; animation-delay: 0.2s; }
.mfp-eq-bars span:nth-child(3) { height: 6px; animation-delay: 0.4s; }
@keyframes mfp-eq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.mfp-now-info { flex: 1; min-width: 0; }
.mfp-now-title { font-size: 0.8rem; font-weight: 600; color: #4ade80; }
.mfp-now-duration { font-size: 0.65rem; color: rgba(255, 255, 255, 0.35); }
.mfp-audio {
  width: 100%;
  height: 32px;
  border-radius: 6px;
  outline: none;
}
.mfp-audio::-webkit-media-controls-panel { background: rgba(255, 255, 255, 0.06); }
.mfp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mfp-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}
.mfp-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  margin-left: auto;
}
.mfp-shuffle {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.mfp-shuffle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.mfp-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.mfp-list::-webkit-scrollbar { width: 4px; }
.mfp-list::-webkit-scrollbar-track { background: transparent; }
.mfp-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }
.mfp-episode {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.mfp-episode:hover { background: rgba(255, 255, 255, 0.05); }
.mfp-episode.active { background: rgba(74, 222, 128, 0.1); color: #4ade80; }
.mfp-ep-num {
  width: 24px;
  text-align: right;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}
.mfp-episode.active .mfp-ep-num { color: #4ade80; }
.mfp-ep-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfp-ep-dur { font-size: 0.65rem; color: rgba(255, 255, 255, 0.25); flex-shrink: 0; }
.code-activity-app-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* ---- Chart Section ---- */
.ca-chart {
  background: var(--os-glass-bg, rgba(255, 255, 255, 0.07));
  border: 1px solid var(--os-glass-border, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
}
.ca-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-bottom: 1px solid var(--os-divider, rgba(255, 255, 255, 0.1));
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  border-radius: 12px 12px 0 0;
}
.ca-periods {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
.ca-period-btn {
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--os-glass-border, rgba(255, 255, 255, 0.15));
  color: var(--os-text-muted);
  transition: all 0.15s ease;
}
.ca-period-btn:hover {
  background: var(--os-hover-bg, rgba(255, 255, 255, 0.08));
  color: var(--os-text-secondary);
}
.ca-period-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}
.ca-stats {
  display: flex;
  gap: 1.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--os-divider, rgba(255, 255, 255, 0.08));
}
.ca-stat {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.ca-stat-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--os-text-primary);
}
.ca-stat-value.green { color: #4ade80; }
.ca-stat-value.red { color: #f87171; }
.ca-stat-label {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.ca-sub-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.ca-body {
  padding: 0.75rem 0.5rem 0.25rem;
}
.ca-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}
/* ---- Today's Commits ---- */
.ca-today {
  background: var(--os-glass-bg, rgba(255, 255, 255, 0.07));
  border: 1px solid var(--os-glass-border, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
}
.ca-today-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-bottom: 1px solid var(--os-divider, rgba(255, 255, 255, 0.1));
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  border-radius: 12px 12px 0 0;
}
.ca-today-count {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--os-text-muted);
}
.ca-today-groups {
  padding: 0.5rem;
}
/* ---- Area Groups ---- */
.ca-group {
  margin-bottom: 0.35rem;
}
.ca-group-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.ca-group-header.clickable {
  cursor: pointer;
}
.ca-group-header.clickable:hover {
  background: var(--os-hover-bg, rgba(255, 255, 255, 0.06));
}
.ca-group-icon { opacity: 0.7; }
.ca-group-name { flex: 1; }
.ca-group-count {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  background: var(--os-icon-bg, rgba(255, 255, 255, 0.08));
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}
.ca-group-chevron { opacity: 0.5; }
.ca-group.blue .ca-group-header { color: rgba(56, 189, 248, 0.95); }
.ca-group.green .ca-group-header { color: rgba(74, 222, 128, 0.95); }
.ca-group.purple .ca-group-header { color: rgba(192, 132, 252, 0.95); }
.ca-group.orange .ca-group-header { color: rgba(251, 146, 60, 0.95); }
.ca-group.teal .ca-group-header { color: rgba(45, 212, 191, 0.95); }
.ca-group.pink .ca-group-header { color: rgba(244, 114, 182, 0.95); }
/* ---- Commit Items ---- */
.ca-group-items {
  padding-left: 1.75rem;
}
.ca-commit-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.15rem 0;
  font-size: 0.73rem;
  line-height: 1.4;
}
.ca-commit-item.muted {
  opacity: 0.45;
}
.ca-commit-time {
  flex-shrink: 0;
  font-size: 0.6rem;
  color: var(--os-text-hint);
  min-width: 3.5em;
}
.ca-commit-msg {
  color: var(--os-text-primary);
}
.ca-commit-lines {
  flex-shrink: 0;
  display: flex;
  gap: 0.3rem;
  font-size: 0.6rem;
  margin-left: auto;
}
.lines-added { color: rgba(74, 222, 128, 0.85); }
.lines-removed { color: rgba(248, 113, 113, 0.75); }
/* ---- Day Detail (click to expand) ---- */
.ca-day-detail {
  border: 1px solid var(--os-glass-border, rgba(255,255,255,0.12));
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0.5rem 0.5rem;
}
.ca-day-detail-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.08);
  border-bottom: 1px solid var(--os-divider);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}
.ca-day-detail-meta {
  margin-left: 0.25rem;
  font-weight: 400;
  color: var(--os-text-muted);
  font-size: 0.7rem;
}
.ca-day-detail-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--os-text-muted);
  padding: 0;
  display: flex;
  align-items: center;
  opacity: 0.6;
}
.ca-day-detail-close:hover { opacity: 1; }
.ca-day-detail-body {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ca-day-area-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.ca-day-area-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ca-day-commit {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.72rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
}
.ca-day-hash {
  font-family: monospace;
  font-size: 0.65rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.ca-day-msg {
  color: var(--os-text-primary);
  line-height: 1.4;
}
.brainmap-app {
  width: 100%;
  height: 100%;
  display: flex;
  background: #000;
  overflow: hidden;
}
.brainmap-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
/* Live Preview Lab */
.lp-lab {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.86);
}
.lp-lab:fullscreen {
  width: 100vw;
  height: 100vh;
}
.lp-lab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 10px;
  flex-shrink: 0;
}
.lp-lab-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lp-lab-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-lab-save-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
.lp-lab-save-status-saving {
  color: rgba(251, 191, 36, 0.9);
}
.lp-lab-save-status-saved {
  color: rgba(52, 211, 153, 0.95);
}
.lp-lab-save-status-error {
  color: rgba(252, 165, 165, 0.95);
}
.lp-lab-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-lab-modes {
  display: flex;
  gap: 4px;
}
.lp-lab-modes button {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lp-lab-modes button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.lp-lab-modes button.active {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
  color: rgba(167, 139, 250, 0.96);
}
.lp-lab-zen-toggle {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lp-lab-zen-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.lp-lab-zen-toggle.active {
  background: rgba(125, 211, 252, 0.18);
  border-color: rgba(125, 211, 252, 0.42);
  color: rgba(125, 211, 252, 0.95);
}
.lp-lab-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
}
.lp-lab-workspace-right-config .lp-lab-editor {
  min-width: 0;
}
.lp-lab-config-panel {
  width: 340px;
  min-width: 290px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  overflow-y: auto;
  padding: 12px;
}
.lp-lab-config-panel .lp-lab-config-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.lp-lab-config-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.lp-lab-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.lp-lab-config-header h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.lp-lab-config-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.lp-lab-config-preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}
.lp-lab-config-preset select {
  height: 26px;
  min-width: 148px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}
.lp-lab-config-preset select:focus {
  outline: none;
  border-color: rgba(125, 211, 252, 0.55);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.28);
}
.lp-lab-config-header button {
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
  cursor: pointer;
}
.lp-lab-config-header button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.lp-lab-config-grid {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}
.lp-lab-config-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.52);
}
.lp-lab-config-note-saved {
  color: rgba(52, 211, 153, 0.95);
}
.lp-lab-config-note-saving {
  color: rgba(251, 191, 36, 0.9);
}
.lp-lab-config-note-error,
.lp-lab-config-note-empty {
  color: rgba(252, 165, 165, 0.95);
}
.lp-lab-config-note-cleared {
  color: rgba(125, 211, 252, 0.92);
}
.lp-lab-config-note code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
}
.lp-lab-config-inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-lab-config-inline-actions button {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  cursor: pointer;
}
.lp-lab-config-inline-actions button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.lp-lab-config-inline-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lp-lab-config-field {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.66);
}
.lp-lab-config-field input,
.lp-lab-config-field select {
  height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}
.lp-lab-config-field input:focus,
.lp-lab-config-field select:focus {
  outline: none;
  border-color: rgba(125, 211, 252, 0.55);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.28);
}
.lp-lab-config-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.lp-lab-config-check input[type='checkbox'] {
  width: 14px;
  height: 14px;
  margin: 0;
}
.lp-lab-config-check span {
  line-height: 1.3;
}
.lp-lab-editor {
  flex: 1;
  min-height: 0;
  display: flex;
}
.lp-lab-canonical-editor {
  width: 100%;
  height: 100%;
}
.lp-lab-editor .cm-editor {
  width: 100%;
  height: 100%;
}
/* Keep lab scrollbars subtle and consistent (avoid heavy native gray bars). */
.lp-lab-config-panel,
.lp-lab-editor .cm-scroller {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.lp-lab-config-panel::-webkit-scrollbar,
.lp-lab-editor .cm-scroller::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.lp-lab-config-panel::-webkit-scrollbar-track,
.lp-lab-editor .cm-scroller::-webkit-scrollbar-track {
  background: transparent;
}
.lp-lab-config-panel::-webkit-scrollbar-thumb,
.lp-lab-editor .cm-scroller::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}
.lp-lab-config-panel::-webkit-scrollbar-thumb:hover,
.lp-lab-editor .cm-scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}
/* Writing experience modes */
.lp-lab.lp-lab-zen .lp-lab-config-panel {
  display: none;
}
.lp-lab.lp-lab-zen .lp-lab-toolbar {
  display: none;
}
.lp-lab.lp-lab-zen .lp-lab-editor .cm-content {
  max-width: 860px;
}
/* Light theme */
body.light .lp-lab {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.82);
}
body.light .lp-lab-config-panel,
body.light .lp-lab-editor .cm-scroller {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
body.light .lp-lab-config-panel::-webkit-scrollbar-thumb,
body.light .lp-lab-editor .cm-scroller::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
body.light .lp-lab-config-panel::-webkit-scrollbar-thumb:hover,
body.light .lp-lab-editor .cm-scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
}
body.light .lp-lab-toolbar {
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .lp-lab-title {
  color: rgba(0, 0, 0, 0.48);
}
body.light .lp-lab-save-status {
  color: rgba(0, 0, 0, 0.48);
}
body.light .lp-lab-save-status-saved {
  color: rgba(5, 150, 105, 0.95);
}
body.light .lp-lab-save-status-saving {
  color: rgba(180, 83, 9, 0.92);
}
body.light .lp-lab-save-status-error {
  color: rgba(220, 38, 38, 0.92);
}
body.light .lp-lab-modes button {
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.58);
}
body.light .lp-lab-modes button:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.76);
}
body.light .lp-lab-modes button.active {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.28);
  color: rgba(79, 70, 229, 0.96);
}
body.light .lp-lab-zen-toggle {
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.58);
}
body.light .lp-lab-zen-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.76);
}
body.light .lp-lab-zen-toggle.active {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.35);
  color: rgba(2, 132, 199, 0.95);
}
body.light .lp-lab-config-panel {
  border-left-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}
body.light .lp-lab-config-section {
  border-top-color: rgba(0, 0, 0, 0.1);
}
body.light .lp-lab-config-header button {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}
body.light .lp-lab-config-preset {
  color: rgba(0, 0, 0, 0.6);
}
body.light .lp-lab-config-preset select {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.86);
}
body.light .lp-lab-config-preset select:focus {
  border-color: rgba(14, 165, 233, 0.52);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.22);
}
body.light .lp-lab-config-header button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.8);
}
body.light .lp-lab-config-field {
  color: rgba(0, 0, 0, 0.65);
}
body.light .lp-lab-config-note {
  color: rgba(0, 0, 0, 0.48);
}
body.light .lp-lab-config-note-saved {
  color: rgba(5, 150, 105, 0.95);
}
body.light .lp-lab-config-note-saving {
  color: rgba(180, 83, 9, 0.95);
}
body.light .lp-lab-config-note-error,
body.light .lp-lab-config-note-empty {
  color: rgba(220, 38, 38, 0.92);
}
body.light .lp-lab-config-note-cleared {
  color: rgba(2, 132, 199, 0.92);
}
body.light .lp-lab-config-inline-actions button {
  border-color: rgba(0, 0, 0, 0.16);
  color: rgba(0, 0, 0, 0.62);
}
body.light .lp-lab-config-inline-actions button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.82);
}
body.light .lp-lab-config-field input,
body.light .lp-lab-config-field select {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.86);
}
body.light .lp-lab-config-field input:focus,
body.light .lp-lab-config-field select:focus {
  border-color: rgba(14, 165, 233, 0.52);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.22);
}
@media (max-width: 960px) {
  .lp-lab-workspace {
    flex-direction: column;
  }

  .lp-lab-config-panel {
    width: 100%;
    min-width: 0;
    max-height: 300px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  body.light .lp-lab-config-panel {
    border-top-color: rgba(0, 0, 0, 0.1);
  }
}
/* ── Caret test results ───────────────────────────────────────────────────── */
.lp-lab-caret-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  font-family: var(--font-mono, monospace);
}
.lp-lab-caret-summary {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.lp-lab-caret-summary.pass { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.lp-lab-caret-summary.fail { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.lp-lab-caret-suite-header {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a78bfa;
  padding: 6px 4px 2px;
  margin-top: 4px;
  border-top: 1px solid rgba(167, 139, 250, 0.15);
}
.lp-lab-caret-suite-header:first-child { margin-top: 0; border-top: none; }
body.light .lp-lab-caret-suite-header { color: #7c3aed; border-top-color: rgba(124, 58, 237, 0.15); }
.lp-lab-caret-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 4px;
  align-items: start;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1.4;
}
.lp-lab-caret-row.fail { background: rgba(239, 68, 68, 0.07); }
.lp-lab-caret-row.skip { opacity: 0.5; }
.lp-lab-caret-icon { font-size: 0.65rem; margin-top: 1px; }
.lp-lab-caret-row.pass .lp-lab-caret-icon { color: #4ade80; }
.lp-lab-caret-row.fail .lp-lab-caret-icon { color: #f87171; }
.lp-lab-caret-label { color: rgba(255,255,255,0.8); }
body.light .lp-lab-caret-label { color: rgba(0,0,0,0.75); }
.lp-lab-caret-detail {
  grid-column: 2;
  color: rgba(255,255,255,0.45);
  font-size: 0.68rem;
  margin-top: -1px;
}
body.light .lp-lab-caret-detail { color: rgba(0,0,0,0.45); }
.lab-factory {
  display: flex;
  height: 100%;
  font-family: system-ui;
  color: rgba(255, 255, 255, 0.9);
}
/* ─── Sidebar ─── */
.lab-sidebar {
  width: 180px;
  min-width: 180px;
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.lab-sidebar-title {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lab-module-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-align: left;
  border-left: 2px solid transparent;
}
.lab-module-btn:hover { background: rgba(255, 255, 255, 0.04); }
.lab-module-btn.active {
  background: rgba(56, 189, 248, 0.08);
  border-left-color: rgba(56, 189, 248, 0.5);
  color: rgba(255, 255, 255, 0.95);
}
.lab-module-name { font-size: 13px; font-weight: 500; }
.lab-module-cat { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 2px; }
/* ─── Preview ─── */
.lab-preview {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.15);
}
.lab-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}
/* ─── Resize Handle ─── */
.lab-resize-handle {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
}
.lab-resize-handle:hover,
.lab-resize-handle:active {
  background: rgba(56, 189, 248, 0.3);
}
/* ─── Right Panel (Controls) ─── */
.lab-controls {
  min-width: 180px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}
/* ─── Sub Panels (collapsible sections) ─── */
.lab-panel {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lab-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lab-panel-header:hover { color: rgba(255, 255, 255, 0.7); }
.lab-panel-header .lab-panel-arrow {
  font-size: 10px;
  transition: transform 0.15s;
}
.lab-panel.collapsed .lab-panel-arrow { transform: rotate(-90deg); }
.lab-panel-body {
  padding: 6px 12px 12px;
}
.lab-panel.collapsed .lab-panel-body { display: none; }
/* ─── Parameters ─── */
.lab-params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 16px;
}
.lab-param {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lab-param.slider {
  flex-direction: column;
  align-items: stretch;
}
.lab-param label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.lab-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lab-slider-row input[type="range"] {
  flex: 1;
  height: 4px;
  accent-color: rgba(56, 189, 248, 0.7);
}
.lab-param-value {
  font-size: 11px;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.8);
  min-width: 28px;
  text-align: right;
}
.lab-param input[type="checkbox"] {
  accent-color: rgba(56, 189, 248, 0.7);
  width: 16px;
  height: 16px;
}
.lab-param select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  padding: 3px 6px;
  font-size: 12px;
}
/* ─── Scenarios ─── */
.lab-scenario-btn {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-align: left;
  margin-bottom: 6px;
}
.lab-scenario-btn:hover { background: rgba(255, 255, 255, 0.06); }
.lab-scenario-btn.active { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.06); }
.lab-scenario-name { font-size: 12px; font-weight: 500; }
.lab-scenario-desc { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 2px; }
/* ─── Tests ─── */
.lab-run-tests {
  padding: 5px 12px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 5px;
  color: rgba(56, 189, 248, 0.9);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
}
.lab-run-tests:hover { background: rgba(56, 189, 248, 0.25); }
.lab-test-result {
  padding: 4px 0;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lab-test-result.pass { color: rgba(74, 222, 128, 0.9); }
.lab-test-result.fail { color: rgba(248, 113, 113, 0.9); }
.lab-test-result.pending { color: rgba(255, 255, 255, 0.35); }
.lab-test-error { font-size: 10px; color: rgba(248, 113, 113, 0.6); padding-left: 20px; }
.lab-empty-tab { color: rgba(255, 255, 255, 0.25); font-size: 12px; padding: 10px 0; }
/* ─── Specs ─── */
.lab-specs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lab-spec-section {
  margin-bottom: 8px;
}
.lab-spec-section-title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 0 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 4px;
}
.lab-spec-item {
  display: flex;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  padding: 1px 0 1px 6px;
}
.lab-spec-bullet {
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
/* ─── Docs ─── */
.lab-docs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lab-doc-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}
.lab-doc-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.lab-doc-icon {
  flex-shrink: 0;
  font-size: 10px;
  opacity: 0.5;
}
.lab-doc-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lab-docs-section {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 6px 2px;
  margin-top: 4px;
}
.lab-docs-section:first-child {
  margin-top: 0;
  padding-top: 0;
}
/* Portal target for built-in controls */
.lab-portal-target { width: 100%; }
.lab-portal-target .lp-lab-config-panel {
  position: static;
  width: 100%;
  height: auto;
  overflow: visible;
  border: none;
  background: transparent;
}
/* =========================================================================
 * Cortex App — Deep expertise builder
 * Dark theme default, body.light overrides at bottom
 * Uses system accent colors: var(--accent), var(--accent-rgb), var(--accent-dark)
 * ========================================================================= */
/* ── Root ─────────────────────────────────────────────────────────────── */
.cortex-app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  background: transparent;
  overflow: hidden;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}
.cortex-centered {
  align-items: center;
  justify-content: center;
}
/* ── Canvas-first layout ─────────────────────────────────────────── */
.cortex-canvas-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.cortex-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  z-index: 5;
}
.cortex-topbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.cortex-topbar-title .lucide {
  color: rgba(var(--accent-rgb), 0.6);
}
.cortex-topbar-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  margin-left: 4px;
}
.cortex-detail-domain-tag {
  font-size: 10px;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 2px 8px;
  border-radius: 8px;
}
.cortex-toolbar {
  display: flex;
  gap: 4px;
}
.cortex-toolbar-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  padding: 4px 7px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.12s;
}
.cortex-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.cortex-toolbar-btn.active {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: rgba(251, 146, 60, 0.8);
}
/* Slide-out detail panel */
.cortex-detail-panel {
  width: 0;
  overflow: hidden;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid transparent;
  display: flex;
  flex-direction: column;
}
.cortex-detail-panel.open {
  width: 380px;
  border-left-color: rgba(255, 255, 255, 0.06);
}
.cortex-detail-panel-header {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px;
  flex-shrink: 0;
}
.cortex-detail-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.cortex-detail-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.cortex-detail-panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 380px;
}
/* Home view */
.cortex-home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
  overflow-y: auto;
}
.cortex-home-empty {
  text-align: center;
  max-width: 500px;
}
.cortex-home-empty h2 { font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.85); margin: 16px 0 8px; }
.cortex-home-empty p { color: rgba(255, 255, 255, 0.4); font-size: 13px; margin-bottom: 24px; }
.cortex-home-empty .lucide { color: rgba(var(--accent-rgb), 0.5); }
.cortex-home-create-inline { display: flex; gap: 8px; }
.cortex-home-input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.cortex-home-input:focus { border-color: rgba(var(--accent-rgb), 0.4); }
.cortex-home-input::placeholder { color: rgba(255, 255, 255, 0.25); }
.cortex-home-create-btn {
  padding: 10px 20px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.cortex-home-create-btn:hover { background: rgba(var(--accent-rgb), 0.3); }
.cortex-home-create-btn:disabled { opacity: 0.4; cursor: default; }
.cortex-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 800px;
}
.cortex-interest-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.15s;
  min-height: 120px;
}
.cortex-interest-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.2);
  transform: translateY(-2px);
}
.cortex-interest-header { display: flex; justify-content: space-between; align-items: flex-start; }
.cortex-interest-title { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.9); margin: 0; }
.cortex-interest-delete {
  background: none; border: none; color: rgba(255, 255, 255, 0.15);
  cursor: pointer; padding: 2px; border-radius: 3px;
  opacity: 0; transition: opacity 0.15s;
}
.cortex-interest-card:hover .cortex-interest-delete { opacity: 1; }
.cortex-interest-delete:hover { color: rgba(239, 68, 68, 0.7); }
.cortex-interest-stats { display: flex; gap: 12px; font-size: 11px; color: rgba(255, 255, 255, 0.35); }
.cortex-interest-enter {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: rgba(var(--accent-rgb), 0.6); margin-top: auto;
}
.cortex-interest-card:hover .cortex-interest-enter { color: rgba(var(--accent-rgb), 0.9); }
.cortex-interest-card.cortex-interest-add {
  align-items: center; justify-content: center; text-align: center;
  gap: 8px; color: rgba(255, 255, 255, 0.25); border-style: dashed;
}
.cortex-interest-card.cortex-interest-add:hover {
  color: rgba(var(--accent-rgb), 0.7); border-color: rgba(var(--accent-rgb), 0.3);
}
.cortex-home-create-bar { display: flex; gap: 8px; margin-top: 16px; width: 100%; max-width: 800px; }
/* Light overrides for new layout */
body.light .cortex-topbar { background: rgba(0, 0, 0, 0.03); border-bottom-color: rgba(0, 0, 0, 0.08); }
body.light .cortex-toolbar-btn { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.35); }
body.light .cortex-toolbar-btn:hover { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.65); }
body.light .cortex-detail-panel.open { border-left-color: rgba(0, 0, 0, 0.08); }
body.light .cortex-detail-close { color: rgba(0, 0, 0, 0.3); }
body.light .cortex-detail-close:hover { background: rgba(0, 0, 0, 0.06); }
body.light .cortex-home-empty h2 { color: rgba(0, 0, 0, 0.85); }
body.light .cortex-home-empty p { color: rgba(0, 0, 0, 0.4); }
body.light .cortex-home-input { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.85); }
body.light .cortex-home-input::placeholder { color: rgba(0, 0, 0, 0.25); }
body.light .cortex-interest-card { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); }
body.light .cortex-interest-card:hover { background: rgba(0, 0, 0, 0.04); }
body.light .cortex-interest-title { color: rgba(0, 0, 0, 0.85); }
body.light .cortex-interest-stats { color: rgba(0, 0, 0, 0.35); }
body.light .cortex-interest-card.cortex-interest-add { color: rgba(0, 0, 0, 0.2); }
.cortex-loading {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
/* ── Sidebar ──────────────────────────────────────────────────────────── */
.cortex-sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.cortex-sidebar.collapsed {
  width: 40px;
  min-width: 40px;
}
.cortex-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.cortex-sidebar-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
}
.cortex-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.12s ease;
}
.cortex-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}
/* Domain selector */
.cortex-domain-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.cortex-domain-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  outline: none;
}
.cortex-domain-select:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.cortex-domain-select option {
  background: #1a1a2e;
  color: rgba(255, 255, 255, 0.9);
}
/* Navigation sections */
.cortex-nav-sections {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
}
.cortex-nav-section {
  margin-bottom: 2px;
}
.cortex-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color 0.12s ease;
}
.cortex-section-header:hover {
  color: rgba(255, 255, 255, 0.85);
}
.cortex-section-label {
  flex: 1;
  text-align: left;
}
.cortex-section-count {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  min-width: 16px;
  text-align: center;
}
.cortex-section-count.badge {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  border-radius: 8px;
  padding: 1px 6px;
}
.cortex-section-items {
  padding: 0 4px;
}
/* Nav item */
.cortex-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px 5px 28px;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.1s ease;
  text-align: left;
}
.cortex-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
}
.cortex-nav-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.cortex-nav-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cortex-nav-item-icon {
  opacity: 0.5;
  flex-shrink: 0;
}
/* Coverage dots */
.cortex-coverage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.cortex-coverage-dot.thin {
  background: rgba(255, 255, 255, 0.2);
}
.cortex-coverage-dot.developing {
  background: rgba(var(--accent-rgb), 0.5);
}
.cortex-coverage-dot.solid {
  background: rgba(var(--accent-rgb), 0.8);
}
.cortex-coverage-dot.deep {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}
.cortex-coverage-dot.large {
  width: 10px;
  height: 10px;
}
/* Add button in nav */
.cortex-nav-add {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px 4px 28px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.12s ease;
}
.cortex-nav-add:hover {
  color: rgba(var(--accent-rgb), 0.8);
}
/* Coverage bar */
.cortex-coverage-bar {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.cortex-coverage-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cortex-coverage-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.cortex-coverage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.6));
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}
/* ── Add form ─────────────────────────────────────────────────────────── */
.cortex-add-form {
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.cortex-add-form.inline {
  padding: 6px 0;
  border-top: none;
  display: flex;
  gap: 6px;
  align-items: center;
}
.cortex-add-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  outline: none;
  transition: border-color 0.15s ease;
}
.cortex-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.cortex-add-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.cortex-add-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.cortex-add-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  outline: none;
}
.cortex-add-select option {
  background: #1a1a2e;
  color: rgba(255, 255, 255, 0.9);
}
/* Buttons */
.cortex-btn-sm {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.12s ease;
}
.cortex-btn-sm:hover {
  background: rgba(var(--accent-rgb), 0.25);
}
.cortex-btn-sm.muted {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}
.cortex-btn-sm.muted:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.cortex-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.12s ease;
}
.cortex-btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}
.cortex-btn-icon.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.cortex-btn-icon.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.cortex-btn-icon.small {
  width: 22px;
  height: 22px;
}
.cortex-btn-icon.tiny {
  width: 18px;
  height: 18px;
  border: none;
  background: none;
}
.cortex-btn-icon.tiny:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* ── Map panel ────────────────────────────────────────────────────────── */
.cortex-map-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.cortex-map-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
}
/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.cortex-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.cortex-breadcrumb-item {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.cortex-breadcrumb-item:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
}
.cortex-breadcrumb-item.active {
  color: rgba(var(--accent-rgb), 0.9);
}
.cortex-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
  margin: 0 1px;
}
.cortex-breadcrumb-segment {
  display: flex;
  align-items: center;
}
/* ── Parent link ─────────────────────────────────────────────────────── */
.cortex-parent-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.cortex-parent-label {
  color: rgba(255, 255, 255, 0.35);
}
/* ── Children list ───────────────────────────────────────────────────── */
.cortex-children-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.cortex-child-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
}
.cortex-child-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.cortex-child-count {
  font-size: 9px;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
}
/* ── Sidebar hierarchy ───────────────────────────────────────────────── */
.cortex-nav-item-row {
  display: flex;
  align-items: center;
}
.cortex-nav-item-row .cortex-nav-item {
  flex: 1;
  min-width: 0;
}
.cortex-drill-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.cortex-drill-btn:hover {
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(255, 255, 255, 0.08);
}
.cortex-nav-back {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px !important;
  margin-bottom: 2px;
}
.cortex-nav-back:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}
.cortex-descendant-badge {
  font-size: 9px;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
/* ── Map toolbar ─────────────────────────────────────────────────── */
.cortex-map-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 4px 8px;
  gap: 4px;
  flex-shrink: 0;
}
.cortex-map-toggle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 3px 6px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.cortex-map-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}
.cortex-map-toggle.active {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: rgba(251, 146, 60, 0.8);
}
.cortex-map-canvas-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.cortex-map-canvas-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* ── Minimap ─────────────────────────────────────────────────────── */
.cortex-minimap {
  position: absolute !important;
  bottom: 8px;
  left: 8px;
  width: 140px !important;
  height: 100px !important;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 5;
}
.cortex-map-canvas-container:hover .cortex-minimap {
  opacity: 1;
}
/* ── Working pane ─────────────────────────────────────────────────────── */
.cortex-working-pane {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cortex-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.3);
}
.cortex-empty-state h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}
.cortex-empty-state p {
  font-size: 12px;
  margin: 0;
}
/* ── Detail view (shared by concept, source, synthesis, gap) ──────── */
.cortex-detail-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}
.cortex-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.cortex-detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cortex-detail-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cortex-detail-icon {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}
.cortex-detail-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.cortex-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-width: 0;
}
.cortex-detail-section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  width: 100%;
  min-width: 0;
}
.cortex-detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.cortex-detail-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cortex-detail-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}
.cortex-detail-section-header .cortex-detail-section-title {
  margin-bottom: 0;
}
.cortex-detail-placeholder {
  padding: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}
.cortex-detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  margin-bottom: 12px;
}
.cortex-meta-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Coverage badge */
.cortex-coverage-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.cortex-coverage-badge.thin {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}
.cortex-coverage-badge.developing {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.8);
}
.cortex-coverage-badge.solid {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
.cortex-coverage-badge.deep {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
/* Source type badge */
.cortex-source-type-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
/* Status badge */
.cortex-status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.cortex-status-badge.draft {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}
.cortex-status-badge.developing {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.cortex-status-badge.complete {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}
/* Status selector */
.cortex-status-selector {
  display: flex;
  gap: 4px;
}
.cortex-status-option {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.12s ease;
}
.cortex-status-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}
.cortex-status-option.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
/* Synthesis pipeline */
.cortex-status-pipeline {
  display: flex;
  align-items: center;
  gap: 2px;
}
.cortex-pipeline-step {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.12s ease;
}
.cortex-pipeline-step:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}
.cortex-pipeline-step.past {
  color: rgba(74, 222, 128, 0.5);
  border-color: rgba(74, 222, 128, 0.15);
}
.cortex-pipeline-step.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.cortex-pipeline-arrow {
  color: rgba(255, 255, 255, 0.15);
  margin-left: 4px;
  font-size: 10px;
}
.cortex-status-badge.raw { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.4); }
.cortex-status-badge.ready { background: rgba(74, 222, 128, 0.12); color: rgba(74, 222, 128, 0.8); }
.cortex-status-badge.published { background: rgba(59, 130, 246, 0.12); color: rgba(59, 130, 246, 0.8); }
/* LivePreviewEditor styling within Cortex */
.cortex-live-editor {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  min-height: 150px;
  width: 100%;
  max-width: none;
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
}
.cortex-synthesis-section .cortex-live-editor {
  min-height: 200px;
}
/* Override shared LivePreviewEditor defaults for compact Cortex context */
.cortex-live-editor .cm-editor {
  width: 100%;
  min-width: 0;
  height: auto !important;
}
.cortex-live-editor .cm-content {
  width: 100%;
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  padding-bottom: 2rem !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  box-sizing: border-box;
}
.cortex-live-editor .cm-scroller {
  width: 100%;
  min-width: 0;
  overflow: auto !important;
  max-height: 50vh;
}
.cortex-synthesis-section {
  flex: 1;
}
/* Connections list */
.cortex-connections-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cortex-connection-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 6px;
  position: relative;
  transition: background 0.12s;
}
.cortex-connection-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.cortex-connection-item:hover .cortex-btn-icon.tiny {
  opacity: 1;
}
.cortex-connection-item .cortex-btn-icon.tiny {
  position: absolute;
  top: 6px;
  right: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.cortex-connection-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.12s ease;
}
.cortex-connection-link:hover {
  color: var(--accent);
}
.cortex-connection-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-left: 18px;
}
.cortex-connection-type {
  font-size: 10px;
  color: rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.25px;
}
.cortex-connection-confidence {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 999px;
}
.cortex-connection-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.cortex-relationships-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cortex-relationships-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cortex-relationship-subtitle {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.38);
}
.cortex-connection-form {
  margin-top: 8px;
  flex-wrap: wrap;
}
.cortex-connection-form .cortex-add-select {
  min-width: 130px;
}
.cortex-connection-form .cortex-add-input {
  min-width: 160px;
}
/* Sources list */
.cortex-sources-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cortex-source-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: left;
}
.cortex-source-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
}
.cortex-source-preview {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
/* Highlights */
.cortex-highlights-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cortex-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.cortex-highlight-bar {
  width: 3px;
  min-height: 16px;
  align-self: stretch;
  background: rgba(var(--accent-rgb), 0.5);
  border-radius: 2px;
  flex-shrink: 0;
}
.cortex-highlight-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
/* Applied list */
.cortex-applied-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cortex-applied-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(74, 222, 128, 0.8);
}
/* ── Excerpts ─────────────────────────────────────────────────────── */
.cortex-excerpts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.cortex-excerpt-item {
  position: relative;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.3);
}
.cortex-excerpt-item:hover .cortex-btn-icon.tiny {
  opacity: 1;
}
.cortex-excerpt-item .cortex-btn-icon.tiny {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.cortex-excerpt-text {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  line-height: 1.5;
  border: none;
}
.cortex-excerpt-source {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
}
.cortex-excerpt-note {
  font-size: 11px;
  color: rgba(var(--accent-rgb), 0.7);
  margin-top: 4px;
}
.cortex-textarea {
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}
.cortex-textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}
/* ── Additional notes ────────────────────────────────────────────── */
.cortex-notes-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.cortex-note-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  text-transform: capitalize;
  width: 100%;
}
.cortex-note-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.cortex-note-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: rgba(var(--accent-rgb), 0.9);
}
.cortex-note-item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cortex-note-editor {
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
}
.cortex-live-editor.compact {
  min-height: 120px;
  max-height: 300px;
}
/* ── Quick Add ────────────────────────────────────────────────────── */
.cortex-quick-add-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  z-index: 100;
  backdrop-filter: blur(4px);
}
.cortex-quick-add {
  width: 480px;
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
}
.cortex-quick-add-modes {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.cortex-quick-add-mode {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 5px 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cortex-quick-add-mode:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.cortex-quick-add-mode.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
}
.cortex-quick-add-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.cortex-quick-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.cortex-quick-add-input.secondary {
  margin-top: 6px;
  font-size: 12px;
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.7);
}
.cortex-quick-add-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.cortex-quick-add-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cortex-quick-add-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}
.cortex-quick-add-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cortex-kbd {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  font-size: 9px;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.5);
}
.cortex-quick-add-fab {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.9);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cortex-quick-add-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
/* ── Cross-domain connections ─────────────────────────────────── */
.cortex-connection-target {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.cortex-cross-domain-search {
  position: relative;
}
.cortex-cross-domain-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  margin-top: 2px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.cortex-cross-domain-result {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.cortex-cross-domain-result:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cortex-cross-domain-result.selected {
  background: rgba(var(--accent-rgb), 0.15);
}
.cortex-cross-domain-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cortex-cross-domain-badge {
  font-size: 9px;
  color: rgba(251, 146, 60, 0.8);
  background: rgba(251, 146, 60, 0.12);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}
.cortex-connection-item.cross-domain {
  border-left: 2px solid rgba(251, 146, 60, 0.3);
  padding-left: 8px;
}
/* Gap guidance */
.cortex-gap-guidance {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.cortex-gap-resolved {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(74, 222, 128, 0.7);
}
/* ── Welcome view ─────────────────────────────────────────────────────── */
.cortex-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 400px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.cortex-welcome h2 {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
.cortex-welcome p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.cortex-welcome-form {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.cortex-welcome-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  outline: none;
}
.cortex-welcome-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.cortex-welcome-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.cortex-welcome-btn {
  padding: 10px 20px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.cortex-welcome-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
}
.cortex-welcome-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* =========================================================================
 * LIGHT THEME OVERRIDES
 * ========================================================================= */
/* Root */
body.light .cortex-app {
  color: rgba(0, 0, 0, 0.85);
}
body.light .cortex-loading {
  color: rgba(0, 0, 0, 0.4);
}
/* Sidebar */
body.light .cortex-sidebar {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.06) 100%);
  border-right-color: rgba(0, 0, 0, 0.1);
}
body.light .cortex-sidebar-header {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light .cortex-sidebar-title {
  color: rgba(0, 0, 0, 0.5);
}
body.light .cortex-sidebar-toggle {
  color: rgba(0, 0, 0, 0.4);
}
body.light .cortex-sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
/* Domain selector */
body.light .cortex-domain-selector {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light .cortex-domain-select {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
}
body.light .cortex-domain-select option {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.85);
}
/* Section headers */
body.light .cortex-section-header {
  color: rgba(0, 0, 0, 0.55);
}
body.light .cortex-section-header:hover {
  color: rgba(0, 0, 0, 0.8);
}
body.light .cortex-section-count {
  color: rgba(0, 0, 0, 0.35);
}
/* Nav items */
body.light .cortex-nav-item {
  color: rgba(0, 0, 0, 0.65);
}
body.light .cortex-nav-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.9);
}
body.light .cortex-nav-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}
body.light .cortex-nav-add {
  color: rgba(0, 0, 0, 0.3);
}
body.light .cortex-nav-add:hover {
  color: var(--accent-dark);
}
/* Coverage dots */
body.light .cortex-coverage-dot.thin {
  background: rgba(0, 0, 0, 0.15);
}
/* Coverage bar */
body.light .cortex-coverage-bar {
  border-top-color: rgba(0, 0, 0, 0.1);
}
body.light .cortex-coverage-label {
  color: rgba(0, 0, 0, 0.4);
}
body.light .cortex-coverage-track {
  background: rgba(0, 0, 0, 0.06);
}
/* Add form */
body.light .cortex-add-form {
  border-top-color: rgba(0, 0, 0, 0.1);
}
body.light .cortex-add-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
}
body.light .cortex-add-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
body.light .cortex-add-select {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
}
body.light .cortex-add-select option {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.85);
}
/* Buttons */
body.light .cortex-btn-sm.muted {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.5);
}
body.light .cortex-btn-sm.muted:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}
body.light .cortex-btn-icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.55);
}
body.light .cortex-btn-icon:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.85);
}
body.light .cortex-btn-icon.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}
body.light .cortex-btn-icon.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #dc2626;
}
/* Map panel */
body.light .cortex-breadcrumb {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .cortex-breadcrumb-item {
  color: rgba(0, 0, 0, 0.4);
}
body.light .cortex-breadcrumb-item:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.06);
}
body.light .cortex-breadcrumb-sep {
  color: rgba(0, 0, 0, 0.15);
}
body.light .cortex-parent-link {
  color: rgba(0, 0, 0, 0.35);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .cortex-parent-label {
  color: rgba(0, 0, 0, 0.3);
}
body.light .cortex-drill-btn {
  color: rgba(0, 0, 0, 0.2);
}
body.light .cortex-drill-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .cortex-nav-back {
  color: rgba(0, 0, 0, 0.35) !important;
}
body.light .cortex-descendant-badge,
body.light .cortex-child-count {
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.1);
}
body.light .cortex-minimap {
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .cortex-map-panel {
  border-right-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}
body.light .cortex-map-empty {
  color: rgba(0, 0, 0, 0.2);
}
/* Canvas handles its own light theme rendering */
/* Working pane */
body.light .cortex-empty-state {
  color: rgba(0, 0, 0, 0.25);
}
/* Detail view */
body.light .cortex-detail-header {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light .cortex-detail-title {
  color: rgba(0, 0, 0, 0.9);
}
body.light .cortex-detail-icon {
  color: rgba(0, 0, 0, 0.4);
}
body.light .cortex-detail-section {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.light .cortex-detail-section-title {
  color: rgba(0, 0, 0, 0.4);
}
body.light .cortex-detail-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
body.light .cortex-detail-meta {
  color: rgba(0, 0, 0, 0.4);
}
/* Badges */
body.light .cortex-coverage-badge.thin {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}
body.light .cortex-source-type-badge {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}
body.light .cortex-status-badge.draft {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}
/* Editor */
body.light .cortex-live-editor {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
/* Connections */
body.light .cortex-connection-link {
  color: rgba(0, 0, 0, 0.65);
}
body.light .cortex-connection-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--accent-dark);
}
body.light .cortex-connection-label {
  color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.04);
}
body.light .cortex-connection-type {
  color: rgba(var(--accent-rgb), 1);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.2);
}
body.light .cortex-connection-confidence {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.05);
}
body.light .cortex-relationship-subtitle {
  color: rgba(0, 0, 0, 0.4);
}
/* Sources */
body.light .cortex-source-link {
  color: rgba(0, 0, 0, 0.65);
}
body.light .cortex-source-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--accent-dark);
}
body.light .cortex-source-preview {
  color: rgba(0, 0, 0, 0.3);
}
/* Highlights */
body.light .cortex-highlight-item {
  background: rgba(0, 0, 0, 0.02);
}
body.light .cortex-highlight-text {
  color: rgba(0, 0, 0, 0.7);
}
/* Status selector */
body.light .cortex-status-option {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.5);
}
body.light .cortex-status-option:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}
body.light .cortex-status-option.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}
/* Gap */
body.light .cortex-gap-guidance {
  background: rgba(var(--accent-rgb), 0.04);
  border-color: rgba(var(--accent-rgb), 0.1);
  color: rgba(0, 0, 0, 0.5);
}
/* Welcome */
body.light .cortex-welcome {
  color: rgba(0, 0, 0, 0.5);
}
body.light .cortex-welcome h2 {
  color: rgba(0, 0, 0, 0.85);
}
body.light .cortex-welcome-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
}
body.light .cortex-welcome-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
/* Excerpts (light) */
body.light .cortex-excerpt-item {
  background: rgba(0, 0, 0, 0.02);
  border-left-color: rgba(var(--accent-rgb), 0.25);
}
body.light .cortex-excerpt-text {
  color: rgba(0, 0, 0, 0.65);
}
body.light .cortex-excerpt-source {
  color: rgba(0, 0, 0, 0.3);
}
body.light .cortex-excerpt-note {
  color: rgba(var(--accent-rgb), 0.75);
}
body.light .cortex-textarea {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}
/* Notes (light) */
body.light .cortex-note-item {
  color: rgba(0, 0, 0, 0.6);
}
body.light .cortex-note-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .cortex-note-item.active {
  background: rgba(var(--accent-rgb), 0.08);
}
body.light .cortex-note-editor {
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .cortex-cross-domain-results {
  background: rgba(250, 250, 252, 0.97);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
body.light .cortex-cross-domain-result {
  color: rgba(0, 0, 0, 0.75);
}
body.light .cortex-cross-domain-result:hover {
  background: rgba(0, 0, 0, 0.05);
}
/* Pipeline (light) */
body.light .cortex-pipeline-step {
  border-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.3);
}
body.light .cortex-pipeline-step:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
}
body.light .cortex-pipeline-arrow {
  color: rgba(0, 0, 0, 0.12);
}
/* Quick Add (light) */
body.light .cortex-quick-add-overlay {
  background: rgba(255, 255, 255, 0.5);
}
body.light .cortex-quick-add {
  background: rgba(250, 250, 252, 0.97);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
body.light .cortex-quick-add-mode {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.45);
}
body.light .cortex-quick-add-mode:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.65);
}
body.light .cortex-quick-add-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.9);
}
body.light .cortex-quick-add-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
body.light .cortex-quick-add-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .cortex-quick-add-hint {
  color: rgba(0, 0, 0, 0.3);
}
body.light .cortex-kbd {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}
/* ============================================================
   AGENTS APP - Partner & Companion Chat
   ============================================================ */
.agents-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--os-glass-bg-solid);
  color: #e4e4e7;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ============================================================
   HEADER
   ============================================================ */
.agents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #27282c;
  border-bottom: 1px solid #3f4046;
  gap: 1rem;
}
.agents-header-left,
.agents-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.agents-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}
.agents-model-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid #3f4046;
  border-radius: 20px;
  color: #a1a1aa;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.agents-model-display:hover {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-model-display svg:last-child {
  opacity: 0.5;
}
/* Mode tabs */
.agents-mode-tabs {
  display: flex;
  background: #27282c;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.agents-mode-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #71717a;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.agents-mode-tab:hover {
  color: #a1a1aa;
}
.agents-mode-tab.active {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-mode-tab.active svg {
  color: var(--accent);
}
/* Model selector */
.agents-model-selector {
  position: relative;
}
.agents-model-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  background: transparent;
  border: 1px solid #3f4046;
  border-radius: 8px;
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.75rem;
}
.agents-model-btn:hover {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-model-label {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Icon buttons */
.agents-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid #3f4046;
  border-radius: 8px;
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.15s;
}
.agents-icon-btn:hover {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-icon-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent-dark);
  color: var(--accent);
}
/* Dropdowns */
.agents-dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9998;
}
.agents-dropdown {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 280px;
  max-width: 90vw;
  max-height: 70vh;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow-y: auto;
}
.agents-model-dropdown {
  /* Same as base - centered modal */
}
.agents-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #3f4046;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: #27282c;
  z-index: 1;
}
.agents-dropdown-header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #71717a;
  cursor: pointer;
}
.agents-dropdown-header button:hover {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: #e4e4e7;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.agents-dropdown-item:hover {
  background: #3f4046;
}
.agents-dropdown-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.agents-dropdown-item svg {
  margin-left: auto;
  flex-shrink: 0;
}
.agents-dropdown-item-name {
  font-weight: 500;
}
.agents-dropdown-item-desc {
  font-size: 0.75rem;
  color: #71717a;
}
/* Model groups */
.agents-model-group {
  padding: 0.5rem 0;
  border-bottom: 1px solid #3f4046;
}
.agents-model-group:last-child {
  border-bottom: none;
}
.agents-model-group-header {
  padding: 0.5rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.agents-model-group .agents-dropdown-item {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}
/* ============================================================
   BODY LAYOUT (Sidebar + Main)
   ============================================================ */
.agents-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.agents-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
/* ============================================================
   THREAD SIDEBAR (Collapsible)
   ============================================================ */
.agents-thread-sidebar {
  width: 240px;
  background: #27282c;
  border-right: 1px solid #3f4046;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.2s ease, margin 0.2s ease;
}
.agents-thread-sidebar.collapsed {
  width: 0;
  margin-left: -1px;
  overflow: hidden;
}
.agents-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #3f4046;
  font-weight: 500;
  flex-shrink: 0;
}
.agents-thread-header-actions {
  display: flex;
  gap: 0.375rem;
}
.agents-thread-header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #3f4046;
  border: none;
  border-radius: 6px;
  color: #e4e4e7;
  cursor: pointer;
}
.agents-thread-header button:hover {
  background: #52525b;
}
.agents-thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}
.agents-thread-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #71717a;
  font-size: 0.875rem;
}
.agents-thread-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  background: none;
  border: none;
  border-radius: 8px;
  text-align: left;
  transition: background 0.15s;
}
.agents-thread-item:hover {
  background: #3f4046;
}
.agents-thread-item.active {
  background: rgba(var(--accent-rgb), 0.15);
}
.agents-thread-item-content {
  flex: 1;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0;
  min-width: 0;
  color: inherit;
  font: inherit;
}
.agents-thread-item-name {
  color: #e4e4e7;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agents-thread-item-meta {
  font-size: 0.75rem;
  color: #71717a;
  margin-top: 0.25rem;
}
.agents-thread-item-rename {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 4px;
  color: #71717a;
  cursor: pointer;
  flex-shrink: 0;
}
.agents-thread-item:hover .agents-thread-item-rename {
  display: flex;
}
.agents-thread-item-rename:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}
.agents-thread-edit {
  flex: 1;
}
.agents-thread-edit input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  background: #1a1b1e;
  border: 1px solid var(--accent-dark);
  border-radius: 6px;
  color: #e4e4e7;
  font-size: 0.875rem;
  outline: none;
}
/* ============================================================
   MESSAGES
   ============================================================ */
.agents-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Welcome screen */
.agents-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #71717a;
  gap: 1rem;
}
.agents-welcome svg {
  opacity: 0.5;
}
.agents-welcome h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #e4e4e7;
  margin: 0;
}
.agents-welcome p {
  font-size: 1rem;
  max-width: 300px;
  margin: 0;
}
/* Messages */
.agents-message {
  max-width: 85%;
  animation: messageIn 0.2s ease-out;
}
@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.agents-message.user {
  align-self: flex-end;
}
.agents-message.assistant {
  align-self: flex-start;
}
.agents-message-content {
  padding: 0.875rem 1rem;
  border-radius: 16px;
  line-height: 1.5;
}
.agents-message.user .agents-message-content {
  background: var(--accent-dark);
  color: white;
  border-bottom-right-radius: 4px;
}
.agents-message.assistant .agents-message-content {
  background: #27282c;
  border: 1px solid #3f4046;
  border-bottom-left-radius: 4px;
}
.agents-message.streaming .agents-message-content {
  border-color: var(--accent-dark);
}
/* Message attachments */
.agents-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}
.agents-message-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.7);
}
/* Message editing */
.agents-message.editing {
  max-width: 100%;
}
.agents-message-edit {
  width: 100%;
}
.agents-message-edit-input {
  width: 100%;
  min-height: 80px;
  padding: 0.75rem;
  background: #1a1b1e;
  border: 1px solid var(--accent-dark);
  border-radius: 12px;
  color: #e4e4e7;
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  font-family: inherit;
}
.agents-message-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.agents-message-edit-actions button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.agents-message-edit-actions button:first-child {
  background: transparent;
  border: 1px solid #3f4046;
  color: #a1a1aa;
}
.agents-message-edit-actions button:first-child:hover {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-message-edit-actions button.primary {
  background: var(--accent-dark);
  border: none;
  color: white;
}
.agents-message-edit-actions button.primary:hover {
  background: var(--accent-dark);
}
/* Message actions */
.agents-message-actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.375rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.agents-message:hover .agents-message-actions {
  opacity: 1;
}
.agents-message-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #71717a;
  cursor: pointer;
  transition: all 0.15s ease;
}
.agents-message-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}
.agents-message-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.agents-message.user .agents-message-actions {
  justify-content: flex-end;
}
/* Markdown in messages */
.agents-message .chat-markdown {
  line-height: 1.6;
}
.agents-message .chat-markdown strong {
  font-weight: 600;
}
.agents-message .chat-markdown em {
  font-style: italic;
}
.agents-message .chat-markdown .chat-inline-code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.875em;
}
.agents-message .chat-markdown .chat-code-block {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  overflow-x: auto;
}
.agents-message .chat-markdown .chat-code-block code {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre;
}
.agents-message .chat-markdown .chat-h2,
.agents-message .chat-markdown .chat-h3,
.agents-message .chat-markdown .chat-h2,
.agents-message .chat-markdown .chat-h3,
.agents-message .chat-markdown .chat-h4 {
  font-weight: 600;
  margin: 0.5rem 0 0.25rem 0;
}
.agents-message .chat-markdown .chat-h2 {
  font-size: 1.125rem;
}
.agents-message .chat-markdown .chat-h3 {
  font-size: 1rem;
}
.agents-message .chat-markdown .chat-h4 {
  font-size: 0.9375rem;
}
.agents-message .chat-markdown .chat-hr {
  border: none;
  border-top: 1px solid #3f4046;
  margin: 0.5rem 0;
}
.agents-message .chat-markdown .chat-ul,
.agents-message .chat-markdown .chat-ol {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
  list-style: none;
}
.agents-message .chat-markdown .chat-li,
.agents-message .chat-markdown .chat-li-num {
  margin: 0.125rem 0;
  position: relative;
}
.agents-message .chat-markdown .chat-li::before {
  content: '•';
  position: absolute;
  left: -1rem;
  color: #71717a;
}
.agents-message .chat-markdown .chat-ol {
  counter-reset: list-counter;
}
.agents-message .chat-markdown .chat-li-num {
  counter-increment: list-counter;
}
.agents-message .chat-markdown .chat-li-num::before {
  content: counter(list-counter) '.';
  position: absolute;
  left: -1.25rem;
  color: #71717a;
  font-size: 0.875em;
}
/* Status indicator */
.agents-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #71717a;
  font-size: 0.875rem;
}
.agents-status-dots {
  display: flex;
  gap: 4px;
}
.agents-status-dots span {
  width: 6px;
  height: 6px;
  background: var(--accent-dark);
  border-radius: 50%;
  animation: dotPulse 1.4s ease-in-out infinite;
}
.agents-status-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.agents-status-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes dotPulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}
/* ============================================================
   ERROR BANNER
   ============================================================ */
.agents-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(239, 68, 68, 0.15);
  border-top: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  font-size: 0.875rem;
}
.agents-error span {
  flex: 1;
}
.agents-error button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: #fca5a5;
  cursor: pointer;
  opacity: 0.7;
}
.agents-error button:hover {
  opacity: 1;
}
/* ============================================================
   INPUT AREA
   ============================================================ */
.agents-input-area {
  padding: 1rem;
  background: #1a1b1e;
  border-top: 1px solid #3f4046;
}
.agents-input-container {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 16px;
  padding: 0.5rem;
  transition: border-color 0.15s;
}
.agents-input-with-menu {
  position: relative;
  flex: 1;
}
.agents-input-container:focus-within {
  border-color: var(--accent-dark);
}
.agents-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #e4e4e7;
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 0.375rem 0.5rem;
  resize: none;
  min-height: 24px;
  max-height: 150px;
}
.agents-input::placeholder {
  color: #52525b;
}
.agents-voice-btn,
.agents-send-btn,
.agents-stop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.agents-voice-btn {
  background: transparent;
  color: #71717a;
}
.agents-voice-btn:hover {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-voice-btn.recording {
  background: #ef4444;
  color: white;
  animation: recordPulse 1s ease-in-out infinite;
}
@keyframes recordPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}
.agents-voice-btn.transcribing {
  background: #3f4046;
  color: #71717a;
}
.agents-voice-btn.transcribing svg {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.agents-send-btn {
  background: var(--accent-dark);
  color: white;
}
.agents-send-btn:hover:not(:disabled) {
  background: var(--accent-dark);
}
.agents-send-btn:disabled {
  background: #3f4046;
  color: #52525b;
  cursor: not-allowed;
}
.agents-stop-btn {
  background: #ef4444;
  color: white;
}
.agents-stop-btn:hover {
  background: #dc2626;
}
/* Speaking indicator */
.agents-speaking {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 20px;
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
}
.agents-speaking:hover {
  background: rgba(var(--accent-rgb), 0.25);
}
.agents-speaking svg:first-child {
  animation: speakPulse 1s ease-in-out infinite;
}
@keyframes speakPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
/* ============================================================
   ATTACHMENTS
   ============================================================ */
.agents-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.agents-attachment-chip {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 16px;
  color: var(--accent);
  font-size: 0.75rem;
}
.agents-attachment-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  opacity: 0.7;
  border-radius: 50%;
}
.agents-attachment-chip button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
.agents-attach-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 50%;
  color: #71717a;
  cursor: pointer;
  transition: all 0.15s ease;
}
.agents-attach-btn:hover {
  background: #3f4046;
  color: #e4e4e7;
}
/* ============================================================
   FILE BROWSER MODAL
   ============================================================ */
.agents-file-browser {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-width: 90vw;
  max-height: 70vh;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.agents-file-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #3f4046;
  font-weight: 600;
}
.agents-file-browser-header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: #71717a;
  cursor: pointer;
  border-radius: 6px;
}
.agents-file-browser-header button:hover {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-file-browser-path {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: #1a1b1e;
  border-bottom: 1px solid #3f4046;
  font-size: 0.8125rem;
}
.agents-file-browser-home,
.agents-file-browser-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 6px;
  color: #71717a;
  cursor: pointer;
}
.agents-file-browser-home:hover:not(:disabled),
.agents-file-browser-up:hover {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-file-browser-home:disabled {
  opacity: 0.4;
  cursor: default;
}
.agents-file-browser-current {
  flex: 1;
  color: #a1a1aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agents-file-browser-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  min-height: 200px;
  max-height: 350px;
}
.agents-file-browser-loading,
.agents-file-browser-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: #71717a;
  font-size: 0.875rem;
}
.agents-file-browser-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  background: none;
  border: none;
  border-radius: 6px;
  color: #e4e4e7;
  font-size: 0.8125rem;
  text-align: left;
}
.agents-file-browser-item:hover {
  background: #3f4046;
}
.agents-file-browser-item.attached {
  background: rgba(34, 197, 94, 0.15);
}
.agents-file-browser-item .folder-toggle,
.agents-file-browser-item .file-select {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.agents-file-browser-item .folder-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #71717a;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.agents-file-browser-item:hover .folder-add-btn {
  opacity: 1;
}
.agents-file-browser-item .folder-add-btn:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}
.agents-file-browser-item .folder-arrow {
  color: #71717a;
  flex-shrink: 0;
}
.agents-file-browser-item.folder .folder-toggle > svg:nth-child(2) {
  color: #fbbf24;
}
.agents-file-browser-item.file .file-select > svg:first-child {
  color: #71717a;
}
.agents-file-browser-item span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agents-file-browser-item .attached-check {
  color: #22c55e;
  flex-shrink: 0;
}
.agents-file-browser-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
}
.agents-file-browser-item .file-select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent-dark);
  cursor: pointer;
}
.agents-file-browser-item .file-select input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.agents-file-browser-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid #3f4046;
  font-size: 0.8125rem;
  color: #71717a;
}
.agents-file-browser-actions {
  display: flex;
  gap: 0.5rem;
}
.agents-file-browser-footer button {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  color: #e4e4e7;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
.agents-file-browser-footer button:hover {
  background: rgba(255, 255, 255, 0.15);
}
.agents-file-browser-footer button.attach-btn {
  background: var(--accent-dark);
  color: white;
}
.agents-file-browser-footer button.attach-btn:hover {
  background: var(--accent-dark);
}
.agents-file-browser-footer button.clear-btn {
  background: transparent;
  color: #71717a;
}
.agents-file-browser-footer button.clear-btn:hover {
  color: #e4e4e7;
}
.agents-file-browser-footer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ============================================================
   COUNCIL MODE
   ============================================================ */
/* Toggle button */
.agents-council-toggle-wrapper {
  position: relative;
}
.agents-council-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: #71717a;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.agents-council-toggle:hover {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-council-toggle.active {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
.agents-council-count {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: var(--accent-dark);
  color: white;
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Council model picker dropdown */
.agents-council-picker {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  max-width: 90vw;
  max-height: 50vh;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow-y: auto;
}
.agents-council-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #3f4046;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: #27282c;
  z-index: 1;
}
.agents-council-picker-header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #71717a;
  cursor: pointer;
}
.agents-council-picker-header button:hover {
  background: #3f4046;
  color: #e4e4e7;
}
.agents-council-picker .agents-dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}
/* Council member list */
.agents-council-member-list {
  padding: 0.5rem 0;
}
.agents-council-member-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  color: #a1a1aa;
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.agents-council-member-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e4e4e7;
}
.agents-council-member-item.active {
  background: rgba(255, 255, 255, 0.07);
  color: #e4e4e7;
}
.agents-council-member-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.agents-council-member-name {
  flex: 1;
  font-weight: 500;
}
.agents-council-member-model {
  font-size: 0.7rem;
  color: #52525b;
  font-family: monospace;
}
.agents-council-member-check {
  color: var(--accent);
  flex-shrink: 0;
}
/* Council card member dot (replaces provider Icon) */
.agents-council-member-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.agents-council-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid #3f4046;
  position: sticky;
  bottom: 0;
  background: #27282c;
}
.agents-council-picker-footer button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #71717a;
}
.agents-council-picker-footer button:hover {
  color: #e4e4e7;
}
.agents-council-picker-footer button.primary {
  background: var(--accent-dark);
  color: white;
}
.agents-council-picker-footer button.primary:hover {
  background: var(--accent-dark);
}
/* Send button council state */
.agents-send-btn.council-active {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}
/* Council card */
.agents-message.council {
  max-width: 90%;
}
.agents-council-card {
  background: #27282c;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 16px;
  overflow: hidden;
}
.agents-council-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}
.agents-council-card-model {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--accent);
}
.agents-council-card-position {
  font-size: 0.75rem;
  color: #71717a;
}
.agents-council-card-body {
  padding: 0.875rem 1rem;
  line-height: 1.5;
  max-height: 400px;
  overflow-y: auto;
}
.agents-council-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  border-top: 1px solid #3f4046;
  background: rgba(0, 0, 0, 0.15);
}
.agents-council-card-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.agents-council-card-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.15s;
}
.agents-council-card-nav button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}
.agents-council-card-nav button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.agents-council-card-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.agents-council-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3f4046;
  cursor: pointer;
  transition: all 0.15s;
}
.agents-council-dot.active {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}
.agents-council-dot:hover:not(.active) {
  background: #52525b;
}
.agents-council-pick-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: var(--accent-dark);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.agents-council-pick-btn:hover {
  background: var(--accent-dark);
}
/* Provider-specific card borders */
.agents-council-card.provider-claude {
  border-color: rgba(232, 160, 72, 0.4);
}
.agents-council-card.provider-claude .agents-council-card-header {
  background: rgba(232, 160, 72, 0.08);
  border-bottom-color: rgba(232, 160, 72, 0.15);
}
.agents-council-card.provider-claude .agents-council-card-model {
  color: #e8a048;
}
.agents-council-card.provider-openai {
  border-color: rgba(16, 163, 127, 0.4);
}
.agents-council-card.provider-openai .agents-council-card-header {
  background: rgba(16, 163, 127, 0.08);
  border-bottom-color: rgba(16, 163, 127, 0.15);
}
.agents-council-card.provider-openai .agents-council-card-model {
  color: #10a37f;
}
.agents-council-card.provider-gemini {
  border-color: rgba(66, 133, 244, 0.4);
}
.agents-council-card.provider-gemini .agents-council-card-header {
  background: rgba(66, 133, 244, 0.08);
  border-bottom-color: rgba(66, 133, 244, 0.15);
}
.agents-council-card.provider-gemini .agents-council-card-model {
  color: #4285f4;
}
.agents-council-card.provider-deepseek {
  border-color: rgba(0, 191, 255, 0.4);
}
.agents-council-card.provider-deepseek .agents-council-card-header {
  background: rgba(0, 191, 255, 0.08);
  border-bottom-color: rgba(0, 191, 255, 0.15);
}
.agents-council-card.provider-deepseek .agents-council-card-model {
  color: #00bfff;
}
/* Provider-colored navigation dots */
.agents-council-dot.dot-claude {
  background: rgba(232, 160, 72, 0.3);
}
.agents-council-dot.dot-claude.active {
  background: #e8a048;
  box-shadow: 0 0 6px rgba(232, 160, 72, 0.5);
}
.agents-council-dot.dot-openai {
  background: rgba(16, 163, 127, 0.3);
}
.agents-council-dot.dot-openai.active {
  background: #10a37f;
  box-shadow: 0 0 6px rgba(16, 163, 127, 0.5);
}
.agents-council-dot.dot-gemini {
  background: rgba(66, 133, 244, 0.3);
}
.agents-council-dot.dot-gemini.active {
  background: #4285f4;
  box-shadow: 0 0 6px rgba(66, 133, 244, 0.5);
}
.agents-council-dot.dot-deepseek {
  background: rgba(0, 191, 255, 0.3);
}
.agents-council-dot.dot-deepseek.active {
  background: #00bfff;
  box-shadow: 0 0 6px rgba(0, 191, 255, 0.5);
}
/* Council badge on picked messages */
.agents-council-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  font-size: 0.6875rem;
  color: var(--accent);
}
.agents-council-badge-model {
  color: #71717a;
}
/* Council streaming state */
.agents-council-streaming {
  padding: 1rem;
  animation: messageIn 0.2s ease-out;
}
.agents-council-streaming-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.agents-council-streaming-models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.agents-council-streaming-model {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 0.75rem;
  color: #a1a1aa;
}
.agents-council-streaming-model.active {
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.agents-council-streaming-model.done {
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}
.agents-council-streaming-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.agents-council-streaming-model.active .agents-council-streaming-dot {
  animation: dotPulse 1.4s ease-in-out infinite;
}
.agents-council-spinner {
  animation: spin 1s linear infinite;
}
/* ============================================================
   LIGHT THEME OVERRIDES
   Using OS theme variables for consistency with desktop theme
   ============================================================ */
body.light .agents-app {
  background: transparent !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-header {
  background: var(--os-glass-bg, rgba(255, 255, 255, 0.78)) !important;
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}
body.light .agents-mode-tabs {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .agents-mode-tab {
  color: var(--os-text-muted, #71717a) !important;
}
body.light .agents-mode-tab:hover {
  color: var(--os-text-secondary, #3f3f46) !important;
}
body.light .agents-mode-tab.active {
  background: #fff !important;
  color: var(--os-text-primary, #1a1a1a) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
body.light .agents-model-display,
body.light .agents-model-btn {
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--os-text-secondary, #52525b) !important;
}
body.light .agents-model-display:hover,
body.light .agents-model-btn:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-icon-btn {
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--os-text-muted, #71717a) !important;
}
body.light .agents-icon-btn:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
/* Thread sidebar */
body.light .agents-thread-sidebar {
  background: rgba(255, 255, 255, 0.9) !important;
  border-right-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}
body.light .agents-thread-header {
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}
body.light .agents-thread-header button {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}
body.light .agents-thread-header button:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}
body.light .agents-thread-item:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
}
body.light .agents-thread-item-name {
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-thread-item-meta {
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-thread-item-rename {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--os-text-muted, #71717a) !important;
}
body.light .agents-thread-item-rename:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-thread-edit input {
  background: #fff !important;
  border-color: var(--accent) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-thread-empty {
  color: var(--os-text-muted, #a1a1aa) !important;
}
/* Messages */
body.light .agents-welcome h2 {
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-welcome p,
body.light .agents-welcome {
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-message-content {
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-message.assistant .agents-message-content {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-message.user .agents-message-content {
  color: #fff !important;
}
body.light .agents-message.streaming .agents-message-content {
  border-color: var(--accent) !important;
}
body.light .agents-message .chat-markdown .chat-inline-code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-message .chat-markdown .chat-code-block {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-message .chat-markdown .chat-hr {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}
body.light .agents-message .chat-markdown .chat-li::before,
body.light .agents-message .chat-markdown .chat-li-num::before {
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-message-action {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-message-action:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}
body.light .agents-message-attachment {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}
/* Status */
body.light .agents-status {
  color: var(--os-text-muted, #a1a1aa) !important;
}
/* Error */
body.light .agents-error {
  background: rgba(239, 68, 68, 0.08) !important;
  border-top-color: rgba(239, 68, 68, 0.2) !important;
  color: #dc2626 !important;
}
body.light .agents-error button {
  color: #dc2626 !important;
}
/* Input */
body.light .agents-input-area {
  background: transparent !important;
  border-top-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}
body.light .agents-input-container {
  background: #fff !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
}
body.light .agents-input-container:focus-within {
  border-color: var(--accent) !important;
}
body.light .agents-input {
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-input::placeholder {
  color: var(--os-text-hint, #a1a1aa) !important;
}
body.light .agents-voice-btn {
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-voice-btn:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}
body.light .agents-send-btn:disabled {
  background: #e4e4e7 !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-attach-btn {
  background: #fff !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-attach-btn:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}
/* Dropdowns & Modals */
body.light .agents-dropdown,
body.light .agents-council-picker {
  background: #fff !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
body.light .agents-dropdown-backdrop {
  background: rgba(0, 0, 0, 0.15) !important;
}
body.light .agents-dropdown-header,
body.light .agents-council-picker-header {
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  background: #fff !important;
}
body.light .agents-dropdown-header button,
body.light .agents-council-picker-header button {
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-dropdown-header button:hover,
body.light .agents-council-picker-header button:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-dropdown-item {
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-dropdown-item:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
}
body.light .agents-dropdown-item-desc {
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-model-group {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .agents-model-group-header {
  color: var(--os-text-muted, #a1a1aa) !important;
}
/* Message editing */
body.light .agents-message-edit-input {
  background: #fff !important;
  border-color: var(--accent) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-message-edit-actions button:first-child {
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--os-text-muted, #71717a) !important;
}
body.light .agents-message-edit-actions button:first-child:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
/* File browser */
body.light .agents-file-browser {
  background: #fff !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
}
body.light .agents-file-browser-header {
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}
body.light .agents-file-browser-header button {
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-file-browser-header button:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-file-browser-path {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}
body.light .agents-file-browser-home,
body.light .agents-file-browser-up {
  background: #fff !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-file-browser-home:hover:not(:disabled),
body.light .agents-file-browser-up:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}
body.light .agents-file-browser-current {
  color: var(--os-text-muted, #71717a) !important;
}
body.light .agents-file-browser-item {
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-file-browser-item:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
}
body.light .agents-file-browser-item .folder-arrow {
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-file-browser-item.file .file-select > svg:first-child {
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-file-browser-loading,
body.light .agents-file-browser-empty {
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-file-browser-footer {
  border-top-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-file-browser-footer button {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}
body.light .agents-file-browser-footer button:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}
body.light .agents-file-browser-footer button.clear-btn {
  background: transparent !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}
body.light .agents-file-browser-footer button.clear-btn:hover {
  color: var(--os-text-secondary, #3f3f46) !important;
}
/* Council cards */
body.light .agents-council-card {
  background: #fff !important;
}
body.light .agents-council-card-footer {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}
body.light .agents-council-card-nav button {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, #71717a) !important;
}
body.light .agents-council-card-nav button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}
body.light .agents-council-dot {
  background: #d4d4d8 !important;
}
body.light .agents-council-dot:hover:not(.active) {
  background: #a1a1aa !important;
}
body.light .agents-council-picker-footer {
  border-top-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  background: #fff !important;
}
body.light .agents-council-picker-footer button {
  color: var(--os-text-muted, #71717a) !important;
}
body.light .agents-council-picker-footer button:hover {
  color: var(--os-text-primary, #1a1a1a) !important;
}
/* Council streaming */
body.light .agents-council-streaming-model {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, #71717a) !important;
}
body.light .agents-file-browser-item .folder-add-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}
.ops-navigator {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--os-glass-bg-solid);
  color: var(--os-text-primary);
  overflow: hidden;
  container-type: inline-size;
  container-name: daily;
}
/* Header */
.ops-nav-header {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 0.75rem;
}
.ops-nav-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.ops-nav-title h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}
.day-counter {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.day-counter:hover {
  color: rgba(var(--accent-rgb), 1);
  background: rgba(var(--accent-rgb), 0.2);
}
/* Tabs — unified single row */
.ops-nav-tabs {
  display: flex;
  gap: 0.125rem;
  padding: 0.2rem;
  border-radius: 9px;
  border: 1px solid var(--os-glass-border);
  background: var(--os-input-bg);
  backdrop-filter: blur(6px);
  margin-left: auto;
}
.ops-nav-tabs .tab {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--os-text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ops-nav-tabs .tab:hover {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.06);
}
.ops-nav-tabs .tab.active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}
.edit-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.edit-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
/* Temporal View */
.temporal-view {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.temporal-section {
  background: none;
  border: none;
  border-radius: 12px;
  /* Don't clip content - let sections expand to fit all tasks */
}
.temporal-section .section-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  background: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.temporal-section .section-header h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  flex: 1;
}
.section-header .task-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
/* Tomorrow section - highlighted */
.temporal-section.tomorrow {
  border-color: rgba(56, 189, 248, 0.2);
}
.temporal-section.tomorrow .section-header {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.15);
}
.temporal-section.tomorrow .section-header h3 {
  color: #38bdf8;
}
/* Today section */
.temporal-section.today .section-header h3 {
  color: var(--os-text-primary);
}
/* Week section */
.temporal-section.week .section-header h3 {
  color: var(--os-text-secondary);
}
/* Backlog section - domain next items */
.temporal-section.backlog {
  border-color: rgba(var(--accent-rgb), 0.2);
}
.temporal-section.backlog .section-header {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.15);
}
.temporal-section.backlog .section-header h3 {
  color: var(--accent);
}
.temporal-section.backlog .task-count {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
/* Task List - Rows with domain chips */
.task-list {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: none;
  border-radius: 8px;
  transition: all 0.15s ease;
  cursor: default;
}
.task-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.domain-chip {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 52px;
  text-align: center;
}
.domain-chip.blue { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.domain-chip.green { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.domain-chip.purple { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
.domain-chip.orange { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.domain-chip.gray { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }
.domain-chip.pink { background: rgba(244, 114, 182, 0.2); color: #f472b6; }
.domain-chip.teal { background: rgba(45, 212, 191, 0.2); color: #2dd4bf; }
.task-text {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
  /* Allow text to wrap instead of truncating */
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.task-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.task-row:hover .task-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.task-action-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}
.task-action-btn.done:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.empty-message {
  padding: 1rem;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.875rem;
  font-style: italic;
}
/* Week Content */
.week-content {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.week-theme,
.week-focus,
.week-priorities {
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
.week-theme strong,
.week-focus strong,
.week-priorities strong {
  color: var(--os-text-primary);
  margin-right: 0.375rem;
}
.week-priorities ol {
  margin: 0.375rem 0 0 1.25rem;
  padding: 0;
}
.week-priorities li {
  margin-bottom: 0.25rem;
}
/* Loading and error states */
.ops-nav-loading,
.ops-nav-error {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--os-text-secondary);
}
.ops-nav-error button {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ops-nav-error button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
/* Spinning animation */
.spinning {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Scrollbar styling */
.temporal-view::-webkit-scrollbar {
  width: 8px;
}
.temporal-view::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.temporal-view::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.temporal-view::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
/* ==================== */
/* Planning View        */
/* ==================== */
.planning-view {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Split layout with tree on left */
.planning-view-split {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}
/* Tree Navigation */
.planning-tree {
  position: relative;
  width: 160px;
  flex-shrink: 0;
  min-height: 0;
  padding: 0.75rem 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow-y: auto;
}
/* Consistent sidebar item sizing */
.planning-tree .tree-item {
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem 0.35rem 1.25rem;
  gap: 0.4rem;
}
.planning-tree.collapsed {
  width: 36px !important;
  min-width: 36px;
  padding: 0.5rem 0.25rem;
  align-items: center;
  overflow: hidden;
}
.tree-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--os-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 0.25rem;
  transition: all 0.15s ease;
}
.tree-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}
.planning-tree.collapsed .tree-collapse-btn {
  margin-bottom: 0;
}
/* Resize handle between tree and content */
.planning-resize-handle {
  width: 12px;
  margin: 0 -4px;
  flex-shrink: 0;
  align-self: stretch;
  cursor: col-resize;
  position: relative;
  z-index: 10;
}
.planning-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: transparent;
  transition: background 0.15s ease;
}
.planning-resize-handle:hover::after,
.planning-resize-handle:active::after {
  background: rgba(var(--accent-rgb), 0.4);
}
.tree-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
}
.tree-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
}
.tree-item.active {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}
.tree-item-label {
  flex: 1;
}
.tree-item-subtitle {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  font-weight: 400;
  white-space: nowrap;
}
.tree-item-count {
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
}
.tree-item.active .tree-item-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}
/* Tree group (expandable) */
.tree-group {
  display: flex;
  flex-direction: column;
}
.tree-group .tree-item.parent {
  margin-bottom: 0;
}
.tree-children {
  display: flex;
  flex-direction: column;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.tree-item.child {
  padding: 0.3rem 0.625rem;
  font-size: 0.75rem;
}
.tree-item.child .tree-item-count {
  font-size: 0.625rem;
  padding: 0.0625rem 0.3125rem;
}
/* Suggested child item - purple accent */
.tree-item.child.suggested.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.tree-item.child.suggested.active .tree-item-count {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
/* Domain groups in tree */
.tree-domain-group {
  display: flex;
  flex-direction: column;
}
.tree-item.child.domain {
  gap: 0.375rem;
}
.tree-expand-icon {
  flex-shrink: 0;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.tree-expand-icon:hover {
  opacity: 1;
}
/* Domain color accents */
.tree-item.child.domain.blue { color: rgba(56, 189, 248, 0.9); }
.tree-item.child.domain.green { color: rgba(74, 222, 128, 0.9); }
.tree-item.child.domain.purple { color: rgba(var(--accent-rgb), 0.9); }
.tree-item.child.domain.orange { color: rgba(251, 146, 60, 0.9); }
.tree-item.child.domain.gray { color: rgba(156, 163, 175, 0.9); }
.tree-item.child.domain.pink { color: rgba(244, 114, 182, 0.9); }
.tree-item.child.domain.teal { color: rgba(45, 212, 191, 0.9); }
.tree-item.child.domain.active.blue { background: rgba(56, 189, 248, 0.15); }
.tree-item.child.domain.active.green { background: rgba(74, 222, 128, 0.15); }
.tree-item.child.domain.active.purple { background: rgba(var(--accent-rgb), 0.15); }
.tree-item.child.domain.active.orange { background: rgba(251, 146, 60, 0.15); }
.tree-item.child.domain.active.gray { background: rgba(156, 163, 175, 0.15); }
.tree-item.child.domain.active.pink { background: rgba(244, 114, 182, 0.15); }
.tree-item.child.domain.active.teal { background: rgba(45, 212, 191, 0.15); }
/* Areas under domain */
.tree-areas {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.tree-item.child.area {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  color: var(--os-text-secondary);
}
.tree-item.child.area:hover {
  color: var(--os-text-primary);
}
.tree-item.child.area.active {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}
.tree-item.child.area .tree-item-count {
  font-size: 0.5625rem;
  padding: 0 0.25rem;
}
/* Content area */
.planning-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  overscroll-behavior: contain;
}
.planning-content .planning-section {
  display: flex;
  flex-direction: column;
}
.planning-content .focus-section + .horizon-section {
  margin-top: 1.5rem;
}
.planning-content .task-list,
.planning-content .next-queue-tree,
.planning-content .suggestion-list {
  flex: 1;
  /* Don't add nested scroll - parent .planning-content handles scrolling */
}
/* Scrollbar for tree */
.planning-tree::-webkit-scrollbar {
  width: 6px;
}
.planning-tree::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.planning-tree::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
/* Scrollbar for planning content */
.planning-content::-webkit-scrollbar {
  width: 8px;
}
.planning-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.planning-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.planning-section {
  background: none;
  border: none;
  border-radius: 12px;
}
.planning-section .section-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.5rem;
  background: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.planning-section .section-header h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  flex: 1;
}
.planning-section .section-header .task-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.section-header-clickable {
  cursor: pointer;
  user-select: none;
}
.section-header-clickable:hover {
  background: rgba(255, 255, 255, 0.03);
}
.section-collapse-chevron {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.horizon-collapsed .section-header {
  border-bottom: none;
}
/* Section add button */
.section-add-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}
.section-add-btn:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
/* Section add form */
.section-add-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.section-add-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.section-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.section-add-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  outline: none;
  cursor: pointer;
}
.section-add-select:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.section-add-submit {
  padding: 0.5rem 1rem;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 6px;
  color: #4ade80;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.section-add-submit:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.25);
}
.section-add-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.section-add-cancel {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.section-add-cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
/* Today section - default white */
.planning-section.today .section-header h3 {
  color: var(--os-text-primary);
}
/* Tomorrow section - sunrise accent */
.planning-section.tomorrow {
  border-color: rgba(251, 191, 36, 0.2);
}
.planning-section.tomorrow .section-header {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.15);
}
.planning-section.tomorrow .section-header h3 {
  color: #fbbf24;
}
.planning-section.tomorrow .task-count {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
/* Week section */
.planning-section.week {
  border-color: rgba(156, 163, 175, 0.15);
}
.planning-section.week .section-header {
  background: rgba(156, 163, 175, 0.06);
}
.planning-section.week .section-header h3 {
  color: var(--os-text-secondary);
}
/* Next section - blue accent */
.planning-section.next {
  border-color: rgba(56, 189, 248, 0.2);
}
.planning-section.next .section-header {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.15);
}
.planning-section.next .section-header h3 {
  color: #38bdf8;
}
.planning-section.next .task-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}
/* Suggested section - purple/violet accent */
.planning-section.suggested {
  border-color: rgba(var(--accent-rgb), 0.2);
}
.planning-section.suggested .section-header {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.15);
}
.planning-section.suggested .section-header h3 {
  color: var(--accent);
}
.planning-section.suggested .task-count {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
/* Focus section inner — replaces the old planning-section wrapper */
.focus-section-inner {
  padding-left: 1.5rem;
  overflow: auto;
  min-height: 0;
}
/* Focus section - orange/amber accent (legacy) */
.planning-section.focus-section {
}
.planning-section.focus-section .section-header {
  border-bottom: none;
}
.planning-section.focus-section .section-header h3 {
  color: #fbbf24;
}
.planning-section.focus-section .task-count {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
/* Focus horizon context block */
.focus-horizon-context {
  margin: 0.5rem 0;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  overflow: hidden;
}
.focus-horizon-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--os-text-muted);
  transition: color 0.15s;
}
.focus-horizon-header:hover {
  color: var(--os-text-secondary);
}
.focus-horizon-header.expanded {
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}
.focus-horizon-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}
.focus-horizon-preview {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.focus-horizon-chevron {
  flex-shrink: 0;
  opacity: 0.4;
}
.focus-horizon-body {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.focus-horizon-section-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--accent-rgb), 0.5);
  margin-bottom: 0.25rem;
}
.focus-horizon-section .markdown-block {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--os-text-secondary);
}
.focus-horizon-section .markdown-block p {
  margin: 0.15rem 0;
}
.focus-horizon-section .markdown-block ul,
.focus-horizon-section .markdown-block ol {
  margin: 0.15rem 0;
  padding-left: 1.25rem;
}
.focus-horizon-section .markdown-block li {
  margin: 0.1rem 0;
}
.focus-horizon-section .markdown-block strong {
  color: var(--os-text-primary);
}
/* Focus subsections */
.focus-subsection {
  margin-top: 0.625rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.125rem 0;
  overflow: hidden;
}
.focus-subsection:first-of-type {
  margin-top: 0;
}
.focus-subsection-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0;
  background: none;
  border-radius: 0;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.focus-subsection-header .subsection-count {
  padding: 0.125rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
}
/* Today subsection - sun yellow tint */
.focus-subsection.today .focus-subsection-header {
  background: none;
  color: rgba(250, 204, 21, 0.9);
}
.focus-subsection.today .subsection-count {
  background: rgba(250, 204, 21, 0.15);
  color: rgba(250, 204, 21, 0.9);
}
/* Obligations subsection - warm amber tint */
.focus-subsection.obligations .focus-subsection-header {
  background: none;
  color: rgba(251, 146, 60, 0.9);
}
.focus-subsection.obligations .subsection-count {
  background: rgba(251, 146, 60, 0.15);
  color: rgba(251, 146, 60, 0.9);
}
/* Craft subsection - purple tint */
.focus-subsection.craft .focus-subsection-header {
  background: none;
  color: rgba(var(--accent-rgb), 0.9);
}
.focus-subsection.craft .subsection-count {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.9);
}
/* Obligation surfaces (calendar, email) */
.obligation-surface {
  margin-bottom: 0;
  padding: 0.15rem 0.75rem;
}
/* Calendar day groups */
.calendar-day-group + .calendar-day-group {
  margin-top: 0.5rem;
}
.calendar-day-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-hint);
  margin-bottom: 0.2rem;
  margin-top: 0.15rem;
  padding-left: 1.25rem;
}
/* Calendar events */
.calendar-event-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.75rem;
  font-size: 0.8125rem;
}
.calendar-event-icon {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(251, 146, 60, 0.5);
}
.calendar-event-title {
  flex: 1;
  color: var(--os-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.calendar-event-time-inline {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--os-text-hint);
}
.calendar-event-date {
  color: var(--os-text-hint);
}
.calendar-event-meet {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.1);
  color: rgba(56, 189, 248, 0.7);
}
.calendar-event-meet:hover {
  background: rgba(56, 189, 248, 0.2);
  color: rgba(56, 189, 248, 1);
}
/* Calendar header actions */
.calendar-header-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}
/* Calendar config dropdown */
.calendar-config-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
}
.calendar-config-dropdown {
  position: fixed;
  min-width: 200px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 0.5rem 0;
  z-index: 20001;
}
.calendar-config-title {
  padding: 0.375rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.calendar-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease;
}
.calendar-config-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.calendar-config-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  padding: 2px 6px;
  cursor: pointer;
}
.calendar-config-select option {
  background: #1e1e23;
  color: #e2e8f0;
}
/* Calendar events in Upcoming section */
.next-calendar-events {
  padding-bottom: 0.15rem;
  margin-bottom: 0;
}
.next-calendar-events .next-calendar-item {
  padding: 0.1rem 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  gap: 0.35rem;
}
.next-calendar-events .next-calendar-item .task-checkbox {
  color: rgba(251, 146, 60, 0.3);
}
.next-calendar-events .next-calendar-item .task-text {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.next-calendar-events .next-calendar-item .task-due-tag {
  font-size: 0.65rem;
  opacity: 0.6;
}
.next-calendar-events .next-calendar-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.next-calendar-events .next-calendar-item:hover .task-text {
  color: var(--os-text-muted);
}
/* Subsection header link button (e.g. "Backlog >") */
.subsection-link-btn {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: var(--os-text-hint);
  font-size: 0.6875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
  padding: 0;
}
.subsection-link-btn:hover,
.subsection-link-btn.active {
  color: var(--os-text-muted);
}
/* Upcoming divider inside cards */
.upcoming-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem 0.15rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-hint);
}
.upcoming-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
/* Backlog subsection */
.backlog-subsection {
  margin-top: 0.25rem;
}
.focus-backlog-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  margin: 0.35rem 0.5rem 0.25rem;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.focus-backlog-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.focus-backlog-btn .subsection-count {
  font-size: 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
/* Active Threads */
.threads-list {
  padding: 0.15rem 0.25rem;
}
.focus-thread-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem 0.4rem 1rem;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.focus-thread-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.focus-thread-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.focus-thread-pin {
  color: rgba(var(--accent-rgb), 0.6);
  flex-shrink: 0;
}
.focus-thread-name {
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.focus-thread-task-badge {
  color: rgba(74, 222, 128, 0.6);
  flex-shrink: 0;
  display: flex;
}
.focus-thread-area {
  font-size: 0.65rem;
  color: rgba(var(--accent-rgb), 0.7);
  padding: 0.1rem 0.4rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
/* Workbench Focus Cards */
.workbench-focus-list {
  padding: 0.25rem 0.4rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.workbench-focus-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.workbench-focus-card:hover {
  background: rgba(255, 255, 255, 0.06);
}
.workbench-focus-card-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}
.workbench-focus-card-icon.project {
  background: rgba(56, 189, 248, 0.1);
  color: rgba(56, 189, 248, 0.7);
}
.workbench-focus-card-icon.thread {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
}
.workbench-focus-card-icon.thread.active {
  background: rgba(251, 146, 60, 0.1);
  color: rgba(251, 146, 60, 0.7);
}
.workbench-focus-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}
.workbench-focus-card-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.workbench-focus-pin {
  color: rgba(var(--accent-rgb), 0.5);
  flex-shrink: 0;
}
.workbench-focus-card-desc {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.workbench-focus-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  color: var(--os-text-hint);
}
.workbench-focus-area-tag {
  color: rgba(var(--accent-rgb), 0.65);
}
.workbench-focus-status-active {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: rgba(251, 146, 60, 0.7);
}
.workbench-focus-card.active {
  background: rgba(251, 146, 60, 0.04);
}
.workbench-focus-card.active:hover {
  background: rgba(251, 146, 60, 0.08);
}
.workbench-focus-card.active .workbench-focus-card-name {
  color: var(--os-text-primary);
}
.workbench-focus-stop-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.workbench-focus-stop-btn:hover {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: rgba(251, 146, 60, 0.9);
}
.workbench-focus-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.25rem 0.75rem;
}
/* Workbench picker dropdown */
.workbench-add-wrapper {
  position: relative;
}
.workbench-picker-dropdown {
  position: fixed;
  z-index: 10000;
  min-width: 260px;
  max-height: 360px;
  overflow-y: auto;
  background: #1e1e2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 0.35rem 0;
  transform: translateX(-100%);
}
.workbench-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.workbench-picker-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}
.workbench-picker-item:disabled {
  opacity: 0.5;
  cursor: default;
}
.workbench-picker-item.active {
  color: rgba(251, 146, 60, 0.8);
}
.workbench-picker-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workbench-picker-project {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.workbench-picker-badge {
  font-size: 0.62rem;
  color: rgba(251, 146, 60, 0.7);
  background: rgba(251, 146, 60, 0.1);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.workbench-picker-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.25rem 0.5rem;
}
.workbench-picker-new {
  color: var(--os-text-muted);
}
.workbench-picker-new:hover {
  color: var(--os-text-secondary);
}
.workbench-picker-group-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.25rem;
}
.workbench-picker-item.indented {
  padding-left: 1.5rem;
}
.workbench-picker-empty {
  padding: 0.75rem;
  text-align: center;
  color: var(--os-text-hint);
  font-size: 0.75rem;
}
.workbench-active-count {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: rgba(251, 146, 60, 0.7);
  margin-left: 0.25rem;
}
.focus-project-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem 0.4rem 1rem;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.focus-project-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.focus-project-icon {
  color: rgba(56, 189, 248, 0.5);
  flex-shrink: 0;
}
.focus-project-threads-count {
  font-size: 0.6rem;
  color: var(--os-text-muted);
  padding: 0.05rem 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  flex-shrink: 0;
}
/* Active Work section */
.active-work-subsection {
  border: 1px solid rgba(251, 146, 60, 0.15);
  background: rgba(251, 146, 60, 0.04);
}
.active-work-subsection .focus-subsection-header {
  color: rgba(251, 146, 60, 0.8);
}
.active-work-list {
  padding: 0.25rem 0.5rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.active-work-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.active-work-card:hover {
  background: rgba(255, 255, 255, 0.07);
}
.active-work-card-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}
.active-work-card-icon-wrap {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(251, 146, 60, 0.1);
  color: rgba(251, 146, 60, 0.7);
}
.active-work-card-icon-wrap.task {
  background: rgba(74, 222, 128, 0.1);
  color: rgba(74, 222, 128, 0.7);
}
.active-work-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.active-work-card-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-work-card-context {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: var(--os-text-hint);
}
.active-work-card-context svg {
  opacity: 0.6;
}
.active-work-stop-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.active-work-stop-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  color: rgba(239, 68, 68, 0.85);
}
/* Thread active badge in workbench list */
.focus-thread-active-badge {
  color: rgba(251, 146, 60, 0.6);
  flex-shrink: 0;
}
/* Backlog dialog */
.backlog-dialog-overlay {
  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;
  display: flex;
  align-items: center;
  justify-content: center;
}
.backlog-dialog {
  width: 560px;
  max-height: 70vh;
  background: rgba(20, 20, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.backlog-dialog-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.backlog-dialog-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0;
}
.backlog-dialog-header svg {
  color: rgba(var(--accent-rgb), 0.7);
}
.backlog-dialog-count {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  font-weight: 500;
}
.backlog-dialog-add-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 6px;
  color: rgba(var(--accent-rgb), 0.9);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.backlog-dialog-add-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
}
.backlog-dialog-close {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.backlog-dialog-close:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}
.backlog-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}
.calendar-nl-dialog {
  width: 520px;
  max-width: min(92vw, 520px);
  background: rgba(18, 18, 24, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.calendar-nl-dialog-hint {
  font-size: 0.74rem;
  color: var(--os-text-muted);
}
.calendar-review-dialog {
  width: 520px;
  max-width: min(92vw, 520px);
  background: rgba(18, 18, 24, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.calendar-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.calendar-review-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.calendar-review-title svg {
  color: rgba(251, 146, 60, 0.92);
}
.calendar-review-title h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.calendar-review-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem 0.7rem;
}
.calendar-review-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.calendar-review-field > span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.calendar-review-field .task-edit-input,
.calendar-review-field .task-edit-select {
  font-family: inherit;
  font-size: 0.9rem;
}
.calendar-review-who-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.calendar-review-who-row .task-edit-input {
  flex: 1;
}
.calendar-review-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0.45rem 0.68rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.calendar-review-link-btn:hover {
  background: rgba(255, 255, 255, 0.11);
}
.calendar-review-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--os-text-secondary);
  user-select: none;
  cursor: pointer;
}
.calendar-review-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  border-radius: 4px;
  border: 1px solid rgba(251, 146, 60, 0.48);
  background: rgba(255, 255, 255, 0.04);
  display: inline-grid;
  place-content: center;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.calendar-review-checkbox input::before {
  content: '';
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform 0.12s ease;
  clip-path: polygon(14% 44%, 0 58%, 46% 100%, 100% 24%, 84% 8%, 44% 64%);
  background: rgba(18, 18, 24, 0.98);
}
.calendar-review-checkbox input:hover {
  border-color: rgba(251, 146, 60, 0.72);
}
.calendar-review-checkbox input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.22);
}
.calendar-review-checkbox input:checked {
  border-color: rgba(251, 146, 60, 0.9);
  background: rgba(251, 146, 60, 0.95);
}
.calendar-review-checkbox input:checked::before {
  transform: scale(1);
}
.calendar-review-datetime-wrap {
  position: relative;
}
.calendar-review-datetime-wrap .task-edit-input[type="date"],
.calendar-review-datetime-wrap .task-edit-input[type="datetime-local"],
.calendar-review-datetime-wrap .task-edit-input[type="time"] {
  color-scheme: dark;
  padding-right: 2.15rem;
}
.calendar-review-datetime-icon {
  position: absolute;
  right: 0.68rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--os-text-secondary);
  pointer-events: none;
}
.calendar-review-datetime-wrap .task-edit-input[type="date"]::-webkit-calendar-picker-indicator,
.calendar-review-datetime-wrap .task-edit-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.calendar-review-datetime-wrap .task-edit-input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  top: 0;
  width: 2.2rem;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.calendar-review-datetime-wrap .task-edit-input[type="date"]::-webkit-inner-spin-button,
.calendar-review-datetime-wrap .task-edit-input[type="datetime-local"]::-webkit-inner-spin-button,
.calendar-review-datetime-wrap .task-edit-input[type="time"]::-webkit-inner-spin-button {
  display: none;
}
.calendar-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.calendar-review-error {
  color: rgba(248, 113, 113, 0.95);
  font-size: 0.73rem;
}
.calendar-review-auth-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.2rem;
}
.calendar-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.72rem 0.9rem 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.calendar-review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.45rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.calendar-review-btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}
.calendar-review-btn.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.11);
}
.calendar-review-btn.primary {
  background: rgba(251, 146, 60, 0.18);
  border-color: rgba(251, 146, 60, 0.36);
  color: rgba(251, 146, 60, 0.95);
}
.calendar-review-btn.primary:hover:not(:disabled) {
  background: rgba(251, 146, 60, 0.28);
}
.calendar-review-btn:disabled {
  opacity: 0.56;
  cursor: default;
}
/* Textarea for natural language input */
.calendar-nl-textarea {
  resize: vertical;
  min-height: 60px;
  max-height: 160px;
  line-height: 1.45;
  font-family: inherit;
}
/* Multi-event review dialog */
.calendar-multi-review-dialog {
  width: 560px;
  max-width: min(92vw, 560px);
  background: rgba(18, 18, 24, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.calendar-multi-review-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 380px;
  overflow-y: auto;
  padding: 0.5rem 0.65rem;
}
.calendar-multi-review-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: opacity 0.15s ease, background 0.15s ease;
}
.calendar-multi-review-item.removed {
  opacity: 0.35;
  background: rgba(255, 255, 255, 0.02);
}
.calendar-multi-review-item.removed .calendar-multi-review-item-title {
  text-decoration: line-through;
}
.calendar-multi-review-item.errored {
  border-color: rgba(248, 113, 113, 0.4);
}
.calendar-multi-review-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.calendar-multi-review-item-info {
  flex: 1;
  min-width: 0;
}
.calendar-multi-review-item-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--os-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-multi-review-item-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--os-text-muted);
  margin-top: 0.15rem;
}
.calendar-multi-review-who {
  color: var(--os-text-muted);
}
.calendar-multi-review-item-account {
  font-size: 0.68rem;
  color: rgba(251, 146, 60, 0.7);
  margin-top: 0.1rem;
}
.calendar-multi-review-item-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}
.calendar-multi-review-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.calendar-multi-review-action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.calendar-multi-review-action-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.backlog-dialog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--os-text-hint);
}
.backlog-dialog-empty p {
  margin: 0;
  font-size: 0.85rem;
}
/* Email surface */
.email-surface-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  margin-bottom: 0.25rem;
}
.email-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  overflow: hidden;
}
.email-item + .email-item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.email-from {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--os-text-secondary);
  white-space: nowrap;
}
.email-subject {
  color: var(--os-text-muted);
}
.email-mark-all-read {
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.15s;
}
.email-mark-all-read:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}
.email-mark-all-read.loading {
  opacity: 0.7;
  cursor: wait;
}
.email-mark-all-read:disabled {
  pointer-events: none;
}
.email-mark-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: email-spin 0.6s linear infinite;
}
@keyframes email-spin {
  to { transform: rotate(360deg); }
}
.email-skip-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 0.5);
  cursor: pointer;
  transition: all 0.15s;
}
.email-skip-btn:hover {
  color: rgba(74, 222, 128, 0.9);
  background: rgba(74, 222, 128, 0.15);
}
.email-skip-btn.skipped {
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.25);
  color: rgba(251, 146, 60, 0.8);
}
.email-skip-btn.skipped:hover {
  background: rgba(251, 146, 60, 0.2);
}
.email-item.email-skipped {
  opacity: 0.45;
}
.email-item.email-skipped .email-from,
.email-item.email-skipped .email-subject {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.15);
}
.email-track-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--os-text-hint);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
  margin-left: auto;
}
.email-item:hover .email-track-btn {
  opacity: 1;
}
.email-track-btn:hover {
  color: rgba(251, 146, 60, 0.9);
  background: rgba(251, 146, 60, 0.1);
  border-color: rgba(251, 146, 60, 0.2);
}
.email-surface.email-empty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
}
.email-more {
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  padding-top: 0.25rem;
  text-align: center;
}
/* Next subsection - blue tint */
.focus-subsection.next .focus-subsection-header {
  background: none;
  color: rgba(56, 189, 248, 0.9);
}
.focus-subsection.next .subsection-count {
  background: rgba(56, 189, 248, 0.15);
  color: rgba(56, 189, 248, 0.9);
}
/* Calendar subsection - amber tint */
.focus-subsection.calendar-subsection .focus-subsection-header {
  background: none;
  color: rgba(251, 146, 60, 0.9);
}
.focus-subsection.calendar-subsection .subsection-count {
  background: rgba(251, 146, 60, 0.15);
  color: rgba(251, 146, 60, 0.9);
}
/* Google disconnected banner */
.google-disconnected-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(251, 146, 60, 0.85);
  background: rgba(251, 146, 60, 0.06);
  border-radius: 8px;
  border: 1px solid rgba(251, 146, 60, 0.15);
}
.google-disconnected-banner span {
  flex: 1;
  word-break: break-word;
}
.google-dismiss-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.google-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
.google-expired-accounts {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.google-expired-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  background: rgba(251, 146, 60, 0.03);
  border-radius: 6px;
}
.google-expired-account-name {
  color: var(--os-text-secondary);
  text-transform: capitalize;
}
.google-reconnect-btn {
  margin-left: auto;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 5px;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.2);
  color: rgba(251, 146, 60, 0.85);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.google-reconnect-btn:hover {
  background: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.35);
}
/* Account badge — personal/work indicator on calendar events and emails */
.account-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
}
.account-badge.account-personal {
  background: rgba(56, 189, 248, 0.15);
  color: rgba(56, 189, 248, 0.7);
}
.account-badge.account-work {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.7);
}
/* Email subsection - green tint, collapsible */
.focus-subsection.email-subsection .focus-subsection-header {
  background: none;
  color: rgba(74, 222, 128, 0.9);
}
.email-toggle-header {
  cursor: pointer;
}
.email-collapse-chevron {
  margin-left: auto;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.15s;
  transform: rotate(-90deg);
}
.email-collapse-chevron.expanded {
  transform: rotate(0deg);
}
.email-toggle-header:hover .email-collapse-chevron {
  opacity: 0.8;
}
/* Upcoming subsection - muted blue tint */
.focus-subsection.upcoming-subsection .focus-subsection-header {
  background: none;
  color: rgba(148, 163, 184, 0.9);
}
.focus-subsection.upcoming-subsection .subsection-count {
  background: rgba(148, 163, 184, 0.12);
  color: rgba(148, 163, 184, 0.9);
}
/* Section loading skeletons */
.section-skeleton {
  padding: 0.25rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-line-long {
  flex: 1;
}
.skeleton-line-medium {
  width: 80px;
}
.skeleton-line-short {
  width: 50px;
}
.skeleton-line-icon {
  width: 16px;
  height: 10px;
  border-radius: 50%;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
/* Subsection collapse chevron */
.subsection-chevron {
  margin-left: auto;
  opacity: 0.4;
  transition: opacity 0.15s;
}
/* When mark-all-read button is present, chevron doesn't need auto margin */
.email-mark-all-read + .subsection-chevron,
.email-mark-all-read + .email-collapse-chevron {
  margin-left: 0.35rem;
}
.focus-subsection-header:hover .subsection-chevron {
  opacity: 0.7;
}
/* This Week subsection - gray/muted tint */
.focus-subsection.this-week .focus-subsection-header {
  background: none;
  color: rgba(156, 163, 175, 0.9);
}
.this-week-content {
  padding: 0 0.75rem 0.75rem;
}
.this-week-content .markdown-block {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}
.this-week-content .markdown-block strong {
  color: var(--os-text-primary);
}
.this-week-content .markdown-block ul,
.this-week-content .markdown-block ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}
.this-week-content .markdown-block li {
  margin: 0.25rem 0;
}
.this-week-content .markdown-block p {
  margin: 0.5rem 0;
}
.this-week-content .markdown-block p:first-child {
  margin-top: 0;
}
.this-week-content .markdown-block em {
  color: var(--os-text-muted);
  font-style: italic;
}
/* This Week edit button */
.subsection-edit-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0;
}
.focus-subsection-header:hover .subsection-edit-btn {
  opacity: 1;
}
.subsection-edit-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.subsection-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.subsection-add-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-secondary);
}
.subsection-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0;
}
.focus-subsection-header:hover .subsection-open-btn {
  opacity: 1;
}
.subsection-open-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
}
/* ===== Today Layout ===== */
/* ===== Today Layout — flex with sidebar ===== */
.today-grid {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-height: 0;
}
.today-main {
  flex: 1 1 0;
  min-width: 250px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.today-main-tabs-row {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  min-height: 32px;
  margin-top: 0.625rem;
}
.today-main-tabs-row.hidden {
  display: none;
}
.today-main-tabs-row-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.tabs-row-today-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 7px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.1);
  color: rgba(56, 189, 248, 0.9);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tabs-row-today-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  color: rgba(56, 189, 248, 1);
  border-color: rgba(56, 189, 248, 0.5);
}
.tabs-row-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 16, 30, 0.82);
  backdrop-filter: blur(6px);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.tabs-row-refresh-btn:hover:not(:disabled) {
  color: var(--os-text-secondary);
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
}
.tabs-row-refresh-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.tabs-row-refresh-btn.refreshing svg {
  animation: spin 0.8s linear infinite;
}
/* (today-main-tab styles removed — tabs now in header .ops-nav-tabs) */
.today-log-panel {
  min-height: 0;
  border: none;
  border-radius: 0;
  background: none;
  overflow: hidden;
}
.planning-content.today-scroll-layout .today-log-panel .log-view,
.planning-content.today-scroll-layout .today-log-panel .log-days-container {
  overflow: visible;
}
.today-sidebar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 200px;
  max-width: 500px;
  position: relative;
  overflow-y: visible;
  overflow-x: hidden;
  align-self: flex-start;
}
/* Today view: keep right pane fixed, scroll center column only */
.planning-content.today-scroll-layout {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding-top: 0;
}
.planning-content.today-scroll-layout .today-grid {
  flex: 1;
  min-height: 0;
  height: 100%;
  align-items: stretch;
  overflow: hidden;
}
.planning-content.today-scroll-layout .today-main {
  flex: 1 1 auto;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 0.35rem;
  padding-bottom: 1rem;
  min-height: 0;
  min-width: 0;
  max-height: none;
}
.planning-content.today-scroll-layout .planning-section {
  flex: 0 0 auto;
  min-height: auto;
}
/* Constrain sidebar within scroll layout so it doesn't overflow */
.planning-content.today-scroll-layout .today-sidebar {
  max-height: 100%;
  overflow-y: auto;
  align-self: stretch;
}
.planning-content.today-scroll-layout .today-main::-webkit-scrollbar {
  width: 8px;
}
.planning-content.today-scroll-layout .today-main::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.planning-content.today-scroll-layout .today-main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.sidebar-resize-handle {
  width: 8px;
  flex-shrink: 0;
  align-self: stretch;
  cursor: col-resize;
  position: relative;
  z-index: 20;
}
.sidebar-resize-handle::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
}
.sidebar-resize-handle:hover::after,
.sidebar-resize-handle:active::after {
  background: rgba(56, 189, 248, 0.5);
}
.today-sidebar.collapsed {
  width: auto;
  min-width: 0;
}
.tabs-row-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 16, 30, 0.82);
  backdrop-filter: blur(6px);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.tabs-row-collapse-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.today-sidebar .mini-cal {
  width: 100%;
  margin-top: 0.75rem;
  padding-top: 0.2rem;
}
.today-sidebar .mini-cal-header {
  margin-bottom: 0.5rem;
}
/* Compact horizon (day plan in sidebar) */
.horizon-compact {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  overflow: hidden;
}
.horizon-compact .section-header {
  padding: 0.35rem 0.65rem;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
}
.horizon-compact.horizon-collapsed .section-header {
  border-bottom: none;
}
.horizon-compact .section-header h3 {
  font-size: 0.7rem;
  color: rgba(56, 189, 248, 0.7);
}
.horizon-compact .horizon-header-actions {
  gap: 0.2rem;
}
.horizon-compact .horizon-action-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}
.horizon-compact .horizon-content {
  padding: 0;
}
.horizon-compact .editable-markdown-block {
  font-size: 0.8rem;
}
.horizon-compact .editable-markdown-edit-mode {
  padding: 0.25rem 0.5rem;
}
.horizon-compact .editable-markdown-editor-wrapper {
  border: none !important;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.horizon-compact .horizon-content .editable-markdown-block {
  min-height: 150px;
}
/* Journal/Log panel */
.planning-section.journal-section .section-header h3 {
  color: rgba(var(--accent-rgb), 0.75);
}
.planning-section.log-section .section-header h3 {
  color: rgba(45, 212, 191, 0.82);
}
.section-date-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(56, 189, 248, 0.7);
  background: rgba(56, 189, 248, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.today-journal-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.today-journal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.15rem;
}
/* Process button (visible in toolbar) */
.journal-toolbar-process-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 28px;
  padding: 0 0.6rem;
  border-radius: 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.08);
  color: rgba(var(--accent-rgb), 0.8);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.journal-toolbar-process-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: rgba(var(--accent-rgb), 1);
}
.journal-toolbar-process-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.journal-toolbar-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 16, 30, 0.82);
  backdrop-filter: blur(6px);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.journal-toolbar-menu-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
/* Journal options popover (portal) */
.journal-options-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.journal-options-popover {
  position: fixed;
  transform: translateX(-100%);
  min-width: 170px;
  background: rgba(16, 20, 32, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.journal-options-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--os-text-secondary);
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}
.journal-options-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.journal-options-item:disabled {
  opacity: 0.35;
  cursor: default;
}
.journal-options-item .spinning {
  animation: spin 1s linear infinite;
}
.journal-options-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 3px 8px;
}
.today-journal-action-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(10, 14, 24, 0.35);
}
.today-journal-action-group--mode {
  padding: 0.12rem;
  background: rgba(255, 255, 255, 0.05);
}
.today-journal-action-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 28px;
  padding: 0 0.58rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.15s ease;
}
.today-journal-action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}
.today-journal-action-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.today-journal-action-btn.organize-btn {
  color: rgba(196, 181, 253, 0.9);
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.12);
}
.today-journal-action-btn.organize-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(237, 233, 254, 0.98);
  border-color: rgba(var(--accent-rgb), 0.42);
}
.today-journal-action-btn.organize-btn .spinning {
  animation: spin 1s linear infinite;
}
.today-journal-actions .notebook-mode-toggle {
  background: transparent;
  border: none;
  border-radius: 8px;
  overflow: visible;
}
.today-journal-actions .notebook-mode-btn {
  width: 30px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.03);
}
.today-journal-actions .notebook-mode-btn:hover {
  color: var(--os-text-primary);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}
.today-journal-actions .notebook-mode-btn.active {
  color: rgba(221, 214, 254, 0.95);
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.18);
}
/* Today section shells */
.planning-content .planning-section.focus-section,
.planning-content .planning-section.journal-section,
.planning-content .planning-section.log-section {
  display: grid;
  grid-template-rows: auto 1fr;
}
.focus-section .section-collapsible,
.journal-section .section-collapsible,
.log-section .section-collapsible {
  overflow: hidden;
  min-height: 0;
  padding-left: 1.5rem;
}
.planning-content.today-scroll-layout .planning-section.focus-section,
.planning-content.today-scroll-layout .planning-section.journal-section,
.planning-content.today-scroll-layout .planning-section.log-section {
  grid-template-rows: auto auto;
}
.planning-content.today-scroll-layout .planning-section .section-collapsible {
  overflow: visible;
}
.today-journal-editor {
  padding: 0;
}
.today-journal-editor .editable-markdown-edit-mode {
  padding: 0;
}
.today-journal-editor .editable-markdown-editor-wrapper {
  border-radius: 8px;
  background: none;
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}
.journal-stream {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.journal-feed {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}
.journal-day-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.25rem 0;
  margin-top: 0.2rem;
}
.journal-day-section.history {
  background: rgba(255, 255, 255, 0.015);
}
.journal-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}
.journal-day-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.journal-day-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--os-text-primary);
}
.journal-day-sub {
  font-size: 0.67rem;
  color: var(--os-text-muted);
}
.journal-day-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.journal-day-count {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
  color: rgba(221, 214, 254, 0.9);
  font-size: 0.64rem;
  font-weight: 600;
}
/* Empty journal state */
.journal-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem 8rem;
  text-align: center;
  opacity: 0;
  animation: journalEmptyFadeIn 1s ease 0.15s forwards;
}
@keyframes journalEmptyFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.journal-empty-icon {
  color: rgba(var(--accent-rgb), 0.2);
  margin-bottom: 1rem;
}
.journal-empty-text {
  color: var(--os-text-hint);
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  letter-spacing: 0.02em;
}
.journal-empty-hint {
  color: var(--os-text-hint);
  font-size: 0.72rem;
  margin: 0;
}
.journal-open-day-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-secondary);
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
}
.journal-open-day-btn:hover {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.1);
}
.journal-processed-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(74, 222, 128, 0.26);
  border-radius: 6px;
  background: rgba(74, 222, 128, 0.08);
  color: rgba(74, 222, 128, 0.86);
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.14rem 0.38rem;
  cursor: pointer;
}
.journal-processed-chip:hover {
  background: rgba(74, 222, 128, 0.16);
  color: rgba(134, 239, 172, 0.96);
}
.journal-processed-chip.active {
  background: rgba(74, 222, 128, 0.22);
  border-color: rgba(74, 222, 128, 0.45);
  color: rgba(187, 247, 208, 0.97);
}
.journal-day-processed-note,
.journal-day-empty-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  padding: 0.3rem 0.42rem;
  border-radius: 7px;
}
.journal-day-processed-note {
  color: rgba(134, 239, 172, 0.92);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.journal-day-empty-note {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.14);
}
.journal-composer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  position: relative;
  transition: all 0.15s ease;
}
.journal-composer.expanded {
  flex-direction: column;
  align-items: stretch;
}
.journal-composer-editor {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.journal-composer-editor .editable-markdown-edit-mode {
  padding: 0;
  gap: 0;
}
.journal-composer-editor .editable-markdown-editor-wrapper {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  outline: none !important;
}
.journal-composer-editor .editable-markdown-editor-wrapper:focus-within {
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  background: rgba(var(--accent-rgb), 0.06);
}
/* Collapsed: single-line pill input feel */
.journal-composer.collapsed .journal-composer-editor .editable-markdown-editor-wrapper {
  border-radius: 20px;
  padding: 0.35rem 2.4rem 0.35rem 0.75rem !important;
}
.journal-composer.collapsed .journal-composer-editor .cm-content {
  min-height: 20px !important;
}
.journal-composer.collapsed .journal-composer-editor .cm-editor {
  outline: none !important;
  box-shadow: none !important;
}
.journal-composer.collapsed .journal-composer-editor .cm-scroller {
  display: flex;
  align-items: center;
}
.journal-composer.collapsed .journal-composer-editor .cm-focused {
  outline: none !important;
  box-shadow: none !important;
}
.journal-composer.collapsed .journal-composer-submit {
  border-radius: 50%;
  min-width: auto;
  width: 26px;
  height: 26px;
  padding: 0;
}
.journal-composer.collapsed .journal-composer-submit-inside {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
  z-index: 2;
  min-width: auto;
  flex-shrink: 0;
  background: rgba(var(--accent-rgb), 0.2);
  border: none;
  pointer-events: auto;
}
.journal-composer.collapsed .journal-composer-submit span {
  display: none;
}
/* Expanded: full editor */
.journal-composer.expanded .journal-composer-editor .cm-content {
  min-height: 96px !important;
}
.journal-composer-input {
  flex: 1;
  min-height: 56px;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--os-text-primary);
  font-size: 0.8rem;
  line-height: 1.4;
  resize: vertical;
}
.journal-composer-input::placeholder {
  color: var(--os-text-hint);
}
.journal-composer-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}
.journal-composer-submit {
  flex-shrink: 0;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.22);
  color: rgba(221, 214, 254, 0.95);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 70px;
}
.journal-composer-submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.28);
  border-color: rgba(var(--accent-rgb), 0.55);
}
.journal-composer-submit:disabled {
  opacity: 0.45;
  cursor: default;
}
.journal-stream-empty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  color: var(--os-text-hint);
  font-size: 0.78rem;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}
.journal-stream-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.journal-stream-more:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.journal-stream-more.collapse {
  align-self: flex-end;
}
.journal-load-more-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 7px;
  background: rgba(56, 189, 248, 0.11);
  color: rgba(125, 211, 252, 0.95);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
}
.journal-load-more-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.2);
}
.journal-load-more-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.journal-history-status {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
}
.journal-history-status.done {
  color: rgba(74, 222, 128, 0.88);
  background: rgba(74, 222, 128, 0.1);
}
.journal-history-status.error {
  color: rgba(248, 113, 113, 0.92);
  background: rgba(248, 113, 113, 0.1);
}
.journal-infinite-toggle {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--os-text-muted);
  font-size: 0.68rem;
}
.journal-infinite-toggle input {
  accent-color: rgba(56, 189, 248, 0.9);
}
.journal-feed-sentinel {
  width: 100%;
  height: 2px;
}
.journal-entry-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.journal-time-group {
  padding: 0;
}
.journal-time-group-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(var(--accent-rgb), 0.82);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.15rem 0.15rem;
}
.journal-time-group-label {
  letter-spacing: 0.01em;
}
.journal-time-group-count {
  margin-left: auto;
  color: var(--os-text-secondary);
  font-size: 0.66rem;
  padding: 0.08rem 0.36rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.12);
}
.journal-time-group-entries {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}
.journal-time-group-entries .journal-entry-card {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.journal-time-group-entries .journal-entry-card:last-child {
  border-bottom: none;
}
.journal-time-group-entries .journal-entry-meta {
  justify-content: flex-end;
  margin-bottom: 0.15rem;
}
.journal-entry-card {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.journal-entry-card:last-child {
  border-bottom: none;
}
.journal-entry-card.same-time {
  padding-top: 0.3rem;
}
.journal-entry-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(var(--accent-rgb), 0.78);
  font-size: 0.65rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.journal-entry-time-continued {
  color: rgba(var(--accent-rgb), 0.42);
  font-weight: 500;
  font-style: italic;
}
.journal-entry-kind-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.36rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.journal-entry-kind-badge.log {
  color: rgba(56, 189, 248, 0.88);
  border-color: rgba(56, 189, 248, 0.28);
  background: rgba(56, 189, 248, 0.12);
}
.journal-entry-kind-badge.events {
  color: rgba(245, 158, 11, 0.9);
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.12);
}
.journal-entry-kind-badge.completed {
  color: rgba(16, 185, 129, 0.9);
  border-color: rgba(16, 185, 129, 0.34);
  background: rgba(16, 185, 129, 0.13);
}
.journal-entry-body {
  color: var(--os-text-secondary);
  font-size: 0.74rem;
  line-height: 1.4;
  user-select: none;
  -webkit-user-select: none;
}
.journal-entry-body p,
.journal-entry-body div,
.journal-entry-body span,
.journal-entry-body .markdown-text {
  margin: 0;
  font-size: 0.74rem !important;
  line-height: 1.4 !important;
  color: var(--os-text-secondary);
}
.journal-entry-body ol,
.journal-entry-body ul {
  margin: 0.3rem 0;
  padding-left: 1.5rem;
}
.journal-entry-body li {
  margin: 0.15rem 0;
}
.journal-entry-body li p {
  margin: 0;
}
.journal-entry-body blockquote {
  margin: 0.3rem 0;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  color: var(--os-text-secondary);
}
.journal-entry-body h1,
.journal-entry-body h2,
.journal-entry-body h3 {
  margin: 0.4rem 0 0.2rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.journal-entry-body pre {
  margin: 0.3rem 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  overflow-x: auto;
}
.journal-entry-body code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9em;
}
.journal-entry-edit-btn {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.12s ease;
}
.journal-entry-card:hover .journal-entry-edit-btn {
  display: flex;
}
.journal-entry-edit-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}
.journal-entry-body-clickable {
  cursor: text;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.journal-entry-body-clickable:hover {
  background: rgba(255, 255, 255, 0.03);
}
.journal-entry-body-static {
  cursor: default;
}
.journal-entry-card.commit .journal-entry-meta {
  color: var(--accent);
}
.journal-entry-card.commit {
  padding: 0.35rem 0.75rem;
}
.journal-commit-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.journal-commit-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  line-height: 1.35;
}
.journal-commit-area {
  flex-shrink: 0;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 4.5em;
}
.journal-commit-msg {
  font-size: 0.66rem;
  color: var(--os-text-secondary);
}
.journal-entry-card.commit .journal-entry-body,
.journal-entry-card.commit .journal-entry-body p,
.journal-entry-card.commit .journal-entry-body div,
.journal-entry-card.commit .journal-entry-body span,
.journal-entry-card.commit .journal-entry-body .markdown-text {
  color: var(--os-text-secondary);
}
.journal-entry-card.commit .journal-commit-group,
.journal-entry-card.commit .journal-entry-body {
  font-size: 0.65rem;
  line-height: 1.35;
}
.journal-filter-bar {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem 0.25rem;
}
.journal-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--os-text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.journal-filter-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}
.journal-filter-pill.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
}
.journal-filter-count {
  opacity: 0.55;
  font-size: 0.6rem;
}
/* Log entry context menu */
.log-context-menu {
  position: fixed;
  z-index: 9999;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.log-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}
.log-context-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.log-context-menu button.destructive {
  color: #f87171;
}
.log-context-menu button.destructive:hover {
  background: rgba(248, 113, 113, 0.15);
}
/* Hide composer cursor when editing an entry */
.journal-stream.editing-entry .journal-composer .cm-editor .cm-cursorLayer {
  opacity: 0 !important;
}
.journal-stream.editing-entry .journal-composer .cm-editor .cm-selectionLayer {
  opacity: 0 !important;
}
.journal-entry-edit-area {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
/* Compact EditableMarkdownBlock for inline journal entry editing */
.journal-entry-editor-compact .editable-markdown-edit-mode {
  padding: 0 !important;
  gap: 0.15rem !important;
}
.journal-entry-editor-compact .editable-markdown-editor-wrapper {
  border-radius: 6px !important;
  border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
  background: rgba(var(--accent-rgb), 0.06) !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.journal-entry-editor-compact .editable-markdown-editor-wrapper:focus-within {
  border-color: rgba(var(--accent-rgb), 0.5) !important;
}
.journal-entry-editor-compact .cm-editor {
  min-height: 0 !important;
  max-height: none;
}
.journal-entry-editor-compact .cm-editor .cm-scroller {
  min-height: 0 !important;
  font-family: inherit !important;
}
.journal-entry-editor-compact .cm-editor .cm-content {
  padding: 0.5rem 0.6rem !important;
  min-height: 0 !important;
  font-family: inherit !important;
}
.journal-entry-editor-compact .cm-editor .cm-line {
  font-family: inherit !important;
}
.journal-entry-editor-compact .editable-markdown-actions {
  justify-content: flex-end;
  gap: 0.3rem;
  padding: 0;
}
.journal-entry-editor-compact .editable-markdown-actions button {
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
}
.journal-entry-editor-compact .editable-markdown-hint {
  display: none !important;
}
.journal-entry-edit-input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--os-text-primary);
  font-size: 0.8rem;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  overflow: hidden;
}
.journal-entry-edit-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.journal-entry-edit-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}
.journal-entry-edit-actions button {
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-secondary);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.journal-entry-edit-actions button:first-child {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(196, 181, 253, 0.95);
}
.journal-entry-edit-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.journal-entry-processed-badge {
  color: rgba(74, 222, 128, 0.6);
  margin-left: auto;
  display: flex;
  align-items: center;
}
.journal-processed-content.history {
  max-height: 180px;
  overflow-y: auto;
}
/* Activity Log — merged into Journal tab */
.journal-activity-log {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.5rem;
}
.journal-activity-log-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.25rem;
  cursor: pointer;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
  border-radius: 6px;
  transition: color 0.15s ease;
}
.journal-activity-log-header:hover {
  color: var(--os-text-secondary);
}
.journal-activity-log-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  font-size: 0.6rem;
  padding: 0.05rem 0.4rem;
  border-radius: 8px;
  font-weight: 700;
}
.journal-activity-log-chevron {
  margin-left: auto;
  opacity: 0.5;
}
.journal-activity-log-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.25rem;
}
.journal-activity-log-body .log-composer {
  opacity: 0.85;
}
.journal-activity-log-body .log-composer .journal-composer-editor {
  font-size: 0.75rem;
}
.journal-activity-log-body .log-entry-list {
  gap: 0.2rem;
}
.journal-activity-log-body .log-entry-list .journal-entry-card {
  padding: 0.3rem 0.4rem;
}
.journal-activity-log-body .log-entry-list .journal-entry-meta {
  gap: 0.3rem;
}
@media (max-width: 980px) {
  .today-journal-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}
/* This Week display - clickable */
.this-week-display {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.this-week-display:hover {
  background: rgba(255, 255, 255, 0.03);
}
/* This Week editor */
.this-week-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.this-week-textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.6;
  resize: vertical;
}
.this-week-textarea:focus {
  outline: none;
  border-color: rgba(156, 163, 175, 0.5);
}
.this-week-textarea::placeholder {
  color: var(--os-text-hint);
}
.this-week-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.this-week-hint {
  flex: 1;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.this-week-cancel,
.this-week-save {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.this-week-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--os-text-muted);
}
.this-week-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
}
.this-week-save {
  background: rgba(156, 163, 175, 0.2);
  border: 1px solid rgba(156, 163, 175, 0.3);
  color: var(--os-text-primary);
}
.this-week-save:hover {
  background: rgba(156, 163, 175, 0.3);
}
/* ==================== */
/* Horizon Views        */
/* ==================== */
.horizon-section .section-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.horizon-section .section-header h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
/* Period navigation arrows */
.horizon-period-nav {
  display: flex;
  gap: 0.25rem;
}
.horizon-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Period navigation — grouped pill */
.horizon-period-nav {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.horizon-period-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--os-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
}
.horizon-period-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}
.horizon-period-btn.horizon-period-today {
  width: auto;
  padding: 0 0.55rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(250, 204, 21, 0.75);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.horizon-period-btn.horizon-period-today:hover {
  color: rgba(250, 204, 21, 1);
  background: rgba(250, 204, 21, 0.1);
}
.horizon-period-btn.horizon-period-today.current {
  color: var(--os-text-hint);
  cursor: default;
}
.horizon-period-btn.horizon-period-today.current:hover {
  background: transparent;
  color: var(--os-text-hint);
}
/* Action icon buttons */
.horizon-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
}
.horizon-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.12);
}
.horizon-action-btn:disabled,
.horizon-action-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.horizon-action-btn.horizon-context-toggle.active {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.25);
}
/* Legacy — keep for compat but unused */
.horizon-rollover-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 26px;
  padding: 0 0.55rem;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.12);
  color: rgba(125, 211, 252, 0.95);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.horizon-rollover-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.45);
  color: rgba(186, 230, 253, 1);
}
.horizon-rollover-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.horizon-rollover-btn.compact {
  width: 26px;
  padding: 0;
  justify-content: center;
}
.horizon-day-today-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  padding: 0 0.55rem;
  color: rgba(250, 204, 21, 0.95);
}
.horizon-day-today-btn:hover {
  color: rgba(250, 204, 21, 1);
  background: rgba(250, 204, 21, 0.12);
}
.horizon-day-today-btn.current {
  color: var(--os-text-hint);
}
.horizon-day-today-btn.current:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-hint);
}
.horizon-day-today-btn.compact {
  width: 26px;
  padding: 0;
  justify-content: center;
}
/* Quarter accent - amber */
.horizon-quarter .section-header {
  background: rgba(251, 191, 36, 0.06);
}
.horizon-quarter .section-header h3 { color: rgba(251, 191, 36, 0.9); }
/* Month accent - blue */
.horizon-month .section-header {
  background: rgba(56, 189, 248, 0.06);
}
.horizon-month .section-header h3 { color: rgba(56, 189, 248, 0.9); }
/* Week accent - gray */
.horizon-week .section-header {
  background: rgba(156, 163, 175, 0.06);
}
.horizon-week .section-header h3 { color: rgba(156, 163, 175, 0.9); }
/* Strategy Context */
.strategy-context-section .section-header {
  background: rgba(250, 204, 21, 0.06);
}
.strategy-context-section .section-header h3 {
  color: rgba(250, 204, 21, 0.9);
}
.strategy-context-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.strategy-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 1rem;
}
.strategy-block h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.strategy-block .markdown-block {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}
.strategy-block .markdown-block p {
  margin: 0.25rem 0;
}
.strategy-block .markdown-block ul,
.strategy-block .markdown-block ol {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}
.strategy-block .markdown-block li {
  margin: 0.2rem 0;
}
.strategy-context-with-toc {
  display: flex;
  gap: 0;
  min-height: 0;
}
.strategy-context-with-toc .strategy-context-body {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}
.strategy-toc {
  width: 200px;
  min-width: 200px;
  padding: 1rem 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  overflow-y: auto;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 200px);
}
.strategy-toc-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--os-text-hint);
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}
.strategy-toc-list,
.strategy-toc-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.strategy-toc-children {
  padding-left: 0.125rem;
  margin-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.strategy-toc-item {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--os-text-muted);
  padding: 0.2rem 0.25rem 0.2rem 0.25rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.strategy-toc-item:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}
.strategy-toc-item.level-0 {
  font-weight: 600;
  color: var(--os-text-muted);
}
.strategy-toc-item.level-1,
.strategy-toc-item.level-2,
.strategy-toc-item.level-3 {
  font-size: 0.6875rem;
}
.strategy-toc-text {
  flex: 1;
  min-width: 0;
}
.strategy-toc-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--os-text-hint);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  justify-content: center;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.strategy-toc-toggle:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.strategy-context-empty {
  padding: 2rem;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.875rem;
}
.horizon-content {
  padding: 0.75rem 1rem;
}
.horizon-content .markdown-block {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}
.horizon-content .markdown-block strong {
  color: var(--os-text-primary);
}
.horizon-content .markdown-block ul,
.horizon-content .markdown-block ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}
.horizon-content .markdown-block li {
  margin: 0.25rem 0;
}
.horizon-content .markdown-block p {
  margin: 0.5rem 0;
}
.horizon-content .markdown-block p:first-child {
  margin-top: 0;
}
.horizon-content .markdown-block em {
  color: var(--os-text-muted);
  font-style: italic;
}
/* Horizon content uses EditableMarkdownBlock — minimal overrides */
.horizon-content .editable-markdown-block {
  min-height: 700px;
}
/* Make horizon body fill available space */
.horizon-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.horizon-body {
  flex: 1;
}
.horizon-content .editable-markdown-edit-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.horizon-content .editable-markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.horizon-content .editable-markdown-editor-wrapper .cm-editor {
  flex: 1;
  min-height: 0;
}
.horizon-content .editable-markdown-editor-wrapper .cm-scroller {
  overflow: auto;
}
/* Horizon attached files */
.horizon-files {
  margin-top: 0.25rem;
  padding: 0 0.25rem;
}
.horizon-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.25rem;
}
.horizon-files-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.horizon-files-toggle:hover {
  color: var(--os-text-secondary);
}
.horizon-files-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  font-size: 0.625rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 8px;
  min-width: 1.125rem;
  text-align: center;
}
.horizon-files-actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.horizon-files-action-btn {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 5px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.horizon-files-action-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.horizon-files-list {
  padding: 0 0.25rem 0.25rem;
}
.horizon-files-empty {
  padding: 0.5rem 0.625rem;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  font-style: italic;
}
.rollover-dialog {
  width: min(680px, 92vw);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: rgba(18, 18, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.rollover-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rollover-dialog-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rollover-dialog-title h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.rollover-dialog-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.rollover-dialog-body {
  flex: 1;
  min-height: 160px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 0.7rem 0.9rem;
}
.rollover-dialog-empty {
  height: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--os-text-muted);
  font-size: 0.82rem;
}
.rollover-dialog-error {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.75rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: rgba(254, 202, 202, 0.95);
  font-size: 0.8rem;
}
.rollover-dialog-toolbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}
.rollover-toolbar-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-secondary);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}
.rollover-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.rollover-toolbar-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--os-text-muted);
}
.rollover-item-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rollover-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.rollover-item input[type="checkbox"] {
  margin: 0;
  accent-color: #38bdf8;
}
.rollover-item-text {
  flex: 1;
  font-size: 0.8rem;
  color: var(--os-text-primary);
  line-height: 1.4;
}
.rollover-item-badge {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(148, 163, 184, 0.9);
  background: rgba(148, 163, 184, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
}
.rollover-item-group-tag {
  font-size: 0.64rem;
  color: rgba(var(--accent-rgb), 0.85);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  margin-left: auto;
}
.rollover-item.already-in-target {
  opacity: 0.7;
}
/* Grouped hierarchy */
.rollover-group {
  display: flex;
  flex-direction: column;
}
.rollover-group.has-children {
  gap: 0;
}
.rollover-group.has-children .rollover-item-parent {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rollover-group.has-children .rollover-item-child {
  padding-left: 2rem;
  border-top: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.015);
  font-size: 0.78rem;
  color: var(--os-text-secondary);
}
.rollover-group.has-children .rollover-item-child:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.rollover-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: 0.8rem;
}
.rollover-group-header input[type="checkbox"] {
  margin: 0;
  accent-color: #38bdf8;
}
.rollover-group-name {
  flex: 1;
  color: var(--os-text-primary);
}
.rollover-item-type {
  font-size: 0.72rem;
  flex-shrink: 0;
}
.rollover-group-count {
  font-size: 0.62rem;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-weight: 500;
}
.rollover-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 0.95rem 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.horizon-file-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.horizon-file-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.horizon-file-item.active {
  background: rgba(var(--accent-rgb), 0.1);
}
.horizon-file-item.creating {
  padding: 0.25rem 0.5rem;
  gap: 0.375rem;
  color: var(--os-text-muted);
}
.horizon-file-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  text-align: left;
}
.horizon-file-item.active .horizon-file-name {
  color: var(--accent);
}
.horizon-file-delete {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s;
  margin-right: 0.25rem;
}
.horizon-file-item:hover .horizon-file-delete {
  opacity: 1;
}
.horizon-file-delete:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.horizon-file-inline-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  outline: none;
}
.horizon-file-inline-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.horizon-file-editor {
  margin-top: 0.375rem;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 8px;
  overflow: hidden;
}
.horizon-file-editor-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}
.horizon-file-editor-header span {
  flex: 1;
}
.horizon-file-close {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.horizon-file-close:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.horizon-file-editor .editable-markdown-block {
  min-height: 200px;
}
/* Next subsection with tabs */
.focus-subsection-header.with-tabs {
  padding: 0;
  background: transparent;
}
.next-tabs {
  display: flex;
  gap: 0.125rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.25rem;
  border-radius: 8px;
  width: 100%;
}
.next-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  justify-content: center;
}
.next-tab:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}
.next-tab.active {
  background: rgba(56, 189, 248, 0.1);
  color: rgba(56, 189, 248, 0.95);
}
/* Suggested tab - purple accent when active */
.next-tab:last-child.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: rgba(var(--accent-rgb), 0.95);
}
.next-tab .tab-count {
  padding: 0.125rem 0.375rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 0.625rem;
  font-weight: 700;
}
.next-tab.active .tab-count {
  background: rgba(255, 255, 255, 0.15);
}
/* Suggested content within Focus view */
.suggested-content {
  padding: 0.5rem 0;
}
.suggested-content .capacity-note {
  margin-bottom: 0.75rem;
}
.suggested-content .rest-option {
  margin-top: 0.75rem;
}
.suggested-content .generated-at {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  text-align: right;
}
/* ==================== */
/* Task List Flat       */
/* ==================== */
.task-list-flat {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.task-row-flat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.75rem;
  background: none;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.task-row-flat:hover {
  background: rgba(255, 255, 255, 0.04);
}
.task-row-flat .task-checkbox {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}
.task-row-flat .task-checkbox:hover {
  color: #4ade80;
}
.task-row-flat .task-text {
  flex: 1;
  font-size: 0.875rem;
  color: var(--os-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-row-flat .task-text-group {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.task-row-flat .task-text-group:hover .task-text {
  color: var(--os-text-primary);
}
.task-row-flat .task-description-preview {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.task-row-flat .task-due-tag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0.1rem 0.4rem;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 4px;
  font-size: 0.6875rem;
  color: rgba(56, 189, 248, 0.7);
  margin-left: auto;
}
.task-row-flat .task-due-tag.due-today {
  background: rgba(251, 191, 36, 0.15);
  color: rgba(251, 191, 36, 0.85);
}
.task-row-flat .task-due-tag.due-soon {
  background: rgba(251, 146, 60, 0.12);
  color: rgba(251, 146, 60, 0.8);
}
.task-row-flat .task-due-tag.overdue {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.8);
}
.task-row-flat .task-text.done {
  text-decoration: line-through;
  color: var(--os-text-muted);
}
/* Completed task row styling */
.task-row-flat.completed {
  opacity: 0.5;
}
.task-row-flat.completed .task-checkbox {
  color: #4ade80;
  cursor: default;
}
.task-row-flat.completed .task-checkbox:hover {
  color: #4ade80;
}
/* Drag and drop styles */
.task-row-flat .drag-handle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-hint);
  cursor: grab;
  margin-left: -0.25rem;
  transition: color 0.15s ease;
}
.task-row-flat:hover .drag-handle {
  color: var(--os-text-muted);
}
.task-row-flat .drag-handle:active {
  cursor: grabbing;
}
.task-row-flat.dragging {
  opacity: 0.5;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
}
.task-row-flat.drag-over {
  background: rgba(var(--accent-rgb), 0.15);
  border-top: 2px solid rgba(var(--accent-rgb), 0.5);
}
.task-row-flat .task-subtasks-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 0.125rem 0.375rem;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 4px;
  color: rgba(var(--accent-rgb), 0.7);
}
.task-row-flat .task-subtasks-indicator svg {
  flex-shrink: 0;
}
.task-row-flat .task-subtasks-count {
  font-size: 0.6875rem;
  font-weight: 500;
}
.task-row-flat .task-domain-tag {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.task-row-flat .task-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.task-row-flat:hover .task-actions,
.task-row-flat.dropdown-open .task-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.task-row-flat .task-action-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}
.task-row-flat .task-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}
.task-row-flat .task-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.task-row-flat .task-action-btn.promote:hover {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.task-row-flat .task-action-btn.demote:hover {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
/* Edit form in flat list */
.task-row-flat .task-edit-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.task-row-flat .task-edit-input {
  flex: 1;
  padding: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--os-text-primary);
  font-size: 0.875rem;
}
.task-row-flat .task-edit-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.task-row-flat .task-edit-actions {
  display: flex;
  gap: 0.25rem;
}
.task-row-flat .task-edit-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.task-row-flat .task-edit-btn.save {
  color: #4ade80;
}
.task-row-flat .task-edit-btn.cancel {
  color: var(--os-text-muted);
}
/* ==================== */
/* Next Queue Tree      */
/* ==================== */
.next-queue-tree {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.next-queue-filters {
  display: flex;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.filter-chip {
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}
.filter-chip.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}
/* Domain list - vertical stack */
.next-queue-domains-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Domain section - contains header + areas grid */
.next-domain-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}
.next-domain-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}
.next-domain-header:hover {
  background: rgba(255, 255, 255, 0.04);
}
.next-domain-header .domain-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.next-domain-header .domain-icon.blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.next-domain-header .domain-icon.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.next-domain-header .domain-icon.purple { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.next-domain-header .domain-icon.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.next-domain-header .domain-icon.gray { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }
.next-domain-header .domain-icon.pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.next-domain-header .domain-icon.teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
.next-domain-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.domain-task-count {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
}
/* Areas grid - 2 columns */
.next-areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0.75rem;
}
@media (max-width: 600px) {
  .next-areas-grid {
    grid-template-columns: 1fr;
  }
}
/* Area card */
.next-area-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}
.next-area-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.next-area-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.area-task-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
  font-size: 0.625rem;
  font-weight: 600;
}
.next-area-tasks {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
/* Task row */
.next-task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  transition: background 0.15s ease;
}
.next-task-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.next-task-row:hover .task-actions {
  opacity: 1;
}
.next-task-text {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.4;
}
.next-task-text.done {
  text-decoration: line-through;
  color: var(--os-text-muted);
}
.next-task-row.completed {
  opacity: 0.5;
}
.next-task-row.completed .task-action-btn.completed {
  color: #4ade80;
}
/* ==================== */
/* Suggestion List      */
/* ==================== */
.suggestion-list {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.suggestion-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  transition: all 0.15s ease;
}
.suggestion-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.suggestion-main {
  flex: 1;
  min-width: 0;
}
.suggestion-task {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  line-height: 1.4;
  margin-bottom: 0.25rem;
}
.suggestion-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.suggestion-domain {
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
.suggestion-source {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  font-style: italic;
}
.suggestion-reasoning {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin-top: 0.375rem;
  line-height: 1.4;
}
.suggestion-flags {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.375rem;
}
.suggestion-flag {
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
}
.suggestion-flag.wellbeing {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}
.suggestion-flag.neglected_domain {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}
.suggestion-flag.roadmap_aligned {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}
.suggestion-actions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex-shrink: 0;
}
.suggestion-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.suggestion-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}
.suggestion-action-btn.approve:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.suggestion-action-btn.dismiss:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
/* ==================== */
/* Capacity & Rest      */
/* ==================== */
.capacity-note {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.capacity-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.capacity-indicator.green {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}
.capacity-indicator.yellow {
  background: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.4);
}
.capacity-indicator.red {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}
.capacity-text {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  flex: 1;
}
.rest-option {
  padding: 0.75rem 1rem;
  background: rgba(74, 222, 128, 0.06);
  border-top: 1px solid rgba(74, 222, 128, 0.1);
}
.rest-option-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4ade80;
  margin-bottom: 0.25rem;
}
.rest-option-text {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.4;
}
.generated-at {
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
/* ==================== */
/* Log View             */
/* ==================== */
.log-view {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.log-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
.log-date-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.log-date-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.log-date-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.log-synthesize-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  margin-left: auto;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 6px;
  color: rgba(56, 189, 248, 0.8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.log-synthesize-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}
.log-synthesize-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.log-synthesize-btn .spinning {
  animation: spin 1s linear infinite;
}
.log-organize-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  color: rgba(var(--accent-rgb), 0.8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.log-organize-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}
.log-organize-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.log-organize-btn .spinning {
  animation: spin 1s linear infinite;
}
.log-current-date {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
  min-width: 140px;
  text-align: center;
}
.log-sections {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.log-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.log-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.log-section-header h4 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.log-section-header .item-count {
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
}
.log-section-add-btn {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.log-section-add-btn:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
/* Log add form */
.log-add-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  position: relative;
  background: none;
  border-bottom: none;
}
.log-add-time {
  width: 60px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  padding: 0.375rem 0.5rem;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  outline: none;
}
.log-add-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 0.4rem 4rem 0.4rem 0.75rem;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
  height: 34px;
}
.log-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.06);
}
.log-add-time:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.log-add-submit {
  position: absolute;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.2);
  border: none;
  border-radius: 50%;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.log-add-cancel {
  position: absolute;
  right: 3.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 50%;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.log-add-submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.35);
  color: #fff;
}
.log-add-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.log-add-cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.log-add-time-display {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.8);
  min-width: 42px;
}
.log-empty-hint {
  padding: 1rem;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}
/* Manual log section styling */
.log-section.log-manual {
  border-color: rgba(var(--accent-rgb), 0.2);
}
.log-section.log-manual .log-section-header {
  border-bottom-color: rgba(var(--accent-rgb), 0.1);
}
.log-section.log-manual .log-section-header svg {
  color: rgba(var(--accent-rgb), 0.7);
}
.log-items {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.log-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.log-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.log-item-time {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  min-width: 48px;
}
.log-item-text {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* Log item actions */
.log-item-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  margin-left: 0.5rem;
}
.log-item:hover .log-item-actions {
  opacity: 1;
}
.log-item-action {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
}
.log-item-action.edit:hover {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
.log-item-action.delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
/* Log item edit form */
.log-item.editing {
  background: rgba(255, 255, 255, 0.04);
}
.log-item-edit-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.log-item-edit-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  padding: 0.25rem 0.5rem;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
}
.log-item-edit-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.log-item-edit-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.log-item-edit-btn.save:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.log-item-edit-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
/* Empty log section */
.log-section.empty {
  opacity: 0.7;
}
.log-section.empty .log-section-header {
  border-bottom: none;
}
/* Log section color accents */
.log-section.completed .log-section-header {
  background: rgba(74, 222, 128, 0.06);
}
.log-section.completed .log-section-header h4 {
  color: #4ade80;
}
.log-section.completed .item-count {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}
.log-section.events .log-section-header {
  background: rgba(56, 189, 248, 0.06);
}
.log-section.events .log-section-header h4 {
  color: #38bdf8;
}
.log-section.events .item-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}
.log-section.code .log-section-header {
  background: rgba(var(--accent-rgb), 0.06);
}
.log-section.code .log-section-header h4 {
  color: var(--accent);
}
.log-section.code .item-count {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
.log-section.focus .log-section-header {
  background: rgba(251, 146, 60, 0.06);
}
.log-section.focus .log-section-header h4 {
  color: #fb923c;
}
.log-section.focus .item-count {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}
.log-section.notes .log-section-header {
  background: rgba(156, 163, 175, 0.06);
}
/* Log empty state */
.log-empty {
  text-align: center;
  padding: 2rem;
  color: var(--os-text-muted);
  font-size: 0.875rem;
}
/* ==================== */
/* Scrollbar for views  */
/* ==================== */
.planning-view::-webkit-scrollbar,
.log-view::-webkit-scrollbar {
  width: 8px;
}
.planning-view::-webkit-scrollbar-track,
.log-view::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.planning-view::-webkit-scrollbar-thumb,
.log-view::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.planning-view::-webkit-scrollbar-thumb:hover,
.log-view::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
/* ==================== */
/* Multi-day Log View   */
/* ==================== */
.log-view-multiday {
  padding: 0;
  gap: 0;
}
.log-view-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  color: var(--os-text-muted);
  font-size: 0.875rem;
}
.log-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.log-toolbar-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.log-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.log-add-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 6px;
  color: rgba(74, 222, 128, 0.8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.log-add-btn:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
}
.log-view-multiday .log-add-form {
  padding: 0.75rem 1rem;
  background: none;
  border-bottom: none;
}
.log-add-time-display {
  padding: 0.375rem 0.625rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-family: monospace;
}
.log-days-container {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}
.log-empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  color: var(--os-text-muted);
}
.log-empty-hint span {
  font-size: 0.875rem;
}
.log-empty-sub {
  font-size: 0.75rem !important;
  color: var(--os-text-hint) !important;
}
/* Day Group */
.log-day-group {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.log-day-group:last-child {
  border-bottom: none;
}
.log-day-group.is-today {
  background: rgba(56, 189, 248, 0.03);
}
.log-day-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}
.log-day-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.log-day-group.is-today .log-day-title {
  color: #38bdf8;
}
.log-day-count {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.log-day-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.log-day-content .log-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.log-day-content .log-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 0.8125rem;
}
.log-day-content .log-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.log-day-content .log-item-time {
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-family: monospace;
  flex-shrink: 0;
  min-width: 45px;
}
.log-day-content .log-item-text {
  flex: 1;
  color: var(--os-text-secondary);
  line-height: 1.4;
}
.log-day-content .log-item-actions {
  display: none;
  gap: 0.25rem;
}
.log-day-content .log-item:hover .log-item-actions {
  display: flex;
}
/* Compact section styles for multi-day view */
.log-section-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.log-section-compact.focus {
  color: rgba(251, 191, 36, 0.7);
}
.log-section-compact.code {
  color: rgba(var(--accent-rgb), 0.7);
}
.log-compact-label {
  font-weight: 500;
}
.log-compact-value {
  color: var(--os-text-muted);
}
.log-compact-areas {
  color: var(--os-text-hint);
  font-size: 0.6875rem;
}
.log-section-compact.clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}
.log-section-compact.clickable:hover {
  background: rgba(255, 255, 255, 0.05);
}
.log-compact-chevron {
  margin-left: auto;
  opacity: 0.4;
}
.log-section-compact.clickable:hover .log-compact-chevron {
  opacity: 0.7;
}
.log-section-header.clickable {
  cursor: pointer;
}
.log-section-header.clickable:hover {
  background: rgba(255, 255, 255, 0.05);
}
.log-section-chevron {
  margin-left: auto;
  opacity: 0.5;
}
/* ==================== */
/* Grouped Log Display  */
/* ==================== */
/* Log date info in nav */
.log-date-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 160px;
}
.log-generated-at {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
/* Grouped content layout */
.log-grouped-content {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Individual group container */
.log-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}
/* Log summary line */
.log-summary {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
/* Group header with chip and stat */
.log-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}
.log-group-header.clickable {
  cursor: pointer;
}
.log-group-header.clickable:hover {
  background: rgba(255, 255, 255, 0.04);
}
.log-group-icon {
  color: var(--os-text-muted);
}
.log-group-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.log-group-count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
}
.log-group-lines {
  display: flex;
  gap: 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  margin-left: 0.25rem;
}
.log-group-lines .lines-added {
  color: rgba(74, 222, 128, 0.7);
}
.log-group-lines .lines-removed {
  color: rgba(248, 113, 113, 0.6);
}
.log-item-lines {
  display: flex;
  gap: 0.3rem;
  font-size: 0.6rem;
  font-weight: 500;
  margin-left: auto;
  flex-shrink: 0;
}
.log-item-lines .lines-added {
  color: rgba(74, 222, 128, 0.55);
}
.log-item-lines .lines-removed {
  color: rgba(248, 113, 113, 0.45);
}
.log-group-chevron {
  margin-left: auto;
  color: var(--os-text-hint);
  transition: transform 0.2s ease;
}
/* Area/domain chip in group header */
.log-group-chip {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Color variants for area chips */
.log-group-chip.blue { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.log-group-chip.green { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.log-group-chip.purple { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
.log-group-chip.orange { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.log-group-chip.gray { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }
.log-group-chip.pink { background: rgba(244, 114, 182, 0.2); color: #f472b6; }
.log-group-chip.teal { background: rgba(45, 212, 191, 0.2); color: #2dd4bf; }
.log-group-chip.cyan { background: rgba(34, 211, 238, 0.2); color: #22d3ee; }
.log-group-chip.amber { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
/* Group stat badge */
.log-group-stat {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
}
/* Items within a group */
.log-group-items {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
/* Individual log item (commit or focus session) */
.log-group-items .log-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.log-group-items .log-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
/* Commit hash styling */
.log-item-hash {
  flex-shrink: 0;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}
/* Summary stats row */
.log-summary-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.log-summary-stat {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
}
.log-summary-stat strong {
  color: var(--os-text-primary);
  font-weight: 600;
}
.log-summary-stat.positive {
  color: rgba(74, 222, 128, 0.9);
}
.log-summary-stat.negative {
  color: rgba(239, 68, 68, 0.8);
}
/* Focus time group colors */
.log-group.body .log-group-header { background: rgba(74, 222, 128, 0.06); }
.log-group.build .log-group-header { background: rgba(56, 189, 248, 0.06); }
.log-group.admin .log-group-header { background: rgba(251, 146, 60, 0.06); }
.log-group.visibility .log-group-header { background: rgba(244, 114, 182, 0.06); }
.log-group.village .log-group-header { background: rgba(var(--accent-rgb), 0.06); }
.log-group.nest .log-group-header { background: rgba(45, 212, 191, 0.06); }
.log-group.work .log-group-header { background: rgba(251, 191, 36, 0.06); }
/* Code shipped area colors */
.log-group.desktop .log-group-header { background: rgba(56, 189, 248, 0.06); }
.log-group.desktop .log-group-icon { color: #38bdf8; }
.log-group.mobile .log-group-header { background: rgba(74, 222, 128, 0.06); }
.log-group.mobile .log-group-icon { color: #4ade80; }
.log-group.annex .log-group-header { background: rgba(var(--accent-rgb), 0.06); }
.log-group.annex .log-group-icon { color: var(--accent); }
.log-group.cli .log-group-header { background: rgba(251, 146, 60, 0.06); }
.log-group.cli .log-group-icon { color: #fb923c; }
.log-group.docs .log-group-header { background: rgba(156, 163, 175, 0.06); }
.log-group.docs .log-group-icon { color: #9ca3af; }
.log-group.vault .log-group-header { background: rgba(244, 114, 182, 0.06); }
.log-group.vault .log-group-icon { color: #f472b6; }
.log-group.content .log-group-header { background: rgba(244, 114, 182, 0.06); }
.log-group.content .log-group-icon { color: #f472b6; }
.log-group.other .log-group-header { background: rgba(255, 255, 255, 0.02); }
.log-group.other .log-group-icon { color: var(--os-text-muted); }
.log-group.general .log-group-header { background: rgba(255, 255, 255, 0.02); }
/* Domain name text in group header */
.log-group-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
/* Muted items (e.g., "and X more") */
.log-item.muted {
  opacity: 0.5;
  font-style: italic;
}
.log-item.muted .log-item-text {
  font-size: 0.75rem;
}
/* ==================== */
/* Grouped Task List    */
/* ==================== */
.task-list-grouped {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Task group container */
.task-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}
/* Group header */
.task-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
/* Domain icon in group header */
.task-group-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-group-icon.blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.task-group-icon.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.task-group-icon.purple { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.task-group-icon.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.task-group-icon.gray { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }
.task-group-icon.pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.task-group-icon.teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
/* Domain name in header */
.task-group-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-primary);
  flex: 1;
}
/* Task count badge */
.task-group-count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
}
/* Group header color accents */
.task-group.blue .task-group-header { background: rgba(56, 189, 248, 0.06); }
.task-group.green .task-group-header { background: rgba(74, 222, 128, 0.06); }
.task-group.purple .task-group-header { background: rgba(var(--accent-rgb), 0.06); }
.task-group.orange .task-group-header { background: rgba(251, 146, 60, 0.06); }
.task-group.pink .task-group-header { background: rgba(244, 114, 182, 0.06); }
.task-group.teal .task-group-header { background: rgba(45, 212, 191, 0.06); }
/* Items container */
.task-group-items {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
/* Grouped task row with checkbox */
.task-row-grouped {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.task-row-grouped:hover {
  background: rgba(255, 255, 255, 0.04);
}
/* Checkbox button */
.task-checkbox {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-checkbox:hover {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
}
/* Task content area */
.task-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Task content in grouped view - don't expand, keep actions near text */
.task-row-grouped .task-content {
  flex: none;
  max-width: 100%;
}
/* Area indicator (subdomain) */
.task-area {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.125rem 0.375rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}
/* Task text in grouped row */
.task-row-grouped .task-text {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  line-height: 1.4;
}
/* Completed task row styling (grouped) */
.task-row-grouped.completed {
  opacity: 0.5;
}
.task-row-grouped.completed .task-text {
  text-decoration: line-through;
  color: var(--os-text-muted);
}
.task-row-grouped.completed .task-checkbox {
  color: #4ade80;
  cursor: default;
}
.task-row-grouped.completed .task-checkbox:hover {
  background: transparent;
}
/* Defer/Later button */
.task-defer-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0;
}
.task-row-grouped:hover .task-defer-btn {
  opacity: 1;
}
.task-defer-btn:hover {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
/* Task row actions (grouped view) - inline with text */
.task-row-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  margin-left: 0.5rem;
}
.task-row-grouped:hover .task-row-actions,
.task-row-grouped.dropdown-open .task-row-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.task-row-actions .task-action-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-row-actions .task-action-btn.promote:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.task-row-actions .task-action-btn.demote:hover {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}
.task-row-actions .task-action-btn.thread:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.task-row-actions .task-action-btn.thread.has-thread {
  color: var(--accent);
  opacity: 1;
}
.task-row-actions .task-action-btn.edit:hover {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
.task-row-actions .task-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
/* Editing state for grouped rows */
.task-row-grouped.editing {
  background: rgba(255, 255, 255, 0.04);
}
.task-row-grouped .task-edit-form {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.task-row-grouped .task-edit-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.375rem 0.625rem;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.task-row-grouped .task-edit-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.task-row-grouped .task-edit-actions {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: 0.25rem;
}
.task-row-grouped .task-edit-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.task-row-grouped .task-edit-btn.save:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.task-row-grouped .task-edit-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
/* Voice source badge in grouped view */
.task-row-grouped .task-source-badge.voice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 50%;
  color: var(--accent);
  flex-shrink: 0;
}
/* Compact task row (no domain chip) - keep for other uses */
.task-row.compact {
  padding: 0.5rem 0.625rem;
  gap: 0.5rem;
}
/* Adjust text in compact row */
.task-row.compact .task-text {
  font-size: 0.8125rem;
}
/* ==================== */
/* Tree Navigation v2   */
/* ==================== */
.tree-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.5rem 0.75rem;
}
.tree-section-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-hint);
  padding: 0.375rem 0.75rem;
  margin-top: 0.25rem;
}
/* Collapsible section headers (Planning, Tags, Areas) */
.tree-section-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--os-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}
.tree-section-header:hover {
  color: var(--os-text-secondary);
}
.tree-section-chevron {
  opacity: 0.5;
  flex-shrink: 0;
}
.tree-section-count {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 6px;
}
/* Domain items in tree */
.tree-item.domain-item {
}
.tree-item.domain-item.blue { color: rgba(56, 189, 248, 0.9); }
.tree-item.domain-item.green { color: rgba(74, 222, 128, 0.9); }
.tree-item.domain-item.purple { color: rgba(var(--accent-rgb), 0.9); }
.tree-item.domain-item.orange { color: rgba(251, 146, 60, 0.9); }
.tree-item.domain-item.gray { color: rgba(156, 163, 175, 0.9); }
.tree-item.domain-item.pink { color: rgba(244, 114, 182, 0.9); }
.tree-item.domain-item.teal { color: rgba(45, 212, 191, 0.9); }
.tree-item.domain-item.active.blue { background: rgba(56, 189, 248, 0.15); }
.tree-item.domain-item.active.green { background: rgba(74, 222, 128, 0.15); }
.tree-item.domain-item.active.purple { background: rgba(var(--accent-rgb), 0.15); }
.tree-item.domain-item.active.orange { background: rgba(251, 146, 60, 0.15); }
.tree-item.domain-item.active.gray { background: rgba(156, 163, 175, 0.15); }
.tree-item.domain-item.active.pink { background: rgba(244, 114, 182, 0.15); }
.tree-item.domain-item.active.teal { background: rgba(45, 212, 191, 0.15); }
/* Suggested item purple accent */
.tree-item.suggested-item {
  color: rgba(var(--accent-rgb), 0.9);
}
.tree-item.suggested-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
/* Section description */
.section-description {
  padding: 0 1rem 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin: 0;
}
/* ==================== */
/* Domain View          */
/* ==================== */
.domain-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Domain header */
.domain-view-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.domain-view-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.domain-view-icon.blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.domain-view-icon.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.domain-view-icon.purple { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.domain-view-icon.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.domain-view-icon.gray { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }
.domain-view-icon.pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.domain-view-icon.teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
.domain-view-title h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.domain-view-stats {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
/* Domain tabs */
.domain-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.domain-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.domain-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}
.domain-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.domain-tab .tab-count {
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
}
.domain-tab.active .tab-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}
/* Domain content */
.domain-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}
/* Domain empty state */
.domain-empty {
  text-align: center;
  padding: 2rem 1rem;
}
.domain-empty p {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}
.domain-empty-hint {
  font-size: 0.75rem;
  color: var(--os-text-hint);
}
/* Domain task list */
.domain-task-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
/* Domain task row */
.domain-task-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  transition: background 0.15s ease;
}
.domain-task-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* Domain task actions */
.domain-task-actions {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.domain-task-row:hover .domain-task-actions,
.domain-task-row.dropdown-open .domain-task-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Domain action buttons */
.domain-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.domain-action-btn.promote:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.domain-action-btn.demote:hover {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}
.domain-action-btn.mention:hover {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}
/* Task move dropdown menu */
.task-move-dropdown {
  position: fixed;
  min-width: 140px;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  overflow: hidden;
}
.task-move-dropdown-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.task-move-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.1s ease;
  text-align: left;
}
.task-move-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.task-move-dropdown-item:first-of-type {
  color: #4ade80;
}
.task-move-dropdown-item:first-of-type:hover {
  background: rgba(74, 222, 128, 0.15);
}
/* Domain header color accents */
.domain-view-header.blue { border-left: 3px solid #38bdf8; }
.domain-view-header.green { border-left: 3px solid #4ade80; }
.domain-view-header.purple { border-left: 3px solid #a78bfa; }
.domain-view-header.orange { border-left: 3px solid #fb923c; }
.domain-view-header.gray { border-left: 3px solid #9ca3af; }
.domain-view-header.pink { border-left: 3px solid #f472b6; }
.domain-view-header.teal { border-left: 3px solid #2dd4bf; }
/* Add button in domain header */
.domain-add-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 8px;
  color: #4ade80;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}
.domain-add-btn:hover {
  background: rgba(74, 222, 128, 0.25);
  border-color: rgba(74, 222, 128, 0.5);
}
/* Add form */
.domain-add-form {
  padding: 1rem 1.25rem;
  background: rgba(74, 222, 128, 0.06);
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.add-form-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.add-form-row.secondary {
  flex-wrap: wrap;
}
.add-form-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.add-form-input:focus {
  border-color: rgba(74, 222, 128, 0.5);
}
.add-form-input.small {
  flex: 0 0 120px;
}
.add-form-select {
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  outline: none;
  cursor: pointer;
}
.add-form-select:focus {
  border-color: rgba(74, 222, 128, 0.5);
}
.add-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.add-form-btn {
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.add-form-btn.cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--os-text-muted);
}
.add-form-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
}
.add-form-btn.submit {
  background: rgba(74, 222, 128, 0.2);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.add-form-btn.submit:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.3);
}
.add-form-btn.submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Edit and delete buttons */
.domain-action-btn.edit {
  padding: 0.375rem;
}
.domain-action-btn.edit:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}
.domain-action-btn.delete {
  padding: 0.375rem;
}
.domain-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
/* Editing state */
.domain-task-row.editing {
  background: rgba(56, 189, 248, 0.06);
}
.task-edit-form {
  flex: 1;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.task-edit-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
}
.task-edit-input:focus {
  border-color: rgba(56, 189, 248, 0.5);
}
.task-edit-actions {
  display: flex;
  gap: 0.25rem;
}
.task-edit-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-edit-btn.save {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.task-edit-btn.save:hover {
  background: rgba(74, 222, 128, 0.25);
}
.task-edit-btn.cancel {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.8);
}
.task-edit-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
/* Voice source badge */
.task-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.task-source-badge.voice {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
/* Task content with badge */
.task-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Task tags */
.task-tags {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.task-tag {
  padding: 0.125rem 0.375rem;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  color: rgba(var(--accent-rgb), 0.9);
  font-size: 0.625rem;
  font-weight: 500;
}
/* Task age indicator */
.task-age {
  padding: 0.125rem 0.375rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  color: var(--os-text-muted);
  font-size: 0.625rem;
  font-weight: 500;
  flex-shrink: 0;
}
.task-age.aging {
  background: rgba(251, 146, 60, 0.15);
  color: rgba(251, 146, 60, 0.9);
}
.task-age.stale {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.9);
}
/* Mention count indicator */
.task-mentions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.125rem 0.375rem;
  background: rgba(251, 146, 60, 0.15);
  border-radius: 4px;
  color: rgba(251, 146, 60, 0.9);
  font-size: 0.625rem;
  font-weight: 600;
  flex-shrink: 0;
}
.task-mentions svg {
  color: rgba(251, 146, 60, 0.9);
}
/* High mention count - more emphasis */
.task-mentions.hot {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.95);
}
.task-mentions.hot svg {
  color: rgba(239, 68, 68, 0.95);
}
/* Row highlighting for aging/stale tasks */
.domain-task-row.aging {
  border-left: 2px solid rgba(251, 146, 60, 0.5);
}
.domain-task-row.stale {
  border-left: 2px solid rgba(239, 68, 68, 0.5);
}
/* Completed task styling */
.domain-task-row.completed {
  opacity: 0.5;
}
.domain-task-row.completed .task-text {
  text-decoration: line-through;
  color: var(--os-text-muted);
}
.domain-task-row.completed .task-checkbox {
  color: #4ade80;
  cursor: default;
}
.domain-task-row.completed .task-checkbox:hover {
  background: transparent;
}
/* ─── Task Type Indicators ─── */
/* ─── Task Type Visual Indicators ─── */
.task-row-flat.task-type-obligation .task-checkbox,
.task-row-grouped.task-type-obligation .task-checkbox,
.domain-task-row.task-type-obligation .task-checkbox {
  color: rgba(251, 146, 60, 0.7);
}
.task-row-flat.task-type-self .task-checkbox,
.task-row-grouped.task-type-self .task-checkbox,
.domain-task-row.task-type-self .task-checkbox {
  color: rgba(56, 189, 248, 0.7);
}
.task-row-flat.task-type-intention .task-checkbox,
.task-row-grouped.task-type-intention .task-checkbox,
.domain-task-row.task-type-intention .task-checkbox {
  color: var(--os-text-hint);
}
.task-heavy .task-text {
  font-weight: 600;
}
.domain-task-row.task-type-obligation {
  border-left: 3px solid rgba(251, 146, 60, 0.5);
}
.domain-task-row.task-type-self {
  border-left: 3px solid rgba(56, 189, 248, 0.5);
}
.domain-task-row.task-type-intention {
  border-left: 3px solid rgba(255, 255, 255, 0.12);
}
/* ─── Task Type Toggle (Add/Edit Dialog) ─── */
.task-type-toggle {
  display: flex;
  gap: 4px;
}
.task-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-type-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}
.task-type-btn.active.type-obligation {
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}
.task-type-btn.active.type-self {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}
.task-type-btn.active.type-intention {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--os-text-muted);
}
/* ─── Task Weight Toggle ─── */
.task-weight-toggle {
  display: flex;
  gap: 4px;
}
.task-weight-btn {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-weight-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}
.task-weight-btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--os-text-secondary);
}
/* ─── Priority Toggles (Urgent/Important) ─── */
.task-priority-toggles {
  display: flex;
  gap: 4px;
}
.task-priority-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-priority-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
}
.task-priority-btn.active.urgent {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.task-priority-btn.active.important {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.3);
  color: #eab308;
}
/* ─── Priority Indicators in Task List ─── */
.task-priority-indicators {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-left: 4px;
  flex-shrink: 0;
}
.task-priority-indicator {
  display: flex;
  align-items: center;
  opacity: 0.6;
}
.task-priority-indicator.urgent {
  color: #ef4444;
}
.task-priority-indicator.important {
  color: #eab308;
}
/* Toast Notification */
.ops-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: #fff;
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  min-width: 200px;
  max-width: 400px;
}
.ops-toast.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ops-toast.success {
  border-left: 4px solid #4ade80;
}
.ops-toast.error {
  border-left: 4px solid #ef4444;
}
.ops-toast.info {
  border-left: 4px solid #38bdf8;
}
.ops-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ops-toast.success .ops-toast-icon {
  color: #4ade80;
}
.ops-toast.error .ops-toast-icon {
  color: #ef4444;
}
.ops-toast.info .ops-toast-icon {
  color: #38bdf8;
}
.ops-toast-message {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
}
.ops-toast-close {
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.ops-toast-close:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}
/* ==================== */
/* Task Edit Dialog     */
/* ==================== */
.task-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.task-edit-dialog {
  width: 90%;
  max-width: 860px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.task-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.task-edit-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.task-edit-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-edit-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.task-edit-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 70vh;
  overflow-y: auto;
}
.task-edit-body::-webkit-scrollbar {
  width: 8px;
}
.task-edit-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.task-edit-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.task-edit-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
.task-edit-textarea::-webkit-scrollbar {
  width: 6px;
}
.task-edit-textarea::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.task-edit-textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.task-edit-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
.task-edit-two-col {
  flex-direction: row;
  gap: 1.5rem;
}
.task-edit-col-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.task-edit-col-meta {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.task-edit-col-meta .task-edit-field label {
  font-size: 0.7rem;
}
.task-edit-col-meta .task-edit-select,
.task-edit-col-meta .task-edit-input {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}
.task-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.task-edit-field label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
}
.task-edit-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--os-text-primary);
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: none;
  min-height: 80px;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.task-edit-textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.task-edit-textarea::placeholder {
  color: var(--os-text-hint);
}
.task-edit-textarea.subtasks {
  min-height: 100px;
  font-size: 0.875rem;
  font-family: inherit;
}
.task-edit-hint {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  font-weight: 400;
  margin-left: 0.5rem;
}
.task-edit-row {
  display: flex;
  gap: 1rem;
}
.task-edit-row .task-edit-field {
  flex: 1;
}
.task-edit-select {
  width: 100%;
  padding: 0.625rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.task-edit-select:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.task-edit-select option {
  background: #1e1e23;
  color: var(--os-text-primary);
}
.task-edit-input {
  width: 100%;
  padding: 0.625rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.875rem;
  transition: border-color 0.15s ease;
}
.task-edit-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.task-edit-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}
.task-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  gap: 0.75rem;
}
.task-edit-footer-right {
  display: flex;
  gap: 0.75rem;
}
.task-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
}
.task-edit-btn.save {
  background: rgba(var(--accent-rgb), 0.9);
  color: white;
  padding: 0.75rem 2rem;
  min-width: 100px;
}
.task-edit-btn.save:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 1);
  transform: translateY(-1px);
}
.task-edit-btn.save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.task-edit-btn.cancel {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  padding: 0.75rem 1.5rem;
  min-width: 90px;
}
.task-edit-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--os-text-primary);
}
.task-edit-btn.delete {
  background: rgba(239, 68, 68, 0.1);
  color: rgba(239, 68, 68, 0.9);
  padding: 0.75rem 1.5rem;
  min-width: 90px;
}
.task-edit-btn.delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 1);
}
/* Area Tree Picker */
.area-tree {
  max-height: 200px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.25rem;
}
.area-tree::-webkit-scrollbar {
  width: 4px;
}
.area-tree::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.area-tree-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.3rem 0.5rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.1s ease;
  text-align: left;
}
.area-tree-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}
.area-tree-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.area-tree-none {
  margin-bottom: 0.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px 4px 0 0;
  padding-bottom: 0.35rem;
}
.area-tree-domain {
  font-weight: 600;
  color: var(--os-text-secondary);
}
.area-tree-arrow {
  flex-shrink: 0;
  opacity: 0.5;
  cursor: pointer;
}
.area-tree-area {
  padding-left: 1.5rem;
  font-weight: 400;
}
.area-tree-group {
  margin-bottom: 0.0625rem;
}
/* People Picker */
.people-picker {
  position: relative;
}
.people-picker-filter {
  width: 100%;
}
.people-picker-list {
  max-height: 160px;
  overflow-y: auto;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.25rem;
  margin-top: 0.25rem;
}
.people-picker-list::-webkit-scrollbar {
  width: 4px;
}
.people-picker-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.people-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.35rem 0.5rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
}
.people-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}
.people-picker-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.people-picker-none {
  color: var(--os-text-muted);
  font-style: italic;
  margin-bottom: 0.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.35rem;
}
.people-picker-name {
  font-weight: 500;
}
.people-picker-circle {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: capitalize;
}
.backlog-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Task Domain Groups - two-level hierarchy: Domain > Area */
.task-domain-group {
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}
.task-domain-group:last-child {
  margin-bottom: 0;
}
.task-domain-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.task-domain-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.task-domain-icon.blue { color: #38bdf8; background: rgba(56, 189, 248, 0.15); }
.task-domain-icon.green { color: #4ade80; background: rgba(74, 222, 128, 0.15); }
.task-domain-icon.purple { color: var(--accent); background: rgba(var(--accent-rgb), 0.15); }
.task-domain-icon.orange { color: #fb923c; background: rgba(251, 146, 60, 0.15); }
.task-domain-icon.pink { color: #f472b6; background: rgba(244, 114, 182, 0.15); }
.task-domain-icon.teal { color: #2dd4bf; background: rgba(45, 212, 191, 0.15); }
.task-domain-icon.gray { color: var(--os-text-muted); background: rgba(255, 255, 255, 0.08); }
.task-domain-label {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--os-text-primary);
}
.task-domain-count {
  padding: 0.125rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
}
.task-domain-areas {
  padding: 0.5rem;
}
/* Task Area Groups - within domain groups */
.task-area-group {
  margin-bottom: 0.5rem;
}
.task-area-group:last-child {
  margin-bottom: 0;
}
.task-area-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin-left: 0.25rem;
}
.task-area-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-muted);
}
.task-area-count {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-hint);
}
/* Task action dropdown (portaled to body) */
.task-dropdown {
  position: fixed;
  z-index: 9999;
  min-width: 120px;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.task-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.task-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.task-dropdown-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
/* Task Detail Popup */
.task-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.task-detail-popup {
  width: 90%;
  max-width: 400px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease;
}
.task-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(var(--accent-rgb), 0.1);
}
.task-detail-header h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.task-detail-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-detail-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}
.task-detail-content {
  padding: 1.25rem;
}
.task-detail-text {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9375rem;
  color: var(--os-text-primary);
  line-height: 1.5;
}
.task-detail-text svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--os-text-hint);
}
.task-detail-text svg.completed {
  color: rgba(74, 222, 128, 0.7);
}
/* Subtasks in task detail popup */
.task-detail-subtasks {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.task-detail-subtask {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.4;
}
.task-detail-subtask:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.task-detail-subtask svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--os-text-hint);
}
.task-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.task-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.task-detail-label {
  width: 60px;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.task-detail-value {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
.task-detail-value.muted {
  color: var(--os-text-muted);
}
.task-detail-value.source {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}
.task-detail-value.source.green {
  background: rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 0.9);
}
.task-detail-value.source.blue {
  background: rgba(56, 189, 248, 0.15);
  color: rgba(56, 189, 248, 0.9);
}
.task-detail-value.source.gray {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
}
.task-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.task-detail-tag {
  padding: 0.125rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  font-size: 0.75rem;
  color: rgba(var(--accent-rgb), 0.9);
}
/* Task Detail Action Buttons */
.task-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.task-detail-action {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-detail-action.complete {
  background: rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 0.9);
}
.task-detail-action.complete:hover {
  background: rgba(74, 222, 128, 0.25);
}
.task-detail-action.edit {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}
.task-detail-action.edit:hover {
  background: rgba(255, 255, 255, 0.1);
}
.task-detail-action.promote {
  background: rgba(56, 189, 248, 0.15);
  color: rgba(56, 189, 248, 0.9);
}
.task-detail-action.promote:hover {
  background: rgba(56, 189, 248, 0.25);
}
.task-detail-action.demote {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}
.task-detail-action.demote:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* ==================== */
/* Additional Scrollbar Styles */
/* ==================== */
.log-days-container::-webkit-scrollbar,
.domain-content::-webkit-scrollbar {
  width: 8px;
}
.log-days-container::-webkit-scrollbar-track,
.domain-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.log-days-container::-webkit-scrollbar-thumb,
.domain-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.log-days-container::-webkit-scrollbar-thumb:hover,
.domain-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
/* ==================== */
/* Notebook Styles */
/* ==================== */
.notebook-view {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.notebook-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 1rem 1.25rem;
  gap: 0.75rem;
}
.notebook-sidebar {
  width: 240px;
  min-width: 200px;
  padding: 0.75rem 1.25rem;
  overflow: hidden;
  flex-shrink: 0;
}
.notebook-sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
}
.notebook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.notebook-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.notebook-processed-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(74, 222, 128, 0.6);
  background: rgba(74, 222, 128, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.notebook-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.notebook-mode-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}
/* notebook-sidebar-toggle removed — collapse btn now uses shared .tree-collapse-btn */
.notebook-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.notebook-mode-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.notebook-mode-btn.active {
  color: rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--accent-rgb), 0.15);
}
.notebook-editor {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.notebook-editor .editable-markdown-edit-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.notebook-editor .editable-markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.notebook-editor .editable-markdown-editor-wrapper .editable-markdown-editor {
  flex: 1;
}
.notebook-editor .editable-markdown-editor-wrapper .cm-content {
  padding-bottom: 50vh !important;
}
.notebook-editor .editable-markdown-view {
  flex: 1;
  padding-top: 0;
}
.notebook-editor .editable-markdown-view h1:first-child,
.notebook-editor .editable-markdown-view h2:first-child,
.notebook-editor .editable-markdown-view h3:first-child {
  margin-top: 0;
}
/* Notebook reading controls (font size + TTS) */
.notebook-reading-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.notebook-font-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 2px;
}
.notebook-font-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8rem;
}
.notebook-font-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.notebook-font-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.notebook-font-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  padding: 0 4px;
  min-width: 20px;
  text-align: center;
}
.notebook-speak-btn {
  width: 24px;
  height: 24px;
}
/* Notebook font size classes (preview mode only) */
.notebook-editor.notebook-font-xs .editable-markdown-view {
  font-size: 0.65rem;
  line-height: 1.5;
}
.notebook-editor.notebook-font-small .editable-markdown-view {
  font-size: 0.75rem;
  line-height: 1.6;
}
.notebook-editor.notebook-font-medium .editable-markdown-view {
  font-size: 0.85rem;
  line-height: 1.7;
}
.notebook-editor.notebook-font-large .editable-markdown-view {
  font-size: 0.95rem;
  line-height: 1.75;
}
.notebook-editor.notebook-font-xlarge .editable-markdown-view {
  font-size: 1.1rem;
  line-height: 1.8;
}
.notebook-editor.notebook-font-xxlarge .editable-markdown-view {
  font-size: 1.25rem;
  line-height: 1.85;
}
.notebook-editor.notebook-font-xxxlarge .editable-markdown-view {
  font-size: 1.4rem;
  line-height: 1.9;
}
/* ==================== */
/* Shared Editor Font   */
/* ==================== */
/* Font size classes — apply on container, scopes to preview, edit, and entry cards */
.editor-font-xs .editable-markdown-view,
.editor-font-xs .cm-content,
.editor-font-xs .cm-scroller,
.editor-font-xs .journal-entry-body,
.editor-font-xs .journal-entry-body p,
.editor-font-xs .journal-entry-body div,
.editor-font-xs .journal-entry-body span,
.editor-font-xs .journal-entry-body .markdown-text,
.editor-font-xs .journal-commit-group { font-size: 0.65rem !important; line-height: 1.5 !important; }
.editor-font-small .editable-markdown-view,
.editor-font-small .cm-content,
.editor-font-small .cm-scroller,
.editor-font-small .journal-entry-body,
.editor-font-small .journal-entry-body p,
.editor-font-small .journal-entry-body div,
.editor-font-small .journal-entry-body span,
.editor-font-small .journal-entry-body .markdown-text,
.editor-font-small .journal-commit-group { font-size: 0.75rem !important; line-height: 1.6 !important; }
.editor-font-medium .editable-markdown-view,
.editor-font-medium .cm-content,
.editor-font-medium .cm-scroller,
.editor-font-medium .journal-entry-body,
.editor-font-medium .journal-entry-body p,
.editor-font-medium .journal-entry-body div,
.editor-font-medium .journal-entry-body span,
.editor-font-medium .journal-entry-body .markdown-text,
.editor-font-medium .journal-commit-group { font-size: 0.85rem !important; line-height: 1.7 !important; }
.editor-font-large .editable-markdown-view,
.editor-font-large .cm-content,
.editor-font-large .cm-scroller,
.editor-font-large .journal-entry-body,
.editor-font-large .journal-entry-body p,
.editor-font-large .journal-entry-body div,
.editor-font-large .journal-entry-body span,
.editor-font-large .journal-entry-body .markdown-text,
.editor-font-large .journal-commit-group { font-size: 0.95rem !important; line-height: 1.75 !important; }
.editor-font-xlarge .editable-markdown-view,
.editor-font-xlarge .cm-content,
.editor-font-xlarge .cm-scroller,
.editor-font-xlarge .journal-entry-body,
.editor-font-xlarge .journal-entry-body p,
.editor-font-xlarge .journal-entry-body div,
.editor-font-xlarge .journal-entry-body span,
.editor-font-xlarge .journal-entry-body .markdown-text,
.editor-font-xlarge .journal-commit-group { font-size: 1.1rem !important; line-height: 1.8 !important; }
.editor-font-xxlarge .editable-markdown-view,
.editor-font-xxlarge .cm-content,
.editor-font-xxlarge .cm-scroller,
.editor-font-xxlarge .journal-entry-body,
.editor-font-xxlarge .journal-entry-body p,
.editor-font-xxlarge .journal-entry-body div,
.editor-font-xxlarge .journal-entry-body span,
.editor-font-xxlarge .journal-entry-body .markdown-text,
.editor-font-xxlarge .journal-commit-group { font-size: 1.25rem !important; line-height: 1.85 !important; }
.editor-font-xxxlarge .editable-markdown-view,
.editor-font-xxxlarge .cm-content,
.editor-font-xxxlarge .cm-scroller,
.editor-font-xxxlarge .journal-entry-body,
.editor-font-xxxlarge .journal-entry-body p,
.editor-font-xxxlarge .journal-entry-body div,
.editor-font-xxxlarge .journal-entry-body span,
.editor-font-xxxlarge .journal-entry-body .markdown-text,
.editor-font-xxxlarge .journal-commit-group { font-size: 1.4rem !important; line-height: 1.9 !important; }
/* Inline font controls — reuses notebook look */
.editor-font-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 2px;
}
.editor-font-controls button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8rem;
}
.editor-font-controls button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.editor-font-controls button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.editor-font-controls .editor-font-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  padding: 0 4px;
  min-width: 20px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.editor-font-controls .editor-font-label-icon {
  font-size: 0.65rem;
  opacity: 0.7;
}
/* ==================== */
/* Process Button       */
/* ==================== */
.notebook-process-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
  cursor: pointer;
  transition: all 0.15s;
}
.notebook-process-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
}
.notebook-process-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* ==================== */
/* Process Preview      */
/* ==================== */
.process-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.process-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.process-preview-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--os-text-muted);
}
.process-spinner {
  animation: spin 1s linear infinite;
}
.process-streaming-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.process-streaming-status {
  font-size: 0.8rem;
  color: var(--os-text-muted);
}
.process-streaming-date {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  font-weight: 500;
}
.process-entry-count {
  font-size: 0.7rem;
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.8);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.process-select-all {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.process-select-all:hover {
  color: var(--os-text-secondary);
}
.process-entry-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}
.process-entry {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.8rem;
  transition: background 0.1s;
}
.process-entry-top {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.process-entry-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-left: 1.5rem;
}
.process-entry:hover {
  background: rgba(255, 255, 255, 0.04);
}
.process-entry.corrected {
  border-left: 2px solid rgba(251, 191, 36, 0.4);
  padding-left: calc(0.65rem - 2px);
}
.process-entry.unchecked {
  opacity: 0.4;
}
.process-entry-segment {
  margin-left: 1.25rem;
  border-left: 2px solid rgba(var(--accent-rgb), 0.2);
  padding-left: calc(0.65rem - 2px);
}
.process-segment-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-right: 0.35rem;
  flex-shrink: 0;
}
.process-segment-connector {
  color: rgba(var(--accent-rgb), 0.5);
  font-size: 0.75rem;
  margin-right: 0.25rem;
  flex-shrink: 0;
}
.process-entry input[type="checkbox"] {
  accent-color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.process-entry-text {
  flex: 1;
  color: var(--os-text-secondary);
  min-width: 0;
  line-height: 1.4;
}
.process-entry-display {
  cursor: text;
  border-radius: 4px;
  padding: 1px 2px;
  transition: background 0.15s;
}
.process-entry-display:hover {
  background: rgba(255, 255, 255, 0.04);
}
.process-entry-display.showing-original {
  color: var(--os-text-muted);
  font-style: italic;
}
.process-entry-edit {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font-size: inherit;
  font-family: inherit;
  color: var(--os-text-primary);
  line-height: 1.4;
  resize: none;
  outline: none;
  overflow: hidden;
  min-height: 1.4em;
}
.process-entry-edit:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.process-entry-text-actions {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.25rem;
}
.process-toggle-original,
.process-regen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--os-text-hint);
  transition: all 0.15s;
}
.process-toggle-original:hover,
.process-regen-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-muted);
}
.process-regen-btn.spinning {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.process-regen-feedback {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-left: 1.5rem;
}
.process-regen-feedback input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: var(--os-text-secondary);
  outline: none;
}
.process-regen-feedback input::placeholder {
  color: var(--os-text-hint);
}
.process-regen-feedback input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.process-regen-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  color: rgba(var(--accent-rgb), 0.8);
  transition: all 0.15s;
}
.process-regen-submit:hover {
  background: rgba(var(--accent-rgb), 0.25);
}
.process-type-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.process-type-badge.purple {
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(var(--accent-rgb), 0.9);
}
.process-type-badge.green {
  background: rgba(34, 197, 94, 0.2);
  color: rgba(34, 197, 94, 0.9);
}
.process-type-badge.blue {
  background: rgba(56, 189, 248, 0.2);
  color: rgba(56, 189, 248, 0.9);
}
.process-type-badge.amber {
  background: rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.9);
}
.process-dest-select {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  flex-shrink: 0;
  cursor: pointer;
}
.process-dest-select:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.process-dest-select option {
  background: #1a1a2e;
  color: var(--os-text-secondary);
}
.process-domain-picker {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
}
.process-domain-select {
  font-size: 0.6rem;
  color: var(--os-text-muted);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
  cursor: pointer;
}
.process-domain-select:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--os-text-secondary);
}
.process-domain-select option {
  background: #1a1a2e;
  color: var(--os-text-secondary);
}
.process-source-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.process-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.process-tag {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 3px;
}
.process-tag-remove {
  background: none;
  border: none;
  color: rgba(var(--accent-rgb), 0.5);
  cursor: pointer;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
}
.process-tag-remove:hover {
  color: #ef4444;
}
.process-tag-input {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(0, 0, 0, 0.3);
  color: var(--accent);
  width: 70px;
  outline: none;
}
.process-tag-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}
.process-add-tag-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
}
.process-add-tag-btn:hover {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.process-entry-people {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.process-people-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(244, 114, 182, 0.15);
  color: #f472b6;
  display: flex;
  align-items: center;
  gap: 3px;
}
.process-original-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  background: rgba(251, 191, 36, 0.1);
  color: rgba(251, 191, 36, 0.5);
  flex-shrink: 0;
}
.process-original-badge s {
  text-decoration: line-through;
}
.process-correction-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 1.5rem;
  color: rgba(251, 191, 36, 0.5);
}
.process-correction-reason {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: var(--os-text-secondary);
  outline: none;
  transition: border-color 0.15s;
}
.process-correction-reason::placeholder {
  color: var(--os-text-hint);
}
.process-correction-reason:focus {
  border-color: rgba(251, 191, 36, 0.35);
}
.process-correction-dismiss {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.process-correction-dismiss:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
}
.process-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.process-cancel-btn {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.process-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.process-confirm-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
  cursor: pointer;
  transition: all 0.15s;
}
.process-confirm-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.5);
}
.process-confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.process-feedback-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  margin-right: auto;
}
.process-feedback-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.process-feedback-panel {
  position: absolute;
  bottom: 3.5rem;
  left: 1rem;
  right: 1rem;
  max-height: 300px;
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.process-feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.process-feedback-header button {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
}
.process-feedback-header button:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.process-feedback-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.process-feedback-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
}
.process-feedback-content th {
  text-align: left;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.process-feedback-content td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--os-text-muted);
}
/* ==================== */
/* Scratch View         */
/* ==================== */
.scratch-view {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}
/* When notebook is embedded inside PlanningView's today-main */
.scratch-view.scratch-view-embedded {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.scratch-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  gap: 0;
  order: 2;
  position: relative;
  min-width: 0;
}
/* Toolbar rendered inline in the tab bar */
.notebook-tab-toolbar {
  margin-left: auto;
  flex-shrink: 0;
  border-bottom: none;
  background: transparent;
  padding: 0 4px;
  height: 100%;
  align-items: center;
}
.notebook-tab-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 100%;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--os-text-muted);
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  margin-right: 2px;
  transition: color 0.12s, background 0.12s;
}
.notebook-tab-sidebar-toggle:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.05);
}
body.light .notebook-tab-sidebar-toggle {
  border-right-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}
body.light .notebook-tab-sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}
/* editor area: clean padding inside the column */
.scratch-main .notebook-editor {
  padding: 1rem 1.5rem 2rem;
  min-width: 0;
}
/* Content-sized editor — don't stretch to fill container */
.scratch-main .live-editor-compat {
  height: auto;
  flex: none;
}
.scratch-main .live-editor-compat .live-preview-editor {
  flex: none;
  min-height: 0;
}
.scratch-main .live-editor-compat .cm-editor {
  height: auto;
}
.notebook-editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0.5rem;
  flex-shrink: 0;
}
.scratch-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.scratch-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.scratch-sidebar {
  order: 0;
  position: relative;
  width: 180px;
  flex-shrink: 0;
  min-height: 0;
  padding: 0.75rem 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow-y: auto;
}
.scratch-sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  border-right: none;
  overflow: hidden;
}
.scratch-sidebar-divider {
  order: 1;
  width: 4px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s ease;
}
.scratch-sidebar-divider:hover,
.scratch-sidebar-divider.active {
  background: rgba(var(--accent-rgb), 0.4);
}
/* divider hover handled by direct background above */
/* ===== Notebook Calendar Sidebar (right) ===== */
.notebook-cal-sidebar {
  order: 3;
  width: 240px;
  flex-shrink: 0;
  min-height: 0;
  padding: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}
.notebook-cal-sidebar.collapsed {
  width: 36px;
  min-width: 36px;
  padding: 0.5rem 0.25rem;
  align-items: center;
  overflow: hidden;
}
.notebook-cal-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  align-self: flex-end;
  flex-shrink: 0;
}
.notebook-cal-toggle:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.notebook-cal-sidebar.collapsed .notebook-cal-toggle {
  align-self: center;
}
.scratch-sidebar-search-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.scratch-sidebar-search-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.scratch-sidebar-search {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--os-text-primary);
  font-size: 0.7rem;
  padding: 3px 0;
  min-width: 0;
}
.scratch-sidebar-search::placeholder {
  color: var(--os-text-hint);
}
.scratch-sidebar-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--os-text-hint);
  border-radius: 3px;
}
.scratch-sidebar-search-clear:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.08);
}
.scratch-sidebar-search-results {
  overflow-y: auto;
  flex: 1;
}
.scratch-sidebar-search-empty {
  padding: 8px 4px;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  text-align: center;
}
.scratch-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
  padding: 0 0.25rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.scratch-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.scratch-add-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
.scratch-page-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.scratch-page-list::-webkit-scrollbar {
  width: 3px;
}
.scratch-page-list::-webkit-scrollbar-track {
  background: transparent;
}
.scratch-page-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
/* Tree node: page + optional heading subtree */
.scratch-page-tree-node {
  display: flex;
  flex-direction: column;
}
.scratch-page-tree-node + .scratch-page-tree-node {
  margin-top: 1px;
}
/* Page row */
.scratch-page-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 28px;
}
.scratch-page-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.scratch-page-item.active {
  background: rgba(var(--accent-rgb), 0.12);
}
.scratch-page-item.drag-over {
  border-top: 2px solid rgba(var(--accent-rgb), 0.6);
  padding-top: calc(0.35rem - 2px);
}
.scratch-page-item[draggable="true"] {
  cursor: grab;
}
.scratch-page-item[draggable="true"]:active {
  cursor: grabbing;
  opacity: 0.6;
}
.scratch-tree-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
  transition: all 0.12s;
}
.scratch-tree-toggle:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.scratch-page-item.active .scratch-tree-toggle {
  color: rgba(var(--accent-rgb), 0.6);
}
.scratch-page-item.active .scratch-tree-toggle:hover {
  color: rgba(var(--accent-rgb), 0.9);
}
.scratch-page-icon {
  flex-shrink: 0;
  color: var(--os-text-hint);
}
.scratch-page-toggle-spacer {
  width: 12px;
  flex-shrink: 0;
}
.scratch-page-item.active .scratch-page-icon {
  color: rgba(var(--accent-rgb), 0.65);
}
.scratch-page-title {
  font-size: 0.7875rem;
  color: var(--os-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  line-height: 1.3;
}
.scratch-page-item.active .scratch-page-title {
  color: rgba(var(--accent-rgb), 0.95);
  font-weight: 550;
}
/* ---- Right-click context menu ---- */
.scratch-context-backdrop {
  position: absolute;
  inset: 0;
  z-index: 999;
}
.scratch-context-menu {
  position: absolute;
  z-index: 1000;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.scratch-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--os-text-secondary);
  font-size: 0.78rem;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}
.scratch-context-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
}
.scratch-context-menu button.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
/* ---- Context menu submenu (Move to) ---- */
/* ---- Move file dialog ---- */
.scratch-move-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.scratch-move-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  max-height: 420px;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.scratch-move-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.scratch-move-header button {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}
.scratch-move-header button:hover {
  color: var(--os-text-secondary);
}
.scratch-move-list {
  overflow-y: auto;
  padding: 6px 0;
  flex: 1;
}
.scratch-move-group {
  padding: 4px 0;
}
.scratch-move-group + .scratch-move-group {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.scratch-move-group-label {
  padding: 6px 14px 3px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-hint);
}
.scratch-move-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px 7px 22px;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
}
.scratch-move-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}
.scratch-folder-create-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scratch-folder-create-path {
  font-size: 0.7rem;
  color: var(--os-text-muted);
}
.scratch-folder-create-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.28);
  color: var(--os-text-primary);
  font-size: 0.8rem;
  outline: none;
}
.scratch-folder-create-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}
select.scratch-folder-create-input {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  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='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
select.scratch-folder-create-input option {
  background: #1a1a22;
  color: var(--os-text-primary);
}
.scratch-folder-create-error {
  font-size: 0.72rem;
  color: #ef4444;
}
.scratch-folder-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.scratch-folder-create-btn {
  border-radius: 7px;
  border: 1px solid transparent;
  padding: 6px 10px;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.scratch-folder-create-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--os-text-secondary);
}
.scratch-folder-create-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}
.scratch-folder-create-btn.primary {
  background: rgba(var(--accent-rgb), 0.22);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: #d8b4fe;
}
.scratch-folder-create-btn.primary:hover {
  background: rgba(var(--accent-rgb), 0.3);
}
.scratch-folder-create-btn.danger {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.35);
  color: rgba(252, 165, 165, 0.95);
}
.scratch-folder-create-btn.danger:hover {
  background: rgba(239, 68, 68, 0.24);
}
.scratch-folder-create-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.scratch-folder-create-textarea {
  min-height: 72px;
  resize: vertical;
  font-family: inherit;
}
.scratch-area-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
}
.scratch-area-checkbox input {
  accent-color: rgba(var(--accent-rgb), 0.9);
}
/* ---- TOC panel in editor (collapsible tree) ---- */
.scratch-toc-panel {
  position: relative;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem 0.375rem 0.75rem 0.625rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  align-self: flex-start;
  max-height: 100%;
}
/* Resize handle on the left edge */
.scratch-toc-resize {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 2;
}
.scratch-toc-resize:hover,
.scratch-toc-resize:active {
  background: rgba(var(--accent-rgb), 0.25);
}
.scratch-toc-title {
  padding: 0 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--os-text-hint);
}
/* Row: toggle + text */
.scratch-toc-item {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 2px 0.25rem;
  border-radius: 4px;
  transition: background 0.15s;
}
.scratch-toc-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.scratch-toc-item.scratch-toc-active {
  background: rgba(167, 139, 250, 0.15);
  border-left: 2px solid #a78bfa;
}
.scratch-toc-item.scratch-toc-active .scratch-toc-text {
  color: #a78bfa;
  font-weight: 600;
}
.scratch-toc-item.scratch-toc-in-section {
  background: rgba(167, 139, 250, 0.06);
  border-left: 2px solid rgba(167, 139, 250, 0.25);
}
.scratch-toc-item.scratch-toc-in-section .scratch-toc-text {
  color: rgba(167, 139, 250, 0.8);
}
/* Chevron toggle button */
.scratch-toc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, background 0.15s, transform 0.15s;
}
.scratch-toc-toggle:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.scratch-toc-toggle.collapsed {
  transform: rotate(-90deg);
}
/* Dot for leaf nodes (no children) */
.scratch-toc-dot {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scratch-toc-dot::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
/* Clickable heading text */
.scratch-toc-text {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 1px 0.25rem;
  color: var(--os-text-muted);
  font-size: 0.73rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 3px;
  transition: color 0.15s;
}
.scratch-toc-text:hover {
  color: var(--os-text-primary);
}
/* Level-specific text styling */
.scratch-toc-item.level-1 .scratch-toc-text {
  color: var(--os-text-secondary);
  font-size: 0.76rem;
}
.scratch-toc-item.level-3 .scratch-toc-text,
.scratch-toc-item.level-4 .scratch-toc-text {
  font-size: 0.68rem;
  color: var(--os-text-muted);
}
/* Nested children — indented with a subtle left border */
.scratch-toc-children {
  margin-left: 7px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.scratch-toc-empty {
  padding: 1.5rem 0.75rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  text-align: center;
  font-style: italic;
}
.scratch-toc-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 6px 4px;
}
.scratch-toc-link-branch {
  cursor: pointer;
}
.scratch-toc-link-icon {
  flex-shrink: 0;
  color: var(--os-text-hint);
  margin-right: 2px;
}
.scratch-toc-link-label {
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  color: var(--os-text-muted) !important;
}
.scratch-toc-root-node {
  cursor: pointer;
}
.scratch-toc-root-label {
  font-weight: 500 !important;
  font-size: 0.76rem !important;
  color: var(--os-text-muted) !important;
}
.scratch-toc-link-count {
  margin-left: 3px;
  font-size: 9px;
  font-weight: 400;
  color: var(--os-text-hint);
  min-width: 0;
  line-height: 1;
}
/* Toolbar (search, expand/collapse) */
.scratch-toc-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px 6px 2px;
  flex-shrink: 0;
}
.scratch-toc-toolbar-btn {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.scratch-toc-toolbar-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.scratch-toc-toolbar-btn.active {
  color: rgba(167, 139, 250, 0.8);
}
/* Outline search */
.scratch-toc-search {
  padding: 2px 6px 4px;
  position: relative;
  flex-shrink: 0;
}
.scratch-toc-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 24px 4px 8px;
  font-size: 0.7rem;
  color: var(--os-text-primary);
  outline: none;
  box-sizing: border-box;
}
.scratch-toc-search-input:focus {
  border-color: rgba(167, 139, 250, 0.4);
}
.scratch-toc-search-input::placeholder {
  color: var(--os-text-hint);
}
.scratch-toc-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}
.scratch-toc-search-clear:hover {
  color: var(--os-text-muted);
}
/* ---- Area sub-files tree in Notes sidebar ---- */
.scratch-area-add-file-btn {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  margin-left: auto;
  display: none;
  align-items: center;
  flex-shrink: 0;
}
.scratch-page-item:hover .scratch-area-add-file-btn {
  display: flex;
}
.scratch-area-add-file-btn:hover {
  color: var(--os-text-secondary);
}
.scratch-area-file-tree {
  display: flex;
  flex-direction: column;
  margin-left: 24px;
  padding: 0.15rem 0 0.25rem 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.scratch-area-file-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.7875rem;
  color: var(--os-text-muted);
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scratch-area-file-item:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}
.scratch-area-file-item.active {
  color: rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--accent-rgb), 0.1);
}
.scratch-area-file-item.creating {
  opacity: 1;
  color: var(--os-text-secondary);
}
.scratch-area-file-input {
  flex: 1;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 3px;
  color: var(--os-text-primary);
  font-size: 0.68rem;
  outline: none;
  min-width: 0;
}
.scratch-area-file-input:focus {
  border-color: rgba(var(--accent-rgb), 0.7);
}
/* ---- Heading tree under active page ---- */
.scratch-heading-tree {
  display: flex;
  flex-direction: column;
  margin-left: 0.85rem;
  padding: 0.2rem 0 0.35rem 0;
  border-left: 1px solid rgba(var(--accent-rgb), 0.15);
}
.scratch-heading-item {
  position: relative;
  padding: 0.175rem 0.5rem 0.175rem 0;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.12s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
/* Connector tick from the tree line */
.scratch-heading-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 1px;
  background: rgba(var(--accent-rgb), 0.15);
}
.scratch-heading-item:hover {
  color: var(--os-text-secondary);
  background: rgba(var(--accent-rgb), 0.08);
}
.scratch-heading-item.level-2 {
  padding-left: 0.75rem;
}
.scratch-heading-item.level-2::before {
  left: 0;
}
.scratch-heading-item.level-3 {
  padding-left: 1.35rem;
}
.scratch-heading-item.level-3::before {
  left: 0.6rem;
  width: 6px;
}
.scratch-heading-item.level-4 {
  padding-left: 1.95rem;
  font-size: 0.675rem;
  color: var(--os-text-hint);
}
.scratch-heading-item.level-4::before {
  left: 1.2rem;
  width: 6px;
}
.scratch-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0.75rem;
  color: var(--os-text-hint);
}
.scratch-empty p {
  margin: 0;
  font-size: 0.875rem;
}
.scratch-create-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.scratch-create-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.4);
}
/* ==================== */
/* Notebook Tab Bar      */
/* ==================== */
.notebook-tab-bar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 36px;
  flex-shrink: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 0.25rem;
  scrollbar-width: none;
}
.notebook-tab-bar::-webkit-scrollbar { display: none; }
.notebook-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 0.5rem;
  max-width: 160px;
  min-width: 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.notebook-tab:hover {
  color: var(--os-text-secondary);
}
.notebook-tab.active {
  color: var(--os-text-primary);
  border-bottom-color: var(--accent);
}
.notebook-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.notebook-tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  color: var(--os-text-hint);
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.notebook-tab:hover .notebook-tab-close,
.notebook-tab.active .notebook-tab-close {
  opacity: 1;
}
.notebook-tab-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.notebook-tab[draggable] {
  cursor: grab;
}
.notebook-tab[draggable]:active {
  cursor: grabbing;
}
.notebook-tab.dragging {
  opacity: 0.4;
}
.notebook-tab.drag-left {
  border-left: 2px solid rgba(var(--accent-rgb), 0.6);
  padding-left: calc(0.5rem - 2px);
}
.notebook-tab.drag-right {
  border-right: 2px solid rgba(var(--accent-rgb), 0.6);
  padding-right: calc(0.5rem - 2px);
}
/* Tab context menu */
.notebook-tab-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 150px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.notebook-tab-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.78rem;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}
.notebook-tab-context-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}
.notebook-tab-context-menu button:disabled {
  opacity: 0.35;
  cursor: default;
}
.notebook-tab-context-menu button:disabled:hover {
  background: none;
}
/* ==================== */
/* Notebook Landing Page */
/* ==================== */
.notebook-landing {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding-top: 3rem;
}
.notebook-landing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 400px;
  padding: 0 1rem 2rem;
}
.notebook-landing-search-wrap {
  position: relative;
  width: 100%;
}
.notebook-landing-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--os-text-hint);
  pointer-events: none;
}
.notebook-landing-search {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.notebook-landing-search:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.notebook-landing-search::placeholder {
  color: var(--os-text-hint);
}
.notebook-landing-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.notebook-landing-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  transition: background 0.12s;
}
.notebook-landing-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}
.notebook-landing-item-remove {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.notebook-landing-item:hover .notebook-landing-item-remove {
  display: flex;
}
.notebook-landing-item-remove:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}
.notebook-landing-item-icon {
  flex-shrink: 0;
  color: var(--os-text-hint);
}
.notebook-landing-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notebook-landing-item-badge {
  font-size: 0.6875rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}
.notebook-landing-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-hint);
  padding: 0 0.25rem;
  width: 100%;
}
.notebook-landing-clear-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
}
.notebook-landing-clear-btn:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.08);
}
.notebook-landing-empty {
  text-align: center;
  color: var(--os-text-hint);
  font-size: 0.8125rem;
  padding: 1.5rem 0;
}
/* Reuse notebook editor styles for scratch */
.scratch-main .notebook-editor-row {
  display: flex;
  min-width: 0;
  overflow: hidden;
}
.scratch-main .notebook-editor-row .notebook-editor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Remove boxy frame from notebook editor */
.scratch-main .notebook-editor .editable-markdown-editor-wrapper {
  border: none !important;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* Scratch sidebar header actions */
.scratch-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Starred section */
.scratch-starred-header {
  margin-bottom: 2px;
}
.scratch-starred-header span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.scratch-starred-header .lucide {
  color: rgba(250, 204, 21, 0.6);
}
.scratch-starred-list {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.scratch-starred-item {
  padding-left: 0.6rem;
}
/* Star indicator on items */
.scratch-star-indicator {
  flex-shrink: 0;
  color: rgba(250, 204, 21, 0.5);
  margin-left: 2px;
}
.scratch-today-badge {
  flex-shrink: 0;
  font-size: 9px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(100, 160, 255, 0.15);
  color: rgba(100, 160, 255, 0.8);
  margin-left: 4px;
  line-height: 16px;
}
/* ==================== */
/* Scratch Folders */
/* ==================== */
.scratch-folder-node {
  margin-bottom: 2px;
}
.scratch-virtual-folder-node {
  margin-bottom: 1px;
}
.scratch-virtual-folder-item {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 4px 6px;
  border: none;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  text-align: left;
}
.scratch-virtual-folder-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.scratch-virtual-folder-item.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: rgba(var(--accent-rgb), 0.95);
}
.scratch-folder-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  transition: background 0.15s ease;
  user-select: none;
}
.scratch-folder-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.scratch-folder-item.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: rgba(var(--accent-rgb), 0.95);
}
.scratch-folder-item.drag-over {
  background: rgba(56, 189, 248, 0.12);
  outline: 1px dashed rgba(56, 189, 248, 0.4);
  outline-offset: -1px;
}
.scratch-folder-item.drag-above {
  border-top: 2px solid rgba(56, 189, 248, 0.6);
}
.scratch-drop-top {
  height: 4px;
  flex-shrink: 0;
  border-radius: 2px;
  transition: height 0.15s ease, background 0.15s ease;
}
.scratch-drop-top.active {
  height: 6px;
  background: rgba(56, 189, 248, 0.4);
}
.scratch-folder-chevron {
  flex-shrink: 0;
  opacity: 0.5;
}
.scratch-folder-toggle-btn {
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.scratch-folder-toggle-spacer {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: inline-block;
}
.scratch-folder-icon {
  flex-shrink: 0;
  color: rgba(var(--accent-rgb), 0.6);
}
.scratch-folder-item:hover .scratch-folder-icon {
  color: rgba(var(--accent-rgb), 0.85);
}
.scratch-folder-item.active .scratch-folder-icon,
.scratch-virtual-folder-item.active .scratch-folder-icon {
  color: rgba(var(--accent-rgb), 0.9);
}
.scratch-folder-name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scratch-folder-count {
  font-size: 0.625rem;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 8px;
  flex-shrink: 0;
}
.scratch-folder-rename-input {
  flex: 1;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 3px;
  color: var(--os-text-primary);
  font-size: 0.75rem;
  outline: none;
  min-width: 0;
}
.scratch-folder-rename-input:focus {
  border-color: rgba(var(--accent-rgb), 0.7);
}
.scratch-folder-children {
  padding-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  margin-left: 12px;
  margin-top: 1px;
}
.scratch-folder-children .scratch-folder-children {
  margin-left: 10px;
}
.scratch-folder-empty {
  padding: 4px 8px;
  font-size: 0.65rem;
  color: var(--os-text-hint);
  font-style: italic;
}
/* ==================== */
/* Mini Calendar */
/* ==================== */
.mini-cal {
  background: var(--os-glass-bg);
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  padding: 0.75rem;
  flex-shrink: 0;
}
.mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.mini-cal-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.mini-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.mini-cal-nav:hover {
  background: var(--os-hover-bg);
  color: var(--os-text-secondary);
}
.mini-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.25rem;
}
.mini-cal-weekday {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--os-text-hint);
  padding: 0.2rem;
}
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mini-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  max-width: 28px;
  border-radius: 6px;
  font-size: 0.75rem;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  margin: 0 auto;
}
.mini-cal-day.blank {
  cursor: default;
}
.mini-cal-day:not(.blank):hover {
  background: rgba(255, 255, 255, 0.1);
}
.mini-cal-day.today {
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: rgba(56, 189, 248, 0.9);
}
.mini-cal-day.selected {
  background: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-weight: 600;
}
.mini-cal-day.has-content::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.6);
}
.mini-cal-day.selected.has-content::after {
  background: var(--accent);
}
.mini-cal-day.has-content.processed::after {
  background: rgba(74, 222, 128, 0.6);
}
.mini-cal-day.selected.has-content.processed::after {
  background: #4ade80;
}
/* Calendar context menu */
.mini-cal-context-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.mini-cal-context-menu {
  position: fixed;
  background: rgba(20, 22, 35, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  transform: translateX(-100%);
}
.mini-cal-context-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
}
.mini-cal-context-item:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 1);
}
/* ===========================
   Info View - Posture System
   =========================== */
.info-view {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.info-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}
.info-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.info-section-desc {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  line-height: 1.5;
}
/* Posture cards grid */
.posture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.posture-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid;
  border-radius: 8px;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.posture-card.orange { border-left-color: #fb923c; }
.posture-card.green { border-left-color: #4ade80; }
.posture-card.red { border-left-color: #ef4444; }
.posture-card.blue { border-left-color: #38bdf8; }
.posture-card.amber { border-left-color: #fbbf24; }
.posture-card.teal { border-left-color: #2dd4bf; }
.posture-card.purple { border-left-color: var(--accent); }
.posture-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.posture-card.orange .posture-card-header { color: #fb923c; }
.posture-card.green .posture-card-header { color: #4ade80; }
.posture-card.red .posture-card-header { color: #ef4444; }
.posture-card.blue .posture-card-header { color: #38bdf8; }
.posture-card.amber .posture-card-header { color: #fbbf24; }
.posture-card.teal .posture-card-header { color: #2dd4bf; }
.posture-card.purple .posture-card-header { color: var(--accent); }
.posture-card-name {
  font-size: 0.875rem;
  font-weight: 600;
}
.posture-card-def {
  margin: 0;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
.posture-card-test {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.4;
  font-style: italic;
}
.posture-card-label {
  font-weight: 600;
  font-style: normal;
  color: var(--os-text-muted);
}
.posture-card-route {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.7rem;
  color: var(--os-text-muted);
}
.posture-card-route code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
/* Key distinctions */
.info-distinction {
  margin-bottom: 1rem;
}
.info-distinction:last-child {
  margin-bottom: 0;
}
.info-distinction h4 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.info-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.info-table th:first-child {
  border-radius: 6px 0 0 0;
}
.info-table th:last-child {
  border-radius: 0 6px 0 0;
}
.info-table td {
  padding: 0.4rem 0.75rem;
  color: var(--os-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.info-table tr:last-child td {
  border-bottom: none;
}
/* Routing priority */
.info-priority-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: priority;
}
.info-priority-list li {
  counter-increment: priority;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.info-priority-list li::before {
  content: counter(priority);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  flex-shrink: 0;
}
.info-priority-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.info-priority-badge.orange { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.info-priority-badge.green { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.info-priority-badge.red { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.info-priority-badge.blue { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.info-priority-badge.amber { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.info-priority-badge.teal { background: rgba(45, 212, 191, 0.2); color: #2dd4bf; }
.info-priority-badge.purple { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
/* Also add missing process-type-badge colors */
.process-type-badge.orange {
  background: rgba(251, 146, 60, 0.2);
  color: rgba(251, 146, 60, 0.9);
}
.process-type-badge.red {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.9);
}
.process-type-badge.teal {
  background: rgba(45, 212, 191, 0.2);
  color: rgba(45, 212, 191, 0.9);
}
/* Philosophy section */
.info-philosophy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.info-philosophy-columns {
  display: flex;
  gap: 0.75rem;
}
.info-philosophy-col {
  flex: 1;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.info-philosophy-col.within {
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.15);
}
.info-philosophy-col.beyond {
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.15);
}
.info-philosophy-col h4 {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.info-philosophy-col.within h4 { color: #4ade80; }
.info-philosophy-col.beyond h4 { color: #38bdf8; }
.info-philosophy-subtitle {
  margin: 0 0 0.625rem;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  font-style: italic;
}
.info-philosophy-col ul {
  margin: 0;
  padding: 0 0 0 1rem;
  list-style: disc;
}
.info-philosophy-col ul li {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.6;
}
.info-philosophy-route {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: var(--os-text-muted);
}
.info-philosophy-route code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.info-philosophy-pipeline {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1rem;
}
.info-philosophy-pipeline h4 {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.info-pipeline-flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.info-pipeline-flow svg {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.pipeline-stage {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Planning stack */
.info-planning-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.info-planning-layer {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}
.info-planning-layer.execution {
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.15);
}
.info-planning-layer-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}
.info-planning-layer-header svg {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}
.info-planning-layer.execution .info-planning-layer-header svg {
  color: rgba(74, 222, 128, 0.7);
}
.info-planning-layer p {
  margin: 0;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.5;
  padding-left: 1.15rem;
}
.info-planning-connector {
  display: flex;
  justify-content: center;
  padding: 0.125rem 0;
  color: var(--os-text-hint);
}
/* ============================== */
/* Planning Position Bar          */
/* ============================== */
/* Legacy tree-item-planning (kept for compatibility) */
.tree-item-planning {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.35rem 0.25rem 0.35rem 0.5rem;
  margin-left: 0.25rem;
}
.tree-item-click-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  overflow: hidden;
}
.tree-item-click-area .tree-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Goal items ────────────────────────────── */
.planning-tree .tree-item.goal-item {
  padding-left: 2.5rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  white-space: nowrap;
}
.planning-tree .tree-item.goal-item .tree-item-subtitle {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.planning-tree .tree-item.goal-item:hover .tree-item-subtitle,
.planning-tree .tree-item.goal-item.active .tree-item-subtitle {
  opacity: 1;
}
.tree-item.goal-item.not-current .tree-item-label {
  opacity: 0.7;
  font-style: italic;
}
.tree-item.goal-item:hover .tree-period-chevron {
  color: var(--os-text-muted);
}
/* Dropdown trigger — small chevron on the right */
.tree-period-dropdown-wrap {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tree-period-dropdown-wrap .tree-period-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
}
.tree-period-chevron {
  color: var(--os-text-hint);
  pointer-events: none;
  transition: color 0.15s ease;
}
.tree-item-planning:hover .tree-period-chevron {
  color: var(--os-text-muted);
}
.tree-period-dropdown-wrap:hover .tree-period-chevron {
  color: var(--os-text-secondary);
}
.tree-period-select option {
  background: #1a1a2e;
  color: var(--os-text-primary);
  padding: 0.25rem;
}
/* Reset dot — appears when navigated away from current period */
.tree-period-reset {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  color: rgba(var(--accent-rgb), 0.6);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s ease;
}
.tree-period-reset:hover {
  color: rgba(var(--accent-rgb), 1);
  background: rgba(var(--accent-rgb), 0.15);
}
/* ============================== */
/* Tree Hierarchy Indentation     */
/* ============================== */
.tree-item.season-item {
  font-weight: 600;
}
.tree-item.month-item {
}
.tree-item.week-item {
}
.tree-item.day-item {
}
.tree-item.not-current .tree-item-label {
  opacity: 0.7;
  font-style: italic;
}
/* ============================== */
/* Horizon Cascade / Context      */
/* ============================== */
/* Horizon body — side by side layout when context is open */
.horizon-body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.horizon-body .horizon-content {
  flex: 1;
  min-width: 0;
}
.horizon-body.with-context .horizon-content {
  flex: 1;
}
/* Context panel — right side, resizable */
.horizon-context-panel {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.horizon-context-resize-handle {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 5;
}
.horizon-context-resize-handle:hover,
.horizon-context-resize-handle:active {
  background: rgba(251, 191, 36, 0.3);
}
.horizon-context-panel-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--os-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.horizon-context-panel-header span {
  flex: 1;
}
.horizon-context-close {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.horizon-context-close:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
}
.horizon-context-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.horizon-context-level {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.horizon-context-level-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(251, 191, 36, 0.6);
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.horizon-context-level-content {
  padding: 0.4rem 0.6rem;
  overflow-x: auto;
}
.horizon-context-level-content table {
  font-size: 0.7rem;
  width: 100%;
}
.horizon-context-level-content table th,
.horizon-context-level-content table td {
  padding: 0.2rem 0.4rem;
  white-space: nowrap;
}
.horizon-context-level-content .markdown-block {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--os-text-muted);
}
.horizon-context-level-content .markdown-block p {
  margin: 0.15rem 0;
}
.horizon-context-level-content .markdown-block ul,
.horizon-context-level-content .markdown-block ol {
  margin: 0.15rem 0;
  padding-left: 1.1rem;
}
.horizon-context-level-content .markdown-block li {
  margin: 0.1rem 0;
}
.horizon-context-level-content .markdown-block strong {
  color: var(--os-text-secondary);
}
.horizon-context-empty {
  font-size: 0.75rem;
  color: var(--os-text-hint);
  font-style: italic;
}
/* Context button in header */
.horizon-context-btn {
  gap: 0.3rem;
}
.horizon-context-btn.active {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}
/* Legacy cascade styles (kept for compat) */
.horizon-cascade {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.cascade-toggle {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  font-size: 0.6875rem;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
}
.cascade-toggle:hover {
  color: var(--os-text-muted);
}
.cascade-content {
  margin-top: 0.5rem;
  padding: 0.625rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 2px solid rgba(251, 191, 36, 0.3);
}
.cascade-content .markdown-block {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--os-text-muted);
}
.cascade-empty {
  font-size: 0.75rem;
  color: var(--os-text-hint);
  font-style: italic;
}
/* Backlog open button */
.backlog-open-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-top: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--os-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.backlog-open-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.15);
}
.backlog-open-count {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 8px;
  margin-left: auto;
}
/* Backlog dialog */
.backlog-dialog {
  background: rgba(20, 20, 25, 0.98);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.backlog-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.backlog-dialog-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--os-text-primary);
}
.backlog-dialog-title h3 {
  margin: 0;
  font-size: 1rem;
}
.backlog-dialog-add {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.backlog-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}
/* Add form options row */
.section-add-options {
  display: flex;
  gap: 0.4rem;
}
/* Linked note */
.linked-note-display {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.linked-note-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  color: rgba(var(--accent-rgb), 0.9);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  min-width: 0;
}
.linked-note-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linked-note-link:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.linked-note-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  flex-shrink: 0;
}
.linked-note-remove:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.linked-note-add-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.linked-note-add-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  border-color: rgba(255, 255, 255, 0.25);
}
.linked-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}
.linked-notes-actions {
  display: flex;
  gap: 0.35rem;
}
.linked-notes-actions .linked-note-add-btn {
  width: auto;
  flex: 1;
}
.linked-note-type {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.task-linked-notes-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: rgba(var(--accent-rgb), 0.7);
  font-size: 0.7rem;
  margin-left: 0.35rem;
  flex-shrink: 0;
}
.task-linked-notes-count {
  font-size: 0.65rem;
}
/* Note Picker Dialog */
.note-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
.note-picker-dialog {
  width: 90%;
  max-width: 420px;
  max-height: 65vh;
  background: rgba(24, 24, 32, 0.98);
  backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.15s ease;
}
.note-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.note-picker-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-primary);
  letter-spacing: -0.01em;
}
.note-picker-tabs {
  display: flex;
  gap: 2px;
  padding: 0.5rem 0.75rem 0;
}
.note-picker-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.note-picker-tab:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.04);
}
.note-picker-tab.active {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.08);
}
.note-picker-thread-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-picker-thread-area {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.note-picker-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.6rem 0.75rem 0.35rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--os-text-hint);
  transition: border-color 0.15s ease;
}
.note-picker-filter:focus-within {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.04);
}
.note-picker-filter input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  outline: none;
}
.note-picker-filter input::placeholder {
  color: var(--os-text-hint);
}
.note-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.35rem 0.5rem 0.65rem;
  scrollbar-gutter: stable;
}
.note-picker-list::-webkit-scrollbar {
  width: 5px;
}
.note-picker-list::-webkit-scrollbar-track {
  background: transparent;
}
.note-picker-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.note-picker-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
.note-picker-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.35rem 0.55rem;
  margin-bottom: 1px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--os-text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.1s ease;
}
.note-picker-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.note-picker-arrow {
  color: var(--os-text-hint);
  flex-shrink: 0;
  width: 14px;
  transition: transform 0.12s ease;
}
.note-picker-item.folder {
  color: var(--os-text-muted);
  font-weight: 500;
}
.note-picker-item.folder > .lucide-icon:not(.note-picker-arrow) {
  color: rgba(130, 170, 255, 0.7);
}
.note-picker-item.folder:hover {
  background: rgba(130, 170, 255, 0.06);
  color: var(--os-text-secondary);
}
.note-picker-item.file {
  color: var(--os-text-muted);
  padding-left: calc(0.55rem + 14px + 0.45rem);
  font-weight: 400;
}
.note-picker-item.file:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: rgba(var(--accent-rgb), 0.95);
}
.note-picker-item.flat-result {
  padding: 0.45rem 0.55rem;
  flex-wrap: wrap;
  gap: 0.2rem;
}
.note-picker-result-name {
  font-weight: 500;
  color: var(--os-text-secondary);
}
.note-picker-result-path {
  font-size: 0.67rem;
  color: var(--os-text-hint);
  width: 100%;
  padding-left: calc(15px + 0.45rem);
  letter-spacing: 0.01em;
}
.note-picker-empty {
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--os-text-hint);
  font-size: 0.8rem;
}
/* ========== Areas View ========== */
.areas-view {
  padding: 1.5rem;
  overflow-y: auto;
  height: 100%;
}
.areas-view-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.areas-view-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--os-text-primary);
}
.areas-view-count {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.areas-view-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.areas-group-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  outline: none;
  cursor: pointer;
}
.areas-add-btn-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
  font-weight: 500;
}
.areas-add-btn-header:hover {
  background: rgba(var(--accent-rgb), 0.2);
}
.areas-domain-group {
  margin-bottom: 1.25rem;
}
.areas-domain-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}
.areas-domain-name {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.areas-domain-count {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 8px;
}
.areas-add-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.areas-add-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}
.areas-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.areas-add-form-row {
  display: flex;
  gap: 0.4rem;
}
.areas-add-form-row input {
  flex: 1;
}
.areas-add-form-row select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  outline: none;
}
.areas-add-form input,
.areas-add-form select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  outline: none;
}
.areas-add-form input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.areas-add-form-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.areas-add-form-actions button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
}
.areas-add-form-actions button:first-child {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.areas-add-form-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.areas-add-form-actions button:first-child:hover {
  background: rgba(var(--accent-rgb), 0.25);
}
.areas-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
  padding: 0 0.25rem;
}
.areas-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.areas-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
}
.areas-card.editing {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.05);
}
.areas-card-display {
  padding: 0.75rem;
  cursor: pointer;
  position: relative;
}
.areas-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin-bottom: 0.25rem;
}
.areas-card-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  line-height: 1.4;
}
.areas-card-tags {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.areas-card-tag {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: lowercase;
}
.areas-card-tag.blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.areas-card-tag.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.areas-card-tag.purple { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.areas-card-tag.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.areas-card-tag.gray { background: rgba(255, 255, 255, 0.08); color: var(--os-text-muted); }
.areas-card-tag.pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.areas-card-tag.teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
.areas-card-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.areas-card-badge.legacy {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-hint);
}
.areas-card-edit {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.areas-card-edit label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.areas-card-edit label span {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.areas-card-edit textarea,
.areas-card-edit input,
.areas-card-edit select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  outline: none;
  font-family: inherit;
  resize: vertical;
}
.areas-card-edit textarea:focus,
.areas-card-edit input:focus,
.areas-card-edit select:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.areas-card-edit-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.areas-card-edit-actions button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
}
.areas-card-edit-actions button:first-child {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.areas-card-edit-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.areas-empty {
  padding: 1rem;
  text-align: center;
  color: var(--os-text-hint);
  font-size: 0.8rem;
  grid-column: 1 / -1;
}
.areas-card-intention {
  font-size: 0.75rem;
  color: rgba(var(--accent-rgb), 0.7);
  font-style: italic;
  margin-top: 0.15rem;
}
/* ========== Sidebar Area Items ========== */
.tree-area-group {
  margin-bottom: 0;
}
.tree-area-domain-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.25rem 0.75rem 0.25rem 1.75rem;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}
.tree-area-domain-label:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.03);
}
.tree-area-chevron {
  opacity: 0.5;
  flex-shrink: 0;
}
.tree-area-domain-name {
  flex: 1;
}
.tree-area-domain-count {
  font-size: 0.6rem;
  color: var(--os-text-hint);
  font-weight: 400;
  margin-left: auto;
  min-width: 14px;
  text-align: right;
}
.tree-area-children {
  position: relative;
  margin-left: 1.2rem;
  padding-left: 0.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.tree-area-item-group {
  display: flex;
  flex-direction: column;
}
.tree-item-area {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 0.25rem !important;
  font-size: 0.7rem;
  opacity: 0.65;
}
.tree-item-area:hover {
  opacity: 0.9;
}
.tree-item-area.active {
  opacity: 1;
}
.tree-area-expand-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  flex-shrink: 0;
  width: 14px;
}
.tree-area-expand-btn:hover {
  opacity: 1;
}
.tree-area-expand-spacer {
  width: 14px;
  flex-shrink: 0;
  display: inline-block;
}
.tree-item-area-label {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px 6px;
  text-align: left;
  width: 100%;
  border-radius: 4px;
  font-size: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tree-area-icon {
  opacity: 0.7;
  flex-shrink: 0;
  color: var(--accent);
}
.tree-area-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.5;
}
.tree-item-area:hover .tree-area-dot {
  opacity: 0.8;
}
.tree-item-area.active .tree-area-dot {
  opacity: 1;
}
.tree-area-file-count {
  font-size: 0.55rem;
  color: var(--os-text-hint);
  margin-left: auto;
}
.tree-item-area-label:hover {
  background: rgba(255, 255, 255, 0.06);
}
.tree-item-area.active .tree-item-area-label {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.tree-item-area.active .tree-area-icon {
  opacity: 1;
  color: var(--accent);
}
.tree-area-files {
  margin-left: 1rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.tree-item-file {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 4px;
  font-size: 0.7rem;
  opacity: 0.65;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-radius: 4px;
}
.tree-item-file:hover {
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.06);
}
.tree-item-file.active {
  opacity: 1;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.tree-file-icon {
  opacity: 0.5;
  flex-shrink: 0;
}
/* ========== Area Detail View ========== */
.area-detail {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}
.area-detail--focused {
  flex-direction: column;
}
/* Left section nav */
/* Right section nav */
.area-detail-nav {
  width: 140px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.75rem 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.area-detail-nav-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  background: none;
  border: none;
  border-right: 2px solid transparent;
  border-radius: 6px 0 0 6px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.area-detail-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-secondary);
}
.area-detail-nav-item.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
  border-right-color: rgba(var(--accent-rgb), 0.6);
}
.area-detail-nav-label {
  flex: 1;
}
.area-detail-nav-count {
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 400;
  color: var(--os-text-hint);
}
/* Main content area */
.area-detail-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}
/* Section title row with add button */
.area-detail-section-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}
.area-detail-section-add-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.area-detail-section-add-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.area-detail-loading {
  padding: 2rem;
  text-align: center;
  color: var(--os-text-muted);
}
.area-detail-header {
  margin-bottom: 0.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.area-detail-header-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.area-detail-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.area-detail-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.area-detail-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.area-detail-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.area-detail-title h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--os-text-primary);
}
.area-detail-domain-tag {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: lowercase;
}
.area-detail-domain-tag.blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.area-detail-domain-tag.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.area-detail-domain-tag.purple { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.area-detail-domain-tag.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.area-detail-domain-tag.gray { background: rgba(255, 255, 255, 0.08); color: var(--os-text-muted); }
.area-detail-domain-tag.pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.area-detail-domain-tag.teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
.area-detail-tag {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  font-family: monospace;
}
.area-detail-vault-path {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  font-family: monospace;
  cursor: pointer;
  margin-left: auto;
}
.area-detail-vault-path:hover {
  color: var(--os-text-muted);
}
.area-detail-desc {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  margin-top: 0.25rem;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.15rem 0;
}
.area-detail-desc:hover {
  color: var(--os-text-muted);
}
.area-detail-desc-edit-icon {
  opacity: 0;
  transition: opacity 0.12s;
  color: var(--os-text-hint);
}
.area-detail-desc:hover .area-detail-desc-edit-icon {
  opacity: 1;
}
.area-detail-desc-edit {
  margin-top: 0.35rem;
}
.area-detail-desc-edit input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  outline: none;
}
.area-detail-desc-edit input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
/* Intention */
.area-detail-intention {
  margin-top: 0.75rem;
}
.area-detail-intention-display {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px dashed rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  cursor: pointer;
  color: rgba(var(--accent-rgb), 0.8);
  font-size: 0.85rem;
  transition: background 0.15s, border-color 0.15s;
}
.area-detail-intention-display:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.area-detail-intention-empty {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--os-text-hint);
  font-style: italic;
}
.area-detail-intention-edit {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.area-detail-intention-edit input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--os-text-primary);
  font-size: 0.85rem;
  outline: none;
}
.area-detail-intention-edit input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}
.area-detail-intention-edit button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}
.area-detail-intention-edit button:first-of-type {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
/* Sections */
.area-detail-focused-file {
  margin-bottom: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.area-detail-focused-file-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.area-detail-focused-file-header span:not(.area-detail-edit-link) {
  flex: 1;
}
.area-detail-edit-link {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.area-detail-edit-link:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}
.area-detail-focused-file-editor {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.area-detail-sections {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.area-detail-section {
  overflow: hidden;
}
.area-detail-section-content {
  flex: 1;
}
.area-detail-section-header-row {
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
}
.area-detail-section-header-row .area-detail-section-header {
  flex: 1;
}
.area-detail-section-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.area-detail-section-header:hover {
  color: var(--os-text-primary);
}
.area-detail-section-count {
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 400;
  color: var(--os-text-muted);
}
/* Horizons section */
.area-detail-horizons-section {
  border-color: rgba(56, 189, 248, 0.15);
}
.area-detail-horizons-section .area-detail-section-header {
  color: rgba(56, 189, 248, 0.8);
}
.area-detail-horizons {
  padding: 0.35rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.area-detail-horizon-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.area-detail-horizon-group-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.1rem;
}
.area-detail-horizon-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.1rem 0;
  font-size: 0.78rem;
  line-height: 1.4;
}
.area-detail-horizon-bullet {
  color: rgba(56, 189, 248, 0.4);
  flex-shrink: 0;
}
.area-detail-horizon-text {
  color: var(--os-text-secondary);
}
/* Craft section */
.area-detail-craft {
  padding: 0.25rem;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  line-height: 1.6;
}
.area-detail-craft .editable-markdown-container {
  min-height: 120px;
}
.area-detail-craft .editable-markdown-textarea {
  min-height: 120px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
}
.area-detail-craft h4 {
  font-size: 0.85rem;
  color: var(--os-text-secondary);
  margin: 0.75rem 0 0.3rem;
}
.area-detail-craft h5 {
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  margin: 0.5rem 0 0.2rem;
}
.area-detail-craft ul {
  padding-left: 1.25rem;
  margin: 0.3rem 0;
}
.area-detail-craft li {
  margin-bottom: 0.2rem;
}
/* Tasks section */
.area-detail-tasks {
  padding: 0 0.75rem 0.75rem;
}
.area-detail-task {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.area-detail-task:last-child {
  border-bottom: none;
}
.area-detail-task-check {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 0;
  display: flex;
}
.area-detail-task-check:hover {
  color: #4ade80;
}
.area-detail-task-text {
  flex: 1;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
}
.area-detail-task-text.done {
  text-decoration: line-through;
  opacity: 0.4;
}
.area-detail-task-section {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
}
.area-detail-task-delete {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}
.area-detail-task:hover .area-detail-task-delete {
  opacity: 1;
}
.area-detail-task-delete:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
/* Thoughts section */
.area-detail-thoughts {
  padding: 0 0.75rem 0.75rem;
}
.area-detail-thought {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.area-detail-thought:last-child {
  border-bottom: none;
}
.area-detail-thought-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.area-detail-thought-date {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  margin-top: 0.1rem;
}
.area-detail-thought-body {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin-top: 0.3rem;
  line-height: 1.4;
}
/* Log section */
.area-detail-log {
  padding: 0 0.75rem 0.75rem;
}
.area-detail-log-day {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.area-detail-log-day:last-child {
  border-bottom: none;
}
.area-detail-log-date {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-muted);
  margin-bottom: 0.2rem;
}
.area-detail-log-item {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  padding: 0.25rem 0 0.25rem 0.75rem;
  border-left: 2px solid rgba(255, 255, 255, 0.06);
  line-height: 1.4;
}
.area-detail-log-item strong {
  color: var(--os-text-secondary);
  font-weight: 600;
}
.area-detail-empty {
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  text-align: center;
  font-style: italic;
}
.area-detail-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 3rem 1rem;
  color: var(--os-text-hint);
}
.area-detail-empty-cta span {
  font-size: 0.8rem;
  color: var(--os-text-hint);
}
.area-detail-empty-cta-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.area-detail-empty-cta-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.2);
}
/* Section action button (edit/add icon in header) */
.area-detail-section-action {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s;
}
.area-detail-section-action:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}
/* Craft edit */
.area-detail-craft-edit {
  padding: 0.5rem;
}
.area-detail-craft-edit textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.75rem;
  resize: vertical;
  min-height: 200px;
  box-sizing: border-box;
}
.area-detail-craft-edit textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
/* Edit action buttons row */
.area-detail-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.area-detail-save-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  color: var(--os-text-primary);
  font-size: 0.75rem;
  cursor: pointer;
}
.area-detail-save-btn:hover {
  background: rgba(var(--accent-rgb), 0.4);
}
.area-detail-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.area-detail-cancel-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
}
.area-detail-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* Inline add forms */
.area-detail-add-form {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem;
  align-items: center;
}
.area-detail-add-form input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
}
.area-detail-add-form input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.area-detail-add-form > button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.area-detail-add-form > button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}
/* Vertical add forms (thought and log) */
.area-detail-add-thought-form,
.area-detail-add-log-form {
  flex-direction: column;
  align-items: stretch;
}
.area-detail-add-thought-form textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
  resize: vertical;
}
.area-detail-add-thought-form textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
/* Add dialogs (modal overlay) */
.area-detail-dialog-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;
}
.area-detail-dialog {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1.25rem;
  width: 400px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.area-detail-dialog-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.area-detail-dialog input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  padding: 0.5rem 0.7rem;
}
.area-detail-dialog input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.area-detail-dialog textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  padding: 0.5rem 0.7rem;
  resize: vertical;
  font-family: inherit;
}
.area-detail-dialog textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.area-detail-dialog-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}
/* Task text clickable for edit */
.area-detail-task-text {
  cursor: pointer;
}
.area-detail-task-text:hover {
  color: rgba(var(--accent-rgb), 0.9);
}
/* Files section */
.area-detail-files {
  padding: 0 0.75rem 0.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.area-detail-file-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
}
.area-detail-file-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.area-detail-file-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  cursor: pointer;
}
.area-detail-file-name:hover {
  color: var(--os-text-primary);
}
.area-detail-file-name.active {
  color: var(--accent);
}
.area-detail-file-delete {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}
.area-detail-file-item:hover .area-detail-file-delete {
  opacity: 1;
}
.area-detail-file-delete:hover {
  color: #ef4444;
}
.area-detail-file-editor {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.25rem 0 0.5rem;
}
.area-detail-file-editor .editable-markdown-container {
  min-height: 80px;
}
.area-detail-file-editor .editable-markdown-textarea {
  min-height: 80px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
}
/* ==========================================
   Workbench (Active Threads)
   ========================================== */
/* Focus View subsection */
.workbench-subsection .workbench-thread-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.workbench-thread-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
}
.workbench-thread-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.workbench-thread-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workbench-thread-area {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  white-space: nowrap;
}
/* Workbench tab content */
.workbench-tab-content {
  padding: 0.75rem 1.5rem;
  overflow: hidden;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.workbench-tab-content .workbench-thread-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.workbench-tab-content .content-view-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.workbench-tab-content .editable-markdown-edit-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.workbench-tab-content .editable-markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
}
.workbench-tab-content .editable-markdown-editor-wrapper .cm-editor {
  flex: 1;
  min-height: 0;
}
.workbench-tab-content .editable-markdown-editor-wrapper .cm-scroller {
  overflow: auto;
}
.workbench-tab-content .editable-markdown-editor-wrapper .cm-content {
  padding-bottom: 50vh !important;
}
.workbench-thread-list-tab {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0.25rem;
}
.workbench-thread-list-tab > .workbench-thread-row + .workbench-thread-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.workbench-page-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.35rem;
  color: var(--os-text-muted);
}
.workbench-page-title h2 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.workbench-page-count {
  font-size: 0.7rem;
  color: var(--os-text-hint);
}
.workbench-project-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.workbench-thread-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.workbench-thread-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.workbench-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding: 0 0.25rem;
}
.workbench-footer-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.workbench-footer-btn:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.05);
}
.workbench-footer-btn.active {
  color: var(--os-text-muted);
}
.workbench-archived-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.workbench-archived-row {
  opacity: 0.6;
}
.workbench-action-btn {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--os-text-muted);
  flex-shrink: 0;
}
.workbench-action-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}
.workbench-action-btn.danger:hover {
  color: rgba(239, 68, 68, 0.9);
  background: rgba(239, 68, 68, 0.1);
}
.workbench-archived-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  font-style: italic;
}
/* (today-main-tab .tab-count removed — tabs now in header) */
/* Thread content view */
.workbench-thread-view .content-view-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.workbench-thread-view .content-view-header h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workbench-thread-view .content-view-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.workbench-thread-view .content-view-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  cursor: pointer;
}
.workbench-thread-view .content-view-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.workbench-thread-view .content-view-btn.danger {
  color: rgba(239, 68, 68, 0.8);
  border-color: rgba(239, 68, 68, 0.2);
}
.workbench-thread-view .content-view-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}
.workbench-progress-btn {
  gap: 0.35rem;
  padding: 0.35rem 0.75rem !important;
}
.workbench-progress-btn span {
  font-size: 0.72rem;
  font-weight: 600;
}
.workbench-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.workbench-status-dot.active {
  background: rgba(74, 222, 128, 0.9);
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.4);
}
.workbench-status-dot.idle {
  background: rgba(255, 255, 255, 0.25);
}
.workbench-progress-btn.active {
  background: rgba(74, 222, 128, 0.08) !important;
  border-color: rgba(74, 222, 128, 0.2) !important;
  color: rgba(74, 222, 128, 0.85) !important;
}
.workbench-progress-btn.active:hover {
  background: rgba(74, 222, 128, 0.15) !important;
}
.workbench-progress-btn:not(.active) {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--os-text-muted) !important;
}
.workbench-progress-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.workbench-thread-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.workbench-thread-area-tag {
  font-size: 0.7rem;
  color: rgba(var(--accent-rgb), 0.8);
  padding: 0.15rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 4px;
}
.workbench-thread-date {
  font-size: 0.7rem;
  color: var(--os-text-muted);
}
.workbench-thread-view .content-view-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.workbench-thread-view .content-editor {
  width: 100%;
  min-height: 300px;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
  color: var(--os-text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
}
.workbench-thread-view .content-loading {
  color: var(--os-text-muted);
  padding: 2rem;
  text-align: center;
}
/* File sidebar for multi-file threads */
.workbench-thread-view .content-view-body.with-file-sidebar {
  flex-direction: row;
  gap: 0;
}
.workbench-file-sidebar {
  width: 160px;
  min-width: 160px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.workbench-file-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.workbench-file-sidebar-header .content-view-btn {
  padding: 2px;
  border: none;
}
.workbench-file-list {
  flex: 1;
  overflow-y: auto;
}
.workbench-file-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.workbench-file-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-secondary);
}
.workbench-file-item.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
  border-left-color: var(--accent);
}
.workbench-file-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workbench-file-delete {
  opacity: 0;
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.workbench-file-item:hover .workbench-file-delete {
  opacity: 1;
}
.workbench-file-delete:hover {
  color: rgba(239, 68, 68, 0.8);
}
.workbench-new-file-input {
  padding: 0.35rem 0.5rem;
}
.workbench-new-file-input input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: var(--os-text-primary);
  font-size: 0.72rem;
  padding: 0.25rem 0.4rem;
  outline: none;
}
.workbench-new-file-input input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.workbench-editor-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.workbench-editor-area .editable-markdown-edit-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.workbench-editor-area .editable-markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.workbench-editor-area .editable-markdown-editor-wrapper .cm-editor {
  flex: 1;
  min-height: 0;
}
.workbench-editor-area .editable-markdown-editor-wrapper .cm-scroller {
  overflow: auto;
}
.workbench-new-file-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin: 0.25rem 0;
}
.workbench-new-file-inline input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: var(--os-text-primary);
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  outline: none;
}
.workbench-new-file-inline input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
/* Link badges and picker */
.workbench-link-badges {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.workbench-link-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 500;
}
.workbench-link-badge.area {
  color: rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--accent-rgb), 0.12);
}
.workbench-link-badge.task {
  color: rgba(56, 189, 248, 0.9);
  background: rgba(56, 189, 248, 0.12);
}
.link-badge-remove {
  display: flex;
  align-items: center;
  padding: 0;
  margin-left: 0.15rem;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
}
.link-badge-remove:hover {
  opacity: 1;
}
.link-picker-wrapper {
  position: relative;
}
.link-btn {
  padding: 0.25rem 0.4rem !important;
}
.link-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  width: 260px;
  margin-top: 0.25rem;
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.link-picker-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.link-picker-tab {
  flex: 1;
  padding: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
}
.link-picker-tab:hover {
  color: var(--os-text-muted);
}
.link-picker-tab.active {
  color: var(--os-text-primary);
  border-bottom: 2px solid rgba(var(--accent-rgb), 0.8);
}
.link-picker-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 0.25rem;
}
.link-picker-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 5px;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.link-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.link-picker-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.95);
}
.link-picker-folder {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--os-text-hint);
}
.link-picker-task-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.link-picker-empty {
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  text-align: center;
  font-style: italic;
}
/* Thread more menu (overflow) */
.thread-more-wrapper {
  position: relative;
}
.thread-more-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  width: 240px;
  margin-top: 0.25rem;
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 0.25rem;
  max-height: 360px;
  overflow-y: auto;
}
.thread-more-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 5px;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.thread-more-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.thread-more-item.active {
  color: var(--accent);
}
.thread-more-item.danger:hover {
  color: rgba(239, 68, 68, 0.9);
  background: rgba(239, 68, 68, 0.1);
}
.thread-more-label {
  padding: 0.35rem 0.5rem 0.15rem;
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.thread-more-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.25rem 0;
}
.thread-more-folder {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--os-text-hint);
}
.thread-more-task-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.thread-more-empty {
  padding: 0.4rem 0.5rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  font-style: italic;
}
.thread-more-chevron {
  margin-left: auto;
  opacity: 0.4;
}
.thread-more-expand {
  max-height: 200px;
  overflow-y: auto;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  margin-left: 0.75rem;
  margin-bottom: 0.15rem;
}
.thread-more-tree-group {
  margin-bottom: 0.1rem;
}
.thread-more-tree-parent {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.3rem 0.4rem;
  background: none;
  border: none;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
}
.thread-more-tree-parent:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}
.thread-more-tree-children {
  padding-left: 0.75rem;
  margin-left: 0.4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.thread-more-tree-item {
  font-size: 0.7rem;
  padding: 0.25rem 0.4rem;
}
/* Project thread row with hover actions */
.workbench-project-thread-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
}
.workbench-project-thread-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  padding: 0.45rem 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  text-align: left;
  min-width: 0;
}
.workbench-project-thread-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
  padding-right: 0.35rem;
}
.workbench-project-thread-row:hover .workbench-project-thread-actions {
  opacity: 1;
}
/* Thread context menu */
.thread-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 180px;
  max-width: 240px;
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 0.3rem;
  overflow: hidden;
}
.thread-context-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border-radius: 5px;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.thread-context-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.thread-context-item.active {
  color: rgba(var(--accent-rgb), 0.95);
}
.thread-context-item.unlink {
  color: var(--os-text-muted);
  font-size: 0.7rem;
}
.thread-context-item.danger {
  color: rgba(239, 68, 68, 0.8);
}
.thread-context-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}
.thread-context-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.25rem 0.4rem;
}
.thread-context-label {
  padding: 0.3rem 0.6rem 0.15rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-hint);
}
/* Thread dialog (area picker, delete confirm) */
.thread-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.thread-dialog {
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  min-width: 280px;
  max-width: 360px;
  overflow: hidden;
}
.thread-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.thread-dialog-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.thread-dialog-close {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
}
.thread-dialog-close:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}
.thread-dialog-list {
  padding: 0.4rem;
  max-height: 320px;
  overflow-y: auto;
}
.thread-dialog-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.thread-dialog-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.thread-dialog-item.active {
  color: rgba(var(--accent-rgb), 0.95);
  background: rgba(var(--accent-rgb), 0.08);
}
.thread-dialog-check {
  margin-left: auto;
}
.thread-dialog-message {
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  margin: 0;
}
.thread-dialog-message strong {
  color: var(--os-text-primary);
}
.thread-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.thread-dialog-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}
.thread-dialog-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.thread-dialog-btn.danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 0.9);
}
.thread-dialog-btn.danger:hover {
  background: rgba(239, 68, 68, 0.25);
}
.thread-dialog-btn.create {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.95);
}
.thread-dialog-btn.create:hover {
  background: rgba(var(--accent-rgb), 0.25);
}
.thread-dialog-btn.create:disabled {
  opacity: 0.4;
  cursor: default;
}
.thread-dialog-body {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.thread-dialog-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: var(--os-text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.thread-dialog-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.thread-dialog-fields {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.thread-dialog-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 120px;
  flex: 1;
}
.thread-dialog-field label {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.thread-dialog-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  width: 100%;
}
.thread-dialog-select:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.thread-dialog-select option,
.thread-dialog-select optgroup {
  background: #1a1a2e;
  color: var(--os-text-secondary);
}
.thread-dialog-create {
  min-width: 340px;
}
.thread-move-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.thread-move-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.thread-move-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.workbench-thread-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}
/* Thread row area badge in list */
.workbench-thread-area {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.workbench-area-overflow {
  opacity: 0.5;
}
.workbench-thread-task-badge {
  font-size: 0.65rem;
  color: rgba(56, 189, 248, 0.7);
  flex-shrink: 0;
}
.workbench-meta-summary {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
  white-space: nowrap;
}
.workbench-thread-age {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.workbench-thread-age.stale {
  color: rgba(251, 191, 36, 0.6);
}
.workbench-thread-stale {
  opacity: 0.55;
}
.workbench-thread-stale:hover {
  opacity: 0.8;
}
.workbench-thread-empty {
  opacity: 0.65;
}
.workbench-thread-empty:hover {
  opacity: 0.85;
}
/* Pin icon on pinned threads */
.workbench-pin-icon {
  color: rgba(251, 191, 36, 0.6);
  flex-shrink: 0;
}
/* Area filter pills */
.workbench-area-filters {
  display: flex;
  gap: 4px;
  padding: 0 0.25rem 0.5rem;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.workbench-area-filters::-webkit-scrollbar {
  display: none;
}
.workbench-project-tag {
  padding: 0.15rem 0.45rem;
  border-radius: 8px;
  font-size: 0.65rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: rgba(56, 189, 248, 0.7);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.2);
  white-space: nowrap;
}
.workbench-area-pill {
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.workbench-area-pill:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}
.workbench-area-pill.active {
  color: rgba(var(--accent-rgb), 0.95);
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}
/* Search bar */
.workbench-search-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.workbench-search-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.workbench-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-family: inherit;
}
.workbench-search-input::placeholder {
  color: var(--os-text-hint);
}
.workbench-search-clear {
  display: flex;
  align-items: center;
  padding: 0.15rem;
  border-radius: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--os-text-hint);
}
.workbench-search-clear:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}
/* New thread dialog */
.workbench-new-dialog {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-top: 0.25rem;
}
.workbench-new-dialog-input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  font-family: inherit;
  outline: none;
}
.workbench-new-dialog-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.workbench-template-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.workbench-template-pill {
  padding: 0.15rem 0.45rem;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}
.workbench-template-pill:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}
.workbench-template-pill.active {
  color: rgba(var(--accent-rgb), 0.95);
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.workbench-new-dialog-fields {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.workbench-new-dialog-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.workbench-new-dialog-field label {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.workbench-new-dialog-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  font-family: inherit;
  outline: none;
  min-width: 0;
  max-width: 180px;
  cursor: pointer;
}
.workbench-new-dialog-select:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.workbench-new-dialog-select option,
.workbench-new-dialog-select optgroup {
  background: #1a1a2e;
  color: var(--os-text-secondary);
}
.workbench-new-dialog-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.workbench-new-dialog-btn {
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
}
.workbench-new-dialog-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.workbench-new-dialog-btn.create {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.95);
}
.workbench-new-dialog-btn.create:hover {
  background: rgba(var(--accent-rgb), 0.25);
}
.workbench-new-dialog-btn.create:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Tab add button */
.workbench-tab-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  cursor: pointer;
  margin-left: -0.25rem;
  align-self: center;
}
.workbench-tab-add-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}
/* Stale thread banner */
.workbench-stale-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 8px;
  font-size: 0.8rem;
  color: rgba(251, 191, 36, 0.8);
}
.workbench-stale-banner span {
  flex: 1;
}
.stale-banner-btn {
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.85);
}
.stale-banner-btn:hover {
  background: rgba(251, 191, 36, 0.2);
}
.stale-banner-btn.keep {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
}
.stale-banner-btn.keep:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
/* Workbench Project styles */
.workbench-project-group {
  display: flex;
  flex-direction: column;
}
.workbench-project-row {
  font-weight: 500;
}
.workbench-expand-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.workbench-thread-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.workbench-project-children {
  display: flex;
  flex-direction: column;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  margin-left: 0.55rem;
}
.workbench-child-thread {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  padding: 0.3rem 0.5rem;
}
.workbench-child-thread:hover {
  color: var(--os-text-secondary);
}
.workbench-child-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.workbench-project-open {
  color: var(--os-text-hint);
  font-size: 0.7rem;
}
.workbench-project-open:hover {
  color: rgba(var(--accent-rgb), 0.7);
}
.workbench-project-loading {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  padding: 0.3rem 0.5rem 0.3rem 1.75rem;
  font-style: italic;
}
.workbench-status-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.workbench-status-paused {
  background: rgba(251, 191, 36, 0.15);
  color: rgba(251, 191, 36, 0.85);
}
.workbench-status-completed {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.85);
}
.workbench-project-counts {
  display: flex;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--os-text-hint);
}
.workbench-project-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.workbench-project-view .content-view-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  padding-bottom: 1rem;
}
.project-header-block,
.thread-header-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.75rem;
}
.workbench-project-description-row {
  padding: 0 0.25rem;
}
.workbench-project-description {
  font-size: 0.8rem;
  color: var(--os-text-muted);
  margin: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.15rem 0.25rem;
}
.workbench-project-description:hover {
  background: rgba(255, 255, 255, 0.06);
}
.workbench-project-description-input {
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.2rem 0.35rem;
  width: 100%;
  outline: none;
}
.workbench-project-description-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.workbench-status-select {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--os-text-secondary);
  cursor: pointer;
}
.workbench-status-select:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.workbench-project-areas-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  position: relative;
}
.workbench-project-areas-label {
  display: inline;
}
.workbench-area-inline {
  white-space: nowrap;
}
.workbench-area-remove {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0 0.15rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.workbench-area-inline:hover .workbench-area-remove {
  opacity: 1;
  color: var(--os-text-muted);
}
.workbench-area-sep {
  color: var(--os-text-hint);
}
.workbench-area-add-wrapper {
  position: relative;
}
.workbench-area-add-inline {
  background: none;
  border: none;
  color: var(--os-text-hint);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
}
.workbench-area-add-inline:hover {
  color: var(--os-text-muted);
}
.workbench-area-picker {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  min-width: 180px;
  backdrop-filter: blur(12px);
}
.workbench-area-picker-item {
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.workbench-area-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.workbench-area-picker-tag {
  color: rgba(var(--accent-rgb), 0.6);
  font-size: 0.65rem;
  margin-left: auto;
}
.workbench-project-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.5rem 0.5rem 0.35rem;
}
.workbench-project-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.workbench-project-section-header .workbench-action-btn {
  margin-left: auto;
}
.workbench-project-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  font-style: italic;
}
.workbench-project-overview {
  padding: 0.25rem 0.5rem;
}
.workbench-project-overview h1,
.workbench-project-overview h2,
.workbench-project-overview h3 {
  margin-top: 0.5rem;
}
.workbench-inline-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
}
.workbench-inline-input input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--os-text-primary);
  outline: none;
}
.workbench-inline-input input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.workbench-loading {
  padding: 1rem;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.8rem;
}
/* Code Activity Chart */
.code-activity-chart {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 0.75rem;
}
.code-activity-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.85);
  border-radius: 12px 12px 0 0;
}
.code-activity-range {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--os-text-muted);
}
.code-activity-stats {
  display: flex;
  gap: 1.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.code-stat {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.code-stat-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--os-text-primary);
}
.code-stat-value.green {
  color: #4ade80;
}
.code-stat-value.red {
  color: #f87171;
}
.code-stat-label {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.code-activity-sub-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
}
.code-activity-periods {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
.code-period-btn {
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  transition: all 0.15s ease;
}
.code-period-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
}
.code-period-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
}
.code-activity-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}
.code-activity-body {
  padding: 0.75rem 0.5rem 0.25rem;
}
.code-tab-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
}
/* ==================== */
/* ===== Responsive Layout (Container Queries) ===== */
/* Medium: hide tab labels, show icons only */
@container daily (max-width: 700px) {
  .ops-nav-tabs .tab {
    padding: 0.35rem 0.45rem;
    gap: 0;
  }
  .ops-nav-tabs .tab span,
  .ops-nav-tabs .tab:not(:has(svg))::after {
    display: none;
  }
  /* Hide text nodes inside tabs — keep only the icon */
  .ops-nav-tabs .tab {
    font-size: 0;
  }
  .ops-nav-tabs .tab svg {
    font-size: initial;
  }
  /* Narrower left tree */
  .planning-tree:not(.collapsed) {
    width: 120px;
  }
  /* Shrink right sidebar to give center more space */
  .today-sidebar {
    flex: 0 1 220px;
    min-width: 180px;
  }
}
/* Small: stack today layout vertically */
@container daily (max-width: 560px) {
  /* Header compact */
  .ops-nav-header {
    padding: 0.4rem 0.625rem;
    gap: 0.5rem;
  }
  .ops-nav-title h2 {
    display: none;
  }

  /* Collapse left tree to icons only */
  .planning-tree:not(.collapsed) {
    width: 36px;
    min-width: 36px;
    padding: 0.5rem 0.25rem;
    align-items: center;
    overflow: hidden;
  }
  .planning-tree:not(.collapsed) .tree-item-label,
  .planning-tree:not(.collapsed) .tree-group-title,
  .planning-tree:not(.collapsed) .tree-item-count,
  .planning-tree:not(.collapsed) .tree-item-chevron,
  .planning-tree:not(.collapsed) .planning-tree-heading {
    display: none;
  }

  /* Stack today grid vertically */
  .today-grid {
    flex-direction: column;
  }

  /* Sidebar becomes top strip */
  .today-sidebar {
    width: 100% !important;
    max-width: 100%;
    flex-shrink: 0;
    order: -1;
  }
  .today-sidebar .sidebar-resize-handle {
    display: none;
  }

  /* Compact calendar in horizontal mode */
  .today-sidebar .mini-cal {
    margin-top: 0.25rem;
  }

  /* Let main content fill remaining space */
  .planning-content.today-scroll-layout .today-main {
    padding-right: 0;
  }

  .planning-content.today-scroll-layout .today-grid {
    overflow-y: auto;
  }
  .planning-content.today-scroll-layout .today-main {
    overflow-y: visible;
    height: auto;
  }
}
/* Global Dark Scrollbar */
/* ==================== */
.ops-navigator *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.ops-navigator *::-webkit-scrollbar-track {
  background: transparent;
}
.ops-navigator *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.ops-navigator *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
.ops-navigator * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
/* ============================================================== */
/* LIGHT THEME OVERRIDES                                          */
/* ============================================================== */
/* 1. Main container */
body.light .ops-navigator {
  background: var(--os-glass-bg-solid);
  color: rgba(20, 20, 30, 0.9);
}
/* 2. Header */
body.light .ops-nav-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
/* 3. Tabs */
body.light .ops-nav-tabs {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
}
body.light .ops-nav-tabs .tab {
  color: rgba(20, 20, 30, 0.5);
}
body.light .ops-nav-tabs .tab:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.04);
}
body.light .ops-nav-tabs .tab.active {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.95);
}
/* Edit button */
body.light .edit-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.5);
}
body.light .edit-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.9);
}
/* 4. Planning tree / sidebar */
body.light .planning-tree {
  background: rgba(0, 0, 0, 0.02);
  border-right-color: rgba(0, 0, 0, 0.06);
}
body.light .tree-collapse-btn {
  color: rgba(20, 20, 30, 0.5);
}
body.light .tree-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}
body.light .tree-item {
  color: rgba(20, 20, 30, 0.8);
}
body.light .tree-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1a1a2e;
}
body.light .tree-item.active {
  background: rgba(56, 189, 248, 0.1);
  color: #0284c7;
}
body.light .tree-item-subtitle {
  color: rgba(20, 20, 30, 0.5);
}
body.light .tree-item-count {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(20, 20, 30, 0.6);
}
body.light .tree-item.active .tree-item-count {
  background: rgba(56, 189, 248, 0.15);
  color: #0284c7;
}
body.light .tree-areas {
  border-left-color: rgba(0, 0, 0, 0.06);
}
body.light .tree-item.child.area {
  color: rgba(20, 20, 30, 0.65);
}
body.light .tree-item.child.area:hover {
  color: rgba(20, 20, 30, 0.9);
}
body.light .tree-item.child.area.active {
  background: rgba(56, 189, 248, 0.1);
  color: #0284c7;
}
body.light .tree-expand-icon {
  color: rgba(20, 20, 30, 0.45);
}
body.light .tree-expand-icon:hover {
  color: rgba(20, 20, 30, 0.7);
}
body.light .tree-children {
  border-left-color: rgba(0, 0, 0, 0.06);
}
/* Resize handle */
body.light .planning-resize-handle::after {
  background: rgba(0, 0, 0, 0.15);
}
body.light .planning-resize-handle:hover::after,
body.light .planning-resize-handle:active::after {
  background: rgba(var(--accent-rgb), 0.4);
}
/* 5. Planning content and sections */
body.light .planning-section .section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .planning-section .section-header h3 {
  color: rgba(20, 20, 30, 0.85);
}
body.light .temporal-section .section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .temporal-section.today .section-header h3 {
  color: rgba(20, 20, 30, 0.9);
}
body.light .temporal-section.week .section-header h3 {
  color: rgba(20, 20, 30, 0.6);
}
body.light .planning-section.week .section-header h3 {
  color: rgba(20, 20, 30, 0.6);
}
/* Horizon collapsed */
body.light .horizon-collapsed .section-header {
  background: rgba(0, 0, 0, 0.02);
}
/* Section add input */
body.light .section-add-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.9);
}
body.light .section-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: white;
}
/* 6. Task rows */
body.light .task-row {
  color: rgba(20, 20, 30, 0.85);
}
body.light .task-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-text {
  color: rgba(20, 20, 30, 0.85);
}
body.light .task-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.5);
}
body.light .task-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.8);
}
/* Task row flat */
body.light .task-row-flat {
  color: rgba(20, 20, 30, 0.85);
}
body.light .task-row-flat:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-row-flat .task-text {
  color: rgba(20, 20, 30, 0.85);
}
body.light .task-row-flat .task-description-preview {
  color: rgba(20, 20, 30, 0.45);
}
body.light .task-row-flat .task-domain-tag {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-row-flat .task-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
}
body.light .task-row-flat .task-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.8);
}
body.light .task-row-flat .drag-handle {
  color: rgba(20, 20, 30, 0.2);
}
body.light .task-row-flat:hover .drag-handle {
  color: rgba(20, 20, 30, 0.4);
}
body.light .task-row-flat.dragging {
  background: rgba(0, 0, 0, 0.06);
}
body.light .task-row-flat.drag-over {
  border-color: rgba(var(--accent-rgb), 0.4);
}
/* Task row grouped */
body.light .task-row-grouped {
  color: rgba(20, 20, 30, 0.85);
}
body.light .task-row-grouped:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-row-grouped .task-text {
  color: rgba(20, 20, 30, 0.85);
}
body.light .task-row-grouped.completed .task-text {
  color: rgba(20, 20, 30, 0.4);
}
body.light .task-row-actions .task-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.45);
}
/* 7. Task inputs */
body.light .task-edit-input {
  background: white;
  border-color: rgba(56, 189, 248, 0.3);
  color: rgba(20, 20, 30, 0.95);
}
body.light .task-edit-input:focus {
  border-color: rgba(56, 189, 248, 0.5);
}
body.light .task-row-flat .task-edit-input {
  background: white;
  color: rgba(20, 20, 30, 0.95);
}
body.light .task-row-flat .task-edit-input:focus {
  border-color: rgba(56, 189, 248, 0.5);
}
body.light .task-row-grouped .task-edit-input {
  background: white;
  color: rgba(20, 20, 30, 0.95);
}
body.light .task-row-grouped .task-edit-input:focus {
  border-color: rgba(56, 189, 248, 0.5);
}
/* 8. Add form inputs */
body.light .add-form-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.95);
}
body.light .add-form-input:focus {
  border-color: rgba(74, 222, 128, 0.5);
}
body.light .add-form-select {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.8);
}
body.light .add-form-select:focus {
  border-color: rgba(74, 222, 128, 0.5);
}
body.light .add-form-btn.cancel {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.55);
}
body.light .add-form-btn.cancel:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 30, 0.8);
}
/* 9. Task edit dialog / modal */
body.light .task-edit-overlay {
  background: rgba(0, 0, 0, 0.3);
}
body.light .task-edit-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
body.light .task-edit-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .task-edit-header h3 {
  color: rgba(20, 20, 30, 0.95);
}
body.light .task-edit-close {
  color: rgba(20, 20, 30, 0.45);
}
body.light .task-edit-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}
body.light .task-edit-field label {
  color: rgba(20, 20, 30, 0.6);
}
body.light .task-edit-textarea {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}
body.light .task-edit-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
body.light .task-edit-textarea::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
/* Task detail popup */
body.light .task-detail-overlay {
  background: rgba(0, 0, 0, 0.2);
}
body.light .task-detail-popup {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
body.light .task-detail-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .task-detail-header h4 {
  color: rgba(20, 20, 30, 0.95);
}
body.light .task-detail-close {
  color: rgba(20, 20, 30, 0.45);
}
body.light .task-detail-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}
body.light .task-detail-text {
  color: rgba(20, 20, 30, 0.9);
}
body.light .task-detail-label {
  color: rgba(20, 20, 30, 0.45);
}
body.light .task-detail-value {
  color: rgba(20, 20, 30, 0.85);
}
body.light .task-detail-value.muted {
  color: rgba(20, 20, 30, 0.4);
}
body.light .task-detail-subtask {
  color: rgba(20, 20, 30, 0.7);
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
body.light .task-detail-meta {
  border-top-color: rgba(0, 0, 0, 0.06);
}
/* 10. Calendar widget */
body.light .calendar-day-label {
  color: rgba(20, 20, 30, 0.5);
}
body.light .calendar-day-group + .calendar-day-group {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .calendar-event-item {
  color: rgba(20, 20, 30, 0.85);
}
body.light .calendar-event-icon {
  color: rgba(20, 20, 30, 0.4);
}
body.light .calendar-event-title {
  color: rgba(20, 20, 30, 0.85);
}
body.light .calendar-event-time-inline {
  color: rgba(20, 20, 30, 0.45);
}
body.light .calendar-event-date {
  color: rgba(20, 20, 30, 0.4);
}
body.light .calendar-event-meet {
  background: rgba(66, 133, 244, 0.08);
  color: #1a73e8;
}
body.light .calendar-event-meet:hover {
  background: rgba(66, 133, 244, 0.15);
}
/* Calendar review dialog */
body.light .calendar-review-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
body.light .calendar-review-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .calendar-review-title h3 {
  color: rgba(20, 20, 30, 0.9);
}
body.light .calendar-review-field > span {
  color: rgba(20, 20, 30, 0.5);
}
body.light .calendar-review-field .task-edit-input,
body.light .calendar-review-field .task-edit-select {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}
body.light .calendar-nl-textarea {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}
/* Calendar multi-review */
body.light .calendar-multi-review-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light .calendar-multi-review-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .calendar-multi-review-item-title {
  color: rgba(20, 20, 30, 0.85);
}
body.light .calendar-multi-review-item-meta {
  color: rgba(20, 20, 30, 0.45);
}
/* 11. Focus section / horizon context */
body.light .focus-section-inner {
  background: transparent;
  border-color: transparent;
}
body.light .focus-horizon-context {
  background: rgba(var(--accent-rgb), 0.04);
  border-color: rgba(var(--accent-rgb), 0.1);
}
body.light .focus-horizon-header {
  color: rgba(20, 20, 30, 0.55);
}
body.light .focus-horizon-header:hover {
  color: rgba(20, 20, 30, 0.75);
}
body.light .focus-horizon-label {
  color: rgba(var(--accent-rgb), 0.7);
}
body.light .focus-horizon-preview {
  color: rgba(20, 20, 30, 0.45);
}
body.light .focus-horizon-section-label {
  color: rgba(var(--accent-rgb), 0.5);
}
body.light .focus-horizon-section .markdown-block {
  color: rgba(20, 20, 30, 0.7);
}
body.light .focus-horizon-section .markdown-block strong {
  color: rgba(20, 20, 30, 0.85);
}
body.light .focus-subsection {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .focus-subsection-header {
  color: rgba(20, 20, 30, 0.55);
}
body.light .focus-subsection-header .subsection-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.5);
}
body.light .next-calendar-events .next-calendar-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .next-calendar-events .next-calendar-item:hover .task-text {
  color: #1a1a2e;
}
body.light .upcoming-divider {
  color: rgba(20, 20, 30, 0.35);
}
body.light .upcoming-divider::after {
  background: rgba(0, 0, 0, 0.08);
}
body.light .focus-backlog-btn {
  color: rgba(20, 20, 30, 0.5);
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .focus-backlog-btn:hover {
  color: rgba(20, 20, 30, 0.75);
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .focus-backlog-btn .subsection-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.5);
}
body.light .subsection-add-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.35);
}
body.light .subsection-add-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.7);
}
/* Backlog dialog (light theme) */
body.light .backlog-dialog-overlay {
  background: rgba(0, 0, 0, 0.2);
}
body.light .backlog-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
body.light .backlog-dialog-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .backlog-dialog-header h3 {
  color: rgba(20, 20, 30, 0.9);
}
body.light .backlog-dialog-count {
  color: rgba(20, 20, 30, 0.4);
}
body.light .backlog-dialog-close {
  color: rgba(20, 20, 30, 0.35);
}
body.light .backlog-dialog-close:hover {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.06);
}
body.light .backlog-dialog-empty {
  color: rgba(20, 20, 30, 0.3);
}
body.light .email-more {
  color: rgba(20, 20, 30, 0.4);
}
body.light .email-collapse-chevron {
  color: rgba(20, 20, 30, 0.4);
}
/* 12. Horizon sections */
body.light .horizon-section .section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .horizon-section .section-header h3 {
  color: rgba(20, 20, 30, 0.85);
}
body.light .horizon-period-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.6);
}
body.light .horizon-period-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}
body.light .horizon-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.5);
}
body.light .horizon-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.8);
}
body.light .horizon-content {
  color: rgba(20, 20, 30, 0.75);
}
body.light .horizon-content .markdown-block {
  color: rgba(20, 20, 30, 0.75);
}
body.light .horizon-content .markdown-block strong {
  color: rgba(20, 20, 30, 0.9);
}
body.light .horizon-content .markdown-block em {
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-section {
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .horizon-compact .section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
/* Horizon file inline input */
body.light .horizon-file-inline-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.9);
}
body.light .horizon-file-inline-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
/* Rollover items */
body.light .rollover-item {
  color: rgba(20, 20, 30, 0.75);
}
body.light .rollover-item input[type="checkbox"] {
  border-color: rgba(0, 0, 0, 0.2);
}
body.light .rollover-group-header input[type="checkbox"] {
  border-color: rgba(0, 0, 0, 0.2);
}
/* 13. This-week content */
body.light .this-week-content .markdown-block {
  color: rgba(20, 20, 30, 0.75);
}
body.light .this-week-content .markdown-block strong {
  color: rgba(20, 20, 30, 0.9);
}
body.light .this-week-content .markdown-block em {
  color: rgba(20, 20, 30, 0.55);
}
body.light .this-week-textarea {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}
body.light .this-week-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
body.light .this-week-textarea::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
/* 14. Workbench focus cards */
body.light .workbench-focus-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .workbench-focus-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light .workbench-focus-card-name {
  color: rgba(20, 20, 30, 0.85);
}
body.light .workbench-focus-card-desc {
  color: rgba(20, 20, 30, 0.45);
}
body.light .workbench-focus-card-meta {
  color: rgba(20, 20, 30, 0.4);
}
body.light .workbench-focus-card.active {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.2);
}
body.light .workbench-focus-card.active .workbench-focus-card-name {
  color: rgba(20, 20, 30, 0.95);
}
body.light .workbench-focus-divider {
  border-color: rgba(0, 0, 0, 0.06);
}
/* Workbench picker dropdown */
body.light .workbench-picker-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
body.light .workbench-picker-item {
  color: rgba(20, 20, 30, 0.75);
}
body.light .workbench-picker-item:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}
body.light .workbench-picker-item:disabled {
  color: rgba(20, 20, 30, 0.3);
}
body.light .workbench-picker-item.active {
  background: rgba(var(--accent-rgb), 0.08);
}
body.light .workbench-picker-name {
  color: rgba(20, 20, 30, 0.85);
}
body.light .workbench-picker-project {
  color: rgba(20, 20, 30, 0.45);
}
body.light .workbench-picker-divider {
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .workbench-picker-group-header {
  color: rgba(20, 20, 30, 0.45);
}
body.light .workbench-picker-empty {
  color: rgba(20, 20, 30, 0.4);
}
/* 15. Journal composer */
body.light .journal-composer-editor .editable-markdown-editor-wrapper {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .journal-composer-editor .editable-markdown-editor-wrapper:focus-within {
  border-color: rgba(var(--accent-rgb), 0.4);
}
body.light .journal-composer-input {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}
body.light .journal-composer-input::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .journal-composer-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
body.light .journal-composer-submit {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}
body.light .journal-composer-submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
}
/* 16. Journal entries */
body.light .journal-entry-card {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .journal-entry-meta {
  color: rgba(20, 20, 30, 0.7);
}
body.light .journal-entry-time-continued {
  color: rgba(20, 20, 30, 0.5);
}
body.light .journal-entry-kind-badge.log {
  color: rgba(30, 120, 180, 0.9);
  border-color: rgba(30, 120, 180, 0.25);
  background: rgba(30, 120, 180, 0.08);
}
body.light .journal-entry-kind-badge.events {
  color: rgba(180, 110, 0, 0.9);
  border-color: rgba(180, 110, 0, 0.25);
  background: rgba(180, 110, 0, 0.08);
}
body.light .journal-entry-kind-badge.completed {
  color: rgba(10, 140, 90, 0.9);
  border-color: rgba(10, 140, 90, 0.3);
  background: rgba(10, 140, 90, 0.08);
}
body.light .journal-entry-body {
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-entry-body p,
body.light .journal-entry-body div,
body.light .journal-entry-body span,
body.light .journal-entry-body .markdown-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-entry-body blockquote {
  border-left-color: rgba(0, 0, 0, 0.15);
  color: rgba(20, 20, 30, 0.7);
}
body.light .journal-entry-body pre {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .journal-entry-body code {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(20, 20, 30, 0.8);
}
body.light .journal-entry-body h1,
body.light .journal-entry-body h2,
body.light .journal-entry-body h3 {
  color: rgba(20, 20, 30, 0.9);
}
body.light .journal-entry-edit-btn {
  color: rgba(20, 20, 30, 0.3);
}
body.light .journal-entry-card:hover .journal-entry-edit-btn {
  color: rgba(20, 20, 30, 0.5);
}
body.light .journal-entry-edit-btn:hover {
  color: rgba(20, 20, 30, 0.8);
}
body.light .journal-entry-body-clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .journal-entry-card.commit {
  border-left-color: rgba(0, 0, 0, 0.08);
}
body.light .journal-entry-card.commit .journal-entry-body,
body.light .journal-entry-card.commit .journal-entry-body p,
body.light .journal-entry-card.commit .journal-entry-body div,
body.light .journal-entry-card.commit .journal-entry-body span,
body.light .journal-entry-card.commit .journal-entry-body .markdown-text {
  color: rgba(20, 20, 30, 0.65);
}
/* Journal entry edit */
body.light .journal-entry-edit-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.9);
}
body.light .journal-entry-edit-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
body.light .journal-entry-editor-compact .editable-markdown-editor-wrapper {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .journal-entry-editor-compact .editable-markdown-editor-wrapper:focus-within {
  border-color: rgba(var(--accent-rgb), 0.4);
}
body.light .journal-entry-processed-badge {
  background: rgba(74, 222, 128, 0.08);
  color: rgba(74, 222, 128, 0.7);
}
/* Journal infinite toggle */
body.light .journal-infinite-toggle {
  color: rgba(20, 20, 30, 0.5);
}
/* 17. Log view */
body.light .log-view {
  color: rgba(20, 20, 30, 0.85);
}
body.light .log-date-nav {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-date-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-date-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}
body.light .log-section {
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .log-section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .log-section-header h4 {
  color: rgba(20, 20, 30, 0.8);
}
body.light .log-section-header .item-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.5);
}
body.light .log-section-add-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.4);
}
body.light .log-section-add-btn:hover {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.3);
  color: #16a34a;
}
body.light .log-item {
  color: rgba(20, 20, 30, 0.75);
}
body.light .log-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-item-time {
  color: rgba(20, 20, 30, 0.4);
}
body.light .log-item-text {
  color: rgba(20, 20, 30, 0.8);
}
body.light .log-item-action {
  color: rgba(20, 20, 30, 0.35);
}
body.light .log-item-action:hover {
  color: rgba(20, 20, 30, 0.7);
}
body.light .log-add-time {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.8);
}
body.light .log-add-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}
body.light .log-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: white;
}
body.light .log-add-submit {
  color: rgba(20, 20, 30, 0.6);
}
body.light .log-add-cancel {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 30, 0.4);
}
body.light .log-item-edit-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.9);
}
body.light .log-item-edit-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
/* Log context menu */
body.light .log-context-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
body.light .log-context-menu button {
  color: rgba(20, 20, 30, 0.75);
}
body.light .log-context-menu button:hover {
  background: rgba(0, 0, 0, 0.04);
}
/* 18. Notebook */
body.light .notebook-header-left {
  color: rgba(20, 20, 30, 0.65);
}
body.light .notebook-mode-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .notebook-mode-btn {
  color: rgba(20, 20, 30, 0.4);
}
body.light .notebook-mode-btn:hover {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.04);
}
body.light .notebook-mode-btn.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
body.light .notebook-tab-bar {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .notebook-tab {
  color: rgba(20, 20, 30, 0.4);
}
body.light .notebook-tab:hover {
  color: rgba(20, 20, 30, 0.7);
}
body.light .notebook-tab.active {
  color: rgba(20, 20, 30, 0.9);
  border-bottom-color: var(--accent);
}
body.light .notebook-tab-close {
  color: rgba(20, 20, 30, 0.3);
}
body.light .notebook-tab-close:hover {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.06);
}
body.light .notebook-tab-context-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
body.light .notebook-tab-context-menu button {
  color: rgba(20, 20, 30, 0.75);
}
body.light .notebook-tab-context-menu button:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .notebook-tab-context-menu button:disabled {
  color: rgba(20, 20, 30, 0.25);
}
/* Notebook editor */
body.light .notebook-editor .editable-markdown-editor-wrapper {
  color: rgba(20, 20, 30, 0.85);
}
body.light .notebook-editor .editable-markdown-view {
  color: rgba(20, 20, 30, 0.85);
}
body.light .notebook-processed-badge {
  color: rgba(74, 222, 128, 0.7);
  background: rgba(74, 222, 128, 0.08);
}
/* Notebook editor toolbar */
body.light .notebook-editor-toolbar {
  border-color: rgba(0, 0, 0, 0.08);
}
/* Scratch create button */
body.light .scratch-create-btn {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
body.light .scratch-create-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}
/* 19. Info view */
body.light .info-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .info-section-title {
  color: rgba(20, 20, 30, 0.9);
}
body.light .info-section-desc {
  color: rgba(20, 20, 30, 0.5);
}
/* Posture cards */
body.light .posture-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
/* 20. Domain chips */
body.light .domain-chip {
  opacity: 0.85;
}
/* 21. Empty messages */
body.light .empty-message {
  color: rgba(20, 20, 30, 0.4);
}
/* 22. Error / loading states */
body.light .ops-nav-loading,
body.light .ops-nav-error {
  color: rgba(20, 20, 30, 0.6);
}
body.light .ops-nav-error button {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.85);
}
body.light .ops-nav-error button:hover {
  background: rgba(0, 0, 0, 0.1);
}
/* 23. Filter chips */
body.light .filter-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.6);
}
body.light .filter-chip:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}
body.light .filter-chip.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
/* 24. Scrollbars */
body.light .ops-navigator *::-webkit-scrollbar-track {
  background: transparent;
}
body.light .ops-navigator *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
body.light .ops-navigator *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
body.light .ops-navigator * {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}
body.light .planning-tree::-webkit-scrollbar-track {
  background: transparent;
}
body.light .planning-tree::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
body.light .planning-content::-webkit-scrollbar-track {
  background: transparent;
}
body.light .planning-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
body.light .temporal-view::-webkit-scrollbar-track {
  background: transparent;
}
body.light .temporal-view::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
body.light .temporal-view::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
body.light .log-view::-webkit-scrollbar-track,
body.light .planning-view::-webkit-scrollbar-track {
  background: transparent;
}
body.light .log-view::-webkit-scrollbar-thumb,
body.light .planning-view::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
body.light .log-view::-webkit-scrollbar-thumb:hover,
body.light .planning-view::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
body.light .task-edit-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02);
}
body.light .task-edit-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
body.light .task-edit-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
/* 25. Horizon rollover button */
body.light .horizon-rollover-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.6);
}
body.light .horizon-rollover-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}
/* 26. Day counter badge */
body.light .day-counter {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
body.light .day-counter:hover {
  background: rgba(var(--accent-rgb), 0.2);
}
/* 27. Section header task count badges - keep colored badges as-is, they use accent colors that work in both themes */
/* 28. Editable markdown in horizon/planning contexts */
body.light .horizon-content .editable-markdown-edit-mode {
  color: rgba(20, 20, 30, 0.85);
}
body.light .horizon-content .editable-markdown-editor-wrapper {
  border-color: rgba(0, 0, 0, 0.1);
}
/* 29. Domain action buttons */
body.light .domain-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
}
body.light .domain-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.8);
}
/* 29b. Domain task rows (light theme) */
body.light .domain-task-row {
  background: rgba(0, 0, 0, 0.02);
}
body.light .domain-task-row:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .domain-task-row .task-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .domain-task-row.completed .task-text {
  color: rgba(20, 20, 30, 0.4);
}
body.light .task-area {
  color: rgba(20, 20, 30, 0.4);
  background: rgba(0, 0, 0, 0.04);
}
body.light .task-checkbox {
  color: rgba(20, 20, 30, 0.25);
}
body.light .task-checkbox:hover {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
}
body.light .domain-task-row.completed .task-checkbox {
  color: rgba(22, 163, 74, 0.5);
}
/* Light theme task type indicators */
body.light .task-row-flat.task-type-obligation .task-checkbox,
body.light .task-row-grouped.task-type-obligation .task-checkbox,
body.light .domain-task-row.task-type-obligation .task-checkbox {
  color: rgba(234, 88, 12, 0.6);
}
body.light .task-row-flat.task-type-self .task-checkbox,
body.light .task-row-grouped.task-type-self .task-checkbox,
body.light .domain-task-row.task-type-self .task-checkbox {
  color: rgba(14, 165, 233, 0.6);
}
body.light .task-row-flat.task-type-intention .task-checkbox,
body.light .task-row-grouped.task-type-intention .task-checkbox,
body.light .domain-task-row.task-type-intention .task-checkbox {
  color: rgba(0, 0, 0, 0.2);
}
body.light .domain-task-row.task-type-obligation {
  border-left: 3px solid rgba(234, 88, 12, 0.4);
}
body.light .domain-task-row.task-type-self {
  border-left: 3px solid rgba(14, 165, 233, 0.4);
}
body.light .domain-task-row.task-type-intention {
  border-left: 3px solid rgba(0, 0, 0, 0.1);
}
/* Light theme task type/weight toggles */
body.light .task-type-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.4);
}
body.light .task-type-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.6);
}
body.light .task-type-btn.active.type-obligation {
  background: rgba(234, 88, 12, 0.08);
  border-color: rgba(234, 88, 12, 0.3);
  color: #ea580c;
}
body.light .task-type-btn.active.type-self {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.3);
  color: #0ea5e9;
}
body.light .task-type-btn.active.type-intention {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.5);
}
body.light .task-weight-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.4);
}
body.light .task-weight-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.6);
}
body.light .task-weight-btn.active {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}
body.light .task-priority-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.4);
}
body.light .task-priority-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.6);
}
body.light .task-priority-btn.active.urgent {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
  color: #dc2626;
}
body.light .task-priority-btn.active.important {
  background: rgba(202, 138, 4, 0.08);
  border-color: rgba(202, 138, 4, 0.3);
  color: #ca8a04;
}
/* 29c. Next task rows (light theme) */
body.light .next-task-row {
  background: rgba(0, 0, 0, 0.02);
}
body.light .next-task-row:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .next-task-text {
  color: rgba(20, 20, 30, 0.85);
}
body.light .next-task-text.done {
  color: rgba(20, 20, 30, 0.4);
}
/* 30. Horizon day today button */
body.light .horizon-day-today-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.6);
}
body.light .horizon-day-today-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}
/* 31. Task checkbox - keep default styling since they use colored borders */
/* 32. Notebook sidebar items */
body.light .notebook-sidebar {
  border-right-color: rgba(0, 0, 0, 0.06);
}
/* 33. Mini Calendar (light theme) */
body.light .mini-cal {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .mini-cal-title {
  color: rgba(20, 20, 30, 0.85);
}
body.light .mini-cal-nav {
  color: rgba(20, 20, 30, 0.45);
}
body.light .mini-cal-nav:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}
body.light .mini-cal-weekday {
  color: rgba(20, 20, 30, 0.5);
}
body.light .mini-cal-day {
  color: rgba(20, 20, 30, 0.7);
}
body.light .mini-cal-day:not(.blank):hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .mini-cal-day.today {
  border-color: rgba(56, 189, 248, 0.5);
  color: rgba(56, 189, 248, 0.9);
}
body.light .mini-cal-day.selected {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
body.light .mini-cal-context-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
body.light .mini-cal-context-item {
  color: rgba(20, 20, 30, 0.75);
}
body.light .mini-cal-context-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
/* 34. Horizon compact / Plan widget (light theme) */
body.light .horizon-compact {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .horizon-compact .section-header {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .horizon-compact .section-header h3 {
  color: rgba(56, 189, 248, 0.8);
}
body.light .horizon-compact .horizon-action-btn {
  color: rgba(20, 20, 30, 0.4);
}
body.light .horizon-compact .horizon-action-btn:hover {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.06);
}
body.light .horizon-compact .editable-markdown-block {
  color: rgba(20, 20, 30, 0.8);
}
body.light .horizon-compact .editable-markdown-edit-mode {
  color: rgba(20, 20, 30, 0.85);
}
/* 35. Sidebar tree section labels & headers (GOALS, AREAS, etc.) */
body.light .tree-section-label {
  color: rgba(20, 20, 30, 0.45);
}
body.light .tree-section-header {
  color: rgba(20, 20, 30, 0.45);
}
body.light .tree-section-header:hover {
  color: rgba(20, 20, 30, 0.7);
}
body.light .tree-section-count {
  color: rgba(20, 20, 30, 0.4);
  background: rgba(0, 0, 0, 0.06);
}
/* 36. Sidebar domain names (Admin, Body, Build, etc.) */
body.light .tree-area-domain-label {
  color: rgba(20, 20, 30, 0.65);
}
body.light .tree-area-domain-label:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.03);
}
body.light .tree-area-domain-name {
  color: rgba(20, 20, 30, 0.7);
}
body.light .tree-area-domain-count {
  color: rgba(20, 20, 30, 0.3);
}
body.light .tree-area-children {
  border-left-color: rgba(0, 0, 0, 0.08);
}
body.light .area-tree-domain {
  color: rgba(20, 20, 30, 0.85);
}
body.light .areas-domain-name {
  color: rgba(20, 20, 30, 0.8);
}
body.light .areas-domain-count {
  color: rgba(20, 20, 30, 0.4);
  background: rgba(0, 0, 0, 0.05);
}
body.light .areas-add-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .areas-add-btn:hover {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.06);
}
body.light .next-domain-name {
  color: rgba(20, 20, 30, 0.9);
}
body.light .domain-task-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.5);
}
/* 37. Journal toolbar buttons (light theme) */
body.light .today-journal-toolbar {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .journal-toolbar-menu-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
}
body.light .journal-toolbar-menu-btn:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .journal-toolbar-process-btn {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.15);
}
/* 38. Tabs row collapse button (light theme) */
body.light .tabs-row-refresh-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
}
body.light .tabs-row-refresh-btn:hover:not(:disabled) {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .tabs-row-collapse-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
}
body.light .tabs-row-collapse-btn:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}
/* 39. Sidebar resize handle (light theme) */
body.light .sidebar-resize-handle::after {
  background: rgba(0, 0, 0, 0.06);
}
/* 40. Section date label (light theme) */
body.light .section-date-label {
  color: rgba(56, 189, 248, 0.8);
  background: rgba(56, 189, 248, 0.08);
}
/* 41. Today main scrollbar (light theme) */
body.light .planning-content.today-scroll-layout .today-main::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}
body.light .planning-content.today-scroll-layout .today-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
/* 42. Planning content background (light theme) */
body.light .planning-content {
  background: transparent;
}
/* 43. Tree divider lines (light theme) */
body.light .tree-divider {
  background: rgba(0, 0, 0, 0.06);
}
/* 44. Today journal action buttons (light theme) */
body.light .today-journal-actions .notebook-mode-btn {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
  background: rgba(0, 0, 0, 0.03);
}
body.light .today-journal-actions .notebook-mode-btn:hover {
  color: rgba(20, 20, 30, 0.8);
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.06);
}
body.light .today-journal-actions .notebook-mode-btn.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.1);
}
/* 45. Section description (light theme) */
body.light .section-description {
  color: rgba(20, 20, 30, 0.4);
}
/* 46. Calendar event items in light theme */
body.light .calendar-day-label {
  color: rgba(20, 20, 30, 0.5);
}
body.light .calendar-event-item {
  color: rgba(20, 20, 30, 0.8);
}
body.light .calendar-event-icon {
  color: rgba(20, 20, 30, 0.4);
}
body.light .calendar-event-title {
  color: rgba(20, 20, 30, 0.85);
}
body.light .calendar-event-time-inline {
  color: rgba(20, 20, 30, 0.45);
}
body.light .calendar-event-date {
  color: rgba(20, 20, 30, 0.5);
}
body.light .account-badge.account-personal {
  background: rgba(2, 100, 170, 0.15);
  color: #075985;
}
body.light .account-badge.account-work {
  background: rgba(109, 40, 217, 0.12);
  color: #5b21b6;
}
body.light .task-row-flat .task-due-tag {
  background: rgba(2, 100, 170, 0.12);
  color: #075985;
}
body.light .task-row-flat .task-due-tag.due-today {
  background: rgba(161, 98, 7, 0.12);
  color: #92400e;
}
body.light .task-row-flat .task-due-tag.due-soon {
  background: rgba(194, 65, 12, 0.12);
  color: #9a3412;
}
body.light .task-row-flat .task-due-tag.overdue {
  background: rgba(185, 28, 28, 0.12);
  color: #991b1b;
}
/* 47. Email section (light theme) */
body.light .email-item {
  color: rgba(20, 20, 30, 0.7);
}
body.light .email-item + .email-item {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .email-from {
  color: rgba(20, 20, 30, 0.85);
}
body.light .email-subject {
  color: rgba(20, 20, 30, 0.6);
}
body.light .email-mark-all-read {
  color: rgba(20, 20, 30, 0.5);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .email-mark-all-read:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.08);
}
body.light .email-mark-spinner {
  border-color: rgba(0, 0, 0, 0.15);
  border-top-color: rgba(20, 20, 30, 0.6);
}
body.light .email-skip-btn {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.15);
  color: rgba(16, 185, 129, 0.5);
}
body.light .email-skip-btn:hover {
  color: rgba(16, 185, 129, 0.9);
  background: rgba(16, 185, 129, 0.12);
}
body.light .email-skip-btn.skipped {
  background: rgba(220, 100, 20, 0.08);
  border-color: rgba(220, 100, 20, 0.2);
  color: rgba(220, 100, 20, 0.8);
}
body.light .email-skip-btn.skipped:hover {
  background: rgba(220, 100, 20, 0.15);
}
body.light .email-item.email-skipped .email-from,
body.light .email-item.email-skipped .email-subject {
  text-decoration-color: rgba(0, 0, 0, 0.15);
}
body.light .email-track-btn {
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.25);
}
body.light .email-track-btn:hover {
  color: rgba(220, 100, 20, 0.9);
  background: rgba(220, 100, 20, 0.08);
  border-color: rgba(220, 100, 20, 0.2);
}
/* 48. Week Priorities (light theme) */
body.light .week-priorities {
  color: rgba(20, 20, 30, 0.88);
}
body.light .week-priorities strong {
  color: rgba(20, 20, 30, 0.88);
}
/* 50. Section Header (light theme) */
body.light .section-header-clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}
/* 51. Section Collapse (light theme) */
body.light .section-collapse-chevron {
  color: rgba(20, 20, 30, 0.35);
}
/* 52. Section Add (light theme) */
body.light .section-add-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .section-add-form {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .section-add-select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .section-add-cancel {
  color: rgba(20, 20, 30, 0.55);
}
/* 53. Planning Section (light theme) */
body.light .planning-section.today .section-header h3 {
  color: rgba(20, 20, 30, 0.88);
}
/* 54. Next Calendar (light theme) */
body.light .next-calendar-events .next-calendar-item {
  color: rgba(20, 20, 30, 0.85);
}
body.light .next-calendar-events .next-calendar-item .task-text {
  color: rgba(20, 20, 30, 0.85);
}
body.light .next-calendar-events .next-calendar-item .task-due-tag {
  background: rgba(2, 100, 170, 0.12);
  color: #075985;
}
body.light .next-calendar-events .next-calendar-item .task-checkbox {
  color: #075985 !important;
}
body.light .next-calendar-events .next-calendar-item:hover .task-text {
  color: #1a1a2e;
}
/* 55. Subsection (light theme) */
body.light .subsection-link-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .subsection-link-btn.active {
  color: rgba(20, 20, 30, 0.55);
}
body.light .subsection-edit-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .subsection-edit-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .subsection-open-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .subsection-open-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
/* 56. Focus Thread (light theme) */
body.light .focus-thread-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .focus-thread-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .focus-thread-name {
  color: rgba(20, 20, 30, 0.88);
}
/* 57. Workbench Focus (light theme) */
body.light .workbench-focus-card-icon.thread {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-focus-stop-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
/* 58. Workbench Picker (light theme) */
body.light .workbench-picker-new {
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-picker-new:hover {
  color: rgba(20, 20, 30, 0.88);
}
/* 59. Focus Project (light theme) */
body.light .focus-project-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .focus-project-threads-count {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
/* 60. Active Work (light theme) */
body.light .active-work-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .active-work-card:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .active-work-card-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .active-work-card-context {
  color: rgba(20, 20, 30, 0.35);
}
body.light .active-work-stop-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
/* 62. Calendar Nl (light theme) */
body.light .calendar-nl-dialog {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
}
body.light .calendar-nl-dialog-hint {
  color: rgba(20, 20, 30, 0.55);
}
/* 63. Calendar Review (light theme) */
body.light .calendar-review-link-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .calendar-review-link-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .calendar-review-checkbox {
  color: rgba(20, 20, 30, 0.88);
}
body.light .calendar-review-checkbox input {
  background: rgba(0, 0, 0, 0.03);
}
body.light .calendar-review-datetime-icon {
  color: rgba(20, 20, 30, 0.88);
}
body.light .calendar-review-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .calendar-review-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .calendar-review-btn.secondary {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .calendar-review-btn.secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
}
/* 64. Calendar Multi Review (light theme) */
body.light .calendar-multi-review-item.removed {
  background: rgba(0, 0, 0, 0.03);
}
body.light .calendar-multi-review-who {
  color: rgba(20, 20, 30, 0.55);
}
body.light .calendar-multi-review-action-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .calendar-multi-review-action-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
/* 65. Email Surface (light theme) */
body.light .email-surface-header {
  color: rgba(20, 20, 30, 0.55);
}
body.light .email-surface.email-empty {
  color: rgba(20, 20, 30, 0.35);
}
/* 67. Google Expired (light theme) */
body.light .google-expired-account-name {
  color: rgba(20, 20, 30, 0.88);
}
/* 68. Skeleton (light theme) */
body.light .skeleton-line {
  background: rgba(0, 0, 0, 0.03);
}
/* 69. Journal Options (light theme) */
body.light .journal-options-popover {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
}
body.light .journal-options-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-options-item:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-options-divider {
  background: rgba(0, 0, 0, 0.03);
}
/* 70. Today Journal (light theme) */
body.light .today-journal-action-group {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .today-journal-action-group--mode {
  background: rgba(0, 0, 0, 0.03);
}
body.light .today-journal-action-btn {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .today-journal-action-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .today-journal-editor .editable-markdown-editor-wrapper {
  border-color: rgba(0, 0, 0, 0.08);
}
/* 71. Journal Day (light theme) */
body.light .journal-day-section.history {
  background: rgba(0, 0, 0, 0.03);
}
body.light .journal-day-title {
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-day-sub {
  color: rgba(20, 20, 30, 0.55);
}
body.light .journal-day-empty-note {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.08);
}
/* 72. Journal Empty (light theme) */
body.light .journal-empty-text {
  color: rgba(20, 20, 30, 0.35);
}
body.light .journal-empty-hint {
  color: rgba(20, 20, 30, 0.15);
}
/* 73. Journal Open (light theme) */
body.light .journal-open-day-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-open-day-btn:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.06);
}
/* 74. Journal Stream (light theme) */
body.light .journal-stream-empty {
  color: rgba(20, 20, 30, 0.35);
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.08);
}
body.light .journal-stream-more {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .journal-stream-more:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
/* 75. Journal Time Group (light theme) */
body.light .journal-time-group-count {
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-time-group-entries .journal-entry-card {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* 76. Journal Entry (light theme) */
body.light .journal-entry-edit-actions button {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-entry-edit-actions button:hover {
  background: rgba(0, 0, 0, 0.06);
}
/* 77. Journal Commit (light theme) */
body.light .journal-commit-msg {
  color: rgba(20, 20, 30, 0.88);
}
/* 78. Journal Filter (light theme) */
body.light .journal-filter-pill {
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .journal-filter-pill:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
/* 79. Journal Activity (light theme) */
body.light .journal-activity-log {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .journal-activity-log-header {
  color: rgba(20, 20, 30, 0.55);
}
body.light .journal-activity-log-header:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-activity-log-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
/* 80. This Week (light theme) */
body.light .this-week-display:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .this-week-hint {
  color: rgba(20, 20, 30, 0.55);
}
body.light .this-week-cancel {
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .this-week-cancel:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .this-week-save {
  color: rgba(20, 20, 30, 0.88);
}
/* 81. Horizon Period (light theme) */
body.light .horizon-period-nav {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .horizon-period-btn.horizon-period-today {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .horizon-period-btn.horizon-period-today.current {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-period-btn.horizon-period-today.current:hover {
  color: rgba(20, 20, 30, 0.35);
}
/* 82. Horizon Day (light theme) */
body.light .horizon-day-today-btn.current {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-day-today-btn.current:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.35);
}
/* 83. Strategy (light theme) */
body.light .strategy-block {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .strategy-block h4 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .strategy-block .markdown-block {
  color: rgba(20, 20, 30, 0.88);
}
body.light .strategy-toc {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .strategy-toc-title {
  color: rgba(20, 20, 30, 0.35);
}
body.light .strategy-toc-children {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .strategy-toc-item,
body.light .strategy-toc-item.level-0,
body.light .strategy-toc-item.level-1,
body.light .strategy-toc-item.level-2,
body.light .strategy-toc-item.level-3 {
  color: rgba(20, 20, 30, 0.55);
}
body.light .strategy-toc-item:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .strategy-toc-item.level-0 {
  color: rgba(20, 20, 30, 0.7);
}
body.light .strategy-toc-text {
  color: inherit;
}
body.light .strategy-toc-toggle {
  color: rgba(20, 20, 30, 0.35);
}
body.light .strategy-toc-toggle:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .strategy-context-empty {
  color: rgba(20, 20, 30, 0.55);
}
/* 84. Horizon Files (light theme) */
body.light .horizon-files-toggle {
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-files-toggle:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .horizon-files-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-files-action-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-files-action-btn:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .horizon-files-empty {
  color: rgba(20, 20, 30, 0.35);
}
/* 85. Rollover (light theme) */
body.light .rollover-dialog {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.14);
}
body.light .rollover-dialog-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .rollover-dialog-meta {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .rollover-dialog-empty {
  color: rgba(20, 20, 30, 0.55);
}
body.light .rollover-toolbar-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .rollover-toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .rollover-toolbar-count {
  color: rgba(20, 20, 30, 0.55);
}
body.light .rollover-item-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .rollover-group.has-children .rollover-item-parent {
  background: rgba(0, 0, 0, 0.03);
}
body.light .rollover-group.has-children .rollover-item-child {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .rollover-group-header {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .rollover-group-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .rollover-group-count {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .rollover-dialog-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* 86. Horizon File (light theme) */
body.light .horizon-file-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .horizon-file-item.creating {
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-file-name {
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-file-delete {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-file-editor {
  background: rgba(0, 0, 0, 0.03);
}
body.light .horizon-file-editor-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-file-close {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-file-close:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
/* 87. Next Tabs (light theme) */
body.light .next-tabs {
  background: rgba(0, 0, 0, 0.03);
}
/* 88. Next Tab (light theme) */
body.light .next-tab {
  color: rgba(20, 20, 30, 0.55);
}
body.light .next-tab:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .next-tab .tab-count {
  background: rgba(0, 0, 0, 0.03);
}
body.light .next-tab.active .tab-count {
  background: rgba(0, 0, 0, 0.06);
}
/* 89. Suggested (light theme) */
body.light .suggested-content .generated-at {
  color: rgba(20, 20, 30, 0.55);
}
/* 90. Task Row Flat (light theme) */
body.light .task-row-flat .task-checkbox {
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-row-flat .task-text-group:hover .task-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-row-flat .task-text.done {
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-row-flat .task-edit-btn {
  background: rgba(0, 0, 0, 0.06);
}
body.light .task-row-flat .task-edit-btn.cancel {
  color: rgba(20, 20, 30, 0.55);
}
/* 91. Next Queue (light theme) */
body.light .next-queue-filters {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* 92. Next Domain (light theme) */
body.light .next-domain-section {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .next-domain-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .next-domain-header:hover {
  background: rgba(0, 0, 0, 0.03);
}
/* 93. Next Area (light theme) */
body.light .next-area-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .next-area-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .next-area-name {
  color: rgba(20, 20, 30, 0.88);
}
/* 94. Area Task (light theme) */
body.light .area-task-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
/* 95. Suggestion Row (light theme) */
body.light .suggestion-row {
  background: rgba(0, 0, 0, 0.03);
}
body.light .suggestion-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
/* 96. Suggestion Task (light theme) */
body.light .suggestion-task {
  color: rgba(20, 20, 30, 0.88);
}
/* 97. Suggestion Source (light theme) */
body.light .suggestion-source {
  color: rgba(20, 20, 30, 0.55);
}
/* 98. Suggestion Reasoning (light theme) */
body.light .suggestion-reasoning {
  color: rgba(20, 20, 30, 0.55);
}
/* 99. Suggestion Flag (light theme) */
body.light .suggestion-flag {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
/* 100. Suggestion Action (light theme) */
body.light .suggestion-action-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .suggestion-action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
/* 101. Capacity Note (light theme) */
body.light .capacity-note {
  background: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* 102. Capacity Text (light theme) */
body.light .capacity-text {
  color: rgba(20, 20, 30, 0.88);
}
/* 103. Rest Option (light theme) */
body.light .rest-option-text {
  color: rgba(20, 20, 30, 0.88);
}
/* 104. Generated At (light theme) */
body.light .generated-at {
  color: rgba(20, 20, 30, 0.35);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* 105. Log Current (light theme) */
body.light .log-current-date {
  color: rgba(20, 20, 30, 0.88);
}
/* 106. Log Add (light theme) */
body.light .log-add-submit:hover:not(:disabled) {
  color: rgba(20, 20, 30, 0.88);
}
body.light .log-add-time-display {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
/* 107. Log Empty (light theme) */
body.light .log-empty-hint {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-empty {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-empty-sub {
  color: rgba(20, 20, 30, 0.35) !important;
}
/* 108. Log Item (light theme) */
body.light .log-item.editing {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-item-edit-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
/* 109. Log View (light theme) */
body.light .log-view-loading {
  color: rgba(20, 20, 30, 0.55);
}
/* 110. Log Toolbar (light theme) */
body.light .log-toolbar {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .log-toolbar-title {
  color: rgba(20, 20, 30, 0.88);
}
/* 111. Log Day (light theme) */
body.light .log-day-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .log-day-title {
  color: rgba(20, 20, 30, 0.88);
}
body.light .log-day-count {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-day-content .log-item {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-day-content .log-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-day-content .log-item-time {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-day-content .log-item-text {
  color: rgba(20, 20, 30, 0.88);
}
/* 112. Log Section (light theme) */
body.light .log-section-compact {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-section-compact.clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-section-header.clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}
/* 113. Log Compact (light theme) */
body.light .log-compact-value {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-compact-areas {
  color: rgba(20, 20, 30, 0.35);
}
/* 114. Log Generated (light theme) */
body.light .log-generated-at {
  color: rgba(20, 20, 30, 0.55);
}
/* 115. Log Group (light theme) */
body.light .log-group {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .log-group-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .log-group-header.clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-group-icon {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-group-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .log-group-count {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-group-chevron {
  color: rgba(20, 20, 30, 0.35);
}
body.light .log-group-stat {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-group-items .log-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-group.other .log-group-header {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-group.other .log-group-icon {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-group.general .log-group-header {
  background: rgba(0, 0, 0, 0.03);
}
/* 116. Log Summary (light theme) */
body.light .log-summary {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .log-summary-stats {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-summary-stat {
  color: rgba(20, 20, 30, 0.88);
}
body.light .log-summary-stat strong {
  color: rgba(20, 20, 30, 0.88);
}
/* 117. Task Group (light theme) */
body.light .task-group {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-group-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-group-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-group-count {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
/* 118. Task Defer (light theme) */
body.light .task-defer-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
/* 119. Task Row (light theme) */
body.light .task-row-grouped.editing {
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-row-grouped .task-edit-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
/* 120. Domain View (light theme) */
body.light .domain-view-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .domain-view-title h2 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .domain-view-stats {
  color: rgba(20, 20, 30, 0.55);
}
/* 121. Domain Tabs (light theme) */
body.light .domain-tabs {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* 122. Domain Tab (light theme) */
body.light .domain-tab {
  color: rgba(20, 20, 30, 0.55);
}
body.light .domain-tab:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .domain-tab.active {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .domain-tab .tab-count {
  background: rgba(0, 0, 0, 0.06);
}
/* 123. Domain Empty (light theme) */
body.light .domain-empty p {
  color: rgba(20, 20, 30, 0.55);
}
body.light .domain-empty-hint {
  color: rgba(20, 20, 30, 0.35);
}
/* 124. Task Move (light theme) */
body.light .task-move-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
body.light .task-move-dropdown-header {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-move-dropdown-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-move-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
/* 125. Task Age (light theme) */
body.light .task-age {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
/* 126. Ops Toast (light theme) */
body.light .ops-toast {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.88);
}
body.light .ops-toast-close {
  color: rgba(20, 20, 30, 0.55);
}
body.light .ops-toast-close:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.06);
}
/* 127. Task Edit (light theme) */
body.light .task-edit-textarea::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}
body.light .task-edit-textarea::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .task-edit-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .task-edit-hint {
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-edit-select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-edit-select option {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-edit-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-edit-btn.save {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-edit-btn.cancel {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-edit-btn.cancel:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
/* 128. Area Tree (light theme) */
body.light .area-tree {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-tree::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .area-tree-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-tree-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-tree-none {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* 129. People Picker (light theme) */
body.light .people-picker-list {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .people-picker-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .people-picker-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .people-picker-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .people-picker-none {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .people-picker-circle {
  color: rgba(20, 20, 30, 0.35);
}
/* 130. Task Domain (light theme) */
body.light .task-domain-group {
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-domain-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-domain-icon {
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-domain-icon.gray {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-domain-label {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-domain-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
/* 131. Task Area (light theme) */
body.light .task-area-label {
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-area-count {
  color: rgba(20, 20, 30, 0.35);
}
/* 132. Task Dropdown (light theme) */
body.light .task-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
body.light .task-dropdown-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
/* 133. Task Detail (light theme) */
body.light .task-detail-text svg {
  color: rgba(20, 20, 30, 0.35);
}
body.light .task-detail-subtasks {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-detail-subtask:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-detail-subtask svg {
  color: rgba(20, 20, 30, 0.35);
}
body.light .task-detail-value.source.gray {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-detail-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-detail-action.edit {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-detail-action.edit:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .task-detail-action.demote {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-detail-action.demote:hover {
  background: rgba(0, 0, 0, 0.06);
}
/* 134. Domain Content (light theme) */
body.light .domain-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}
body.light .domain-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .domain-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.06);
}
/* 135. Notebook Font (light theme) */
body.light .notebook-font-controls {
  background: rgba(0, 0, 0, 0.03);
}
body.light .notebook-font-btn {
  color: rgba(20, 20, 30, 0.55);
}
body.light .notebook-font-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .notebook-font-label {
  color: rgba(20, 20, 30, 0.55);
}
/* 136. Editor Font (light theme) */
body.light .editor-font-controls {
  background: rgba(0, 0, 0, 0.03);
}
body.light .editor-font-controls button {
  color: rgba(20, 20, 30, 0.55);
}
body.light .editor-font-controls button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .editor-font-controls .editor-font-label {
  color: rgba(20, 20, 30, 0.55);
}
/* 137. Process Preview (light theme) */
body.light .process-preview {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .process-preview-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .process-preview-summary {
  color: rgba(20, 20, 30, 0.55);
}
/* 138. Process Streaming (light theme) */
body.light .process-streaming-status {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-streaming-date {
  color: rgba(20, 20, 30, 0.35);
}
/* 139. Process Select (light theme) */
body.light .process-select-all {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-select-all:hover {
  color: rgba(20, 20, 30, 0.88);
}
/* 140. Process Entry (light theme) */
body.light .process-entry:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .process-entry-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-entry-display:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .process-entry-display.showing-original {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-entry-edit {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
/* 141. Process Regen (light theme) */
body.light .process-regen-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.35);
}
body.light .process-regen-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-regen-feedback input {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-regen-feedback input::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
/* 142. Process Dest (light theme) */
body.light .process-dest-select {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .process-dest-select:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-dest-select option {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
/* 143. Process Domain (light theme) */
body.light .process-domain-select {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-domain-select:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-domain-select option {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
/* 144. Process Source (light theme) */
body.light .process-source-badge {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.35);
}
/* 145. Process Tag (light theme) */
body.light .process-tag-input {
  background: rgba(255, 255, 255, 0.98);
}
/* 146. Process Add (light theme) */
body.light .process-add-tag-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.35);
}
/* 147. Process Correction (light theme) */
body.light .process-correction-reason {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-correction-reason::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .process-correction-dismiss {
  color: rgba(20, 20, 30, 0.35);
}
body.light .process-correction-dismiss:hover {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
/* 148. Process Actions (light theme) */
body.light .process-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* 149. Process Cancel (light theme) */
body.light .process-cancel-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
/* 150. Process Feedback (light theme) */
body.light .process-feedback-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-feedback-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-feedback-panel {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
body.light .process-feedback-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-feedback-header button {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-feedback-header button:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .process-feedback-content {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-feedback-content th {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .process-feedback-content td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
/* 151. Scratch Header (light theme) */
body.light .scratch-header-left {
  color: rgba(20, 20, 30, 0.88);
}
/* 152. Scratch Sidebar (light theme) */
body.light .scratch-sidebar {
  background: transparent;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .notebook-cal-sidebar {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .notebook-cal-toggle {
  color: rgba(20, 20, 30, 0.4);
}
body.light .notebook-cal-toggle:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-sidebar-search-wrap {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-sidebar-search-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-sidebar-search {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-sidebar-search::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-sidebar-search-clear {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-sidebar-search-clear:hover {
  color: rgba(20, 20, 30, 0.65);
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-sidebar-search-empty {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-sidebar-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
/* 153. Scratch Add (light theme) */
body.light .scratch-add-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
/* 154. Scratch Page (light theme) */
body.light .scratch-page-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-page-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-page-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-page-title {
  color: rgba(20, 20, 30, 0.88);
}
/* 155. Scratch Tree (light theme) */
body.light .scratch-tree-toggle {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-tree-toggle:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
/* 156. Scratch Context (light theme) */
body.light .scratch-context-menu {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
body.light .scratch-context-menu button {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-context-menu button:hover {
  background: rgba(0, 0, 0, 0.03);
}
/* 157. Scratch Move (light theme) */
body.light .scratch-move-backdrop {
  background: rgba(0, 0, 0, 0.25);
}
body.light .scratch-move-dialog {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .scratch-move-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-move-header button {
  color: rgba(20, 20, 30, 0.55);
}
body.light .scratch-move-header button:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-move-group + .scratch-move-group {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-move-group-label {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-move-option {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-move-option:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
/* 158. Scratch Folder (light theme) */
body.light .scratch-folder-create-path {
  color: rgba(20, 20, 30, 0.55);
}
body.light .scratch-folder-create-input {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 30, 0.88);
}
body.light select.scratch-folder-create-input option {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-folder-create-btn.secondary {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-folder-create-btn.secondary:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-folder-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-folder-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-folder-count {
  color: rgba(20, 20, 30, 0.35);
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-folder-rename-input {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-folder-children {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-folder-empty {
  color: rgba(20, 20, 30, 0.35);
}
/* 159. Scratch Area (light theme) */
body.light .scratch-area-checkbox {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-area-add-file-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-area-add-file-btn:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-area-file-tree {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-area-file-item {
  color: rgba(20, 20, 30, 0.55);
}
body.light .scratch-area-file-item:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-area-file-item.creating {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-area-file-input {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
/* 160. Scratch Toc (light theme) */
body.light .scratch-toc-panel {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-toc-title {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-toc-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-toc-item.scratch-toc-active {
  background: rgba(109, 40, 217, 0.15);
  border-left: 2px solid #7c3aed;
}
body.light .scratch-toc-item.scratch-toc-active .scratch-toc-text {
  color: #7c3aed;
  font-weight: 600;
}
body.light .scratch-toc-item.scratch-toc-in-section {
  background: rgba(109, 40, 217, 0.06);
  border-left: 2px solid rgba(109, 40, 217, 0.3);
}
body.light .scratch-toc-item.scratch-toc-in-section .scratch-toc-text {
  color: rgba(109, 40, 217, 0.85);
}
body.light .scratch-toc-toggle {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-toc-toggle:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-toc-dot::after {
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-toc-text,
body.light .scratch-toc-item.level-1 .scratch-toc-text,
body.light .scratch-toc-item.level-2 .scratch-toc-text,
body.light .scratch-toc-item.level-3 .scratch-toc-text,
body.light .scratch-toc-item.level-4 .scratch-toc-text {
  color: rgba(20, 20, 30, 0.55);
}
body.light .scratch-toc-item.level-1 .scratch-toc-text {
  color: rgba(20, 20, 30, 0.7);
}
body.light .scratch-toc-text:hover,
body.light .scratch-toc-item.level-1 .scratch-toc-text:hover,
body.light .scratch-toc-item.level-2 .scratch-toc-text:hover,
body.light .scratch-toc-item.level-3 .scratch-toc-text:hover,
body.light .scratch-toc-item.level-4 .scratch-toc-text:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-toc-children {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-toc-empty {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-toc-divider {
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-toc-link-icon {
  color: rgba(0, 0, 0, 0.3);
}
body.light .scratch-toc-link-label {
  color: rgba(0, 0, 0, 0.5) !important;
}
body.light .scratch-toc-root-label {
  color: rgba(0, 0, 0, 0.7) !important;
}
body.light .scratch-toc-link-count {
  color: rgba(0, 0, 0, 0.25);
}
body.light .scratch-toc-toolbar-btn {
  color: rgba(0, 0, 0, 0.35);
}
body.light .scratch-toc-toolbar-btn:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.05);
}
body.light .scratch-toc-toolbar-btn.active {
  color: rgba(109, 78, 201, 0.8);
}
body.light .scratch-toc-search-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
body.light .scratch-toc-search-input:focus {
  border-color: rgba(109, 78, 201, 0.4);
}
body.light .scratch-toc-search-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}
body.light .scratch-toc-search-clear {
  color: rgba(0, 0, 0, 0.3);
}
body.light .scratch-toc-search-clear:hover {
  color: rgba(0, 0, 0, 0.6);
}
/* 161. Scratch Heading (light theme) */
body.light .scratch-heading-item {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-heading-item:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-heading-item.level-4 {
  color: rgba(20, 20, 30, 0.35);
}
/* 162. Scratch Empty (light theme) */
body.light .scratch-empty {
  color: rgba(20, 20, 30, 0.35);
}
/* 163. Notebook Landing (light theme) */
body.light .notebook-landing-search-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-search {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .notebook-landing-search::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .notebook-landing-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .notebook-landing-item-remove {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-item-remove:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.06);
}
body.light .notebook-landing-item-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-section-label {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-clear-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-clear-btn:hover {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .notebook-landing-empty {
  color: rgba(20, 20, 30, 0.35);
}
/* 164. Scratch Starred (light theme) */
body.light .scratch-starred-list {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* 165. Scratch Virtual (light theme) */
body.light .scratch-virtual-folder-item {
  color: rgba(20, 20, 30, 0.55);
}
body.light .scratch-virtual-folder-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
/* 166. Posture Card (light theme) */
body.light .posture-card-def {
  color: rgba(20, 20, 30, 0.88);
}
body.light .posture-card-test {
  color: rgba(20, 20, 30, 0.55);
}
body.light .posture-card-label {
  color: rgba(20, 20, 30, 0.55);
}
body.light .posture-card-route {
  color: rgba(20, 20, 30, 0.55);
}
body.light .posture-card-route code {
  background: rgba(0, 0, 0, 0.03);
}
/* 167. Info Distinction (light theme) */
body.light .info-distinction h4 {
  color: rgba(20, 20, 30, 0.88);
}
/* 168. Info Table (light theme) */
body.light .info-table th {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .info-table td {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* 169. Info Priority (light theme) */
body.light .info-priority-list li {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .info-priority-list li::before {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
/* 170. Info Philosophy (light theme) */
body.light .info-philosophy-col {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .info-philosophy-subtitle {
  color: rgba(20, 20, 30, 0.55);
}
body.light .info-philosophy-col ul li {
  color: rgba(20, 20, 30, 0.55);
}
body.light .info-philosophy-route {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .info-philosophy-route code {
  background: rgba(0, 0, 0, 0.03);
}
body.light .info-philosophy-pipeline {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .info-philosophy-pipeline h4 {
  color: rgba(20, 20, 30, 0.88);
}
/* 171. Info Pipeline (light theme) */
body.light .info-pipeline-flow svg {
  color: rgba(20, 20, 30, 0.35);
}
/* 172. Pipeline Stage (light theme) */
body.light .pipeline-stage {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
/* 173. Info Planning (light theme) */
body.light .info-planning-layer {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .info-planning-layer-header {
  color: rgba(20, 20, 30, 0.88);
}
body.light .info-planning-layer p {
  color: rgba(20, 20, 30, 0.55);
}
body.light .info-planning-connector {
  color: rgba(20, 20, 30, 0.35);
}
/* 174. Tree Item (light theme) */
body.light .tree-item.goal-item:hover .tree-period-chevron {
  color: rgba(20, 20, 30, 0.55);
}
body.light .tree-item-planning:hover .tree-period-chevron {
  color: rgba(20, 20, 30, 0.55);
}
body.light .tree-item-area-label:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .tree-item-file:hover {
  background: rgba(0, 0, 0, 0.03);
}
/* 175. Tree Period (light theme) */
body.light .tree-period-chevron {
  color: rgba(20, 20, 30, 0.35);
}
body.light .tree-period-dropdown-wrap:hover .tree-period-chevron {
  color: rgba(20, 20, 30, 0.88);
}
body.light .tree-period-select option {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
/* 176. Horizon Context (light theme) */
body.light .horizon-context-panel {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .horizon-context-panel-header {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}
body.light .horizon-context-close {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-context-close:hover {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .horizon-context-level {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .horizon-context-level-label {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .horizon-context-level-content .markdown-block {
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-context-level-content .markdown-block strong {
  color: rgba(20, 20, 30, 0.88);
}
body.light .horizon-context-empty {
  color: rgba(20, 20, 30, 0.35);
}
/* 177. Horizon Cascade (light theme) */
body.light .horizon-cascade {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* 178. Cascade (light theme) */
body.light .cascade-toggle {
  color: rgba(20, 20, 30, 0.35);
}
body.light .cascade-toggle:hover {
  color: rgba(20, 20, 30, 0.55);
}
body.light .cascade-content {
  background: rgba(0, 0, 0, 0.03);
}
body.light .cascade-content .markdown-block {
  color: rgba(20, 20, 30, 0.55);
}
body.light .cascade-empty {
  color: rgba(20, 20, 30, 0.35);
}
/* 179. Backlog (light theme) */
body.light .backlog-open-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .backlog-open-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .backlog-open-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.55);
}
body.light .backlog-dialog-title {
  color: rgba(20, 20, 30, 0.88);
}
body.light .backlog-dialog-add {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* 180. Linked Note (light theme) */
body.light .linked-note-remove {
  color: rgba(20, 20, 30, 0.35);
}
body.light .linked-note-remove:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .linked-note-add-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .linked-note-add-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .linked-note-type {
  color: rgba(20, 20, 30, 0.35);
}
/* 181. Note Picker (light theme) */
body.light .note-picker-overlay {
  background: rgba(0, 0, 0, 0.25);
}
body.light .note-picker-dialog {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .note-picker-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .note-picker-header h3 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .note-picker-tab {
  color: rgba(20, 20, 30, 0.55);
}
body.light .note-picker-tab:hover {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .note-picker-tab.active {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .note-picker-thread-area {
  color: rgba(20, 20, 30, 0.35);
}
body.light .note-picker-filter {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.35);
}
body.light .note-picker-filter input {
  color: rgba(20, 20, 30, 0.88);
}
body.light .note-picker-filter input::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .note-picker-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .note-picker-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .note-picker-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .note-picker-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .note-picker-arrow {
  color: rgba(20, 20, 30, 0.35);
}
body.light .note-picker-item.folder {
  color: rgba(20, 20, 30, 0.55);
}
body.light .note-picker-item.folder:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .note-picker-item.file {
  color: rgba(20, 20, 30, 0.55);
}
body.light .note-picker-result-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .note-picker-result-path {
  color: rgba(20, 20, 30, 0.35);
}
body.light .note-picker-empty {
  color: rgba(20, 20, 30, 0.35);
}
/* 182. Areas View (light theme) */
body.light .areas-view-header h3 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-view-count {
  color: rgba(20, 20, 30, 0.55);
}
/* 183. Areas Group (light theme) */
body.light .areas-group-select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
/* 184. Areas Domain (light theme) */
body.light .areas-domain-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
/* 185. Areas Add (light theme) */
body.light .areas-add-form {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .areas-add-form-row select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-add-form select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-add-form-actions button {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-add-form-actions button:hover {
  background: rgba(0, 0, 0, 0.06);
}
/* 186. Areas Card (light theme) */
body.light .areas-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .areas-card:hover {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}
body.light .areas-card-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-card-desc {
  color: rgba(20, 20, 30, 0.55);
}
body.light .areas-card-tag.gray {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .areas-card-badge.legacy {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.35);
}
body.light .areas-card-edit label span {
  color: rgba(20, 20, 30, 0.55);
}
body.light .areas-card-edit select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-card-edit-actions button {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-card-edit-actions button:hover {
  background: rgba(0, 0, 0, 0.06);
}
/* 187. Areas Empty (light theme) */
body.light .areas-empty {
  color: rgba(20, 20, 30, 0.35);
}
/* 188. Tree Area (light theme) */
body.light .tree-area-file-count {
  color: rgba(20, 20, 30, 0.35);
}
body.light .tree-area-files {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
/* 189. Area Detail (light theme) */
body.light .area-detail-nav {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-nav-item {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-nav-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-nav-item.active {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-nav-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-section-add-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-section-add-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-loading {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-icon-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-title h3 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-domain-tag.gray {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-tag {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-vault-path {
  color: rgba(20, 20, 30, 0.2);
}
body.light .area-detail-vault-path:hover {
  color: rgba(20, 20, 30, 0.45);
}
body.light .area-detail-desc {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-desc:hover {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-desc-edit-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-desc-edit input {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-intention-empty {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-intention-edit input {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-intention-edit button {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-focused-file-header {
  color: rgba(20, 20, 30, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-edit-link {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-edit-link:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .area-detail-section-header {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-section-header:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-section-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-horizon-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-craft {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-craft .editable-markdown-textarea {
  background: rgba(0, 0, 0, 0.04);
}
body.light .area-detail-craft h4 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-craft h5 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-task {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-task-check {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-task-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-task-section {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-task-delete {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-thought {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-thought-title {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-thought-date {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-thought-body {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-log-day {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-log-date {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-log-item {
  color: rgba(20, 20, 30, 0.55);
  border-left: 2px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-log-item strong {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-empty {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-empty-cta {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-empty-cta span {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-empty-cta-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-empty-cta-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .area-detail-section-action {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-section-action:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .area-detail-craft-edit textarea {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-save-btn {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-cancel-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .area-detail-add-form input {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-add-form > button {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-add-form > button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-add-thought-form textarea {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-dialog-overlay {
  background: rgba(0, 0, 0, 0.25);
}
body.light .area-detail-dialog {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .area-detail-dialog-header {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-dialog input {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-dialog textarea {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-file-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .area-detail-file-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-file-name:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-file-delete {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-file-editor {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-file-editor .editable-markdown-textarea {
  background: rgba(0, 0, 0, 0.04);
}
/* 190. Workbench Thread (light theme) */
body.light .workbench-thread-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-thread-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .workbench-thread-area {
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-thread-list-tab > .workbench-thread-row + .workbench-thread-row {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-thread-row {
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-thread-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .workbench-thread-view .content-view-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-thread-view .content-view-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-thread-view .content-view-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .workbench-thread-date {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-thread-view .content-editor {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-thread-view .content-loading {
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-thread-age {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-thread-icon {
  color: rgba(20, 20, 30, 0.5);
}
/* 191. Workbench Page (light theme) */
body.light .workbench-page-title {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-page-title h2 {
  color: #1a1a2e;
}
body.light .workbench-page-count {
  color: rgba(20, 20, 30, 0.5);
}
/* 192. Workbench Project (light theme) */
body.light .workbench-project-icon {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-project-children {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
body.light .workbench-project-open {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-project-loading {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-project-counts {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-project-description {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-project-description:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .workbench-project-description-input {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-project-areas-compact {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-project-section {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-project-section-header {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-project-empty {
  color: rgba(20, 20, 30, 0.5);
}
/* 193. Workbench Footer (light theme) */
body.light .workbench-footer-btn {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-footer-btn:hover {
  color: rgba(20, 20, 30, 0.75);
  background: rgba(0, 0, 0, 0.04);
}
body.light .workbench-footer-btn.active {
  color: rgba(20, 20, 30, 0.7);
}
/* 194. Workbench Action (light theme) */
body.light .workbench-action-btn {
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-action-btn:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
/* 195. Workbench Archived (light theme) */
body.light .workbench-archived-empty {
  color: rgba(20, 20, 30, 0.5);
}
/* 196. Workbench Status (light theme) */
body.light .workbench-status-dot.idle {
  background: rgba(0, 0, 0, 0.06);
}
body.light .workbench-status-select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
/* 197. Workbench Progress (light theme) */
body.light .workbench-progress-btn:not(.active) {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: rgba(20, 20, 30, 0.55) !important;
}
body.light .workbench-progress-btn:not(.active):hover {
  background: rgba(0, 0, 0, 0.03) !important;
}
/* 198. Workbench File (light theme) */
body.light .workbench-file-sidebar {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-file-sidebar-header {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-file-item {
  color: rgba(20, 20, 30, 0.7);
}
body.light .workbench-file-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-file-item.active {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-file-delete {
  color: rgba(20, 20, 30, 0.45);
}
/* 199. Workbench New File (light theme) */
body.light .workbench-new-file-input input {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-new-file-inline {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-new-file-inline input {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
/* 200. Link Picker (light theme) */
body.light .link-picker-dropdown {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .link-picker-tabs {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .link-picker-tab {
  color: rgba(20, 20, 30, 0.55);
}
body.light .link-picker-tab:hover {
  color: rgba(20, 20, 30, 0.55);
}
body.light .link-picker-tab.active {
  color: rgba(20, 20, 30, 0.88);
}
body.light .link-picker-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .link-picker-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .link-picker-folder {
  color: rgba(20, 20, 30, 0.5);
}
body.light .link-picker-empty {
  color: rgba(20, 20, 30, 0.35);
}
/* 201. Thread More (light theme) */
body.light .thread-more-dropdown {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .thread-more-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-more-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-more-label {
  color: rgba(20, 20, 30, 0.35);
}
body.light .thread-more-divider {
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-more-folder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .thread-more-empty {
  color: rgba(20, 20, 30, 0.35);
}
body.light .thread-more-expand {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .thread-more-tree-parent {
  color: rgba(20, 20, 30, 0.55);
}
body.light .thread-more-tree-parent:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-more-tree-children {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
/* 202. Thread Context (light theme) */
body.light .thread-context-menu {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .thread-context-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-context-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-context-item.unlink {
  color: rgba(20, 20, 30, 0.55);
}
body.light .thread-context-separator {
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-context-label {
  color: rgba(20, 20, 30, 0.35);
}
/* 203. Thread Dialog (light theme) */
body.light .thread-dialog-overlay {
  background: rgba(0, 0, 0, 0.25);
}
body.light .thread-dialog {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
}
body.light .thread-dialog-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .thread-dialog-header h3 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-close {
  color: rgba(20, 20, 30, 0.55);
}
body.light .thread-dialog-close:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-dialog-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-dialog-message {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-message strong {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .thread-dialog-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .thread-dialog-input {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-field label {
  color: rgba(20, 20, 30, 0.55);
}
body.light .thread-dialog-select {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-select optgroup {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
/* 204. Thread Move (light theme) */
body.light .thread-move-option {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-move-option:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
/* 205. Workbench Meta (light theme) */
body.light .workbench-meta-summary {
  color: rgba(20, 20, 30, 0.55);
}
/* 206. Workbench Area (light theme) */
body.light .workbench-area-pill {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
body.light .workbench-area-pill:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.06);
}
body.light .workbench-area-remove {
  color: rgba(20, 20, 30, 0.45);
}
body.light .workbench-area-inline:hover .workbench-area-remove {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-area-sep {
  color: rgba(20, 20, 30, 0.45);
}
body.light .workbench-area-add-inline {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-area-add-inline:hover {
  color: rgba(20, 20, 30, 0.7);
}
body.light .workbench-area-picker {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-area-picker-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-area-picker-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
/* 207. Workbench Search (light theme) */
body.light .workbench-search-bar {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-search-icon {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-search-input {
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-search-input::placeholder {
  color: rgba(20, 20, 30, 0.4);
}
body.light .workbench-search-clear {
  color: rgba(20, 20, 30, 0.45);
}
body.light .workbench-search-clear:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
/* 208. Workbench New Dialog (light theme) */
body.light .workbench-new-dialog {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-new-dialog-input {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-new-dialog-field label {
  color: rgba(20, 20, 30, 0.35);
}
body.light .workbench-new-dialog-select {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-new-dialog-select optgroup {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-new-dialog-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-new-dialog-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
/* 209. Workbench Template (light theme) */
body.light .workbench-template-pill {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-template-pill:hover {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.06);
}
/* 210. Workbench Tab (light theme) */
body.light .workbench-tab-add-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-tab-add-btn:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.06);
}
/* 211. Stale Banner (light theme) */
body.light .stale-banner-btn.keep {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .stale-banner-btn.keep:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
/* 212. Workbench Expand (light theme) */
body.light .workbench-expand-icon {
  color: rgba(20, 20, 30, 0.5);
}
/* 213. Workbench Child (light theme) */
body.light .workbench-child-thread {
  color: rgba(20, 20, 30, 0.7);
}
body.light .workbench-child-thread:hover {
  color: #1a1a2e;
}
body.light .workbench-child-icon {
  color: rgba(20, 20, 30, 0.5);
}
/* 214. Thread Header (light theme) */
body.light .thread-header-block {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* 215. Workbench Inline (light theme) */
body.light .workbench-inline-input input {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
/* 216. Workbench Loading (light theme) */
body.light .workbench-loading {
  color: rgba(20, 20, 30, 0.55);
}
/* 217. Code Activity (light theme) */
body.light .code-activity-chart {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .code-activity-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .code-activity-range {
  color: rgba(20, 20, 30, 0.55);
}
body.light .code-activity-stats {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .code-activity-sub-header {
  color: rgba(20, 20, 30, 0.55);
}
body.light .code-activity-loading {
  color: rgba(20, 20, 30, 0.55);
}
/* 218. Code Stat (light theme) */
body.light .code-stat-value {
  color: rgba(20, 20, 30, 0.88);
}
body.light .code-stat-label {
  color: rgba(20, 20, 30, 0.55);
}
/* 219. Code Period (light theme) */
body.light .code-period-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .code-period-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
/* 220. Journal load more button (light theme) */
body.light .journal-load-more-btn {
  background: rgba(30, 120, 200, 0.08);
  border-color: rgba(30, 120, 200, 0.2);
  color: rgba(30, 120, 200, 0.85);
}
body.light .journal-load-more-btn:hover:not(:disabled) {
  background: rgba(30, 120, 200, 0.15);
}
/* Psyche Studio */
.ps-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  overflow: hidden;
}
.ps-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
}
/* Header */
.ps-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.ps-title { font-weight: 700; font-size: 15px; }
.ps-brain-name { font-size: 11px; color: rgba(255, 255, 255, 0.3); }
/* Tabs */
.ps-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.ps-tab {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.1s;
}
.ps-tab:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); }
.ps-tab.active { background: rgba(167, 139, 250, 0.2); color: #a78bfa; }
/* Content */
.ps-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.ps-view {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Section */
.ps-section {
  margin-bottom: 16px;
}
.ps-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ps-section-icon {
  color: rgba(255, 255, 255, 0.35);
}
.ps-section-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ps-section-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  margin-left: 21px;
}
/* Row */
.ps-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
}
.ps-row.muted { opacity: 0.5; }
.ps-row-label { color: rgba(255, 255, 255, 0.4); }
.ps-row-value { color: rgba(255, 255, 255, 0.8); font-weight: 500; }
/* Bar */
.ps-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.ps-bar-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  width: 70px;
  flex-shrink: 0;
}
.ps-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.ps-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s;
}
.ps-bar-value {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 600;
}
/* Dominant card */
.ps-dominant-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid;
  margin-bottom: 8px;
}
/* Layer */
.ps-layer {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid;
  margin-bottom: 4px;
  font-size: 10px;
}
.ps-layer-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}
/* Action grid */
.ps-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ps-action-tag {
  padding: 2px 6px;
  font-size: 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Decision */
.ps-decision {
  display: flex;
  justify-content: space-between;
  padding: 2px 8px;
  font-size: 9px;
}
.ps-decision-action { color: rgba(255, 255, 255, 0.7); font-weight: 500; }
/* Card */
.ps-card {
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-card-title {
  font-size: 14px;
  font-weight: 600;
}
.ps-card-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 6px;
}
/* Status dot */
.ps-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Entity list */
.ps-entity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ps-entity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
/* Activity */
.ps-activity-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.ps-activity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ps-activity-app {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
/* Atmosphere grid */
.ps-atm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ps-atm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ps-atm-value {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.ps-atm-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 1px;
}
/* Surfaces */
.ps-surface-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ps-surface-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  padding: 3px 8px;
}
.ps-focused-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  font-weight: 600;
}
/* Proximity tags (Me section + My Person attention) */
.ps-proximity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.ps-proximity-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  background: rgba(167, 139, 250, 0.12);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.25);
}
.ps-proximity-tag.muted {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}
.ps-proximity-tag.attention {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.35);
}
/* Crowdedness pill (Activity section) */
.ps-crowdedness-pill {
  display: inline-block;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid;
  margin-bottom: 8px;
}
/* Motion row (Activity section) */
.ps-motion-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.ps-motion-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.ps-motion-tag.appeared {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.25);
}
.ps-motion-tag.disappeared {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.25);
}
/* ── Behavioral Output — Full Analysis ── */
/* Tab bar */
.ps-bo-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-bo-tab {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.ps-bo-tab:hover { background: rgba(255, 255, 255, 0.03); }
.ps-bo-tab.active { background: rgba(255, 255, 255, 0.04); }
.ps-bo-tab-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ps-bo-tab.active .ps-bo-tab-label { color: rgba(255, 255, 255, 0.6); }
.ps-bo-tab-value {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.ps-bo-tab.active .ps-bo-tab-value { font-weight: 700; }
/* Feeling banner */
.ps-bo-feeling {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ps-bo-feeling-name { font-size: 18px; font-weight: 700; }
.ps-bo-feeling-reason { font-size: 10px; color: rgba(255, 255, 255, 0.35); }
/* Section headers within tabs */
.ps-bo-section-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  margin-top: 16px;
}
.ps-bo-section-label:first-child { margin-top: 0; }
/* Hero — current selection (big) */
.ps-bo-hero {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.ps-bo-hero-left { flex: 0 0 auto; }
.ps-bo-hero-value { font-size: 22px; font-weight: 700; }
.ps-bo-hero-meta { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-top: 4px; }
.ps-bo-hero-right { flex: 1; font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.6; }
/* Catalogue pill grid */
.ps-bo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.ps-bo-pill {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid transparent;
  transition: all 0.15s;
}
.ps-bo-pill.scored {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
}
.ps-bo-pill.active {
  font-weight: 600;
  border: 1px solid;
}
/* Scoring row */
.ps-bo-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.ps-bo-score-row:last-child { border-bottom: none; }
.ps-bo-score-row.winner { padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border-bottom: none; margin-bottom: 4px; }
.ps-bo-score-label {
  min-width: 130px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.ps-bo-score-row.winner .ps-bo-score-label { font-weight: 700; font-size: 14px; }
.ps-bo-score-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  overflow: hidden;
}
.ps-bo-score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ps-bo-score-value {
  min-width: 36px;
  text-align: right;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ps-bo-score-row.winner .ps-bo-score-value { font-size: 14px; }
/* Score breakdown tags */
.ps-bo-breakdown {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 2px 0 2px 138px;
  font-size: 11px;
}
.ps-bo-breakdown-tag { color: rgba(255, 255, 255, 0.35); }
.ps-bo-breakdown-tag.boost { color: #34d399; }
.ps-bo-breakdown-tag.suppress { color: #f87171; }
.ps-bo-breakdown-tag.recent { color: #fb923c; }
/* Feeling→Face mapping rows */
.ps-bo-map-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 8px;
  border-radius: 6px;
}
.ps-bo-map-row.active { background: rgba(255, 255, 255, 0.03); }
.ps-bo-map-name { min-width: 100px; font-size: 13px; }
.ps-bo-map-arrow { color: rgba(255, 255, 255, 0.2); font-size: 12px; }
.ps-bo-map-value { font-size: 13px; }
.ps-bo-map-intensity { font-size: 11px; color: rgba(255, 255, 255, 0.3); margin-left: auto; }
/* Trigger rows (speech, reflexes) */
.ps-bo-trigger-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.ps-bo-trigger-row.active { background: rgba(255, 255, 255, 0.03); }
.ps-bo-trigger-condition { min-width: 180px; font-weight: 500; }
.ps-bo-trigger-arrow { color: rgba(255, 255, 255, 0.2); }
.ps-bo-trigger-output { color: rgba(255, 255, 255, 0.5); }
.ps-bo-trigger-active-badge {
  font-size: 10px;
  font-weight: 600;
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 4px;
}
/* Source category rows (deliberate speech) */
.ps-bo-source-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 8px;
  margin-bottom: 2px;
  font-size: 13px;
}
.ps-bo-source-name { min-width: 160px; font-weight: 600; }
.ps-bo-source-desc { flex: 1; color: rgba(255, 255, 255, 0.4); font-size: 12px; }
.ps-bo-source-count { flex-shrink: 0; color: rgba(255, 255, 255, 0.3); font-size: 11px; }
/* Speech log */
.ps-bo-speech-entry {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
}
.ps-bo-speech-time { color: rgba(255, 255, 255, 0.3); min-width: 40px; font-variant-numeric: tabular-nums; }
.ps-bo-speech-text { color: rgba(255, 255, 255, 0.7); font-style: italic; }
.ps-bo-speech-source { color: rgba(255, 255, 255, 0.25); font-size: 11px; margin-left: auto; }
/* Posture zone cards */
.ps-bo-zone-card {
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.ps-bo-zone-card.active { border-left-color: inherit; }
.ps-bo-zone-label { flex: 0 0 150px; }
.ps-bo-zone-name { font-size: 14px; font-weight: 600; }
.ps-bo-zone-posture { font-size: 12px; color: rgba(255, 255, 255, 0.35); }
.ps-bo-zone-desc { flex: 1; font-size: 12px; color: rgba(255, 255, 255, 0.4); line-height: 1.5; }
/* Stat grid (3 cols) */
.ps-bo-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.ps-bo-stat {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.ps-bo-stat-label { font-size: 10px; color: rgba(255, 255, 255, 0.35); font-weight: 600; margin-bottom: 4px; }
.ps-bo-stat-value { font-size: 16px; font-weight: 600; }
/* Utilities */
.ps-muted { font-size: 9px; color: rgba(255, 255, 255, 0.3); }
.becoming-app {
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: var(--os-glass-bg-solid);
  color: var(--os-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Sidebar Navigation */
.becoming-sidebar {
  width: 140px;
  display: flex;
  flex-direction: column;
  background: var(--os-sidebar-bg);
  border-right: 1px solid var(--os-sidebar-border);
  flex-shrink: 0;
}
.becoming-sidebar.collapsed {
  width: 40px;
}
.becoming-app .sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  flex: 1;
  overflow: hidden;
}
.becoming-app .sidebar-nav-item {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  height: 30px;
  padding-left: 8px;
  border-left: 2px solid transparent;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.becoming-sidebar.collapsed .sidebar-nav-item {
  grid-template-columns: 24px;
  padding-left: 6px;
}
.becoming-app .sidebar-nav-item:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.03);
}
.becoming-app .sidebar-nav-item.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
  border-left-color: rgba(var(--accent-rgb), 0.6);
}
.becoming-app .sidebar-nav-icon {
  font-size: 14px;
  line-height: 1;
  width: 24px;
  text-align: center;
}
.becoming-app .sidebar-nav-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.becoming-sidebar.collapsed .sidebar-nav-label {
  display: none;
}
/* Toggle button at top of sidebar */
.becoming-app .sidebar-toggle {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 6px 0 2px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.becoming-app .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-secondary);
}
.becoming-sidebar.collapsed .sidebar-toggle-chevron {
  transform: rotate(180deg);
}
/* Main Content Area */
.becoming-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}
/* Top Filter Bar */
.becoming-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
/* Split layout below the top bar */
.becoming-split {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}
/* Resizing state */
.becoming-app.resizing {
  cursor: col-resize;
  user-select: none;
}
.becoming-app.resizing * {
  pointer-events: none;
}
.becoming-app.resizing .becoming-resize-handle {
  pointer-events: auto;
}
/* Resize Handle */
.becoming-resize-handle {
  width: 8px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-hint);
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.becoming-resize-handle:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-muted);
}
.becoming-app.resizing .becoming-resize-handle {
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(var(--accent-rgb), 0.7);
}
/* Tree Panel */
.becoming-tree-panel {
  min-width: 160px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  overflow: hidden;
  container-type: inline-size;
  container-name: becoming-tree;
}
/* Hide type badges when tree panel is narrow */
@container becoming-tree (max-width: 240px) {
  .tree-node-type-badge {
    display: none;
  }
  .tree-node-row {
    padding: 0.375rem 0.5rem;
    gap: 0.375rem;
  }
  .tree-node-name {
    font-size: 0.8rem;
  }
}
.becoming-total-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: normal;
}
.becoming-filter-tabs {
  display: flex;
  gap: 0.125rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 2px;
}
.becoming-filter-tab {
  padding: 0.25rem 0.5rem;
  border: none;
  background: none;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.becoming-filter-tab:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.becoming-filter-tab.active {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.1);
}
.becoming-filter-count {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  font-weight: 400;
}
/* Evolution view */
.evolution-list {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.evolution-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.evolution-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.evolution-row.active {
  background: rgba(var(--accent-rgb), 0.12);
}
.evolution-part,
.evolution-facet {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
.evolution-part {
  flex: 1;
}
.evolution-facet {
  flex: 1;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
}
.evolution-facet:hover {
  background: rgba(255, 255, 255, 0.06);
}
.evolution-emoji {
  font-size: 0.85rem;
  flex-shrink: 0;
}
.evolution-name {
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evolution-arrow {
  color: rgba(var(--accent-rgb), 0.5);
  font-size: 0.75rem;
  flex-shrink: 0;
}
.evolution-empty {
  color: var(--os-text-hint);
  font-size: 0.75rem;
  text-align: center;
  padding: 2rem 0;
}
.becoming-tree-actions {
  display: flex;
  gap: 0.25rem;
}
.becoming-tree-actions button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.becoming-tree-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.becoming-tree-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}
/* Tree Node */
.tree-node {
  user-select: none;
}
.tree-node-row {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  gap: 0.5rem;
  transition: background 0.15s ease;
}
.tree-node-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.tree-node-row.selected {
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.tree-node-row.throne {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
}
.tree-node-row.throne.selected {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(251, 191, 36, 0.15));
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.tree-expand-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--os-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.tree-expand-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.tree-expand-spacer {
  width: 20px;
}
.tree-node-icon {
  font-size: 1.1rem;
}
.tree-node-name {
  flex: 1;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-node-count {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}
.tree-node-type-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.tree-node-type-badge.facet-badge {
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.tree-node-type-badge.part-badge {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.tree-node-children {
  margin-left: 1.25rem;
}
/* Detail Panel */
.becoming-detail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.becoming-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--os-text-muted);
  gap: 1rem;
}
.becoming-detail-empty-icon {
  font-size: 4rem;
  opacity: 0.5;
}
.becoming-detail-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.becoming-detail-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.becoming-detail-title-section {
  flex: 1;
}
.becoming-detail-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}
.becoming-detail-cluster {
  font-size: 0.875rem;
  color: var(--os-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.becoming-detail-cluster-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}
.becoming-detail-type-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.type-badge-facet {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.type-badge-part {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.type-badge-cluster {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Cluster member list */
.cluster-members-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cluster-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.cluster-member-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.cluster-member-emoji {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}
.cluster-member-name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}
.becoming-detail-facet-section h4 {
  color: var(--accent-light);
}
.becoming-detail-source {
  color: var(--os-text-secondary);
  font-style: italic;
}
.becoming-detail-vows {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.becoming-detail-vow-tag {
  padding: 0.1875rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.becoming-detail-evolution {
  border-left: 2px solid rgba(var(--accent-rgb), 0.3);
  padding-left: 0.75rem !important;
}
.becoming-detail-evolution h4 {
  color: var(--accent);
}
.becoming-detail-evolves-link {
  color: var(--accent-light);
  font-weight: 500;
}
.becoming-detail-actions {
  display: flex;
  gap: 0.5rem;
}
.becoming-detail-actions button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}
.becoming-detail-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.becoming-detail-actions button.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
}
.becoming-detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}
.becoming-detail-section {
  margin-bottom: 1.5rem;
}
.becoming-detail-section h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.becoming-detail-description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}
.becoming-detail-wants {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  font-style: italic;
}
.becoming-detail-color {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.becoming-detail-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.becoming-detail-color-value {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}
.becoming-detail-shadow {
  color: rgba(239, 68, 68, 0.9);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.becoming-detail-needs,
.becoming-detail-activated,
.becoming-detail-gifts {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--os-text-secondary);
}
.becoming-detail-throne-line {
  font-size: 1rem;
  font-style: italic;
  color: rgba(251, 191, 36, 0.9);
  padding: 0.75rem 1rem;
  background: rgba(251, 191, 36, 0.1);
  border-left: 3px solid rgba(251, 191, 36, 0.5);
  border-radius: 0 6px 6px 0;
}
.becoming-detail-protocol {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
  white-space: pre-wrap;
}
.becoming-detail-somatic {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  font-style: italic;
}
.becoming-detail-relationships {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.becoming-detail-allies,
.becoming-detail-opposition {
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}
.relationship-label {
  font-weight: 600;
  color: var(--os-text-muted);
  margin-right: 0.5rem;
}
.becoming-detail-allies .relationship-label {
  color: rgba(74, 222, 128, 0.8);
}
.becoming-detail-opposition .relationship-label {
  color: rgba(239, 68, 68, 0.8);
}
.becoming-detail-warning {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 1rem;
}
.becoming-detail-warning h4 {
  color: rgba(239, 68, 68, 0.9);
}
.becoming-detail-non-negotiable {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.9);
}
/* Edit Mode */
.becoming-edit-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  overflow-y: auto;
}
.becoming-edit-form label {
  display: block;
  margin-bottom: 1.25rem;
}
.becoming-edit-form label span {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.becoming-edit-form input,
.becoming-edit-form textarea,
.becoming-edit-form select {
  width: 100%;
  padding: 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
  font-size: 0.9375rem;
  font-family: inherit;
}
.becoming-edit-form input:focus,
.becoming-edit-form textarea:focus,
.becoming-edit-form select:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.1);
}
.becoming-edit-form textarea {
  min-height: 100px;
  resize: vertical;
}
.becoming-edit-form select option {
  background: #1a1a2e;
}
.becoming-edit-actions {
  display: flex;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
}
.becoming-edit-actions button {
  padding: 0.625rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.becoming-edit-actions .save-btn {
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.becoming-edit-actions .save-btn:hover {
  background: rgba(var(--accent-rgb), 0.3);
}
.becoming-edit-actions .cancel-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.becoming-edit-actions .cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* Loading state */
.becoming-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-muted);
}
/* Cluster specific colors */
.cluster-grounding { --cluster-color: #34d399; }
.cluster-sacredFire { --cluster-color: #f97316; }
.cluster-motion { --cluster-color: var(--accent); }
.cluster-love { --cluster-color: #ec4899; }
.cluster-social { --cluster-color: #06b6d4; }
.cluster-wisdom { --cluster-color: #fbbf24; }
.cluster-collapse { --cluster-color: #6b7280; }
.cluster-craving { --cluster-color: #ef4444; }
.cluster-escape { --cluster-color: #94a3b8; }
.cluster-performance { --cluster-color: #f472b6; }
.cluster-overthinking { --cluster-color: #60a5fa; }
.cluster-hypervigilance { --cluster-color: #fcd34d; }
.cluster-wounded { --cluster-color: #fb923c; }
.tree-node-row[data-cluster] {
  border-left: 3px solid var(--cluster-color, transparent);
  padding-left: calc(0.75rem - 3px);
}
/* Council Chat */
.council-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.council-chat-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  gap: 0.25rem;
}
.council-chat-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.council-app-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-muted);
  letter-spacing: 0.02em;
}
.council-mode-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 2px;
}
.council-mode-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.council-mode-tab:hover {
  color: var(--os-text-secondary);
}
.council-mode-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
  box-shadow: 0 1px 8px rgba(var(--accent-rgb), 0.12);
}
.council-mode-tab span {
  font-size: 0.875rem;
}
.council-icon {
  font-size: 1.5rem;
}
.council-chat-title h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.council-chat-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.council-model-select {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  cursor: pointer;
  min-width: 160px;
}
.council-model-select:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.council-model-select option,
.council-model-select optgroup {
  background: #1a1a2e;
}
.council-model-select optgroup {
  font-weight: 600;
  color: var(--os-text-muted);
}
.council-clear-btn {
  padding: 0 0.625rem;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.council-clear-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.14);
}
.council-clear-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
/* Context panel within Council */
.council-context-panel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.council-context-panel .context-view {
  height: 100%;
}
/* Chat body with sidebar */
.council-chat-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Thread Sidebar */
.council-thread-sidebar {
  width: 220px;
  min-width: 220px;
  background: rgba(0, 0, 0, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  order: 2;
}
.council-thread-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.council-new-thread-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.council-new-thread-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}
.council-new-session-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: rgba(167, 139, 250, 0.9);
  transition: all 0.15s ease;
  letter-spacing: 0;
  text-transform: none;
}
.council-new-session-btn:hover {
  background: rgba(167, 139, 250, 0.25);
  border-color: rgba(167, 139, 250, 0.5);
  color: rgba(167, 139, 250, 1);
}
.council-new-session-btn.ending {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.25);
  color: rgba(74, 222, 128, 0.85);
}
.council-new-session-btn.ending:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.45);
}
.council-thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}
.council-thread-empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
}
.council-thread-item {
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 0.25rem;
  transition: all 0.15s ease;
}
.council-thread-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.council-thread-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-left: 2px solid rgba(var(--accent-rgb), 0.6);
  padding-left: calc(0.75rem - 2px);
}
.council-thread-name {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}
.session-rename-input {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  width: 100%;
  outline: none;
  margin-bottom: 0.25rem;
}
.session-rename-input:focus {
  border-color: rgba(167, 139, 250, 0.5);
}
body.light .becoming-app .session-rename-input {
  color: rgba(30, 30, 50, 0.9);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(100, 80, 200, 0.25);
}
.council-thread-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.session-item-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}
.session-item-name-row .council-thread-name {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.session-analyze-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.5rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(167, 139, 250, 0.7);
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.18);
  transition: all 0.15s;
  flex-shrink: 0;
}
.session-analyze-btn:hover {
  color: rgba(167, 139, 250, 1);
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.35);
}
/* Session Analysis Dialog */
/* ── Session Analysis Dialog ─────────────────────────────────── */
/* Theme-aware: uses variables so dark + light both look right   */
.session-analysis-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.session-analysis-dialog {
  --sa-bg: rgba(14, 12, 22, 0.98);
  --sa-border: rgba(255, 255, 255, 0.1);
  --sa-divider: rgba(255, 255, 255, 0.07);
  --sa-text: rgba(255, 255, 255, 0.88);
  --sa-text-muted: rgba(255, 255, 255, 0.35);
  --sa-text-dim: rgba(255, 255, 255, 0.55);
  --sa-label: rgba(255, 255, 255, 0.28);
  --sa-surface: rgba(255, 255, 255, 0.05);
  --sa-surface-accent: rgba(167, 139, 250, 0.07);
  --sa-border-accent: rgba(167, 139, 250, 0.18);
  --sa-accent: rgba(167, 139, 250, 0.85);
  --sa-accent-dim: rgba(167, 139, 250, 0.45);
  --sa-green: rgba(74, 222, 128, 0.82);
  --sa-green-bg: rgba(74, 222, 128, 0.06);
  --sa-green-border: rgba(74, 222, 128, 0.15);
  --sa-scroll-thumb: rgba(167, 139, 250, 0.22);
  --sa-shadow: 0 32px 80px rgba(0, 0, 0, 0.65);
  --sa-transcript-user-bg: rgba(167, 139, 250, 0.1);
  --sa-transcript-user-border: rgba(167, 139, 250, 0.2);
  --sa-transcript-companion-bg: rgba(255, 255, 255, 0.04);
  --sa-transcript-companion-border: rgba(255, 255, 255, 0.08);

  width: 960px;
  max-width: 94vw;
  max-height: 85vh;
  background: var(--sa-bg);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--sa-border);
  border-radius: 18px;
  box-shadow: var(--sa-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--sa-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Light theme overrides */
body.light .session-analysis-dialog {
  --sa-bg: rgba(255, 255, 255, 0.98);
  --sa-border: rgba(0, 0, 0, 0.1);
  --sa-divider: rgba(0, 0, 0, 0.07);
  --sa-text: rgba(20, 20, 30, 0.9);
  --sa-text-muted: rgba(20, 20, 30, 0.4);
  --sa-text-dim: rgba(20, 20, 30, 0.6);
  --sa-label: rgba(20, 20, 30, 0.35);
  --sa-surface: rgba(0, 0, 0, 0.04);
  --sa-surface-accent: rgba(var(--accent-rgb), 0.06);
  --sa-border-accent: rgba(var(--accent-rgb), 0.2);
  --sa-accent: rgba(var(--accent-rgb), 0.85);
  --sa-accent-dim: rgba(var(--accent-rgb), 0.5);
  --sa-green: rgba(22, 163, 74, 0.85);
  --sa-green-bg: rgba(22, 163, 74, 0.06);
  --sa-green-border: rgba(22, 163, 74, 0.18);
  --sa-scroll-thumb: rgba(var(--accent-rgb), 0.2);
  --sa-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  --sa-transcript-user-bg: rgba(var(--accent-rgb), 0.08);
  --sa-transcript-user-border: rgba(var(--accent-rgb), 0.18);
  --sa-transcript-companion-bg: rgba(0, 0, 0, 0.03);
  --sa-transcript-companion-border: rgba(0, 0, 0, 0.08);
}
.session-analysis-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--sa-divider);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
  flex-shrink: 0;
}
.session-analysis-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sa-text);
  padding-right: 2.5rem;
}
.session-analysis-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.72rem;
  color: var(--sa-text-muted);
  align-items: center;
}
.session-analysis-model-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  background: var(--sa-surface-accent);
  border: 1px solid var(--sa-border-accent);
  color: var(--sa-accent);
}
.session-analysis-close {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sa-text-muted);
  transition: color 0.15s, background 0.15s;
}
.session-analysis-close:hover {
  color: var(--sa-text);
  background: var(--sa-surface);
}
.session-analysis-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.75rem;
  color: var(--sa-text-muted);
  font-size: 0.875rem;
}
.session-analysis-error {
  padding: 1.5rem 1.75rem;
  color: rgba(248, 113, 113, 0.8);
  font-size: 0.875rem;
}
/* Two-panel layout */
.session-analysis-panels {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* LEFT — session notes */
.session-analysis-notes {
  width: 42%;
  flex-shrink: 0;
  padding: 1.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  overflow-y: auto;
  border-right: 1px solid var(--sa-divider);
  scrollbar-width: thin;
  scrollbar-color: var(--sa-scroll-thumb) transparent;
}
.session-analysis-notes::-webkit-scrollbar { width: 4px; }
.session-analysis-notes::-webkit-scrollbar-track { background: transparent; }
.session-analysis-notes::-webkit-scrollbar-thumb { background: var(--sa-scroll-thumb); border-radius: 4px; }
/* RIGHT — transcript reader */
.session-analysis-transcript {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sa-scroll-thumb) transparent;
}
.session-analysis-transcript::-webkit-scrollbar { width: 4px; }
.session-analysis-transcript::-webkit-scrollbar-track { background: transparent; }
.session-analysis-transcript::-webkit-scrollbar-thumb { background: var(--sa-scroll-thumb); border-radius: 4px; }
.session-analysis-transcript-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sa-label);
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.session-analysis-transcript-empty {
  font-size: 0.82rem;
  color: var(--sa-text-muted);
  font-style: italic;
}
/* Transcript messages */
.sa-transcript-msg {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1.1rem;
}
.sa-transcript-speaker {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sa-label);
}
.sa-transcript-msg.user .sa-transcript-speaker {
  color: var(--sa-accent-dim);
}
.sa-transcript-bubble {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--sa-text);
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.sa-transcript-msg.user .sa-transcript-bubble {
  background: var(--sa-transcript-user-bg);
  border: 1px solid var(--sa-transcript-user-border);
  border-radius: 10px 10px 2px 10px;
  color: var(--sa-text);
}
.sa-transcript-msg.companion .sa-transcript-bubble {
  background: var(--sa-transcript-companion-bg);
  border: 1px solid var(--sa-transcript-companion-border);
  border-radius: 10px 10px 10px 2px;
  color: var(--sa-text-dim);
}
.session-analysis-section-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sa-label);
  margin-bottom: 0.55rem;
}
.session-analysis-essence {
  background: var(--sa-surface-accent);
  border: 1px solid var(--sa-border-accent);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.session-analysis-essence-text {
  font-size: 0.975rem;
  color: var(--sa-text);
  line-height: 1.6;
  font-style: italic;
}
.session-analysis-arc {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.session-analysis-arc-text {
  font-size: 0.88rem;
  color: var(--sa-accent);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.session-analysis-section {
  display: flex;
  flex-direction: column;
}
.session-analysis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.session-analysis-chip {
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  color: var(--sa-text-dim);
}
.session-analysis-chip.vow {
  background: var(--sa-green-bg);
  border-color: var(--sa-green-border);
  color: var(--sa-green);
}
.session-analysis-insights {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.session-analysis-insight {
  font-size: 0.855rem;
  color: var(--sa-text-dim);
  line-height: 1.55;
  padding-left: 0.8rem;
  border-left: 2px solid var(--sa-accent-dim);
  font-style: italic;
}
.session-analysis-parts {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.session-analysis-part {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.session-analysis-part-emoji {
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0.05rem;
}
.session-analysis-part-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sa-text);
}
.session-analysis-part-note {
  font-size: 0.775rem;
  color: var(--sa-text-muted);
  margin-top: 0.15rem;
  line-height: 1.4;
}
/* .session-analysis-columns removed — notes panel is now single-column */
/* Takeaways — numbered list */
.session-analysis-takeaways {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.session-analysis-takeaway {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.845rem;
  color: var(--sa-text-dim);
  line-height: 1.5;
}
.session-analysis-takeaway-num {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--sa-accent);
  background: var(--sa-surface-accent);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
/* Decisions — checkmark list */
.session-analysis-decisions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.session-analysis-decision {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.845rem;
  color: var(--sa-text-dim);
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  background: var(--sa-green-bg);
  border: 1px solid var(--sa-green-border);
  border-radius: 8px;
}
.session-analysis-decision-icon {
  color: var(--sa-green);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.council-thread-item.archived {
  opacity: 0.6;
}
.council-thread-item.archived:hover {
  opacity: 0.8;
}
.council-thread-rename-input {
  width: 100%;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 4px;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
}
.council-thread-rename-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}
/* ── Session Calendar (scal-*) ────────────────────────────── */
.scal-container {
  padding: 0.5rem 0.5rem 0.25rem;
  border-bottom: 1px solid var(--os-divider);
}
.scal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.scal-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.scal-nav {
  all: unset;
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 1rem;
  color: var(--os-text-muted);
  transition: all 0.12s ease;
}
.scal-nav:hover:not(:disabled) {
  background: var(--os-hover-bg);
  color: var(--os-text-secondary);
}
.scal-nav:disabled {
  opacity: 0.2;
  cursor: default;
}
.scal-nav-year {
  font-size: 0.8rem;
  color: var(--os-text-hint);
}
.scal-nav-year:hover:not(:disabled) {
  color: var(--os-text-secondary);
}
.scal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 0.15rem;
}
.scal-wd {
  text-align: center;
  font-size: 0.575rem;
  font-weight: 600;
  color: var(--os-text-hint);
  padding: 0.1rem 0;
}
.scal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.scal-day {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 5px;
  font-size: 0.6rem;
  color: var(--os-text-hint);
  cursor: default;
  position: relative;
  transition: all 0.12s ease;
  box-sizing: border-box;
}
.scal-day.blank { pointer-events: none; }
.scal-day.has-content {
  color: var(--os-text-secondary);
  cursor: pointer;
}
.scal-day.has-content:hover {
  background: rgba(255, 255, 255, 0.08);
}
.scal-day.has-session {
  color: var(--os-text-secondary);
}
/* dot indicator */
.scal-day.has-content::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.scal-day.has-session::after {
  background: rgba(167, 139, 250, 0.7);
}
.scal-day.today {
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: rgba(167, 139, 250, 0.9);
}
.scal-day.today.has-content::after {
  background: rgba(167, 139, 250, 0.6);
}
.scal-day.selected {
  background: rgba(167, 139, 250, 0.2);
  color: rgba(167, 139, 250, 1);
}
/* Period reflection row */
.scal-reflect-row {
  display: flex;
  gap: 0;
  padding: 0.5rem 0.5rem 0;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.scal-reflect-btn {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  padding: 0.35rem 0 0.3rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.12s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.scal-reflect-btn:hover {
  color: rgba(167, 139, 250, 0.8);
}
.scal-reflect-btn.active {
  color: rgba(167, 139, 250, 1);
  border-bottom-color: rgba(167, 139, 250, 0.7);
  font-weight: 600;
}
/* Day detail list */
.scal-day-detail {
  flex: 1;
  overflow-y: auto;
  padding: 0.35rem 0.25rem;
}
.scal-day-detail-header {
  padding: 0.2rem 0.5rem 0.3rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scal-day-empty {
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  text-align: center;
}
/* ── Period Header (calendar filter) ──────────────────────── */
.scal-period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem 0.35rem;
}
.scal-period-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-text-muted);
}
body.light .scal-period-label {
  color: rgba(20, 15, 40, 0.45);
}
.scal-period-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.scal-reflect-icon-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(167, 139, 250, 0.95);
  background: rgba(167, 139, 250, 0.12);
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  transition: all 0.12s ease;
  letter-spacing: 0.02em;
}
.scal-reflect-icon-btn:hover {
  color: rgba(167, 139, 250, 1);
  background: rgba(167, 139, 250, 0.18);
}
body.light .scal-reflect-icon-btn {
  color: rgba(109, 40, 217, 0.8);
  background: rgba(109, 40, 217, 0.08);
}
body.light .scal-reflect-icon-btn:hover {
  color: rgba(109, 40, 217, 1);
  background: rgba(109, 40, 217, 0.14);
}
.scal-period-close {
  all: unset;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  padding: 0.2rem 0.35rem;
  border-radius: 3px;
  line-height: 1;
  transition: color 0.12s ease;
}
.scal-period-close:hover { color: var(--os-text-muted); }
body.light .scal-period-close { color: rgba(20, 15, 40, 0.2); }
body.light .scal-period-close:hover { color: rgba(20, 15, 40, 0.55); }
/* ── Arc Panel (legacy) ─────────────────────────────────────── */
.arc-open-btn {
  all: unset;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(167, 139, 250, 0.55);
  padding: 0.18rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  transition: all 0.12s ease;
  white-space: nowrap;
}
.arc-open-btn:hover {
  color: rgba(167, 139, 250, 1);
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.1);
}
.arc-close-period {
  all: unset;
  cursor: pointer;
  font-size: 0.65rem;
  color: var(--os-text-hint);
  padding: 0.1rem 0.25rem;
  border-radius: 3px;
  line-height: 1;
}
.arc-close-period:hover { color: var(--os-text-muted); }
/* ── Arc Dialog ─────────────────────────────────────────────── */
.arc-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.arc-dialog {
  --ad-bg: rgba(10, 8, 20, 0.98);
  --ad-border: rgba(167, 139, 250, 0.2);
  --ad-divider: rgba(255, 255, 255, 0.07);
  --ad-text: rgba(255, 255, 255, 0.88);
  --ad-text-muted: rgba(255, 255, 255, 0.45);
  --ad-label: rgba(255, 255, 255, 0.28);
  --ad-accent: rgba(167, 139, 250, 0.9);
  --ad-accent-dim: rgba(167, 139, 250, 0.35);
  --ad-close: rgba(255, 255, 255, 0.3);
  --ad-close-hover-bg: rgba(255, 255, 255, 0.08);
  --ad-close-hover: rgba(255, 255, 255, 0.8);
  --ad-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);

  width: 580px;
  max-width: 92vw;
  max-height: 80vh;
  background: var(--ad-bg);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid var(--ad-border);
  border-radius: 16px;
  box-shadow: var(--ad-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ad-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body.light .arc-dialog {
  --ad-bg: rgba(255, 255, 255, 0.98);
  --ad-border: rgba(139, 92, 246, 0.2);
  --ad-divider: rgba(0, 0, 0, 0.07);
  --ad-text: rgba(20, 15, 40, 0.9);
  --ad-text-muted: rgba(20, 15, 40, 0.5);
  --ad-label: rgba(20, 15, 40, 0.35);
  --ad-accent: rgba(109, 40, 217, 0.85);
  --ad-accent-dim: rgba(109, 40, 217, 0.3);
  --ad-close: rgba(20, 15, 40, 0.35);
  --ad-close-hover-bg: rgba(0, 0, 0, 0.06);
  --ad-close-hover: rgba(20, 15, 40, 0.8);
  --ad-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
body.light .arc-dialog-overlay {
  background: rgba(0, 0, 0, 0.25);
}
.arc-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem 0.9rem;
  border-bottom: 1px solid var(--ad-divider);
  flex-shrink: 0;
}
.arc-dialog-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.arc-dialog-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ad-accent);
  opacity: 0.75;
}
.arc-dialog-period {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ad-text-muted);
}
.arc-dialog-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.arc-dialog-refresh {
  all: unset;
  cursor: pointer;
  color: var(--ad-close);
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: 6px;
  transition: all 0.12s ease;
}
.arc-dialog-refresh:hover {
  color: var(--ad-accent);
  background: var(--ad-close-hover-bg);
}
.arc-dialog-close {
  all: unset;
  cursor: pointer;
  color: var(--ad-close);
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: 6px;
  transition: all 0.12s ease;
}
.arc-dialog-close:hover {
  color: var(--ad-close-hover);
  background: var(--ad-close-hover-bg);
}
.arc-dialog-body {
  padding: 1.5rem 1.6rem 1.8rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.arc-dialog-texture {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ad-accent);
  line-height: 1.65;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--ad-accent-dim);
  opacity: 0.92;
}
.arc-dialog-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.arc-dialog-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.arc-dialog-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ad-accent);
  opacity: 0.7;
}
.arc-dialog-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.arc-dialog-list li {
  font-size: 0.9rem;
  color: var(--ad-text);
  line-height: 1.55;
  padding-left: 1.1rem;
  position: relative;
}
.arc-dialog-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ad-accent-dim);
  font-size: 0.75rem;
  top: 0.1em;
}
.arc-dialog-moved {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ad-text);
  line-height: 1.7;
}
.arc-dialog-list--decisions li::before {
  content: '◆';
  font-size: 0.5rem;
  top: 0.45em;
  color: var(--ad-accent);
}
.arc-dialog-list--takeaways li::before {
  content: '✦';
  font-size: 0.55rem;
  top: 0.4em;
  color: var(--ad-accent);
}
.arc-dialog-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  font-size: 0.85rem;
  color: var(--ad-text-muted);
}
.arc-dialog-error {
  padding: 2rem 1.5rem;
  font-size: 0.85rem;
  color: rgba(220, 80, 80, 0.8);
  text-align: center;
}
.arc-dialog-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.arc-dialog-empty p {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  color: var(--ad-text-muted);
}
.arc-dialog-hint {
  font-size: 0.78rem !important;
  color: var(--ad-label) !important;
}
/* ── End Arc Dialog ─────────────────────────────────────────── */
/* ── End Session Calendar ──────────────────────────────────── */
/* ── Calendar Sidebar ─────────────────────────────────────── */
.cal-week-group {
  margin-bottom: 0;
}
/* Week divider: thin line + label */
.cal-week-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem 0.35rem;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--os-text-hint);
  letter-spacing: 0.04em;
}
.cal-week-header::before {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.cal-week-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.cal-day-group {
  margin-bottom: 0.1rem;
}
/* Day header: short label, left-aligned, subdued */
.cal-day-header {
  padding: 0.3rem 0.75rem 0.1rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Day grouping in period/recent views */
.cal-day-group {
  margin-bottom: 0.1rem;
}
.cal-day-group-header {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--os-text-hint);
  padding: 0.45rem 0.5rem 0.15rem;
}
body.light .cal-day-group-header {
  color: rgba(20, 15, 40, 0.3);
}
.cal-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.4rem 0.3rem 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s ease;
  min-height: 24px;
}
.cal-session-item,
.cal-fragment-item {
  /* inherits from .cal-row */
}
.cal-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.cal-session-item:hover {
  background: rgba(167, 139, 250, 0.07);
}
.cal-dot {
  font-size: 0.45rem;
  flex-shrink: 0;
  line-height: 1;
}
.session-dot {
  color: rgba(167, 139, 250, 0.85);
}
.fragment-dot {
  color: var(--os-text-hint);
}
.cal-row-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cal-row-exchg {
  font-size: 0.58rem;
  color: var(--os-text-hint);
  white-space: nowrap;
}
body.light .cal-row-exchg {
  color: rgba(20, 15, 40, 0.25);
}
.cal-row-name {
  font-size: 0.7rem;
  color: var(--os-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  flex: 1;
  min-width: 0;
}
.cal-row-name.fragment-name {
  color: var(--os-text-muted);
  font-size: 0.68rem;
}
.cal-row-meta {
  font-size: 0.6rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
  white-space: nowrap;
}
.cal-session-item .session-analyze-btn {
  opacity: 0;
  transition: opacity 0.12s ease;
  flex-shrink: 0;
  padding: 0.1rem 0.25rem;
}
.cal-session-item:hover .session-analyze-btn {
  opacity: 0.7;
}
/* ── Keepback for old cal-item-* if still referenced ── */
.cal-item-body { flex: 1; min-width: 0; }
.cal-item-name { font-size: 0.7rem; color: var(--os-text-secondary); }
.cal-item-meta { font-size: 0.6rem; color: var(--os-text-hint); }
/* ── End Calendar Sidebar ─────────────────────────────────── */
/* Archive Section */
.council-thread-archive-section {
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 0.5rem;
}
.council-thread-archive-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
}
.council-thread-archive-toggle:hover {
  color: var(--os-text-secondary);
}
/* Context Menu */
.council-thread-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 140px;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.council-thread-context-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
.council-thread-context-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.council-thread-context-menu button.danger {
  color: #f87171;
}
.council-thread-context-menu button.danger:hover {
  background: rgba(248, 113, 113, 0.15);
}
/* Message Context Menu */
.council-msg-context-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}
.council-message-context-menu {
  position: fixed;
  z-index: 1000000;
  min-width: 120px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.council-message-context-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
.council-message-context-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.council-message-context-menu button.danger {
  color: #f87171;
}
.council-message-context-menu button.danger:hover {
  background: rgba(248, 113, 113, 0.15);
}
.council-orphan-hint {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
body.light .council-orphan-hint {
  color: rgba(0, 0, 0, 0.3);
}
.council-orphan-retry {
  background: none;
  border: 1px solid var(--os-text-hint);
  border-radius: 4px;
  color: var(--os-text-hint);
  font-size: 0.7rem;
  font-style: italic;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.council-orphan-retry:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.council-context-timestamp {
  padding: 0.35rem 0.625rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.council-context-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.25rem 0;
}
body.light .council-context-divider {
  background: rgba(0, 0, 0, 0.07);
}
/* Edit bar above input when editing a message */
.council-edit-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
  margin-bottom: 0.25rem;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 10px;
  font-size: 0.6875rem;
  color: var(--accent-light);
  letter-spacing: 0.01em;
}
.council-edit-bar span {
  opacity: 0.85;
}
.council-edit-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0;
  margin-left: 0.125rem;
}
.council-edit-bar button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
/* Settings Dropdown */
.council-settings-dropdown {
  position: relative;
}
.council-settings-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.5rem 0 0.625rem;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.council-settings-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.14);
}
.council-settings-btn.council-active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.council-settings-btn.council-active:hover {
  background: rgba(var(--accent-rgb), 0.2);
}
.council-settings-btn .tts-indicator {
  color: var(--accent);
  opacity: 0.8;
}
.council-settings-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 240px;
  max-height: 400px;
  overflow-y: auto;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 100;
  padding: 0.5rem 0;
}
.settings-section-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.settings-current-model {
  padding: 0.25rem 0.75rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  font-weight: 500;
}
.settings-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0.5rem 0;
}
/* Model Provider Groups */
.settings-provider-group {
  margin: 0.125rem 0;
}
.settings-provider-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.settings-provider-header:hover {
  background: rgba(255, 255, 255, 0.06);
}
.settings-provider-header.has-selection {
  color: var(--accent);
}
.settings-provider-models {
  padding: 0.25rem 0 0.25rem 0.75rem;
}
.settings-model-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.settings-model-option:hover {
  background: rgba(255, 255, 255, 0.06);
}
.settings-model-option.selected {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
/* Voice Toggle */
.settings-toggle-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.settings-toggle-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.settings-council-toggle-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.settings-council-toggle-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.settings-council-toggle-row .settings-toggle {
  margin-left: auto;
}
.settings-council-members {
  padding: 0.375rem 0.75rem 0.5rem;
}
.settings-council-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0.375rem;
}
.settings-council-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 0.675rem;
  color: var(--os-text-secondary);
}
.settings-council-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.settings-council-manage {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(var(--accent-rgb), 0.12);
  border: none;
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.675rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.settings-council-manage:hover {
  background: rgba(var(--accent-rgb), 0.2);
}
.settings-toggle {
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  position: relative;
  transition: background 0.2s ease;
}
.settings-toggle.on {
  background: rgba(var(--accent-rgb), 0.5);
}
.settings-toggle-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}
.settings-toggle.on .settings-toggle-thumb {
  transform: translateX(16px);
}
/* Voice Selection */
.settings-voice-select {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.settings-voice-select:hover {
  background: rgba(255, 255, 255, 0.06);
}
.settings-voice-list {
  padding: 0.25rem 0.5rem;
  max-height: 180px;
  overflow-y: auto;
}
.settings-voice-option {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
  text-align: left;
}
.settings-voice-option:hover {
  background: rgba(255, 255, 255, 0.06);
}
.settings-voice-option.selected {
  background: rgba(var(--accent-rgb), 0.15);
}
.settings-voice-option .voice-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.settings-voice-option .voice-name {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}
.settings-voice-option.selected .voice-name {
  color: var(--accent);
}
.settings-voice-option .voice-desc {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.settings-hint {
  padding: 0.5rem 0.75rem;
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.25rem;
}
/* Message Hover Actions */
.council-message {
  position: relative;
}
/* Time gap divider between messages */
.msg-time-gap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  color: var(--os-text-hint);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}
.msg-time-gap::before,
.msg-time-gap::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
body.light .msg-time-gap {
  color: rgba(20, 15, 40, 0.25);
}
body.light .msg-time-gap::before,
body.light .msg-time-gap::after {
  background: rgba(20, 15, 40, 0.07);
}
/* Timestamp tooltip on hover */
/* Main Chat Area */
.council-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.council-chat-intro {
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.council-chat-intro p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  line-height: 1.5;
}
.council-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
  padding: 1.25rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.council-messages-spacer {
  flex: 1;
}
.council-load-earlier {
  align-self: center;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.council-load-earlier:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.council-undo-toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 1rem 0.5rem;
  border-radius: 8px;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.3);
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  animation: council-undo-slide-in 0.2s ease-out;
}
@keyframes council-undo-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.council-undo-toast span {
  flex: 1;
}
.council-undo-toast button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(234, 179, 8, 0.25);
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: #eab308;
  cursor: pointer;
}
.council-undo-toast button:hover {
  background: rgba(234, 179, 8, 0.35);
}
.council-undo-dismiss {
  background: transparent !important;
  border: none !important;
  color: var(--os-text-muted) !important;
  font-size: 1rem !important;
  padding: 0 0.25rem !important;
}
.council-undo-dismiss:hover {
  color: var(--os-text-secondary) !important;
}
.council-message {
  display: flex;
  max-width: min(72ch, 90%);
}
.council-message.user {
  align-self: flex-end;
}
.council-message.assistant {
  align-self: flex-start;
}
.council-msg-model-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-text-hint);
  padding: 0 0.875rem 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.council-message:hover .council-msg-model-label {
  opacity: 1;
}
body.light .becoming-app .council-msg-model-label {
  color: rgba(20, 20, 30, 0.4) !important;
}
.council-message-content {
  padding: 0.5rem 0.875rem;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  user-select: text;
  -webkit-user-select: text;
}
.council-message.user .council-message-content {
  background: rgba(var(--accent-rgb), 0.12);
  border: none;
  color: var(--os-text-primary);
  border-bottom-right-radius: 4px;
}
.council-message.assistant .council-message-content {
  background: transparent;
  border: none;
  color: var(--os-text-secondary);
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
/* Incognito message styling */
.council-message.incognito.user .council-message-content {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.council-message.incognito.assistant .council-message-content {
  border-left: 2px solid rgba(239, 68, 68, 0.25);
}
/* Markdown styling — conversational, warm, not clinical */
.council-message-content .markdown-text {
  line-height: 1.65;
}
.council-message-content .markdown-text p {
  margin: 0 0 0.6em 0;
}
.council-message-content .markdown-text p:empty {
  display: none;
}
.council-message-content .markdown-text p:last-child {
  margin-bottom: 0;
}
.council-message-content .markdown-text ul,
.council-message-content .markdown-text ol {
  margin: 0.5em 0;
  padding-left: 1.25rem;
}
.council-message-content .markdown-text li {
  margin: 0.2em 0;
}
.council-message-content .markdown-text li p {
  margin: 0.2em 0;
}
.council-message-content .markdown-text li > p:first-child { margin-top: 0; }
.council-message-content .markdown-text li > p:last-child { margin-bottom: 0; }
.council-message-content .md-bold {
  font-weight: 600;
  color: var(--os-text-primary);
}
.council-message-content .md-italic {
  font-style: italic;
  color: var(--os-text-secondary);
}
.council-message-content .md-code {
  background: rgba(255, 255, 255, 0.07);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.85em;
}
.council-message-content .md-h1,
.council-message-content .md-h2,
.council-message-content .md-h3 {
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0.8em 0 0.3em 0;
}
.council-message-content .md-h1 { font-size: 1.05rem; }
.council-message-content .md-h2 { font-size: 1rem; }
.council-message-content .md-h3 { font-size: 0.9375rem; }
.council-message-content .md-hr,
.council-message-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0.75em 0;
}
.council-message-content h1,
.council-message-content h2,
.council-message-content h3,
.council-message-content h4 {
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0.8em 0 0.3em 0;
  line-height: 1.35;
}
.council-message-content h1:first-child,
.council-message-content h2:first-child,
.council-message-content h3:first-child {
  margin-top: 0;
}
.council-message-content h1 { font-size: 1.05rem; }
.council-message-content h2 { font-size: 1rem; }
.council-message-content h3 { font-size: 0.9375rem; }
.council-message-content h4 { font-size: 0.9375rem; font-weight: 500; }
.council-message-content pre {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.75rem;
  margin: 0.5em 0;
  overflow-x: auto;
}
.council-message-content pre code {
  background: none;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--os-text-secondary);
}
.council-message-content code {
  background: rgba(255, 255, 255, 0.07);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 0.85em;
}
.council-message-content blockquote {
  border-left: 2px solid rgba(var(--accent-rgb), 0.35);
  margin: 0.5em 0;
  padding: 0.15em 0 0.15em 0.75rem;
  color: var(--os-text-secondary);
  font-style: italic;
}
.council-message-content ul,
.council-message-content ol {
  margin: 0.5em 0;
  padding-left: 1.25rem;
}
.council-message-content li {
  margin: 0.2em 0;
  line-height: 1.6;
}
.council-message-content li > ul,
.council-message-content li > ol {
  margin: 0.25em 0;
}
.council-message-content ul > li::marker {
  color: var(--os-text-hint);
}
.council-message-content ol > li::marker {
  color: var(--os-text-muted);
  font-variant-numeric: tabular-nums;
}
.council-message-content a {
  color: rgba(var(--accent-rgb), 0.85);
  text-decoration: none;
}
.council-message-content a:hover {
  text-decoration: underline;
  color: var(--accent);
}
.council-message-content strong {
  font-weight: 600;
  color: var(--os-text-primary);
}
.council-message-content em {
  font-style: italic;
  color: var(--os-text-secondary);
}
/* Override briefing-text drop cap and newspaper styles */
.council-message-content .briefing-text p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
}
.council-message-content .briefing-text h2 {
  background: none;
  padding: 0;
  display: block;
  font-size: 1.0625rem;
  text-transform: none;
  letter-spacing: normal;
}
.council-message-content .briefing-text h3 {
  background: none;
  padding: 0;
  display: block;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--os-text-primary);
}
.council-message.loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  color: var(--os-text-muted);
  font-size: 0.875rem;
}
.council-message.loading .spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.council-last-message-time {
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* --- Companion Status Bar (merged info + controls) --- */
.companion-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  min-height: 32px;
}
.companion-status-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.companion-last-msg {
  font-size: 0.7rem;
  color: var(--os-text-hint);
}
.companion-session-time {
  font-size: 0.65rem;
  color: rgba(74, 222, 128, 0.5);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.companion-status-right {
  display: flex;
  align-items: center;
  gap: 3px;
}
.council-input-form {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0;
  padding: 0.625rem 1rem 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  position: relative;
}
.council-input-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
/* ── Companion idle CTA — shown at bottom of messages list ── */
.council-begin-session-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 0.5rem;
}
/* ── Begin Session Button (shown when no session active) ── */
.session-begin-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: rgba(74, 222, 128, 0.85);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.session-begin-btn:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.5);
  color: rgba(74, 222, 128, 1);
}
body.light .session-begin-btn {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.3);
  color: rgba(22, 163, 74, 0.85);
}
body.light .session-begin-btn:hover {
  background: rgba(22, 163, 74, 0.15);
  border-color: rgba(22, 163, 74, 0.5);
  color: rgba(22, 163, 74, 1);
}
/* ── Session Dial ── */
.session-dial-float {
  position: relative;
  display: flex;
  align-items: center;
}
/* The clickable ring */
.session-dial-ring-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s;
}
.session-dial-ring-wrap:hover {
  background: rgba(255, 255, 255, 0.06);
}
.session-dial-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.session-dial-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2;
}
.session-dial-progress {
  fill: none;
  stroke: rgba(74, 222, 128, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 2s linear;
}
.session-dial-float.active .session-dial-ring-wrap:hover .session-dial-progress {
  stroke: rgba(239, 68, 68, 0.65);
}
/* Complete state — ring filled, gentle gold pulse */
.session-dial-float.complete .session-dial-progress {
  stroke: rgba(251, 191, 36, 0.8);
  animation: sdial-complete-pulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}
.session-dial-float.complete .session-dial-label {
  color: rgba(251, 191, 36, 0.9);
  font-size: 0.42rem;
}
@keyframes sdial-complete-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.session-dial-idle-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s, stroke 0.2s;
}
.session-dial-float.idle .session-dial-ring-wrap:hover .session-dial-idle-ring {
  stroke: rgba(74, 222, 128, 0.5);
  stroke-dashoffset: 53 !important;
}
.session-dial-saving-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 2;
  stroke-linecap: round;
  animation: sdial-spin 1.1s linear infinite;
}
@keyframes sdial-spin {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -107; }
}
/* Label (minutes or ▶) */
.session-dial-label {
  position: relative;
  z-index: 1;
  font-size: 0.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: rgba(74, 222, 128, 0.85);
  pointer-events: none;
}
.session-dial-float.idle .session-dial-label {
  color: var(--os-text-hint);
  font-size: 0.55rem;
}
.session-dial-float.active .session-dial-ring-wrap:hover .session-dial-label {
  color: rgba(239, 68, 68, 0.75);
}
/* ── Popover ── */
.session-dial-popover {
  position: fixed;
  width: 320px;
  background: rgba(20, 20, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  animation: sdp-in 0.15s ease;
}
@keyframes sdp-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.sdp-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sdp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sdp-dot.active {
  background: rgba(74, 222, 128, 0.85);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
  animation: sdp-pulse 2s ease-in-out infinite;
}
.sdp-dot.idle {
  background: rgba(255, 255, 255, 0.2);
}
@keyframes sdp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.sdp-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  flex: 1;
}
.sdp-elapsed {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(74, 222, 128, 0.9);
  font-variant-numeric: tabular-nums;
}
.sdp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sdp-key {
  font-size: 0.62rem;
  color: var(--os-text-hint);
}
.sdp-val {
  font-size: 0.62rem;
  color: var(--os-text-muted);
}
.sdp-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 0.1rem 0;
}
.sdp-stats-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.sdp-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sdp-stat-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--os-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.sdp-stat-key {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sdp-summary-area {
  min-height: 36px;
}
.sdp-summary {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--os-text-secondary);
  margin: 0;
}
.sdp-summary.muted {
  color: var(--os-text-hint);
  font-style: italic;
}
.sdp-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.sdp-topic {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(167, 139, 250, 0.9);
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 5px;
  padding: 0.25rem 0.6rem;
}
.sdp-loading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  color: var(--os-text-hint);
}
.sdp-end-btn {
  all: unset;
  box-sizing: border-box;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(239, 68, 68, 0.6);
  cursor: pointer;
  text-align: center;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  width: 100%;
}
.sdp-end-btn:hover {
  color: rgba(239, 68, 68, 1);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
}
.sdp-begin-btn {
  all: unset;
  box-sizing: border-box;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(74, 222, 128, 0.75);
  cursor: pointer;
  text-align: center;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(74, 222, 128, 0.25);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  width: 100%;
}
.sdp-begin-btn:hover {
  color: rgba(74, 222, 128, 1);
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.5);
}
.council-input-with-menu {
  position: relative;
  flex: 1;
}
.council-input-form textarea {
  flex: 1;
  width: 100%;
  padding: 0.5rem 0.875rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
  font-size: 0.9375rem;
  font-family: inherit;
  resize: none;
  line-height: 1.5;
  min-height: 40px;
  max-height: 200px;
  overflow-y: hidden;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, height 0.1s ease;
}
.council-input-form textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06), 0 2px 12px rgba(var(--accent-rgb), 0.08);
}
.council-input-form textarea::placeholder {
  color: var(--os-text-hint);
}
.council-input-form textarea::-webkit-scrollbar {
  width: 4px;
}
.council-input-form textarea::-webkit-scrollbar-track {
  background: transparent;
}
.council-input-form textarea::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.25);
  border-radius: 2px;
}
.council-input-form button {
  width: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid transparent;
  color: rgba(var(--accent-rgb), 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  align-self: stretch;
}
.council-input-form button:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
.council-input-form button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* Stop button */
.council-stop-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid transparent;
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  align-self: flex-end;
}
.council-stop-btn:hover {
  background: rgba(239, 68, 68, 0.25);
}
.council-stop-icon {
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 2px;
}
/* Council input buttons wrapper */
.council-input-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.council-input-form .council-input-buttons button {
  /* inherits from .council-input-form button */
}
/* Icon button group — pill container */
.council-header-icon-group {
  display: flex;
  align-items: center;
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px;
  gap: 1px;
}
/* Council toggle button (in header) */
.council-chat-controls .council-toggle-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.council-chat-controls .council-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}
.council-chat-controls .council-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
/* Incognito mode */
.council-chat-controls .council-toggle-btn.incognito-active {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.9);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3), 0 0 16px rgba(239, 68, 68, 0.15);
  animation: incognito-pulse 2s ease-in-out infinite;
}
@keyframes incognito-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.3), 0 0 16px rgba(239, 68, 68, 0.15); }
  50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), 0 0 24px rgba(239, 68, 68, 0.25); }
}
/* Scroll to bottom button */
.council-scroll-down-btn {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(30, 30, 35, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.council-scroll-down-btn:hover {
  background: rgba(40, 40, 50, 0.95);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.25);
}
/* Incognito input area */
.council-input-form.incognito {
  border-top-color: rgba(239, 68, 68, 0.2);
}
.council-input-form.incognito textarea {
  border-color: rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2), 0 0 12px rgba(239, 68, 68, 0.08);
}
.council-input-form.incognito textarea:focus {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3), 0 0 20px rgba(239, 68, 68, 0.12);
}
.council-input-form.incognito textarea::placeholder {
  color: rgba(239, 130, 130, 0.55);
}
.council-input-form.incognito button:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.85);
}
.council-input-form.incognito button:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.25);
  color: rgba(239, 68, 68, 1);
}
.council-input-form.incognito button[type="submit"].council-send {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.2));
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
  color: rgba(239, 68, 68, 0.9);
}
.council-toggle-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  -webkit-text-fill-color: #fff;
}
/* Council send button glow */
.council-input-form button[type="submit"].council-send {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.3));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
/* Council multi-model picker */
.council-multi-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.01);
}
.council-multi-picker {
  position: fixed;
  width: 340px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  overflow: hidden;
}
.council-multi-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  flex-shrink: 0;
}
.council-multi-picker-header button {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.council-multi-picker-header button:hover {
  color: var(--os-text-secondary);
}
.council-multi-picker-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.council-multi-picker-body::-webkit-scrollbar {
  width: 4px;
}
.council-multi-picker-body::-webkit-scrollbar-track {
  background: transparent;
}
.council-multi-picker-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.council-multi-picker-group {
  padding: 0;
}
.council-multi-picker-group + .council-multi-picker-group {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.council-multi-picker-provider {
  padding: 0.4rem 0.75rem 0.2rem;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.council-multi-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.council-multi-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.council-multi-picker-item.selected {
  background: var(--council-accent-bg, rgba(167, 139, 250, 0.1));
  color: var(--council-accent-text, #c4b5fd);
}
.council-multi-picker-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}
.council-multi-picker-item.selected input[type="checkbox"] {
  background: var(--council-accent-text, #7c3aed);
  border-color: var(--council-accent-text, #7c3aed);
}
.council-multi-picker-item.selected input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 7px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.council-member-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  transition: background 0.15s;
}
.council-member-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.council-member-picker-item.selected {
  background: rgba(167, 139, 250, 0.1);
  color: #c4b5fd;
}
.council-multi-picker-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-text-hint);
  padding: 0.4rem 0.75rem 0.2rem;
}
.council-member-picker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.council-member-picker-name {
  font-weight: 500;
  flex: 1;
}
.council-member-picker-model {
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  font-family: monospace;
}
.council-member-picker-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
}
.council-member-picker-item.selected input[type="checkbox"] {
  background: #7c3aed;
  border-color: #7c3aed;
}
.council-member-picker-item.selected input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 7px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.council-member-picker-empty {
  padding: 1rem 0.75rem;
  color: var(--os-text-hint);
  font-size: 0.8125rem;
  text-align: center;
}
.council-multi-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.council-multi-picker-footer button {
  padding: 0.3rem 0.625rem;
  border-radius: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--os-text-muted);
  transition: all 0.15s;
}
.council-multi-picker-footer button:hover {
  color: var(--os-text-secondary);
}
.council-multi-picker-footer button.primary {
  background: var(--accent-dark);
  color: white;
}
.council-multi-picker-footer button.primary:hover {
  background: var(--accent-dark);
}
/* ─── Council Studio ────────────────────────────────────────────── */
.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-modal {
  width: 460px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  background: rgba(14, 14, 20, 0.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: width 0.2s ease, max-height 0.2s ease;
  margin: auto;
}
.cs-modal--edit {
  width: min(820px, 90vw);
  max-height: 88vh;
}
/* Header */
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.cs-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.cs-close {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 5px;
  transition: all 0.15s;
}
.cs-close:hover { color: var(--os-text-secondary); background: rgba(255,255,255,0.06); }
/* On/Off toggle */
.cs-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: auto;
  margin-right: 4px;
}
.cs-toggle-track {
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  position: relative;
  transition: background 0.2s;
}
.cs-toggle-btn.on .cs-toggle-track {
  background: #4ade80;
}
.cs-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}
.cs-toggle-btn.on .cs-toggle-thumb {
  left: 14px;
}
.cs-toggle-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cs-toggle-btn.on .cs-toggle-label {
  color: #4ade80;
}
/* Body — scrollable */
.cs-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0.75rem 0;
}
.cs-modal--edit .cs-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.cs-modal--edit .cs-edit-wrap {
  flex: 1;
  min-height: 0;
  padding: 0;
  gap: 0;
}
.cs-body::-webkit-scrollbar { width: 4px; }
.cs-body::-webkit-scrollbar-track { background: transparent; }
.cs-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
/* State: Room (who's in) */
.cs-room {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.25rem 1.125rem 0.875rem;
}
.cs-room-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem 0.3rem 0.6rem;
  border-radius: 20px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
}
.cs-room-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cs-room-chip-remove {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0 2px;
  margin-left: 2px;
  border-radius: 3px;
  transition: color 0.12s;
}
.cs-room-chip-remove:hover { color: var(--os-text-secondary); }
.cs-room-empty {
  color: var(--os-text-hint);
  font-size: 0.8125rem;
  padding: 0.25rem 0;
}
.cs-speed-hint {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  line-height: 1.4;
}
.cs-speed-warning {
  color: rgba(251, 191, 36, 0.75);
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.2);
}
.cs-speed-badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}
.cs-speed-fast { color: rgba(74, 222, 128, 0.7); }
.cs-speed-slow { color: rgba(148, 163, 184, 0.6); }
/* Add button — shown at end of room chips */
.cs-add-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  border: 1px dashed rgba(255,255,255,0.15);
  background: none;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.cs-add-btn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),0.4); background: rgba(var(--accent-rgb),0.06); }
/* State: Picker (add someone) */
.cs-picker {
  display: flex;
  flex-direction: column;
}
.cs-picker-back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1.125rem 0.625rem;
  background: none;
  border: none;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.cs-picker-back:hover { color: var(--os-text-secondary); }
/* Shared row style for picker list */
.cs-row {
  display: flex;
  align-items: center;
  width: 100%;
  transition: background 0.12s;
}
.cs-row:hover { background: rgba(255,255,255,0.04); }
.cs-row-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.125rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.cs-row-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cs-row-name { font-weight: 500; flex-shrink: 0; }
.cs-row-sub-model {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  margin-left: 0.25rem;
}
.cs-row-sub {
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.cs-row-badge {
  font-size: 0.5rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.cs-row-edit {
  padding: 0.3rem 0.5rem;
  margin-right: 0.5rem;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 5px;
  transition: all 0.15s;
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
  line-height: 1;
  opacity: 0;
}
.cs-row:hover .cs-row-edit { opacity: 1; }
.cs-row-edit:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.35); }
/* Provider separator */
.cs-provider-label {
  padding: 0.6rem 1.125rem 0.2rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-text-hint);
}
/* Collapsible provider group */
.cs-group { }
.cs-provider-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.cs-provider-toggle:hover { color: var(--os-text-muted) !important; }
.cs-provider-chevron {
  font-size: 0.6rem;
  opacity: 0.5;
  margin-right: 1.125rem;
}
/* Two-column model grid */
.cs-model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.35rem 1.125rem 0.5rem;
}
.cs-model-tile {
  position: relative;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  transition: background 0.12s, border-color 0.12s;
  overflow: hidden;
}
.cs-model-tile:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
.cs-model-tile.active { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.25); }
.cs-model-tile-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  text-align: left;
}
.cs-model-tile-inner {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.cs-model-tile-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--os-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-model-tile-sub {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-model-tile.active .cs-model-tile-name { color: rgba(74,222,128,0.9); }
.cs-tile-check {
  font-size: 0.65rem;
  color: #4ade80;
  flex-shrink: 0;
}
.cs-tile-edit {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--os-text-muted);
  font-size: 0.65rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.4;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  opacity: 0;
}
.cs-model-tile:hover .cs-tile-edit { opacity: 1; }
.cs-tile-edit:hover { color: white; background: rgba(var(--accent-rgb), 0.6); border-color: rgba(var(--accent-rgb), 0.5); }
/* New persona button */
.cs-new-persona {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.5rem 1.125rem 0.25rem;
  padding: 0.5rem 1rem;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  border-radius: 7px;
  color: rgba(var(--accent-rgb), 0.7);
  color: color-mix(in srgb, var(--accent) 70%, transparent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  width: calc(100% - 2.25rem);
}
.cs-new-persona:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}
/* Edit form — shown inside picker */
.cs-edit-wrap {
  padding: 0.5rem 1.125rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
}
.cs-edit-back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0 0 0.25rem;
  transition: color 0.15s;
}
.cs-edit-back:hover { color: var(--os-text-secondary); }
/* Two-pane split edit form */
.cs-edit-form--split {
  display: flex;
  flex-direction: row;
  gap: 0;
  height: 100%;
  min-height: 420px;
}
/* LEFT panel */
.cs-edit-left {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.125rem 1rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}
.cs-edit-avatar-wrap {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0.25rem;
}
.cs-edit-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(0,0,0,0.65);
  flex-shrink: 0;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}
.cs-edit-left-actions {
  margin-top: auto;
}
/* RIGHT panel */
.cs-edit-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1rem;
  min-width: 0;
}
/* Field rows (label on top, control below) */
.cs-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cs-edit-field--grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cs-edit-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-hint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cs-edit-name-input {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}
.cs-edit-input, .cs-edit-select, .cs-edit-textarea {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  padding: 0.4rem 0.65rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.cs-edit-input:focus, .cs-edit-select:focus, .cs-edit-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.cs-edit-select option, .cs-edit-select optgroup { background: #1a1a2e; }
.cs-edit-textarea { resize: none; font-family: inherit; line-height: 1.6; min-height: 80px; }
.cs-edit-textarea--grow { flex: 1; min-height: 0; resize: none; }
.cs-edit-hint {
  font-size: 0.625rem;
  color: var(--os-text-hint);
}
.cs-color-swatches { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.cs-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  outline: none;
}
.cs-color-swatch:hover { transform: scale(1.18); }
.cs-color-swatch.selected {
  border-color: white;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
}
/* Personal context toggle as a card row */
.cs-edit-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  gap: 0.75rem;
}
.cs-edit-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cs-edit-toggle-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--os-text-secondary);
}
.cs-toggle { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.cs-toggle input { display: none; }
.cs-toggle-track {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: rgba(255,255,255,0.1);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.cs-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: left 0.2s, background 0.2s;
}
.cs-toggle input:checked ~ .cs-toggle-track { background: rgba(var(--accent-rgb), 0.6); }
.cs-toggle input:checked ~ .cs-toggle-track::after { left: 17px; background: var(--accent); }
.cs-edit-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid rgba(255,255,255,0.07); }
.cs-edit-cancel, .cs-edit-save {
  padding: 0.4rem 1rem;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}
.cs-edit-cancel { background: rgba(255,255,255,0.07); color: var(--os-text-muted); }
.cs-edit-cancel:hover { background: rgba(255,255,255,0.12); }
.cs-edit-save { background: rgba(var(--accent-rgb), 0.85); color: white; }
.cs-edit-save:hover { background: var(--accent); }
.cs-edit-save:disabled { opacity: 0.3; cursor: not-allowed; }
/* Delete button in edit form */
.cs-edit-delete {
  background: none;
  border: none;
  color: rgba(239,68,68,0.5);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.4rem 0;
  margin-right: auto;
  transition: color 0.15s;
}
.cs-edit-delete:hover { color: #f87171; }
/* Footer */
.cs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.125rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.cs-modal--edit .cs-footer { display: none; }
.cs-footer-clear {
  background: none;
  border: none;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  transition: color 0.15s;
}
.cs-footer-clear:hover { color: var(--os-text-muted); }
.cs-footer-done {
  background: rgba(var(--accent-rgb), 0.8);
  border: none;
  color: white;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
}
.cs-footer-done:hover { background: var(--accent); }
/* Light theme */
body.light .cs-modal {
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
}
body.light .cs-header { border-color: rgba(0,0,0,0.08) !important; }
body.light .cs-title { color: rgba(20,20,30,0.85) !important; }
body.light .cs-close { color: rgba(20,20,30,0.3) !important; }
body.light .cs-close:hover { color: rgba(20,20,30,0.7) !important; background: rgba(0,0,0,0.05) !important; }
/* Room chips */
body.light .cs-room-chip {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-color: rgba(var(--accent-rgb), 0.2) !important;
  color: rgba(20,20,30,0.8) !important;
}
body.light .cs-room-chip-remove { color: rgba(20,20,30,0.3) !important; }
body.light .cs-room-chip-remove:hover { color: rgba(20,20,30,0.65) !important; }
body.light .cs-room-empty { color: rgba(20,20,30,0.35) !important; }
body.light .cs-speed-hint { color: rgba(20,20,30,0.4) !important; background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.08) !important; }
body.light .cs-speed-warning { color: rgba(161,120,0,0.85) !important; background: rgba(251,191,36,0.07) !important; border-color: rgba(251,191,36,0.25) !important; }
body.light .cs-speed-fast { color: rgba(22,163,74,0.8) !important; }
body.light .cs-speed-slow { color: rgba(100,116,139,0.7) !important; }
body.light .cs-add-btn { color: rgba(20,20,30,0.35) !important; border-color: rgba(0,0,0,0.15) !important; }
body.light .cs-add-btn:hover { color: var(--accent) !important; border-color: rgba(var(--accent-rgb),0.4) !important; background: rgba(var(--accent-rgb),0.06) !important; }
/* Picker */
body.light .cs-picker-back { color: rgba(20,20,30,0.35) !important; }
body.light .cs-picker-back:hover { color: rgba(20,20,30,0.65) !important; }
body.light .cs-provider-label { color: rgba(20,20,30,0.3) !important; }
body.light .cs-model-tile { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.09) !important; }
body.light .cs-model-tile:hover { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.15) !important; }
body.light .cs-model-tile.active { background: rgba(34,197,94,0.07) !important; border-color: rgba(34,197,94,0.25) !important; }
body.light .cs-model-tile-name { color: rgba(20,20,30,0.8) !important; }
body.light .cs-model-tile-sub { color: rgba(20,20,30,0.3) !important; }
body.light .cs-model-tile.active .cs-model-tile-name { color: rgba(22,163,74,0.9) !important; }
body.light .cs-tile-edit { color: rgba(20,20,30,0.4) !important; background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.12) !important; }
body.light .cs-tile-edit:hover { color: white !important; background: var(--accent) !important; border-color: var(--accent) !important; }
body.light .cs-row:hover { background: rgba(0,0,0,0.04) !important; }
body.light .cs-row-btn { color: rgba(20,20,30,0.8) !important; }
body.light .cs-row-sub { color: rgba(20,20,30,0.3) !important; }
body.light .cs-row-sub-model { color: rgba(20,20,30,0.3) !important; }
body.light .cs-row-edit { color: rgba(20,20,30,0.35) !important; border-color: rgba(0,0,0,0.12) !important; }
body.light .cs-row-edit:hover { color: var(--accent) !important; background: rgba(var(--accent-rgb),0.08) !important; border-color: rgba(var(--accent-rgb),0.35) !important; }
body.light .cs-new-persona { background: rgba(var(--accent-rgb),0.05) !important; border-color: rgba(var(--accent-rgb),0.25) !important; color: rgba(var(--accent-rgb),0.6) !important; }
body.light .cs-new-persona:hover { background: rgba(var(--accent-rgb),0.1) !important; border-color: rgba(var(--accent-rgb),0.45) !important; color: var(--accent) !important; }
/* Edit form */
body.light .cs-edit-back { color: rgba(20,20,30,0.35) !important; }
body.light .cs-edit-back:hover { color: rgba(20,20,30,0.65) !important; }
body.light .cs-edit-label { color: rgba(20,20,30,0.4) !important; }
body.light .cs-edit-left { border-color: rgba(0,0,0,0.08) !important; background: rgba(0,0,0,0.02) !important; }
body.light .cs-edit-avatar { color: rgba(255,255,255,0.9) !important; }
body.light .cs-edit-toggle-row { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.09) !important; }
body.light .cs-edit-toggle-label { color: rgba(20,20,30,0.65) !important; }
body.light .cs-edit-actions { border-color: rgba(0,0,0,0.08) !important; }
body.light .cs-edit-input, body.light .cs-edit-select, body.light .cs-edit-textarea {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: rgba(20,20,30,0.85) !important;
}
body.light .cs-edit-select option, body.light .cs-edit-select optgroup { background: white !important; color: rgba(20,20,30,0.85) !important; }
body.light .cs-edit-hint { color: rgba(20,20,30,0.3) !important; }
body.light .cs-edit-cancel { background: rgba(0,0,0,0.05) !important; color: rgba(20,20,30,0.5) !important; }
body.light .cs-edit-cancel:hover { background: rgba(0,0,0,0.09) !important; }
body.light .cs-toggle-track { background: rgba(0,0,0,0.1) !important; }
body.light .cs-toggle-track::after { background: rgba(0,0,0,0.3) !important; }
/* Footer */
body.light .cs-footer { border-color: rgba(0,0,0,0.08) !important; }
body.light .cs-footer-clear { color: rgba(20,20,30,0.3) !important; }
body.light .cs-footer-clear:hover { color: rgba(20,20,30,0.6) !important; }
/* Council card (multi-model response) */
.council-message.council-multi {
  width: min(94%, 1120px);
  max-width: min(94%, 1120px);
}
/* Model name flash on card switch */
.council-model-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-text-muted);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.7s ease;
  white-space: nowrap;
}
.council-model-flash.fade-out {
  opacity: 0;
}
body.light .council-model-flash {
  color: rgba(20, 15, 40, 0.5);
  background: rgba(255, 255, 255, 0.6);
}
.council-card {
  position: relative;
  width: 100%;
  background: rgb(30, 30, 35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
/* All-failed banner */
.council-all-failed-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: rgba(239, 68, 68, 0.08);
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px 12px 0 0;
  font-size: 0.75rem;
}
.council-all-failed-icon {
  color: rgba(239, 68, 68, 0.8);
  font-size: 0.8rem;
  flex-shrink: 0;
}
.council-all-failed-msg {
  flex: 1;
  color: var(--os-text-muted);
}
.council-all-failed-retry {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 5px;
  color: rgba(239, 68, 68, 0.9);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.council-all-failed-retry:hover {
  background: rgba(239, 68, 68, 0.25);
}
body.light .council-all-failed-msg {
  color: rgba(60, 20, 20, 0.7);
}
/* Kindle-style edge navigation — inside card-layout to avoid overflow:hidden clipping */
.council-card-layout > .council-edge-nav {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.35;
  pointer-events: auto;
  transition: opacity 0.2s ease, background 0.2s ease;
  z-index: 2;
  color: rgba(255, 255, 255, 0.6);
}
.council-card-layout > .council-edge-nav.left {
  left: 0;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(to right, rgba(255,255,255,0.06), transparent);
}
.council-card-layout > .council-edge-nav.right {
  right: 0;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(to left, rgba(255,255,255,0.06), transparent);
}
.council-card-layout > .council-edge-nav:hover {
  opacity: 1;
  color: white;
}
.council-card-layout > .council-edge-nav.left:hover {
  background: linear-gradient(to right, rgba(255,255,255,0.15), transparent);
}
.council-card-layout > .council-edge-nav.right:hover {
  background: linear-gradient(to left, rgba(255,255,255,0.15), transparent);
}
body.light .council-card-layout > .council-edge-nav {
  color: rgba(20, 20, 30, 0.4);
}
body.light .council-card-layout > .council-edge-nav.left {
  background: linear-gradient(to right, rgba(0,0,0,0.04), transparent);
}
body.light .council-card-layout > .council-edge-nav.right {
  background: linear-gradient(to left, rgba(0,0,0,0.04), transparent);
}
body.light .council-card-layout > .council-edge-nav:hover {
  opacity: 1;
  color: rgba(20, 20, 30, 0.9);
}
.council-card-layout > .council-edge-nav:disabled {
  opacity: 0 !important;
  pointer-events: none;
  cursor: default;
}
/* Model theme colors */
.council-theme-claude { --council-accent: rgba(var(--accent-rgb), 0.25); --council-accent-text: var(--accent); --council-accent-bg: rgba(var(--accent-rgb), 0.08); }
.council-theme-gemini { --council-accent: rgba(56, 189, 248, 0.25); --council-accent-text: #38bdf8; --council-accent-bg: rgba(56, 189, 248, 0.08); }
.council-theme-openai { --council-accent: rgba(74, 222, 128, 0.25); --council-accent-text: #4ade80; --council-accent-bg: rgba(74, 222, 128, 0.08); }
.council-theme-deepseek { --council-accent: rgba(251, 191, 36, 0.25); --council-accent-text: #fbbf24; --council-accent-bg: rgba(251, 191, 36, 0.08); }
.council-theme-grok { --council-accent: rgba(248, 113, 113, 0.25); --council-accent-text: #f87171; --council-accent-bg: rgba(248, 113, 113, 0.08); }
.council-theme-default { --council-accent: rgba(255, 255, 255, 0.15); --council-accent-text: rgba(255, 255, 255, 0.7); --council-accent-bg: rgba(255, 255, 255, 0.05); }
/* Card layout — vertical sidebar + content */
.council-card-layout {
  display: flex;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
/* Parts map right panel — sits inside council-card-layout as a right column */
.council-parts-panel {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  padding: 1rem 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 0 12px 12px 0;
}
.council-parts-panel-header {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-text-hint);
}
.council-parts-panel-loading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.council-parts-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.council-parts-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.council-parts-item-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.council-parts-item-emoji {
  font-size: 1.1rem;
  line-height: 1;
}
.council-parts-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.council-parts-item-expr {
  font-size: 0.8rem;
  color: var(--os-text-muted);
  line-height: 1.4;
  padding-left: 1.5rem;
}
.council-parts-throne {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--os-text-muted);
  line-height: 1.4;
}
.council-parts-throne.present {
  border-color: rgba(167, 139, 250, 0.25);
  background: rgba(167, 139, 250, 0.06);
  color: rgba(167, 139, 250, 0.8);
}
.council-parts-throne.absent {
  border-color: rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.05);
  color: rgba(251, 191, 36, 0.7);
}
.council-parts-stirring {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--os-text-muted);
  line-height: 1.4;
}
.council-parts-stirring-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-hint);
  letter-spacing: 0.04em;
}
.council-parts-proposed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.council-parts-proposed-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-hint);
  letter-spacing: 0.04em;
}
.council-parts-proposed-type {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}
.council-parts-count {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  margin-left: auto;
}
.council-parts-count.highlighted {
  color: rgba(167, 139, 250, 0.8);
  font-weight: 600;
}
.council-parts-item.recurring .council-parts-item-name {
  color: rgba(167, 139, 250, 0.9);
}
/* Vertical sidebar tabs */
.council-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.3rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  width: 26px;
  border-radius: 12px 0 0 12px;
  background: rgba(0, 0, 0, 0.06);
  transition: width 0.2s ease, opacity 0.2s ease;
  overflow: hidden;
  opacity: 0.3;
  z-index: 3;
}
.council-message:hover .council-sidebar,
.council-sidebar.expanded,
.council-sidebar:hover {
  opacity: 1;
}
.council-sidebar.expanded {
  width: 120px;
}
/* Sticky sidebar on the last council message */
.council-sidebar.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
}
/* Toggle button at the top of the sidebar */
.council-sidebar-toggle {
  all: unset;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20px;
  cursor: pointer;
  color: var(--os-text-hint);
  flex-shrink: 0;
  transition: color 0.15s;
}
.council-sidebar-toggle:hover {
  color: var(--os-text-muted);
}
.council-message:hover .council-sidebar-toggle,
.council-sidebar-toggle:focus {
  opacity: 1;
}
/* Keep expanded toggle always visible */
.council-sidebar.expanded .council-sidebar-toggle {
  opacity: 1;
}
/* Label text shown when expanded */
.council-tab-label-text {
  font-size: 0.63rem;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 82px;
  opacity: 0.8;
}
.council-card-content {
  flex: 1;
  min-width: 0;
  width: 100%;
  transition: opacity 0.12s ease;
}
.council-card-model-header {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-text-hint);
  padding: 0.6rem 1.25rem 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.council-message:hover .council-card-model-header {
  opacity: 1;
}
body.light .council-card-model-header {
  color: rgba(20, 20, 30, 0.45);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
/* Parts panel — hide at rest, show on hover */
.council-parts-panel {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.council-message:hover .council-parts-panel {
  opacity: 1;
}
.council-tab {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.28rem 0;
  font-family: inherit;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
/* When sidebar is expanded, left-align tabs */
.council-sidebar.expanded .council-tab {
  justify-content: flex-start;
  padding-left: 0.4rem;
}
.council-tab-row {
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: visible;
}
.council-tab-row .council-tab {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.council-tab-action {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-primary);
  background: rgba(40, 40, 50, 0.95);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.12s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.council-tab-row:hover .council-tab-action,
.council-tab-row:focus-within .council-tab-action,
.council-tab-action.persistent {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
/* Retry/stop icon replaces dot inside tab */
.council-tab svg.council-tab-dot {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.council-tab:hover svg.council-tab-dot {
  opacity: 1;
}
.council-tab svg.council-tab-dot.error {
  color: rgba(248, 113, 113, 0.85);
}
.council-tab.model-running {
  cursor: default;
}
/* When expanded, anchor to right edge so it doesn't overlap the label */
.council-sidebar.expanded .council-tab-action {
  left: auto;
  right: 2px;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
}
.council-sidebar.expanded .council-tab-row:hover .council-tab-action,
.council-sidebar.expanded .council-tab-row:focus-within .council-tab-action,
.council-sidebar.expanded .council-tab-action.persistent {
  transform: translateY(-50%) scale(1);
}
/* persistent (error/cancelled) always visible in expanded mode */
.council-sidebar.expanded .council-tab-action.persistent {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.council-tab-action:hover {
  color: #fff;
  background: rgba(60, 60, 70, 0.98);
}
.council-tab-action.stop {
  color: rgba(248, 113, 113, 0.9);
}
.council-tab-action.stop:hover {
  color: rgba(248, 113, 113, 1);
  background: rgba(60, 20, 20, 0.95);
}
.council-tab:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
}
.council-tab:disabled {
  cursor: default;
}
/* ── Active / selected: subtle bg only ── */
.council-tab.active {
  background: var(--council-accent-bg, rgba(167, 139, 250, 0.08));
}
/* Dot — replaces text label in sidebar */
.council-tab-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.council-tab-dot.loading {
  background: rgba(255, 255, 255, 0.12);
  animation: council-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes council-dot-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.65; }
}
.council-tab-dot.active {
  background: var(--council-accent-text, #a78bfa);
  transform: scale(1.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.council-tab-dot.unviewed {
  background: rgba(255, 255, 255, 0.6);
}
.council-tab-dot.error {
  background: rgba(248, 113, 113, 0.85);
}
.council-tab-dot.cancelled {
  background: rgba(255, 255, 255, 0.1);
}
.council-tab-dot.picked {
  background: var(--council-accent-text, #a78bfa);
}
/* Picked tab — subtle highlight */
.council-tab.picked {
  font-weight: 600;
}
/* Parts tab — at bottom, icon only */
.council-tab-parts {
  margin-top: auto;
  padding: 0.3rem 0;
  color: rgba(var(--accent-rgb), 0.4);
}
.council-tab-parts:hover:not(:disabled) {
  color: rgba(var(--accent-rgb), 0.85);
  background: rgba(var(--accent-rgb), 0.06);
}
.council-tab-parts.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.council-tab-parts-count {
  font-size: 0.55rem;
  font-weight: 700;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  padding: 0px 4px;
  border-radius: 4px;
  min-width: 12px;
  text-align: center;
  line-height: 1.4;
}
.council-card-body {
  padding: 0.75rem 1.5rem;
  line-height: 1.55;
  user-select: text;
  -webkit-user-select: text;
}
.council-card-body-time {
  display: none;
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--os-text-hint);
  text-align: right;
}
/* Council model nav — inline group within session controls */
.council-floating-nav-group {
  display: flex;
  align-items: center;
  gap: 2px;
  animation: council-nav-fade-in 0.25s ease;
}
.council-nav-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 6px;
}
@keyframes council-nav-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.council-nav-arrow {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.council-nav-arrow:hover:not(:disabled) {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.08);
}
.council-nav-arrow:disabled {
  opacity: 0.15;
  cursor: default;
}
.council-nav-arrow.small {
  width: 18px;
  height: 14px;
  border-radius: 4px;
}
.council-nav-arrows-vertical {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 2px;
}
.council-floating-nav-label {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  font-weight: 500;
  min-width: 56px;
  text-align: center;
  white-space: nowrap;
}
.council-floating-nav-label.is-picked {
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 3px;
}
.council-picked-check {
  flex-shrink: 0;
}
.council-floating-nav-count {
  font-size: 0.6rem;
  color: var(--os-text-hint);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.council-floating-pick {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  margin-left: 2px;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.council-floating-pick:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.35);
}
.council-floating-pick:disabled {
  opacity: 0.4;
  cursor: default;
}
.council-floating-pick.picked {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.2);
  cursor: default;
}
.council-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.07);
  min-height: 32px;
}
/* Prev/next nav arrows — sits between meta and actions in footer */
.council-footer-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.council-footer-nav-label {
  font-size: 0.6rem;
  color: var(--os-text-hint);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  text-align: center;
}
.council-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.council-card-model {
  display: none;
}
.council-card-duration {
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--os-text-hint);
}
.council-card-time {
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--os-text-hint);
}
.council-pick-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.council-pick-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8);
  filter: none;
}
.council-pick-btn-picked {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
  cursor: default;
}
.council-pick-btn-picked:hover {
  background: rgba(255, 255, 255, 0.08);
  filter: none;
}
.council-retry-all-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.council-retry-all-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-secondary);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8);
  filter: none;
}
/* Pulse skeleton — shows before council streaming starts */
.council-loading-pulse {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.council-pulse-bar {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: pulse-shimmer 1.5s ease-in-out infinite;
  width: 80%;
}
.council-pulse-bar.short {
  width: 50%;
}
@keyframes pulse-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.council-card-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  min-height: 0;
  padding: 0;
}
/* Hide card chrome when showing inline loading */
.council-card:has(.council-loading-inline) {
  background: none;
  border: none;
  overflow: visible;
}
.council-card:has(.council-loading-inline) .council-edge-nav,
.council-card-layout:has(.council-loading-inline) .council-edge-nav,
.council-card:has(.council-loading-inline) .council-sidebar,
.council-card:has(.council-loading-inline) .council-all-failed-banner {
  display: none !important;
}
.council-card-layout:has(.council-loading-inline) {
  min-height: 0;
}
/* Inline loading indicator — simple, no card chrome */
.council-loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.72rem;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.council-loading-inline button {
  all: unset;
  font-size: 0.65rem;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 3px;
}
.council-loading-inline button:hover {
  color: rgba(248, 113, 113, 0.9);
  background: rgba(248, 113, 113, 0.1);
}
/* Compact single-line loading indicator */
.council-loading-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  width: 100%;
}
.council-loading-dots {
  display: flex;
  gap: 4px;
}
.council-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.council-dot.pending {
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.council-dot.done {
  background: rgba(74, 222, 128, 0.7);
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.3);
}
.council-dot.error {
  background: rgba(248, 113, 113, 0.7);
}
@keyframes dot-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.council-loading-label {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  font-variant-numeric: tabular-nums;
}
.council-loading-top {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 0.5rem;
}
.council-loading-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.council-loading-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--os-text-hint);
}
.council-loading-count {
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.council-loading-stop-btn {
  all: unset;
  box-sizing: border-box;
  font-size: 0.6rem;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.1s ease, background 0.1s ease;
}
.council-loading-stop-btn:hover {
  color: rgba(248, 113, 113, 0.9);
  background: rgba(248, 113, 113, 0.1);
}
/* Per-model loading rows */
.council-loading-models {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.council-loading-model-row {
  display: grid;
  grid-template-columns: 90px 20px 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.council-loading-model-name {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--os-text-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}
.council-loading-model-row.done .council-loading-model-name {
  color: var(--os-text-muted);
}
.council-loading-model-row.error .council-loading-model-name,
.council-loading-model-row.cancelled .council-loading-model-name {
  color: var(--os-text-hint);
}
.council-loading-model-state {
  font-size: 0.65rem;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}
.council-loading-model-row.done .council-loading-model-state { color: rgba(74, 222, 128, 0.8); }
.council-loading-model-row.error .council-loading-model-state { color: rgba(248, 113, 113, 0.7); }
.council-loading-model-row.cancelled .council-loading-model-state { color: var(--os-text-hint); }
.council-loading-model-row.pending .council-loading-model-state { color: var(--os-text-hint); }
/* Thinking dots animation */
.council-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.council-thinking-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: council-dot-bounce 1.2s ease-in-out infinite;
}
.council-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.council-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes council-dot-bounce {
  0%, 60%, 100% { opacity: 0.2; transform: translateY(0); }
  30% { opacity: 0.8; transform: translateY(-2px); }
}
/* Progress bar */
.council-loading-model-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
}
.council-loading-model-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  background-size: 200% 100%;
  animation: council-bar-sweep 1.6s ease-in-out infinite;
  transform-origin: left;
}
.council-loading-model-fill.complete {
  animation: none;
  width: 100%;
  background: rgba(74, 222, 128, 0.35);
}
.council-loading-model-row.error .council-loading-model-fill.complete {
  background: rgba(248, 113, 113, 0.3);
}
.council-loading-model-row.cancelled .council-loading-model-fill.complete {
  background: rgba(255, 255, 255, 0.08);
}
@keyframes council-bar-sweep {
  0% { left: -60%; width: 60%; }
  100% { left: 110%; width: 60%; }
}
/* Stagger bar animations per row */
.council-loading-model-row:nth-child(1) .council-loading-model-fill { animation-delay: 0s; }
.council-loading-model-row:nth-child(2) .council-loading-model-fill { animation-delay: 0.25s; }
.council-loading-model-row:nth-child(3) .council-loading-model-fill { animation-delay: 0.5s; }
.council-loading-model-row:nth-child(4) .council-loading-model-fill { animation-delay: 0.75s; }
.council-loading-model-row:nth-child(5) .council-loading-model-fill { animation-delay: 1.0s; }
.council-loading-model-row:nth-child(6) .council-loading-model-fill { animation-delay: 1.25s; }
/* Model theme accent colors for the progress bar when pending */
.council-loading-model-row.council-theme-claude.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.35), transparent);
}
.council-loading-model-row.council-theme-openai.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.3), transparent);
}
.council-loading-model-row.council-theme-gemini.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), transparent);
}
.council-loading-model-row.council-theme-deepseek.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.3), transparent);
}
.council-loading-model-row.council-theme-grok.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.25), transparent);
}
.council-card-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.council-card-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 0.25rem;
}
.council-card-rating .council-star {
  cursor: pointer;
  color: var(--os-text-hint);
  transition: color 0.15s;
  padding: 3px;
}
.council-card-rating .council-star:hover {
  color: var(--os-text-muted);
}
.council-card-rating .council-star.filled {
  color: #fbbf24;
}
.council-gem-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s;
}
.council-gem-card-btn:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.council-gem-card-btn:focus-visible {
  outline: 1px solid rgba(var(--accent-rgb), 0.45);
  outline-offset: 1px;
}
/* Council picked badge */
/* Picked message footer — single row, visible on hover */
.council-picked-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  height: 24px;
}
.council-message:hover .council-picked-footer,
.council-picked-footer:focus-within {
  opacity: 1;
}
.council-picked-footer .council-message-rating {
  margin-top: 0;
  flex-shrink: 0;
  opacity: 1;
}
.council-picked-left {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  min-width: 0;
}
/* Parts map inside footer row — inline, no extra space */
.council-picked-footer .becoming-map-section,
.council-picked-left .becoming-map-section {
  margin-top: 0;
  padding: 0;
}
.council-picked-footer .becoming-map-toggle {
  padding: 3px 8px !important;
  font-size: 0.6rem !important;
  border-radius: 10px !important;
}
.council-picked-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 10px;
  font-size: 0.625rem;
  color: rgba(var(--accent-rgb), 0.7);
}
.council-picked-count {
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(var(--accent-rgb), 0.18);
  padding: 1px 5px;
  border-radius: 8px;
  color: var(--accent);
  min-width: 15px;
  text-align: center;
  line-height: 1.3;
}
/* Council message rating — subtle hint, full on hover, stays when rated */
.council-message-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 0.375rem;
  opacity: 0.25;
  transition: opacity 0.2s ease;
}
.council-message-rating:hover,
.council-message:hover .council-message-rating,
.council-message-rating.rated {
  opacity: 1;
}
.council-star {
  color: var(--os-text-hint);
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  fill: transparent;
  stroke-width: 2;
}
.council-star:hover {
  color: rgba(251, 191, 36, 0.6);
  transform: scale(1.15);
}
.council-star.filled {
  color: #fbbf24;
  fill: #fbbf24;
  cursor: default;
}
.council-message-rating.rated .council-star:not(.filled) {
  display: none;
}
/* Council stats overlay & popover */
/* Council stats overlay & popover */
.council-stats-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.2);
}
.council-stats-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-height: 80vh;
  background: rgba(20, 20, 25, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  overflow: hidden;
}
.council-gems-popover {
  width: 560px;
}
.council-gems-popover .council-gems-list {
  max-height: 60vh;
  padding: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.25) transparent;
}
.council-gems-popover .council-gems-list::-webkit-scrollbar {
  width: 6px;
}
.council-gems-popover .council-gems-list::-webkit-scrollbar-track {
  background: transparent;
}
.council-gems-popover .council-gems-list::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 3px;
}
.council-gems-popover .council-gems-list::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.35);
}
.council-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.council-stats-header button {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.council-stats-header button:hover {
  color: var(--os-text-secondary);
}
/* Top section: donut chart + metrics side by side */
.council-stats-top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.council-stats-chart {
  flex-shrink: 0;
}
.council-stats-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  flex: 1;
}
.council-stats-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}
.council-stats-kpi-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-light);
  line-height: 1.2;
}
.council-stats-kpi-label {
  font-size: 0.5625rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
/* Highlights row */
.council-stats-highlights {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.council-stats-highlight {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.375rem 0.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.council-stats-highlight-icon {
  font-size: 0.75rem;
  line-height: 1;
}
.council-stats-highlight-label {
  font-size: 0.5rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.council-stats-highlight-value {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Model leaderboard */
.council-stats-leaderboard {
  padding: 0.625rem 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
}
.council-stats-model-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.council-stats-model-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.council-stats-model-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.council-stats-model-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  flex: 1;
}
.council-stats-pick-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-light);
}
.council-stats-model-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  color: var(--os-text-hint);
  padding-left: 1.375rem;
}
.council-stats-model-details span {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}
.council-stats-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 1.375rem;
}
.council-stats-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
  min-width: 2px;
}
.council-stats-empty {
  text-align: center;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
/* Stats tabs */
.council-stats-tabs {
  display: flex;
  gap: 0.125rem;
}
.council-stats-tab {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s;
}
.council-stats-tab:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.04);
}
.council-stats-tab.active {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}
/* Gem button on messages */
.council-gem-btn {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  margin-left: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.council-gem-btn:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
/* Gem toast — fixed floating pill, not part of layout flow */
.council-gem-toast {
  position: fixed;
  bottom: 2.5rem;
  left: 50%;
  transform: translate(-50%, 0);
  width: max-content;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 1rem;
  background: rgba(30, 30, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: council-gem-toast-in 0.2s ease-out;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes council-gem-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
body.light .council-gem-toast {
  background: rgba(30, 30, 40, 0.92);
  color: #fff;
  border-color: rgba(0, 0, 0, 0.15);
}
/* Note-to-memory confirmation preview */
.council-note-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.council-note-confirm {
  background: rgb(28, 28, 35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1.25rem;
  width: min(480px, 90vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.council-note-confirm-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.council-note-confirm-header span { flex: 1; }
.council-note-confirm-close {
  all: unset;
  cursor: pointer;
  color: var(--os-text-muted);
  display: flex;
  align-items: center;
}
.council-note-confirm-close:hover { color: var(--os-text-secondary); }
.council-note-confirm-preview {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
  overflow-y: auto;
  max-height: 45vh;
  white-space: pre-wrap;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 0.75rem;
}
.council-note-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.council-note-confirm-cancel {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.4rem 0.875rem;
  border-radius: 7px;
  color: var(--os-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.council-note-confirm-cancel:hover { color: var(--os-text-secondary); background: rgba(255, 255, 255, 0.05); }
.council-note-confirm-save {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.875rem;
  border-radius: 7px;
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: #a78bfa;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.council-note-confirm-save:hover { background: rgba(167, 139, 250, 0.3); }
body.light .council-note-confirm {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .council-note-confirm-header { color: rgba(0, 0, 0, 0.85); }
body.light .council-note-confirm-close { color: rgba(0, 0, 0, 0.35); }
body.light .council-note-confirm-close:hover { color: rgba(0, 0, 0, 0.7); }
body.light .council-note-confirm-preview { color: rgba(0, 0, 0, 0.65); background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.light .council-note-confirm-cancel { color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.12); }
body.light .council-note-confirm-cancel:hover { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.8); }
/* Gems list in stats popover */
.council-gems-list {
  padding: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.council-gem-item {
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.15s;
}
.council-gem-item:hover {
  border-color: rgba(var(--accent-rgb), 0.15);
}
.council-gem-text {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--os-text-secondary);
  white-space: pre-wrap;
  /* Clamp long gems */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.council-gem-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.625rem;
}
.council-gem-model {
  color: var(--accent);
  font-weight: 600;
}
.council-gem-time {
  color: var(--os-text-hint);
}
.council-gem-save {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin-left: auto;
  transition: all 0.15s;
}
.council-gem-save:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.council-gem-delete {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.council-gem-delete:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.council-gem-question {
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  font-style: italic;
}
.council-gem-question span {
  color: var(--os-text-muted);
  font-style: normal;
  font-weight: 600;
}
/* Council streaming indicator */
.council-streaming-indicator {
  padding: 0.75rem 1rem;
}
.council-streaming-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.council-streaming-models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.council-streaming-model {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.council-streaming-model.active {
  border-color: var(--council-accent, rgba(167, 139, 250, 0.2));
  color: var(--council-accent-text, rgba(167, 139, 250, 0.7));
}
.council-streaming-model.active:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 100, 100, 0.3);
}
.council-streaming-model.done {
  border-color: rgba(34, 197, 94, 0.2);
  color: rgba(34, 197, 94, 0.7);
}
.council-streaming-model.waiting {
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--os-text-hint);
  border-style: dashed;
}
.council-streaming-model.cancelled {
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--os-text-hint);
  opacity: 0.6;
}
.council-streaming-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.council-streaming-model.active .council-streaming-dot {
  animation: dotPulse 1.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
/* Becoming View */
.becoming-view {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
}
.becoming-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--os-text-muted);
}
/* North Star */
.north-star-section {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.1);
  border-radius: 16px;
  padding: 1.75rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(251, 191, 36, 0.05);
}
.north-star-statement {
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.95);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.north-star-wins h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.north-star-wins ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.north-star-wins li {
  padding: 0.375rem 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  position: relative;
}
.north-star-wins li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: rgba(74, 222, 128, 0.8);
}
.becoming-section {
  margin-bottom: 2.5rem;
}
.becoming-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.section-icon {
  font-size: 1.5rem;
}
.becoming-section-desc {
  margin: 0 0 1.25rem 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}
/* Vows Grid */
.vows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.vow-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vow-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.vow-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.vow-emoji {
  font-size: 1.25rem;
}
.vow-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.vow-question {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: rgba(var(--accent-rgb), 0.9);
}
.vow-description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  line-height: 1.5;
}
/* Phases Timeline */
.phases-timeline {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.phase-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}
.phase-dot:hover {
  background: rgba(255, 255, 255, 0.07);
}
.phase-dot.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.1);
}
.phase-dot.current {
  box-shadow: 0 0 0 1.5px rgba(74, 222, 128, 0.35), 0 2px 12px rgba(74, 222, 128, 0.08);
}
.phase-emoji {
  font-size: 1.25rem;
}
.phase-number {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
}
.phase-dot.active .phase-number {
  color: var(--accent);
}
/* Phase Detail */
.phase-detail {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 1.75rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.phase-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.phase-big-emoji {
  font-size: 2.5rem;
}
.phase-titles {
  flex: 1;
}
.phase-name {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.phase-subtitle {
  margin: 0 0 0.25rem 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--os-text-muted);
}
.phase-embodied {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
}
.phase-embodied strong {
  color: rgba(251, 191, 36, 0.9);
}
.phase-current-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  font-size: 0.75rem;
  font-weight: 600;
  color: #4ade80;
}
.phase-essence {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent);
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 0 12px 12px 0;
}
.phase-essence p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}
.phase-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.phase-weather h4,
.phase-parts h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.phase-weather ul,
.phase-parts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.phase-weather li,
.phase-parts li {
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.phase-weather li:last-child,
.phase-parts li:last-child {
  border-bottom: none;
}
/* Becoming Footer */
.becoming-footer {
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.becoming-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
  line-height: 1.6;
}
.becoming-note strong {
  color: var(--os-text-secondary);
}
/* Voltage Bands */
.voltage-bands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.voltage-band {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.voltage-band:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.voltage-band.voltage-grey {
  border-color: rgba(156, 163, 175, 0.3);
  background: rgba(156, 163, 175, 0.08);
}
.voltage-band.voltage-gold {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}
.voltage-band.voltage-redline {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}
.voltage-band-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.voltage-emoji {
  font-size: 1.25rem;
}
.voltage-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.voltage-description {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}
.voltage-action {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
}
.voltage-action strong {
  color: var(--os-text-secondary);
}
/* Energy Leaks Grid */
.energy-leaks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.leak-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}
.leak-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.leak-card.selected {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}
.leak-emoji {
  font-size: 1.5rem;
}
.leak-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--os-text-secondary);
  text-align: center;
}
/* Leak Detail */
.leak-detail {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.leak-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.leak-big-emoji {
  font-size: 2rem;
}
.leak-detail-header h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.leak-feels-like {
  margin: 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--os-text-muted);
}
.leak-detail-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.leak-throne-line {
  grid-column: 1 / -1;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  padding: 0.875rem 1rem;
}
.leak-throne-line h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.throne-line-text {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.95);
}
.leak-anchor h4,
.leak-parts h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.leak-anchor p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
}
.leak-becoming-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.leak-part-tag {
  padding: 0.25rem 0.625rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  color: var(--os-text-secondary);
}
/* 10-Second Protocol */
.ten-second-protocol {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  padding: 1.25rem;
}
.ten-second-protocol h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.protocol-desc {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}
.protocol-steps {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
}
.protocol-steps li {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
}
.protocol-anchors {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.875rem 1rem;
}
.protocol-anchors h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.protocol-anchors ul {
  margin: 0;
  padding: 0 0 0 1.25rem;
}
.protocol-anchors li {
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
/* Key Roles Grid */
.key-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.875rem;
}
.role-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.role-emoji {
  font-size: 1.5rem;
}
.role-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.role-description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  line-height: 1.5;
}
/* Light OS Section */
.light-os-section {
  background: rgba(74, 222, 128, 0.05);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.becoming-section-subtitle {
  margin: -0.25rem 0 0.5rem 0;
  font-size: 1rem;
  font-style: italic;
  color: rgba(74, 222, 128, 0.9);
}
.light-os-principles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.light-os-principle {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.principle-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4ade80;
  flex-shrink: 0;
}
.light-os-principle h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.light-os-principle p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
/* Mercy Protocol */
.mercy-protocol {
  background: rgba(236, 72, 153, 0.08);
  border: 1px solid rgba(236, 72, 153, 0.2);
  border-radius: 10px;
  padding: 1.25rem;
}
.mercy-protocol h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(236, 72, 153, 0.95);
}
.mercy-intro {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}
.mercy-protocol ol {
  margin: 0;
  padding-left: 1.5rem;
}
.mercy-protocol li {
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}
/* Definition Section */
.definition-section {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(56, 189, 248, 0.03));
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 16px;
  padding: 1.75rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(var(--accent-rgb), 0.06);
}
.definition-subtitle {
  margin: -0.25rem 0 1rem 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--os-text-muted);
}
.definition-core {
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(var(--accent-rgb), 0.95);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.definition-essence {
  margin: 0 0 1.25rem 0;
  padding: 0;
  list-style: none;
}
.definition-essence li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
.definition-essence li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: rgba(var(--accent-rgb), 0.7);
}
.keystone-vow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), rgba(0, 0, 0, 0.15));
  border-radius: 12px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
}
.keystone-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.keystone-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.95);
}
/* Spiral Section */
.spiral-section {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.05), rgba(var(--accent-rgb), 0.03));
  border: 1px solid rgba(56, 189, 248, 0.1);
  border-radius: 16px;
  padding: 1.75rem;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(56, 189, 248, 0.05);
}
.spiral-description {
  font-size: 1rem;
  color: var(--os-text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.spiral-mantra {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(56, 189, 248, 0.95);
}
/* Principles Grid */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.principle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}
.principle-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.principle-card.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.principle-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(var(--accent-rgb), 0.9);
}
.principle-short-name {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  text-align: center;
  line-height: 1.3;
}
/* Principle Detail */
.principle-detail {
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  padding: 1.25rem;
}
.principle-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.principle-number-badge {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.principle-essence {
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  line-height: 1.6;
}
.principle-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.principle-question,
.principle-mantra {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.875rem 1rem;
}
.principle-question h4,
.principle-mantra h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.principle-question p,
.principle-mantra p {
  margin: 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--os-text-secondary);
}
.principle-mantra p {
  color: rgba(var(--accent-rgb), 0.9);
}
/* Triangle Section */
.triangle-section {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.triangle-axes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.triangle-axis {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 1rem;
}
.triangle-axis h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.95);
}
.axis-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
.axis-row.risk {
  color: rgba(239, 68, 68, 0.8);
}
.axis-label {
  font-weight: 600;
  color: var(--os-text-muted);
  flex-shrink: 0;
}
.axis-integration {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
  font-style: italic;
  color: rgba(251, 191, 36, 0.9);
}
.triangle-practice {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  padding: 1rem;
}
.triangle-practice h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.triangle-practice p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--os-text-primary);
}
/* Daily Pillars Grid */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.pillar-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}
.pillar-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.pillar-emoji {
  font-size: 1.5rem;
}
.pillar-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.pillar-mantra {
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: rgba(56, 189, 248, 0.9);
}
.pillar-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pillar-row {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
.pillar-label {
  font-weight: 600;
  color: var(--os-text-muted);
  flex-shrink: 0;
}
.pillar-minimum {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  color: rgba(74, 222, 128, 0.9);
}
.pillar-minimum strong {
  color: var(--os-text-muted);
}
/* MVL Section */
.mvl-section {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.mvl-subtitle {
  margin: -0.25rem 0 0.75rem 0;
  font-size: 1rem;
  font-style: italic;
  color: rgba(239, 68, 68, 0.9);
}
.mvl-when {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.mvl-when h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mvl-when p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}
.mvl-script {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.mvl-script p {
  margin: 0;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: rgba(239, 68, 68, 0.95);
}
.mvl-checklist {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 1rem;
}
.mvl-checklist h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mvl-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mvl-item:last-child {
  border-bottom: none;
}
.mvl-pillar {
  flex-shrink: 0;
  width: 80px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.9);
  text-transform: uppercase;
}
.mvl-task {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
/* ========================================
   Journey View Styles
   ======================================== */
.journey-view {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
}
.journey-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--os-text-muted);
}
.journey-section {
  margin-bottom: 2.5rem;
}
.journey-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.journey-section-desc {
  margin: -0.5rem 0 1.25rem 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}
/* Story Summary */
.story-summary-section {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.story-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.story-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.story-card .story-emoji {
  font-size: 1.5rem;
}
.story-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}
.story-card.origin {
  border-left: 3px solid rgba(74, 222, 128, 0.5);
}
.story-card.rupture {
  border-left: 3px solid rgba(239, 68, 68, 0.5);
}
.story-card.pattern {
  border-left: 3px solid rgba(251, 191, 36, 0.5);
}
.story-card.now {
  border-left: 3px solid rgba(var(--accent-rgb), 0.5);
}
/* Heritage Section */
.heritage-section {
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}
.heritage-content {
  max-width: 600px;
  margin: 0 auto;
}
.heritage-origin {
  font-size: 1rem;
  color: var(--os-text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.heritage-identity {
  font-size: 1.125rem;
  font-weight: 500;
  font-style: italic;
  color: rgba(251, 191, 36, 0.95);
  margin: 0;
}
/* Core Wound Section */
.core-wound-section {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.core-wound-desc {
  font-size: 1rem;
  color: var(--os-text-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.core-wound-features {
  margin: 0 0 1.25rem 0;
  padding: 0;
  list-style: none;
}
.core-wound-features li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
.core-wound-features li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(239, 68, 68, 0.7);
}
.core-wound-healing {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.9375rem;
  color: rgba(74, 222, 128, 0.95);
}
.core-wound-healing strong {
  color: var(--os-text-secondary);
}
/* Arc Section */
.arc-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
}
.arc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.arc-header .journey-section-title {
  margin: 0;
}
.arc-toggle-btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.arc-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.arc-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
/* Arc Timeline */
.arc-timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.arc-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 80px;
}
.arc-node:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.arc-node.key-moment {
  border-color: rgba(var(--accent-rgb), 0.25);
}
.arc-node.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.arc-node.current {
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.4);
}
.arc-emoji {
  font-size: 1.25rem;
}
.arc-age {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.arc-phase {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  text-align: center;
}
.arc-connector {
  display: none; /* Hide connectors in wrapped layout */
}
/* Arc Detail */
.arc-detail {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 10px;
  padding: 1.25rem;
}
.arc-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.arc-detail-emoji {
  font-size: 2.5rem;
}
.arc-detail-titles {
  flex: 1;
}
.arc-detail-titles h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.arc-detail-meta {
  font-size: 0.875rem;
  color: var(--os-text-muted);
}
.arc-current-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  font-size: 0.75rem;
  font-weight: 600;
  color: #4ade80;
}
.arc-detail-description {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}
/* Patterns Section */
.patterns-section {
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.patterns-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.pattern-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 1rem;
  border-left: 3px solid rgba(251, 191, 36, 0.5);
}
.pattern-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.95);
}
.pattern-card p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
/* Key Parts Section */
.key-becoming-section {
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.key-becoming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}
.key-part-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 1rem;
  border-left: 3px solid rgba(56, 189, 248, 0.5);
}
.key-part-card h4 {
  margin: 0 0 0.375rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.key-part-born {
  margin: 0 0 0.25rem 0;
  font-size: 0.75rem;
  color: rgba(56, 189, 248, 0.9);
}
.key-part-role {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  font-style: italic;
}
/* Journey Footer */
.journey-footer {
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  text-align: center;
}
.journey-note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--os-text-muted);
  line-height: 1.7;
}
.journey-note strong {
  color: rgba(var(--accent-rgb), 0.95);
}
/* Journey Navigation */
.journey-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.journey-nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--os-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.journey-nav-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-secondary);
}
.journey-nav-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
/* Original Wholeness */
.wholeness-section {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.08), rgba(74, 222, 128, 0.02));
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.wholeness-desc {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  margin-bottom: 1rem;
}
.wholeness-traits {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wholeness-traits li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9375rem;
  color: rgba(74, 222, 128, 0.95);
  font-style: italic;
}
.wholeness-traits li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: rgba(74, 222, 128, 0.6);
}
/* Fracture Event */
.fracture-section {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.fracture-details {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.fracture-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fracture-label {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
}
.fracture-value {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.95);
}
.fracture-nature {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  margin-bottom: 1rem;
}
.fracture-message {
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid rgba(239, 68, 68, 0.5);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--os-text-primary);
}
.fracture-result {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
}
/* Impossible Equation */
.equation-section {
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.equation-desc {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  margin-bottom: 1rem;
}
.equation-demands {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.equation-demand {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.demand-source {
  font-weight: 600;
  color: rgba(251, 191, 36, 0.95);
  min-width: 70px;
}
.demand-text {
  color: var(--os-text-secondary);
  font-style: italic;
}
.equation-result {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.95);
  text-align: center;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
}
/* Parental Wounds */
.parental-wounds-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
}
.wound-card {
  margin-bottom: 1rem;
  border-radius: 10px;
  overflow: hidden;
}
.wound-card.father-wound {
  border: 1px solid rgba(56, 189, 248, 0.2);
}
.wound-card.mother-wound {
  border: 1px solid rgba(236, 72, 153, 0.2);
}
.wound-card-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.wound-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.wound-emoji {
  font-size: 1.5rem;
}
.wound-card-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.wound-theme {
  font-size: 0.8125rem;
  color: var(--os-text-muted);
}
.wound-chevron {
  color: var(--os-text-muted);
  transition: transform 0.2s ease;
}
.wound-chevron.rotated {
  transform: rotate(90deg);
}
.wound-card-content {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.1);
}
.wound-voice {
  margin: 0 0 1rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--os-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.wound-card-content h4 {
  margin: 1rem 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.wound-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wound-list li {
  padding: 0.375rem 0;
  padding-left: 1rem;
  position: relative;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}
.wound-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--os-text-muted);
}
.wound-parts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wound-part {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
.wound-part strong {
  color: rgba(var(--accent-rgb), 0.95);
}
.wound-core-belief {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}
.wound-reclamation {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 8px;
  font-size: 0.875rem;
  color: rgba(74, 222, 128, 0.95);
}
.wound-integration {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 10px;
}
.integration-icon {
  font-size: 1.25rem;
}
.wound-integration p {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(var(--accent-rgb), 0.95);
  line-height: 1.5;
}
/* Erotic Collapse */
.erotic-collapse-section {
  background: rgba(251, 146, 60, 0.06);
  border: 1px solid rgba(251, 146, 60, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.erotic-period {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(251, 146, 60, 0.95);
  margin-bottom: 0.5rem;
}
.erotic-context {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  font-style: italic;
  margin-bottom: 1.25rem;
}
.erotic-collapse-section h4 {
  margin: 1rem 0 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.erotic-list {
  margin: 0 0 1rem 0;
  padding: 0;
  list-style: none;
}
.erotic-list li {
  padding: 0.5rem 0;
  padding-left: 1.25rem;
  position: relative;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
.erotic-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(251, 146, 60, 0.6);
}
.erotic-belief {
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid rgba(251, 146, 60, 0.5);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--os-text-secondary);
}
.erotic-integration {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 10px;
}
.erotic-statement {
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin-bottom: 1rem;
}
.erotic-unlocks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.erotic-unlock {
  padding: 0.5rem 0.75rem;
  background: rgba(74, 222, 128, 0.1);
  border-radius: 6px;
  font-size: 0.875rem;
  color: rgba(74, 222, 128, 0.95);
}
/* Three Decades */
.decades-section {
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.decades-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.decade-card {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border-left: 3px solid rgba(var(--accent-rgb), 0.5);
}
.decade-range {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.95);
  text-transform: uppercase;
}
.decade-card h4 {
  margin: 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.decade-card p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
/* Why 40 */
.why-forty-section {
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.forty-bio {
  margin-bottom: 1.5rem;
}
.forty-bio > p {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  margin-bottom: 1rem;
}
.forty-halves {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.forty-half {
  flex: 1;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}
.forty-half.first {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
}
.forty-half.second {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.half-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--os-text-muted);
  margin-bottom: 0.5rem;
}
.forty-half.first .half-text {
  color: rgba(251, 191, 36, 0.95);
}
.forty-half.second .half-text {
  color: rgba(74, 222, 128, 0.95);
}
.half-text {
  font-size: 0.9375rem;
  font-weight: 500;
}
.forty-quote {
  margin: 1rem 0 0 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid rgba(74, 222, 128, 0.5);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--os-text-secondary);
}
.forty-sacred-math {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.forty-sacred-math h4 {
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  text-align: center;
}
.sacred-math-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1rem;
}
.math-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.math-value {
  font-size: 2rem;
  font-weight: 700;
  color: rgba(var(--accent-rgb), 0.95);
}
.math-label {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.math-summary {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(74, 222, 128, 0.95);
}
/* What Dies, What Lives */
.dies-lives-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
}
.dies-lives-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.dies-column,
.lives-column {
  padding: 1rem;
  border-radius: 10px;
}
.dies-column {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
}
.lives-column {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
}
.dies-column h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.95);
}
.lives-column h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(74, 222, 128, 0.95);
}
.dies-column ul,
.lives-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dies-column li,
.lives-column li {
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}
/* Soul Echoes */
.soul-echoes-section {
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.soul-echoes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.soul-echo {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border-left: 3px solid rgba(56, 189, 248, 0.5);
}
.echo-header {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.echo-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.95);
}
.echo-time {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.echo-title {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.echo-content {
  margin: 0;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  line-height: 1.6;
  font-style: italic;
}
/* Sacred Reframe */
.sacred-reframe-section {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}
.reframe-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.reframe-card {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.reframe-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.95);
}
.reframe-truth {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--os-text-secondary);
  margin-bottom: 0.75rem;
}
.reframe-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.reframe-card li {
  padding: 0.25rem 0;
  padding-left: 1rem;
  position: relative;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
.reframe-card li::before {
  content: '✦';
  position: absolute;
  left: 0;
  font-size: 0.625rem;
  color: rgba(var(--accent-rgb), 0.6);
}
/* The Vow */
.vow-section {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.03));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
}
.vow-text {
  margin: 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  font-size: 1rem;
  font-style: italic;
  color: var(--os-text-primary);
  line-height: 1.8;
  text-align: center;
}
/* Arc Detail Extended */
.arc-detail-extended {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  line-height: 1.6;
}
/* Key Part Wound Badge */
.key-part-wound {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 4px;
  font-size: 0.6875rem;
  color: rgba(239, 68, 68, 0.9);
  text-transform: uppercase;
}
/* ================================================
   GLOSSARY VIEW
   ================================================ */
.glossary-view {
  flex: 1;
  display: flex;
  overflow: hidden;
}
/* Tree panel (left) */
.glossary-tree {
  width: 260px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.glossary-search {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.glossary-search-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.glossary-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  font-family: inherit;
}
.glossary-search-input::placeholder {
  color: var(--os-text-hint);
}
.glossary-search-clear {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.125rem;
  line-height: 1;
}
.glossary-search-clear:hover {
  color: var(--os-text-secondary);
}
.glossary-tree-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.375rem 0;
}
.glossary-tree-group {
  margin-bottom: 0.125rem;
}
.glossary-tree-category {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: none;
  background: none;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.glossary-tree-category:hover {
  background: rgba(255, 255, 255, 0.04);
}
.glossary-tree-chevron {
  color: var(--os-text-hint);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.glossary-tree-chevron.expanded {
  transform: rotate(90deg);
}
.glossary-tree-cat-emoji {
  font-size: 0.85rem;
}
.glossary-tree-cat-name {
  flex: 1;
}
.glossary-tree-cat-count {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.0625rem 0.375rem;
  border-radius: 8px;
}
.glossary-tree-items {
  padding: 0.125rem 0;
}
.glossary-tree-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.3rem 0.625rem 0.3rem 2rem;
  border: none;
  background: none;
  color: var(--os-text-muted);
  font-size: 0.775rem;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.1s ease;
}
.glossary-tree-item:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}
.glossary-tree-item.active {
  color: var(--os-text-primary);
  background: rgba(var(--accent-rgb), 0.12);
}
/* Detail panel (right) */
.glossary-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0;
}
.glossary-detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.glossary-detail-emoji {
  font-size: 1.5rem;
}
.glossary-detail-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--os-text-primary);
  flex: 1;
}
.glossary-detail-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.glossary-detail-body {
  padding: 1.5rem;
}
.glossary-detail-definition {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--os-text-secondary);
}
.glossary-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--os-text-hint);
  gap: 0.5rem;
}
.glossary-detail-empty-icon {
  font-size: 2.5rem;
  opacity: 0.5;
}
.glossary-detail-empty p {
  margin: 0;
  font-size: 0.875rem;
}
.glossary-detail-empty-count {
  font-size: 0.75rem;
  color: var(--os-text-hint);
}
/* Companion visibility indicators */
.glossary-companion-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  flex-shrink: 0;
  opacity: 0.7;
  vertical-align: middle;
}
.glossary-tree-item:hover .glossary-companion-dot,
.glossary-tree-item.active .glossary-companion-dot {
  opacity: 1;
}
/* Filter bar */
.glossary-filter-bar {
  display: flex;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.glossary-filter-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: none;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.glossary-filter-btn:hover {
  color: var(--os-text-muted);
  border-color: rgba(255, 255, 255, 0.15);
}
.glossary-filter-btn.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
}
.glossary-filter-btn .glossary-companion-dot {
  margin-left: 0;
}
.glossary-filter-count {
  font-size: 0.6rem;
  opacity: 0.6;
}
/* Detail companion badge (toggleable) */
.glossary-detail-companion-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid;
}
.glossary-detail-companion-badge .glossary-companion-dot {
  margin-left: 0;
}
.glossary-detail-companion-badge.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
}
.glossary-detail-companion-badge.inactive {
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.glossary-detail-companion-badge:hover {
  opacity: 0.85;
}
/* ================================================
   STRATEGY VIEW
   ================================================ */
.strategy-view {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.strategy-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--os-text-muted);
}
.strategy-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}
.strategy-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0 0 1rem 0;
}
.strategy-section-title .section-icon {
  font-size: 1.125rem;
}
/* Phase Section */
.phase-card {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  padding: 1rem;
}
.phase-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.phase-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--accent);
}
.phase-horizon {
  color: var(--os-text-muted);
  font-size: 0.875rem;
}
.phase-focus {
  margin: 0 0 0.5rem 0;
  color: var(--os-text-secondary);
  font-size: 0.9375rem;
}
.phase-transition {
  margin: 0;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}
/* Bets Section */
.bets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}
.bet-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.bet-card.primary {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
}
.bet-card.non-negotiable {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
}
.bet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bet-name {
  font-weight: 600;
  color: var(--os-text-primary);
}
.bet-allocation {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.9);
}
.bet-role {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
}
.bet-description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
.bet-deliverable {
  margin: 0;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  font-style: italic;
}
/* Capacity Section */
.capacity-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.capacity-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}
.capacity-stat .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}
.capacity-stat .stat-label {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.capacity-constraints h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  margin: 0 0 0.5rem 0;
}
.capacity-constraints ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}
.capacity-constraints li {
  margin-bottom: 0.25rem;
}
/* Runway Section */
.runway-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.runway-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  flex: 1;
}
.runway-stat.primary {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.runway-stat .stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--os-text-primary);
}
.runway-stat.primary .stat-value {
  color: #4ade80;
}
.runway-stat .stat-label {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.runway-sources {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.runway-source {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.8125rem;
}
.source-name {
  color: var(--os-text-secondary);
}
.source-amount {
  color: var(--os-text-primary);
  font-weight: 500;
}
/* Decisions Section */
.decisions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.decisions-column h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
}
.decisions-column.decided h4 {
  color: #4ade80;
}
.decisions-column.pending h4 {
  color: #fbbf24;
}
.decision-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.decision-q {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
.decision-a {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  font-weight: 500;
}
.decision-deadline {
  font-size: 0.75rem;
  color: #fbbf24;
}
/* Exit Paths Section */
.exits-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.exit-path {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.exit-name {
  font-weight: 600;
  color: var(--os-text-primary);
  font-size: 0.875rem;
}
.exit-desc {
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}
.exit-when {
  color: var(--os-text-muted);
  font-size: 0.75rem;
  text-align: right;
}
/* Filters Section */
.filters-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.filter-item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.filter-vow {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.8125rem;
}
.filter-question {
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
}
.filter-redflag {
  color: rgba(239, 68, 68, 0.8);
  font-size: 0.75rem;
}
/* Strategy Footer */
.strategy-footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.strategy-updated {
  margin: 0;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
/* ================================================
   NORTH STAR VIEW
   ================================================ */
.northstar-view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0; /* Important for flex children to scroll */
}
.northstar-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--os-text-muted);
}
/* Hero Section */
.northstar-hero {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.03));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 16px;
}
.hero-archetype {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.hero-icon {
  font-size: 2.5rem;
}
.hero-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}
.hero-statement {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--os-text-primary);
  margin: 0 0 0.75rem 0;
}
.hero-desc {
  font-size: 0.9375rem;
  color: var(--os-text-muted);
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}
/* Sections */
.northstar-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}
.northstar-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.northstar-section-header.clickable {
  cursor: pointer;
}
.northstar-section-header.clickable:hover {
  opacity: 0.8;
}
.section-toggle {
  font-size: 1.25rem;
  color: var(--os-text-muted);
  font-weight: 300;
}
.northstar-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0 0 1rem 0;
}
.northstar-section-header + .vision-grid,
.northstar-section-header + .phases-nav {
  margin-top: 1rem;
}
/* Vision Board - Paint the Picture */
.vision-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.vision-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  gap: 0.375rem;
  transition: all 0.2s ease;
}
.vision-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(251, 191, 36, 0.2);
  transform: translateY(-2px);
}
.vision-icon {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}
.vision-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}
.vision-desc {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  margin: 0;
  line-height: 1.4;
}
.vision-phase {
  font-size: 0.625rem;
  color: rgba(var(--accent-rgb), 0.8);
  margin-top: 0.25rem;
}
/* Phase Navigator */
.phases-nav {
  display: flex;
  gap: 0.5rem;
}
.phase-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.phase-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.phase-nav-btn.current {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}
.phase-nav-btn.selected {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.12);
}
.phase-nav-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.phase-nav-btn.current .phase-nav-number {
  background: #fbbf24;
  color: #000;
}
.phase-nav-btn.selected .phase-nav-number {
  background: var(--accent);
  color: #000;
}
.phase-nav-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}
.phase-nav-time {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.phase-nav-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #fbbf24;
  color: #000;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}
/* Phase Detail */
.phase-detail-section {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
  border-color: rgba(var(--accent-rgb), 0.2);
}
.phase-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.phase-detail-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.current-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border-radius: 4px;
}
.phase-detail-timeframe {
  font-size: 0.875rem;
  color: var(--os-text-muted);
}
.phase-detail-focus {
  margin: 0 0 1.25rem 0;
  font-size: 1rem;
  color: var(--os-text-secondary);
}
/* Phase Goals Grid */
.phase-goals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.phase-goal-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.875rem;
}
.phase-goal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.phase-goal-icon {
  font-size: 1rem;
}
.phase-goal-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}
.phase-goal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.phase-goal-item {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  line-height: 1.4;
}
.goal-bullet {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}
/* Phase Focus Areas */
.phase-focus-areas {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.focus-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}
.focus-icon {
  font-size: 1rem;
}
.focus-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.focus-value {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
/* Pillars Section */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.pillar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  gap: 0.5rem;
  transition: all 0.15s ease;
}
.pillar-card:hover {
  background: rgba(255, 255, 255, 0.08);
}
.pillar-icon {
  font-size: 1.75rem;
}
.pillar-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--os-text-primary);
}
.pillar-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin: 0;
}
/* Win Condition Section */
.win-section .northstar-section-title {
  margin-bottom: 1rem;
}
.win-timeline {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.8);
  background: rgba(251, 191, 36, 0.1);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
}
.win-markers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.win-marker {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  transition: all 0.15s ease;
}
.win-marker:hover {
  background: rgba(255, 255, 255, 0.06);
}
.marker-bullet {
  color: rgba(251, 191, 36, 0.7);
  font-size: 0.625rem;
  margin-top: 0.25rem;
}
.marker-text {
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
/* Desires Section */
.desires-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.desire-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  transition: all 0.15s ease;
}
.desire-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.desire-name {
  font-weight: 500;
  color: var(--os-text-primary);
  font-size: 0.875rem;
}
.desire-pull {
  display: flex;
  gap: 3px;
}
.pull-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.pull-dot.active {
  background: linear-gradient(135deg, #f97316, #fbbf24);
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}
.desire-feasibility {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: capitalize;
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
}
.desire-feasibility.high {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}
.desire-feasibility.medium {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
.desire-feasibility.low {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}
.desire-phase {
  font-size: 0.75rem;
  color: rgba(var(--accent-rgb), 0.8);
  font-weight: 500;
}
/* Key Dates Timeline */
.dates-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 1rem;
}
.dates-timeline::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
}
.date-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0;
  position: relative;
}
.date-marker {
  position: absolute;
  left: -1rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-3px);
}
.date-item.professional .date-marker {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}
.date-item.life .date-marker {
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}
.date-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.date-value {
  font-family: monospace;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  min-width: 60px;
}
.date-event {
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}
/* North Star Footer */
.northstar-footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.northstar-updated {
  margin: 0;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
/* ================================================
   ROADMAP VIEW - Video Game Style
   ================================================ */
.roadmap-view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0; /* Important for flex children to scroll */
}
.roadmap-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--os-text-muted);
}
/* Hero - The Arc */
.roadmap-hero {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 16px;
  padding: 1.5rem;
}
.arc-journey {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.arc-node {
  flex: 1;
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
}
.arc-node.past {
  background: rgba(107, 114, 128, 0.2);
}
.arc-node.present {
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.arc-node.future {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.25);
}
.arc-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
  margin-bottom: 0.5rem;
}
.arc-node.present .arc-label {
  color: var(--accent);
}
.arc-node.future .arc-label {
  color: #fbbf24;
}
.arc-node p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
.arc-connector {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}
.arc-line {
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.arc-arrow {
  font-size: 1rem;
  color: var(--os-text-muted);
}
.arc-quote {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-style: italic;
  font-size: 0.875rem;
  color: rgba(251, 191, 36, 0.8);
}
/* Phase Progress Path */
.roadmap-path {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  overflow-x: auto;
  flex-shrink: 0; /* Don't shrink this section */
}
.path-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: min-content;
}
.path-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.path-phase:hover {
  transform: translateY(-4px);
}
.phase-node {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phase-icon {
  font-size: 2rem;
  z-index: 2;
}
.phase-progress-ring {
  position: absolute;
  inset: 0;
}
.phase-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2.5;
}
.ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}
.path-phase.current .ring-fill {
  stroke: #fbbf24;
}
.phase-percent {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.625rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.8);
  color: var(--accent);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}
.path-phase.current .phase-percent {
  color: #fbbf24;
}
.phase-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}
.phase-number {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
}
.phase-label .phase-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--os-text-primary);
}
.path-phase.current .phase-label .phase-name {
  color: #fbbf24;
}
.path-phase.selected .phase-label .phase-name {
  color: var(--accent);
}
.phase-time {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.path-connector {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.5rem;
  margin-top: 28px;
}
.connector-line {
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.path-connector.unlocked .connector-line {
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.3));
}
.connector-lock {
  font-size: 0.75rem;
  color: var(--os-text-hint);
}
.path-connector.unlocked .connector-lock {
  color: var(--accent);
}
/* Phase Detail */
.roadmap-phase-detail {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  padding: 1.25rem;
}
.phase-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.phase-title-group {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.phase-big-icon {
  font-size: 2.5rem;
}
.phase-title-group h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.phase-title-group .phase-focus {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}
.phase-stats {
  display: flex;
  gap: 1.25rem;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}
.stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
}
/* Milestones Grid */
.milestones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.milestone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  position: relative;
  transition: all 0.2s ease;
}
.milestone-card:hover {
  background: rgba(255, 255, 255, 0.06);
}
.milestone-card.complete {
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.08);
}
.milestone-card.in-progress {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}
.milestone-card.locked {
  opacity: 0.5;
}
.milestone-status {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.status-icon {
  font-size: 0.75rem;
}
.milestone-card.complete .status-icon {
  color: #4ade80;
}
.milestone-card.in-progress .status-icon {
  color: #fbbf24;
}
.milestone-card.locked .status-icon {
  color: var(--os-text-hint);
}
.milestone-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.milestone-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  margin-bottom: 0.25rem;
}
.milestone-desc {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  line-height: 1.4;
}
/* Roadmap Sections */
.roadmap-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}
.roadmap-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.roadmap-section-header.clickable {
  cursor: pointer;
}
.roadmap-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0;
}
/* Becoming Inner Path */
.becoming-path {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.becoming-node {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  position: relative;
}
.becoming-node.complete {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.becoming-node.current {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.becoming-node.emerging {
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.becoming-node.future {
  opacity: 0.5;
}
.becoming-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}
.becoming-icon {
  font-size: 1.25rem;
}
.becoming-number {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--os-text-muted);
}
.becoming-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.becoming-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}
.becoming-energy {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}
.becoming-work {
  font-size: 0.625rem;
  font-style: italic;
  color: rgba(var(--accent-rgb), 0.7);
}
.becoming-connector {
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  position: absolute;
  right: -16px;
  top: 50%;
}
/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.product-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 1rem;
}
.product-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}
.product-icon {
  font-size: 1.5rem;
}
.product-name {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--os-text-primary);
}
.product-role {
  font-size: 0.6875rem;
  color: rgba(var(--accent-rgb), 0.8);
}
.product-desc {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.product-phases {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.product-phase {
  display: flex;
  gap: 0.5rem;
  font-size: 0.6875rem;
}
.pp-num {
  font-weight: 700;
  color: var(--os-text-muted);
  min-width: 20px;
}
.pp-text {
  color: var(--os-text-secondary);
}
/* Flywheel */
.flywheel-section {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.08), rgba(var(--accent-rgb), 0.08));
}
.flywheel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 1rem;
  padding: 1rem;
}
.flywheel-node {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.flywheel-icon {
  font-size: 1.25rem;
}
.flywheel-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}
.flywheel-arrow {
  color: rgba(74, 222, 128, 0.6);
  font-size: 1rem;
  margin: 0 0.25rem;
}
.flywheel-loop {
  font-size: 1.5rem;
  color: rgba(74, 222, 128, 0.5);
  margin-left: 0.5rem;
}
/* Roadmap Footer */
.roadmap-footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.roadmap-updated {
  margin: 0;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
/* ================================================
   SCROLLBAR STYLING
   ================================================ */
/* All scrollable views */
.becoming-tree-content::-webkit-scrollbar,
.becoming-detail-content::-webkit-scrollbar,
.becoming-edit-form::-webkit-scrollbar,
.council-messages::-webkit-scrollbar,
.becoming-view::-webkit-scrollbar,
.journey-view::-webkit-scrollbar,
.strategy-view::-webkit-scrollbar,
.northstar-view::-webkit-scrollbar,
.roadmap-view::-webkit-scrollbar {
  width: 5px;
}
.becoming-tree-content::-webkit-scrollbar-track,
.becoming-detail-content::-webkit-scrollbar-track,
.becoming-edit-form::-webkit-scrollbar-track,
.council-messages::-webkit-scrollbar-track,
.becoming-view::-webkit-scrollbar-track,
.journey-view::-webkit-scrollbar-track,
.strategy-view::-webkit-scrollbar-track,
.northstar-view::-webkit-scrollbar-track,
.roadmap-view::-webkit-scrollbar-track {
  background: transparent;
}
.becoming-tree-content::-webkit-scrollbar-thumb,
.becoming-detail-content::-webkit-scrollbar-thumb,
.becoming-edit-form::-webkit-scrollbar-thumb,
.council-messages::-webkit-scrollbar-thumb,
.becoming-view::-webkit-scrollbar-thumb,
.journey-view::-webkit-scrollbar-thumb,
.strategy-view::-webkit-scrollbar-thumb,
.northstar-view::-webkit-scrollbar-thumb,
.roadmap-view::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.becoming-tree-content::-webkit-scrollbar-thumb:hover,
.becoming-detail-content::-webkit-scrollbar-thumb:hover,
.becoming-edit-form::-webkit-scrollbar-thumb:hover,
.council-messages::-webkit-scrollbar-thumb:hover,
.becoming-view::-webkit-scrollbar-thumb:hover,
.journey-view::-webkit-scrollbar-thumb:hover,
.strategy-view::-webkit-scrollbar-thumb:hover,
.northstar-view::-webkit-scrollbar-thumb:hover,
.roadmap-view::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* ==================== CONTEXT VIEW ==================== */
.context-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.context-loading,
.context-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  color: var(--os-text-muted);
}
.context-loading .spinning {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.context-error button {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--os-text-secondary);
  cursor: pointer;
}
.context-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.context-mode-tabs {
  display: flex;
  gap: 0.5rem;
}
.context-mode-tab {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.context-mode-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.context-mode-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.context-stats {
  display: flex;
  gap: 0.5rem;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
  margin-left: auto;
}
.context-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.context-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.context-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.context-sections-list {
  width: 420px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}
.context-section-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.15s ease;
}
.context-section-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.context-section-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-left: 3px solid var(--accent);
}
.context-section-title {
  font-size: 0.875rem;
  color: var(--os-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.context-section-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.context-section-source {
  font-size: 0.7rem;
  opacity: 0.6;
}
.context-section-size {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.context-section-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.context-section-header {
  margin-bottom: 1rem;
}
.context-content-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.context-section-source-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.context-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.context-source-badge.file {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}
.context-source-badge.dynamic {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.context-source-badge.agent {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.context-source-badge.mobile {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.context-source-path {
  font-family: 'SF Mono', monospace;
  font-size: 0.7rem;
  color: var(--os-text-muted);
}
.context-source-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  font-style: italic;
}
/* Legend in placeholder */
.context-legend {
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.context-legend h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  font-weight: 500;
}
.context-legend-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.context-legend-item:last-child {
  margin-bottom: 0;
}
.context-content-text {
  margin: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
  flex: 1;
}
.context-content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  gap: 1.5rem;
  color: var(--os-text-muted);
}
.context-content-placeholder p {
  margin: 0.5rem 0;
}
.context-hint {
  font-size: 0.875rem;
  max-width: 400px;
}
/* Prompt summary header */
.context-prompt-summary {
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.context-prompt-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  margin-bottom: 0.35rem;
}
.context-prompt-total {
  font-size: 0.75rem;
  color: var(--os-text-hint);
  font-family: 'SF Mono', monospace;
}
/* Summary grid cards */
.context-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.context-summary-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left-width: 3px;
}
.context-summary-card:hover {
  background: rgba(255, 255, 255, 0.07);
}
.context-summary-card.agent {
  border-left-color: #a78bfa;
}
.context-summary-card.dynamic {
  border-left-color: #fbbf24;
}
.context-summary-card.file {
  border-left-color: #4ade80;
}
.context-summary-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.context-summary-icon {
  font-size: 0.9rem;
}
.context-summary-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  flex: 1;
}
.context-summary-size {
  font-size: 0.75rem;
  font-family: 'SF Mono', monospace;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.context-summary-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin-bottom: 0.25rem;
}
.context-summary-count {
  font-size: 0.7rem;
  color: var(--os-text-hint);
}
.context-select-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  margin: 0;
}
/* Grouped Sections View */
.context-sections-grouped {
  padding: 0.5rem;
}
.context-section-group {
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
}
.context-section-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem 0.25rem 1rem;
}
.context-group-stats {
  font-size: 0.7rem;
  color: var(--os-text-muted);
}
.context-group-desc {
  margin: 0 0 0.5rem 0;
  padding: 0 1rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.context-sections-grouped .context-section-item {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.context-sections-grouped .context-section-item:last-child {
  border-bottom: none;
}
.context-sections-grouped .context-section-meta {
  width: 100%;
  justify-content: space-between;
}
.context-sections-grouped .context-section-path {
  font-family: 'SF Mono', monospace;
  font-size: 0.65rem;
  color: var(--os-text-hint);
}
/* Explanation in placeholder */
.context-explanation {
  text-align: left;
  max-width: 500px;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}
.context-explanation > p:first-child {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--os-text-secondary);
}
.context-explanation-section {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.context-explanation-section:has(.context-source-badge.agent) {
  border-left-color: var(--accent);
}
.context-explanation-section:has(.context-source-badge.dynamic) {
  border-left-color: #fbbf24;
}
.context-explanation-section:has(.context-source-badge.file) {
  border-left-color: #4ade80;
}
.context-explanation-section .context-source-badge {
  margin-bottom: 0.5rem;
}
.context-explanation-section p {
  margin: 0.25rem 0;
  font-size: 0.8rem;
  color: var(--os-text-muted);
}
.context-explanation-section code {
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  color: var(--os-text-secondary);
}
.context-explanation-size {
  font-size: 0.7rem !important;
  color: var(--os-text-muted) !important;
  font-style: italic;
}
.context-explanation-note {
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem !important;
  color: var(--os-text-muted) !important;
}
/* Scrollbar for context view */
.context-sections-list::-webkit-scrollbar,
.context-section-content::-webkit-scrollbar {
  width: 6px;
}
.context-sections-list::-webkit-scrollbar-track,
.context-section-content::-webkit-scrollbar-track {
  background: transparent;
}
.context-sections-list::-webkit-scrollbar-thumb,
.context-section-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.context-sections-list::-webkit-scrollbar-thumb:hover,
.context-section-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
/* View mode tabs (Sections / Files) */
.context-view-tabs {
  display: flex;
  gap: 0.25rem;
}
.context-view-tab {
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.context-view-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.context-view-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
/* Files list */
.context-files-list {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}
.context-files-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--os-text-muted);
  padding: 2rem;
}
.context-files-empty code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}
.context-file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: default;
  flex-wrap: wrap;
}
.context-file-item .context-file-key {
  flex: 1;
  min-width: 0;
}
.context-file-item .context-file-path {
  display: none;
}
.context-file-item.missing {
  opacity: 0.5;
  border-color: rgba(239, 68, 68, 0.3);
}
.context-file-key {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--os-text-primary);
  min-width: 140px;
}
.context-file-path {
  flex: 1;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-file-size {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  min-width: 50px;
  text-align: right;
}
.context-file-item.missing .context-file-size {
  color: rgba(239, 68, 68, 0.7);
}
.context-file-source {
  font-size: 1rem;
  min-width: 24px;
  text-align: center;
}
.context-file-item.dynamic {
  background: rgba(56, 189, 248, 0.05);
  border-color: rgba(56, 189, 248, 0.15);
}
.context-file-item.dynamic .context-file-size {
  color: rgba(56, 189, 248, 0.7);
}
.context-file-item.clickable {
  cursor: pointer;
}
.context-file-item.clickable:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.context-file-item.clickable:hover .context-file-path {
  color: var(--accent);
}
.context-file-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.context-file-item.selected .context-file-key {
  color: var(--accent);
}
/* File content panel */
.context-file-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.context-file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.context-file-actions {
  display: flex;
  gap: 0.5rem;
}
.context-file-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.context-file-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}
.context-file-btn.save {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}
.context-file-btn.save:hover {
  background: rgba(var(--accent-rgb), 0.3);
}
.context-file-btn.cancel {
  color: var(--os-text-muted);
}
.context-file-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.context-file-path-display {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  margin-bottom: 0.75rem;
  font-family: 'SF Mono', monospace;
}
.context-file-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1;
  color: var(--os-text-muted);
}
.context-file-editor {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.75rem;
  color: var(--os-text-primary);
  font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  resize: none;
  overflow: auto;
}
.context-file-editor:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}
/* Context Flow View */
.context-flow {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}
.context-flow-diagram {
  max-width: 700px;
  margin: 0 auto;
}
.context-flow-diagram h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--os-text-primary);
  text-align: center;
}
.flow-stage {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
}
.flow-stage.final {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.flow-stage.messages {
  background: rgba(56, 189, 248, 0.05);
  border-color: rgba(56, 189, 248, 0.2);
  border-style: dashed;
}
.flow-stage-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.flow-stage-num {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.flow-stage-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--os-text-primary);
  flex: 1;
}
.flow-stage-content {
  padding-left: 36px;
}
.flow-stage-content p {
  margin: 0 0 0.5rem 0;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
}
.flow-stage-content code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: 'SF Mono', monospace;
}
.flow-detail {
  font-style: italic;
  color: var(--os-text-muted) !important;
}
.flow-arrow {
  text-align: center;
  font-size: 1.25rem;
  color: var(--os-text-hint);
  padding: 0.25rem 0;
}
.flow-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.flow-section-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.flow-section-tag:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.flow-section-tag.editable {
  border-color: rgba(74, 222, 128, 0.2);
}
.flow-section-tag.editable:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.flow-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.flow-item {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  padding: 0.4rem 0.6rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
.flow-item strong {
  color: var(--os-text-secondary);
  min-width: 100px;
}
.flow-item span {
  color: var(--os-text-muted);
}
.flow-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--os-text-muted);
}
.flow-stats strong {
  color: var(--accent);
}
/* Full Prompt View */
.context-full-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem;
}
.context-full-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.context-full-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.context-full-actions {
  display: flex;
  gap: 0.5rem;
}
.context-full-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: var(--os-text-muted);
}
.context-full-stats strong {
  color: var(--os-text-secondary);
}
.context-full-text {
  flex: 1;
  margin: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
}
/* =========================
   Parts Map
   ========================= */
.becoming-map-card {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.becoming-map-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.4), rgba(var(--accent-rgb), 0.1), transparent);
}
.becoming-map-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(var(--accent-rgb), 0.7);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
/* Parts grid — chips wrap in a flow layout */
.becoming-map-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.becoming-map-chip {
  flex: 1 1 calc(50% - 4px);
  min-width: 160px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}
.becoming-map-chip:hover {
  border-color: rgba(var(--accent-rgb), 0.2);
}
.becoming-map-chip-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.becoming-map-chip-emoji {
  font-size: 1rem;
  line-height: 1;
}
.becoming-map-chip-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--os-text-primary);
  letter-spacing: 0.01em;
}
.becoming-map-chip-expression {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.45;
  font-style: italic;
}
/* Throne status */
.becoming-map-throne {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.45;
}
.becoming-map-throne.present {
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.12);
}
.becoming-map-throne.absent {
  background: rgba(251, 146, 60, 0.06);
  border: 1px solid rgba(251, 146, 60, 0.12);
}
.becoming-map-throne-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  line-height: 1;
}
/* Stirring — something new emerging */
.becoming-map-stirring {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 8px;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.45;
}
.becoming-map-stirring-label {
  color: rgba(var(--accent-rgb), 0.6);
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
/* Proposed new parts/facets */
.becoming-map-proposed {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(250, 204, 21, 0.04);
  border: 1px solid rgba(250, 204, 21, 0.1);
  border-radius: 8px;
}
.becoming-map-proposed-label {
  color: rgba(250, 204, 21, 0.6);
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.becoming-map-proposed-item {
  padding: 6px 0;
}
.becoming-map-proposed-item + .becoming-map-proposed-item {
  border-top: 1px solid rgba(250, 204, 21, 0.06);
}
.becoming-map-proposed-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.becoming-map-proposed-type {
  font-size: 0.58rem;
  color: rgba(250, 204, 21, 0.45);
  background: rgba(250, 204, 21, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.becoming-map-proposed-count {
  font-size: 0.58rem;
  color: rgba(250, 204, 21, 0.5);
  background: rgba(250, 204, 21, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: auto;
}
.becoming-map-proposed-count.highlighted {
  color: rgba(245, 158, 11, 0.9);
  background: rgba(245, 158, 11, 0.15);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.2);
}
.becoming-map-proposed-item.recurring {
  background: rgba(245, 158, 11, 0.06);
  border-radius: 6px;
  padding: 6px 8px;
}
/* Loading skeleton with shimmer */
.becoming-map-card.becoming-map-loading {
  background: rgba(var(--accent-rgb), 0.03);
}
.becoming-map-card.becoming-map-loading .becoming-map-header {
  color: rgba(var(--accent-rgb), 0.4);
}
.becoming-map-skeleton {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.becoming-map-skeleton-chip {
  height: 52px;
  flex: 1 1 calc(50% - 4px);
  min-width: 140px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.04) 25%, rgba(var(--accent-rgb), 0.08) 50%, rgba(var(--accent-rgb), 0.04) 75%);
  background-size: 200% 100%;
  animation: becoming-map-shimmer 1.5s infinite ease-in-out;
}
.becoming-map-skeleton-chip.short {
  flex: 0 1 calc(50% - 4px);
}
@keyframes becoming-map-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Parts Map — inline in council carousel */
.council-theme-parts {
  --council-accent: rgba(var(--accent-rgb), 0.25);
  --council-accent-text: #c084fc;
  --council-accent-bg: rgba(var(--accent-rgb), 0.08);
}
.becoming-map-card-inline {
  padding: 0.5rem 0;
}
.becoming-map-card-inline .becoming-map-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--os-text-muted);
  margin-bottom: 0.5rem;
}
.becoming-map-card-inline .becoming-map-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.6rem;
}
.becoming-map-card-inline .becoming-map-chip {
  flex: 0 1 calc(50% - 3px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
}
.becoming-map-card-inline .becoming-map-chip-top {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.becoming-map-card-inline .becoming-map-chip-emoji {
  font-size: 0.85rem;
}
.becoming-map-card-inline .becoming-map-chip-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.becoming-map-card-inline .becoming-map-chip-expression {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  font-style: italic;
  line-height: 1.3;
}
.becoming-map-card-inline .becoming-map-throne {
  font-size: 0.68rem;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.becoming-map-card-inline .becoming-map-throne.present {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  color: #4ade80;
}
.becoming-map-card-inline .becoming-map-throne.absent {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
.becoming-map-card-inline .becoming-map-stirring,
.becoming-map-card-inline .becoming-map-proposed {
  font-size: 0.68rem;
  color: var(--os-text-muted);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  margin-bottom: 0.4rem;
}
.becoming-map-card-inline .becoming-map-proposed {
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.1);
}
.becoming-map-card-inline .becoming-map-skeleton {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.becoming-map-card-inline .becoming-map-skeleton-chip {
  flex: 0 1 calc(50% - 3px);
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: becoming-map-shimmer 1.5s infinite ease-in-out;
}
.council-dot.becoming-dot {
  background: rgba(var(--accent-rgb), 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  width: 6px;
  height: 6px;
}
.council-dot.becoming-dot.active {
  background: #c084fc;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}
/* Parts Map — toggle button */
.becoming-map-section {
  padding: 0 0.875rem 0.5rem;
}
button.becoming-map-toggle {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.7rem;
  font-weight: 500;
  font-family: inherit;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.becoming-map-toggle:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: #c084fc;
}
.becoming-map-toggle.expanded {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: #c084fc;
}
.becoming-map-toggle.loading {
  animation: becoming-map-edge-pulse 2s infinite ease-in-out;
}
.becoming-map-toggle-count {
  background: rgba(var(--accent-rgb), 0.2);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 0.6rem;
}
.becoming-map-toggle-chevron {
  transition: transform 0.2s;
  opacity: 0.5;
}
.becoming-map-toggle-chevron.flipped {
  transform: rotate(180deg);
}
/* Parts Map — floating edge button (unused, kept for reference) */
button.becoming-map-edge-btn {
  position: absolute !important;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 0 8px 8px 0;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-left: 1px solid rgba(var(--accent-rgb), 0.15);
  color: #c084fc;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
  pointer-events: auto;
}
button.becoming-map-edge-btn:hover {
  opacity: 1;
  background: rgba(var(--accent-rgb), 0.35);
}
button.becoming-map-edge-btn.loading {
  animation: becoming-map-edge-pulse 2s infinite ease-in-out;
}
button.becoming-map-edge-btn.ready {
  opacity: 0.8;
}
@keyframes becoming-map-edge-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}
/* ============================================================
   LIGHT THEME OVERRIDES — Comprehensive
   ============================================================
   Strategy: Use broad cascade overrides to catch the 400+ white
   text declarations, then targeted overrides for special elements.
   ============================================================ */
/* ---- BROAD CASCADE: catch all white text/borders/backgrounds ---- */
/* All text inside the app: force dark colors via inheritance */
body.light .becoming-app {
  /* Use a solid light canvas so chat cards don't sit on a gray host surface. */
  background: #ffffff !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Keep Companion surfaces on the same white base for visual consistency. */
body.light .becoming-app .becoming-content,
body.light .becoming-app .council-chat,
body.light .becoming-app .council-chat-body,
body.light .becoming-app .council-chat-main,
body.light .becoming-app .council-messages {
  background: #ffffff !important;
}
/* Nuclear override: force ALL text inside the app to dark.
   This catches the 400+ selectors with hardcoded rgba(255,255,255,...).
   Specific elements with intentional colors get restored below. */
body.light .becoming-app *:not(.section-icon):not([class*="emoji"]):not([class*="badge"]) {
  color: inherit !important;
}
/* Restore specific colored text */
body.light .becoming-app .definition-core { color: var(--accent) !important; }
body.light .becoming-app .spiral-mantra { color: rgba(30, 140, 200, 0.95) !important; }
body.light .becoming-app .north-star-statement { color: rgba(180, 130, 0, 0.95) !important; }
body.light .becoming-app .heritage-identity { color: rgba(180, 130, 0, 0.95) !important; }
body.light .becoming-app .north-star-wins li::before { color: rgba(22, 163, 74, 0.8) !important; }
body.light .becoming-app .definition-essence li::before { color: var(--accent) !important; }
body.light .becoming-app .council-mode-tab.active { color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important; }
body.light .becoming-app .journey-nav-btn.active { color: var(--accent) !important; }
body.light .becoming-app .phase-nav-btn.active { color: var(--accent) !important; }
body.light .becoming-app .context-view-tab.active { color: var(--accent) !important; }
body.light .becoming-app .context-mode-tab.active { color: var(--accent) !important; }
body.light .becoming-app .council-becoming-map-btn { color: var(--accent) !important; }
body.light .becoming-app .council-stop-btn { color: #dc2626 !important; }
body.light .becoming-app .becoming-edit-actions .save-btn { color: var(--accent) !important; }
body.light .becoming-app .becoming-map-header { color: rgba(var(--accent-rgb), 0.8) !important; }
body.light .becoming-app .flow-stats strong { color: var(--accent) !important; }
body.light .becoming-app .keystone-label { color: var(--os-text-muted, rgba(60, 60, 80, 0.55)) !important; }
body.light .becoming-app .council-toggle-count { color: white !important; }
body.light .becoming-app .council-toggle-btn.active { color: var(--accent) !important; }
/* ---- COUNCIL CARDS: light theme ---- */
body.light .becoming-app .council-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
  color: rgba(20, 20, 30, 0.9) !important;
}
body.light .becoming-app .council-card-header {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .becoming-app .council-card-duration {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .becoming-app .council-card-time {
  color: rgba(60, 60, 80, 0.3) !important;
}
body.light .becoming-app .council-card-model {
  color: rgba(20, 20, 30, 0.6) !important;
}
body.light .becoming-app .council-card-position {
  color: rgba(60, 60, 80, 0.45) !important;
}
body.light .becoming-app .council-card-body {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .becoming-app .council-card-nav button {
  color: rgba(60, 60, 80, 0.5) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .becoming-app .council-card-nav button:hover:not(:disabled) {
  color: rgba(20, 20, 30, 0.8) !important;
  background: rgba(0, 0, 0, 0.08) !important;
}
body.light .becoming-app .council-card-footer {
  background: rgba(0, 0, 0, 0.015) !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}
body.light .becoming-app .council-nav-divider {
  background: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .council-nav-arrow {
  color: rgba(0, 0, 0, 0.35) !important;
}
body.light .becoming-app .council-nav-arrow:hover:not(:disabled) {
  color: rgba(0, 0, 0, 0.7) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
body.light .becoming-app .council-floating-nav-label {
  color: rgba(0, 0, 0, 0.4) !important;
}
body.light .becoming-app .council-floating-nav-label.is-picked {
  color: #16a34a !important;
}
body.light .becoming-app .council-floating-nav-count {
  color: rgba(0, 0, 0, 0.3) !important;
}
body.light .becoming-app .council-floating-pick {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.18) !important;
}
body.light .becoming-app .council-card-rating .council-star {
  color: rgba(0, 0, 0, 0.15) !important;
}
body.light .becoming-app .council-card-rating .council-star.filled {
  color: #d97706 !important;
}
body.light .becoming-app .council-dot {
  background: rgba(0, 0, 0, 0.12) !important;
}
body.light .becoming-app .council-dot.active {
  background: var(--council-accent-text, #a78bfa) !important;
}
/* Light theme model accent colors — darker for readability on white */
body.light .becoming-app .council-theme-claude { --council-accent: rgba(var(--accent-rgb), 0.2); --council-accent-text: var(--accent-dark, #7c3aed); --council-accent-bg: rgba(var(--accent-rgb), 0.06); }
body.light .becoming-app .council-theme-gemini { --council-accent: rgba(14, 116, 188, 0.2); --council-accent-text: #0e74bc; --council-accent-bg: rgba(14, 116, 188, 0.06); }
body.light .becoming-app .council-theme-openai { --council-accent: rgba(22, 163, 74, 0.2); --council-accent-text: #16a34a; --council-accent-bg: rgba(22, 163, 74, 0.06); }
body.light .becoming-app .council-theme-deepseek { --council-accent: rgba(180, 130, 0, 0.2); --council-accent-text: #b48200; --council-accent-bg: rgba(180, 130, 0, 0.06); }
body.light .becoming-app .council-theme-grok { --council-accent: rgba(220, 38, 38, 0.2); --council-accent-text: #dc2626; --council-accent-bg: rgba(220, 38, 38, 0.06); }
body.light .becoming-app .council-theme-default { --council-accent: rgba(0, 0, 0, 0.1); --council-accent-text: rgba(60, 60, 80, 0.7); --council-accent-bg: rgba(0, 0, 0, 0.03); }
/* Light theme tab styles */
body.light .becoming-app .council-sidebar {
  background: rgba(0, 0, 0, 0.025) !important;
  border-right-color: rgba(0, 0, 0, 0.05) !important;
}
body.light .becoming-app .council-tab:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .council-tab-action {
  background: rgba(240, 240, 244, 0.97) !important;
  color: rgba(20, 20, 30, 0.6) !important;
}
body.light .becoming-app .council-tab-action:hover {
  color: rgba(20, 20, 30, 0.9) !important;
  background: rgba(220, 220, 228, 0.98) !important;
}
body.light .becoming-app .council-tab-action.stop {
  color: rgba(185, 28, 28, 0.8) !important;
}
body.light .becoming-app .council-tab-action.stop:hover {
  color: rgba(185, 28, 28, 1) !important;
  background: rgba(254, 226, 226, 0.98) !important;
}
body.light .becoming-app .council-tab-dot {
  background: rgba(0, 0, 0, 0.18) !important;
}
body.light .becoming-app .council-tab-dot.active {
  background: var(--council-accent-text, #7c3aed) !important;
}
body.light .becoming-app .council-tab-dot.unviewed {
  background: rgba(0, 0, 0, 0.55) !important;
}
body.light .becoming-app .council-tab-dot.loading {
  background: rgba(0, 0, 0, 0.12) !important;
}
body.light .becoming-app .council-tab-dot.error {
  background: rgba(185, 28, 28, 0.75) !important;
}
body.light .becoming-app .council-tab-dot.cancelled {
  background: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .council-tab-parts {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
  color: rgba(var(--accent-rgb), 0.5) !important;
}
body.light .becoming-app .council-card-loading {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .becoming-app .council-loading-title {
  color: rgba(20, 20, 30, 0.35) !important;
}
body.light .becoming-app .council-loading-count {
  color: rgba(20, 20, 30, 0.6) !important;
  background: rgba(20, 20, 30, 0.05) !important;
  border-color: rgba(20, 20, 30, 0.08) !important;
}
body.light .becoming-app .council-loading-stop-btn {
  border-color: rgba(220, 38, 38, 0.24) !important;
  background: rgba(220, 38, 38, 0.08) !important;
  color: rgba(220, 38, 38, 0.9) !important;
}
body.light .becoming-app .council-loading-stop-btn:hover {
  background: rgba(220, 38, 38, 0.16) !important;
  border-color: rgba(220, 38, 38, 0.34) !important;
}
body.light .becoming-app .council-loading-model-name {
  color: rgba(20, 20, 30, 0.35) !important;
}
body.light .becoming-app .council-loading-model-row.done .council-loading-model-name {
  color: rgba(20, 20, 30, 0.65) !important;
}
body.light .becoming-app .council-loading-model-bar {
  background: rgba(20, 20, 30, 0.06) !important;
}
body.light .becoming-app .council-loading-model-row.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(20, 20, 30, 0.12), transparent) !important;
}
body.light .becoming-app .council-loading-model-row.council-theme-claude.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.2), transparent) !important;
}
body.light .becoming-app .council-loading-model-row.council-theme-openai.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(22, 163, 74, 0.2), transparent) !important;
}
body.light .becoming-app .council-loading-model-row.council-theme-gemini.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.2), transparent) !important;
}
body.light .becoming-app .council-loading-model-fill.complete {
  background: rgba(22, 163, 74, 0.3) !important;
}
/* Council card markdown text in light mode */
body.light .becoming-app .council-card-body p,
body.light .becoming-app .council-card-body li,
body.light .becoming-app .council-card-body span {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .becoming-app .council-card-body strong {
  color: rgba(20, 20, 30, 0.95) !important;
}
body.light .becoming-app .council-card-body em {
  color: rgba(var(--accent-rgb), 0.85) !important;
}
body.light .becoming-app .council-card-body code {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(20, 20, 30, 0.8) !important;
}
body.light .becoming-app .council-card-body a {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .council-card-body blockquote {
  border-left-color: rgba(var(--accent-rgb), 0.3) !important;
  color: rgba(60, 60, 80, 0.7) !important;
}
body.light .becoming-app .council-gem-card-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(60, 60, 80, 0.45) !important;
}
body.light .becoming-app .council-gem-card-btn:hover {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent) !important;
}
/* ---- COUNCIL SETTINGS MENU: light theme ---- */
body.light .becoming-app .council-settings-menu {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
body.light .becoming-app .council-settings-btn {
  color: rgba(20, 20, 30, 0.7) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .council-settings-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(20, 20, 30, 0.9) !important;
}
body.light .becoming-app .council-settings-btn.council-active {
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: var(--accent-dark, #7c3aed) !important;
  border-color: rgba(var(--accent-rgb), 0.25) !important;
}
body.light .becoming-app .settings-council-toggle-row {
  color: rgba(20, 20, 30, 0.8) !important;
}
body.light .becoming-app .settings-council-toggle-row:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-council-chip {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(20, 20, 30, 0.7) !important;
}
body.light .becoming-app .settings-council-manage {
  background: rgba(var(--accent-rgb), 0.1) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .settings-section-header {
  color: rgba(60, 60, 80, 0.5) !important;
}
body.light .becoming-app .settings-current-model {
  color: rgba(20, 20, 30, 0.9) !important;
}
body.light .becoming-app .settings-divider {
  background: rgba(0, 0, 0, 0.08) !important;
}
body.light .becoming-app .settings-provider-header {
  color: rgba(20, 20, 30, 0.7) !important;
}
body.light .becoming-app .settings-provider-header:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-provider-header.has-selection {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .settings-model-option {
  color: rgba(20, 20, 30, 0.75) !important;
}
body.light .becoming-app .settings-model-option:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-model-option.selected {
  background: rgba(var(--accent-rgb), 0.1) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .settings-toggle-row {
  color: rgba(20, 20, 30, 0.8) !important;
}
body.light .becoming-app .settings-toggle-row:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-toggle {
  background: rgba(0, 0, 0, 0.12) !important;
}
body.light .becoming-app .settings-toggle.on {
  background: rgba(var(--accent-rgb), 0.45) !important;
}
body.light .becoming-app .settings-toggle-thumb {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}
body.light .becoming-app .settings-voice-select {
  color: rgba(20, 20, 30, 0.7) !important;
}
body.light .becoming-app .settings-voice-select:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-voice-option:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-voice-option.selected {
  background: rgba(var(--accent-rgb), 0.08) !important;
}
body.light .becoming-app .settings-voice-option .voice-name {
  color: rgba(20, 20, 30, 0.9) !important;
}
body.light .becoming-app .settings-voice-option.selected .voice-name {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .settings-voice-option .voice-desc {
  color: rgba(60, 60, 80, 0.45) !important;
}
body.light .becoming-app .settings-hint {
  color: rgba(60, 60, 80, 0.35) !important;
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}
/* ---- COUNCIL CONTEXT MENUS: light theme ---- */
/* Thread context menu is inside .becoming-app */
body.light .becoming-app .council-thread-context-menu {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .council-thread-context-menu button {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .becoming-app .council-thread-context-menu button:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .becoming-app .council-thread-context-menu button.danger {
  color: #dc2626 !important;
}
body.light .becoming-app .council-thread-context-menu button.danger:hover {
  background: rgba(220, 38, 38, 0.06) !important;
}
/* Message context menu is portalled to body */
body.light .council-message-context-menu {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}
body.light .council-message-context-menu button {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .council-message-context-menu button:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .council-message-context-menu button.danger {
  color: #dc2626 !important;
}
body.light .council-message-context-menu button.danger:hover {
  background: rgba(220, 38, 38, 0.06) !important;
}
body.light .council-context-timestamp {
  color: rgba(60, 60, 80, 0.4) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
/* ---- COUNCIL STATS & GEMS POPOVERS: light theme (portalled to body) ---- */
body.light .council-stats-popover {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
body.light .council-stats-header {
  color: rgba(20, 20, 30, 0.8) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .council-stats-header button {
  color: rgba(60, 60, 80, 0.3) !important;
}
body.light .council-stats-header button:hover {
  color: rgba(60, 60, 80, 0.7) !important;
}
body.light .council-stats-tab {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .council-stats-tab:hover {
  color: rgba(60, 60, 80, 0.65) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .council-stats-tab.active {
  color: rgba(20, 20, 30, 0.85) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
body.light .council-stats-top {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .council-stats-kpi-value {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-stats-kpi-label {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .council-stats-highlights {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .council-stats-highlight {
  background: rgba(0, 0, 0, 0.03) !important;
}
body.light .council-stats-highlight-label {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .council-stats-highlight-value {
  color: rgba(20, 20, 30, 0.75) !important;
}
body.light .council-stats-model-name {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .council-stats-pick-pct {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-stats-model-details {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .council-stats-bar {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .council-stats-empty {
  color: rgba(60, 60, 80, 0.35) !important;
}
/* Gems items */
body.light .council-gem-item {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}
body.light .council-gem-item:hover {
  border-color: rgba(var(--accent-rgb), 0.2) !important;
}
body.light .council-gem-text {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .council-gem-model {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-gem-time {
  color: rgba(60, 60, 80, 0.35) !important;
}
body.light .council-gem-save {
  color: rgba(60, 60, 80, 0.2) !important;
}
body.light .council-gem-save:hover {
  color: var(--accent-dark, #7c3aed) !important;
  background: rgba(var(--accent-rgb), 0.08) !important;
}
body.light .council-gem-delete {
  color: rgba(60, 60, 80, 0.2) !important;
}
body.light .council-gem-delete:hover {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.06) !important;
}
body.light .council-gem-question {
  color: rgba(60, 60, 80, 0.35) !important;
  border-top-color: rgba(0, 0, 0, 0.05) !important;
}
body.light .council-gem-question span {
  color: rgba(60, 60, 80, 0.55) !important;
}
/* ---- COUNCIL MULTI-PICKER: light theme (portalled to body) ---- */
body.light .council-multi-picker {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
body.light .council-multi-picker-header {
  color: rgba(60, 60, 80, 0.6) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .council-multi-picker-header button {
  color: rgba(60, 60, 80, 0.3) !important;
}
body.light .council-multi-picker-header button:hover {
  color: rgba(60, 60, 80, 0.7) !important;
}
body.light .council-multi-picker-group + .council-multi-picker-group {
  border-top-color: rgba(0, 0, 0, 0.05) !important;
}
body.light .council-multi-picker-provider {
  color: rgba(60, 60, 80, 0.35) !important;
}
body.light .council-multi-picker-item {
  color: rgba(20, 20, 30, 0.7) !important;
}
body.light .council-multi-picker-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .council-multi-picker-item.selected {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-multi-picker-item input[type="checkbox"] {
  border-color: rgba(0, 0, 0, 0.2) !important;
}
body.light .council-multi-picker-item.selected input[type="checkbox"] {
  background: var(--accent-dark, #7c3aed) !important;
  border-color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-member-picker-item {
  color: rgba(20, 20, 30, 0.7) !important;
}
body.light .council-member-picker-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .council-member-picker-item.selected {
  background: rgba(124, 58, 237, 0.08) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-member-picker-model {
  color: rgba(20, 20, 30, 0.35) !important;
}
body.light .council-member-picker-item input[type="checkbox"] {
  border-color: rgba(0, 0, 0, 0.2) !important;
}
body.light .council-member-picker-item.selected input[type="checkbox"] {
  background: var(--accent-dark, #7c3aed) !important;
  border-color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-member-picker-empty {
  color: rgba(20, 20, 30, 0.3) !important;
}
body.light .council-multi-picker-section-label {
  color: rgba(20, 20, 30, 0.3) !important;
}
body.light .council-multi-picker-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1) !important;
}
/* ---- COUNCIL EDIT BAR: light theme ---- */
body.light .becoming-app .council-edit-bar {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .council-edit-bar button {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .becoming-app .council-edit-bar button:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(20, 20, 30, 0.8) !important;
}
/* ---- TYPOGRAPHY: explicit color overrides by opacity tier ---- */
/* Primary text (headings, titles, strong content) — was rgba(255,255,255,0.85-0.97) */
body.light .becoming-app h1,
body.light .becoming-app h2,
body.light .becoming-app h3,
body.light .becoming-app h4,
body.light .becoming-app h5,
body.light .becoming-app strong,
body.light .becoming-section-title,
body.light .journey-section-title,
body.light .becoming-section-subtitle,
body.light .council-chat-title h3,
body.light .context-content-title,
body.light .context-flow-diagram h3,
body.light .context-full-header h3,
body.light .flow-stage-title,
body.light .glossary-title,
body.light .detail-panel-title,
body.light .detail-title,
body.light .north-star-statement {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Secondary text (body, descriptions, list items) — was rgba(255,255,255,0.5-0.8) */
body.light .becoming-section-desc,
body.light .journey-section-desc,
body.light .becoming-loading,
body.light .flow-stage-content p,
body.light .flow-detail,
body.light .flow-stats,
body.light .flow-item span,
body.light .context-explanation > p:first-child,
body.light .context-explanation-section p,
body.light .context-group-desc,
body.light .heritage-origin,
body.light .north-star-wins h4 {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.7)) !important;
}
/* Muted text (labels, sizes, hints, badges) — was rgba(255,255,255,0.3-0.5) */
body.light .context-section-size,
body.light .context-group-stats,
body.light .context-stats,
body.light .context-explanation-size,
body.light .context-explanation-note,
body.light .context-files-empty,
body.light .flow-arrow,
body.light .council-status,
body.light .council-last-message,
body.light .council-streaming-indicator {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}
/* ---- SIDEBAR ---- */
body.light .becoming-sidebar {
  background: rgba(0, 0, 0, 0.03) !important;
  border-right-color: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .sidebar-nav-item {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .becoming-app .sidebar-nav-item:hover {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .sidebar-nav-item.active {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-left-color: var(--accent) !important;
}
body.light .becoming-app .sidebar-toggle {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}
body.light .becoming-app .sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.8)) !important;
}
/* ---- TOP BAR & BORDERS ---- */
body.light .becoming-top-bar {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
/* ---- BACKGROUNDS: dark bg → light bg ---- */
/* Cards and sections: clean white backgrounds */
body.light .story-card,
body.light .vow-card,
body.light .wound-card,
body.light .leak-card,
body.light .reframe-card,
body.light .key-becoming-card,
body.light .echo-card,
body.light .glossary-card,
body.light .glossary-term-card,
body.light .arc-card,
body.light .becoming-map-card,
body.light .becoming-map-chip,
body.light .flow-stage,
body.light .flow-item,
body.light .keystone-vow {
  background: rgba(255, 255, 255, 0.7) !important;
}
/* Sections with colored tints — lighter versions */
body.light .heritage-section,
body.light .north-star-section {
  background: rgba(251, 191, 36, 0.06) !important;
}
body.light .story-summary-section,
body.light .definition-section {
  background: rgba(var(--accent-rgb), 0.05) !important;
}
body.light .spiral-section {
  background: rgba(56, 189, 248, 0.05) !important;
}
/* Context/explanation panels */
body.light .context-explanation,
body.light .context-explanation-section,
body.light .context-section-group,
body.light .context-full-text {
  background: rgba(0, 0, 0, 0.03) !important;
}
/* Slightly deeper backgrounds for panels/lists */
body.light .context-sections-list,
body.light .context-files-list,
body.light .council-thread-sidebar,
body.light .detail-panel,
body.light .becoming-detail,
body.light .becoming-detail-panel {
  background: rgba(0, 0, 0, 0.02) !important;
}
/* Override any dark backgrounds from base styles */
body.light .becoming-app .becoming-detail-icon,
body.light .becoming-app .flow-stage-num {
  background: rgba(0, 0, 0, 0.06) !important;
}
/* ---- BORDERS: white → dark ---- */
/* All borders: white → subtle dark */
body.light .becoming-app *:not(.story-card):not(.wound-card):not(.leak-card):not([class*="badge"]) {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
/* Cards keep their colored left borders */
body.light .story-card.origin { border-color: rgba(0, 0, 0, 0.08) !important; border-left-color: rgba(74, 222, 128, 0.5) !important; }
body.light .story-card.rupture { border-color: rgba(0, 0, 0, 0.08) !important; border-left-color: rgba(239, 68, 68, 0.5) !important; }
body.light .story-card.pattern { border-color: rgba(0, 0, 0, 0.08) !important; border-left-color: rgba(251, 191, 36, 0.5) !important; }
body.light .story-card.now { border-color: rgba(0, 0, 0, 0.08) !important; border-left-color: rgba(var(--accent-rgb), 0.5) !important; }
body.light .context-sections-list,
body.light .context-files-list,
body.light .context-section-item,
body.light .context-file-item,
body.light .council-thread-sidebar {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
/* ---- BUTTONS & INTERACTIVE ---- */
body.light .becoming-app button:not([class*="council-send"]):not([class*="save"]):not(.active) {
  border-color: rgba(0, 0, 0, 0.12) !important;
}
body.light .context-view-tab,
body.light .context-mode-tab,
body.light .context-refresh-btn,
body.light .context-error button,
body.light .context-file-btn,
body.light .journey-nav-btn,
body.light .phase-nav-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .context-view-tab:hover,
body.light .context-mode-tab:hover,
body.light .context-refresh-btn:hover,
body.light .context-file-btn:hover,
body.light .journey-nav-btn:hover,
body.light .phase-nav-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .journey-nav-btn.active,
body.light .phase-nav-btn.active {
  color: var(--accent) !important;
}
/* ---- CODE elements ---- */
body.light .becoming-app code,
body.light .flow-stage-content code,
body.light .context-explanation-section code,
body.light .context-files-empty code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}
/* ---- LIST ITEMS text ---- */
body.light .story-card p,
body.light .north-star-wins li,
body.light .vow-card p,
body.light .wound-card p,
body.light .leak-card p,
body.light .heritage-origin {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .flow-item strong,
body.light .context-full-stats strong {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}
/* ---- Section hover backgrounds ---- */
body.light .context-section-item:hover,
body.light .context-file-item.clickable:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
/* ---- Scrollbar ---- */
body.light .becoming-view::-webkit-scrollbar-thumb,
body.light .context-sections-list::-webkit-scrollbar-thumb,
body.light .context-section-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}
/* ---- SPECIAL: elements with colored backgrounds that need specific text ---- */
/* North Star uses golden text — keep it, just ensure readability */
body.light .north-star-statement {
  color: rgba(180, 130, 0, 0.95) !important;
}
body.light .heritage-identity {
  color: rgba(180, 130, 0, 0.95) !important;
}
/* Parts map chip names */
body.light .becoming-map-chip-name {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .becoming-map-chip-expression {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.7)) !important;
}
body.light .becoming-map-header {
  color: rgba(var(--accent-rgb), 0.8) !important;
}
/* Flow stage number circles */
body.light .flow-stage-num {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
/* Flow section tags */
body.light .flow-section-tag {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
/* Context header */
body.light .context-header {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
/* Explanation note divider */
body.light .context-explanation-note {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}
/* Full prompt text */
body.light .context-full-text {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.88)) !important;
}
/* Context file keys */
body.light .context-file-key {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .context-file-path {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .context-file-size {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}
body.light .context-sections-grouped .context-section-path {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.45)) !important;
}
body.light .context-sections-grouped .context-section-item {
  border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}
/* Loading state */
body.light .context-loading {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
/* Chat header */
body.light .council-chat-header {
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.08)) !important;
}
body.light .council-mode-tabs {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .council-mode-tab {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .council-mode-tab:hover {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .council-mode-tab.active {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}
body.light .council-chat-title h3 {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Model select */
body.light .council-model-select {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(20, 20, 30, 0.9) !important;
}
body.light .council-model-select option,
body.light .council-model-select optgroup {
  background: #fff !important;
  color: #1a1a1a !important;
}
/* Clear / control buttons */
body.light .council-clear-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(30, 30, 45, 0.8) !important;
}
body.light .council-clear-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Chat intro */
body.light .council-chat-intro {
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.06)) !important;
}
body.light .council-chat-intro p {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
/* Load earlier button */
body.light .council-load-earlier {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .council-load-earlier:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
/* Messages */
body.light .council-message-content {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-message.assistant .council-message-content {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-message.user .council-message-content {
  background: rgba(var(--accent-rgb), 0.1) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Markdown in messages */
body.light .council-message-content .md-bold {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.95)) !important;
}
body.light .council-message-content .md-italic {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .council-message-content .md-code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-message-content .md-h1,
body.light .council-message-content .md-h2,
body.light .council-message-content .md-h3 {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.95)) !important;
}
/* Message actions */
body.light .council-message-actions button {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}
body.light .council-message-actions button:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Parts map button */
body.light .council-becoming-map-btn {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-color: rgba(var(--accent-rgb), 0.2) !important;
  color: var(--accent) !important;
}
/* Status / timestamp */
body.light .council-status {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}
body.light .council-last-message {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}
/* Input form */
body.light .council-input-form {
  border-top-color: var(--os-glass-border, rgba(0, 0, 0, 0.08)) !important;
}
body.light .council-input-form textarea {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-input-form textarea:focus {
  background: #fff !important;
  border-color: rgba(var(--accent-rgb), 0.4) !important;
}
body.light .council-input-form textarea::placeholder {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}
/* Undo toast */
body.light .council-undo-toast {
  background: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.8)) !important;
}
/* Toggle buttons in header */
body.light .council-chat-controls .council-toggle-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(40, 40, 55, 0.7) !important;
}
body.light .council-chat-controls .council-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-chat-controls .council-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.1) !important;
  border-color: rgba(var(--accent-rgb), 0.25) !important;
}
/* Context panel */
body.light .council-context-panel {
  background: rgba(0, 0, 0, 0.02) !important;
  border-left-color: var(--os-glass-border, rgba(0, 0, 0, 0.08)) !important;
}
/* Stop button */
body.light .council-stop-btn {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #dc2626 !important;
}
/* Streaming indicator */
body.light .council-streaming-indicator {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}
/* Model select optgroup */
body.light .council-model-select optgroup {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
/* =============================================
   CONTEXT VIEW - Light Theme
   ============================================= */
/* Loading / error states */
body.light .context-loading,
body.light .context-error {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .context-error button {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Header */
body.light .context-header {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
/* Mode tabs */
body.light .context-mode-tab {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .context-mode-tab:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Stats */
body.light .context-stats {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
/* Refresh button */
body.light .context-refresh-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .context-refresh-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* View tabs (Flow, Sections, Files, Full) */
body.light .context-view-tab {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .context-view-tab:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Sections sidebar */
body.light .context-sections-list {
  border-right-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}
body.light .context-section-item {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .context-section-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .context-section-title {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .context-section-size {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}
/* Section content */
body.light .context-content-title {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.95)) !important;
}
/* Section groups */
body.light .context-section-group {
  background: rgba(0, 0, 0, 0.03) !important;
}
body.light .context-group-stats {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}
body.light .context-group-desc {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .context-sections-grouped .context-section-item {
  border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}
body.light .context-sections-grouped .context-section-path {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.45)) !important;
}
/* Prompt summary (light theme) */
body.light .context-prompt-title {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .context-prompt-total {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.45)) !important;
}
body.light .context-summary-card {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .context-summary-card:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .context-summary-label {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}
body.light .context-summary-size {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .context-summary-desc,
body.light .context-summary-count,
body.light .context-select-hint {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.45)) !important;
}
body.light .context-prompt-summary {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
/* Files sidebar */
body.light .context-files-list {
  border-right-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}
body.light .context-files-empty {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .context-files-empty code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}
body.light .context-file-item {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .context-file-size {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}
body.light .context-file-path {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .context-file-key {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* File content */
body.light .context-file-content {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .context-file-header {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .context-file-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .context-file-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Full prompt view */
body.light .context-full-header h3 {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .context-full-stats {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .context-full-stats strong {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .context-full-text {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.88)) !important;
}
/* Flow view */
body.light .context-flow-diagram h3 {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .flow-stage {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light .flow-stage-num {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .flow-stage-title {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .flow-stage-content p {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .flow-stage-content code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}
body.light .flow-detail {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.55)) !important;
}
body.light .flow-arrow {
  color: rgba(0, 0, 0, 0.2) !important;
}
body.light .flow-section-tag {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .flow-item {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .flow-item strong {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}
body.light .flow-item span {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .flow-stats {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
/* Explanation (flow view intro) */
body.light .context-explanation {
  background: rgba(0, 0, 0, 0.03) !important;
}
body.light .context-explanation > p:first-child {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .context-explanation-section {
  background: rgba(0, 0, 0, 0.02) !important;
}
body.light .context-explanation-section p {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .context-explanation-section code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}
body.light .context-explanation-size {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}
body.light .context-explanation-note {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.55)) !important;
}
/* ---- EDIT FORMS ---- */
body.light .becoming-edit-form label span {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .becoming-edit-form input,
body.light .becoming-edit-form textarea,
body.light .becoming-edit-form select {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .becoming-edit-form input:focus,
body.light .becoming-edit-form textarea:focus,
body.light .becoming-edit-form select:focus {
  background: #fff !important;
}
body.light .becoming-edit-form select option {
  background: #fff !important;
  color: #1a1a1a !important;
}
body.light .becoming-edit-actions {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-edit-actions .cancel-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .becoming-edit-actions .cancel-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}
/* ---- DETAIL PANEL ---- */
body.light .becoming-detail-header {
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-detail-icon {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .becoming-detail-empty {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}
body.light .becoming-detail-section h4 {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.7)) !important;
}
/* ---- COUNCIL INPUT ---- */
body.light .council-input-form textarea {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-input-form textarea:focus {
  background: #fff !important;
  border-color: rgba(var(--accent-rgb), 0.4) !important;
}
body.light .council-input-form textarea::placeholder {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}
body.light .council-input-form {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
/* ---- COUNCIL EDIT BAR ---- */
body.light .council-edit-bar {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-edit-bar span {
  color: inherit !important;
}
body.light .council-edit-bar button {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}
body.light .council-edit-bar button:hover {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* ---- COUNCIL MESSAGES ---- */
body.light .council-message-content {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-message.assistant .council-message-content {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-message.user .council-message-content {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-message-content .md-bold {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.95)) !important;
}
body.light .council-message-content .md-italic {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .council-message-content .md-code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-message-content .md-h1,
body.light .council-message-content .md-h2,
body.light .council-message-content .md-h3 {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.95)) !important;
}
body.light .council-message-actions button {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}
body.light .council-message-actions button:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* ---- COUNCIL HEADER ---- */
body.light .council-chat-header {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .council-mode-tabs {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .council-mode-tab {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .council-mode-tab:hover {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
body.light .council-mode-tab.active {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}
body.light .council-model-select {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(20, 20, 30, 0.9) !important;
}
body.light .council-model-select option,
body.light .council-model-select optgroup {
  background: #fff !important;
  color: #1a1a1a !important;
}
/* Clear / control buttons */
body.light .council-clear-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(30, 30, 45, 0.8) !important;
}
body.light .council-clear-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
/* Toggle buttons in header */
body.light .council-chat-controls .council-toggle-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(40, 40, 55, 0.7) !important;
}
body.light .council-chat-controls .council-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .council-chat-controls .council-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.1) !important;
  border-color: rgba(var(--accent-rgb), 0.25) !important;
}
/* Chat intro */
body.light .council-chat-intro {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .council-chat-intro p {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
/* Load earlier button */
body.light .council-load-earlier {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}
body.light .council-load-earlier:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}
/* Parts map button */
body.light .council-becoming-map-btn {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-color: rgba(var(--accent-rgb), 0.2) !important;
  color: var(--accent) !important;
}
/* Undo toast */
body.light .council-undo-toast {
  background: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.8)) !important;
}
/* Context panel */
body.light .council-context-panel {
  background: rgba(0, 0, 0, 0.02) !important;
  border-left-color: rgba(0, 0, 0, 0.08) !important;
}
/* Stop button */
body.light .council-stop-btn {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #dc2626 !important;
}
/* ---- THREAD SIDEBAR ---- */
body.light .council-thread-sidebar {
  border-right-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .council-thread-item {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .council-thread-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .cal-week-header {
  color: rgba(0, 0, 0, 0.3) !important;
}
body.light .cal-day-header {
  color: rgba(0, 0, 0, 0.5) !important;
}
body.light .cal-day-empty {
  color: rgba(0, 0, 0, 0.25) !important;
}
body.light .cal-session-item:hover,
body.light .cal-fragment-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .cal-item-name {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .cal-item-name.fragment-name {
  color: rgba(20, 20, 30, 0.45) !important;
}
body.light .cal-item-meta {
  color: rgba(20, 20, 30, 0.35) !important;
}
body.light .fragment-dot {
  color: rgba(20, 20, 30, 0.25) !important;
}
/* ---- GLOSSARY ---- */
body.light .glossary-search input {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}
body.light .glossary-search input:focus {
  background: #fff !important;
}
/* ---- ARCHIVE / TIMELINE ---- */
body.light .archive-item,
body.light .timeline-item {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
/* ---- SETTINGS within app ---- */
body.light .becoming-app .settings-item {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
/* ============================================================
   COMPANION SESSION STYLES
   ============================================================ */
/* --- Session Controls in Header --- */
.session-active-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.session-badge {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.session-badge.begin {
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.12);
  color: rgba(74, 222, 128, 0.7);
}
.session-badge.begin:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.12);
  color: rgba(74, 222, 128, 1);
}
.session-badge.begin:disabled { opacity: 0.6; cursor: default; }
.session-badge.active {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  color: rgba(74, 222, 128, 0.9);
}
.session-badge.active:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.9);
}
.session-badge.synthesizing {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  cursor: default;
}
.session-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: session-pulse-anim 2s ease-in-out infinite;
}
@keyframes session-pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
/* --- Session Labels (ultra-minimal markers) --- */
.session-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 2px;
  font-size: 0.58rem;
  color: var(--os-text-hint);
  letter-spacing: 0.04em;
  user-select: none;
}
.session-label.session-label-start {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 28px 0 16px;
  padding: 0;
  width: 100%;
  position: relative;
}
/* Top rule */
.session-label.session-label-start::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(74, 222, 128, 0.1) 20%, rgba(74, 222, 128, 0.1) 80%, transparent);
}
/* Opening question pill */
.session-label.session-label-start > span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--council-bg, #111);
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(74, 222, 128, 0.1);
  color: rgba(74, 222, 128, 0.45);
  font-size: 0.72rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}
.session-label-start.collapsed {
  margin-top: 0;
  padding-top: 2px;
}
.session-opening-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.1);
  color: rgba(74, 222, 128, 0.55);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.session-opening-loader {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}
.session-opening-loader-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.1);
  color: rgba(74, 222, 128, 0.6);
  font-size: 0.75rem;
  font-weight: 500;
}
.session-label-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 8px 0 24px;
  padding: 0;
  position: relative;
}
/* Horizontal rule through center */
.session-label-end::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(74, 222, 128, 0.12) 20%, rgba(74, 222, 128, 0.12) 80%, transparent);
}
/* Session info pill */
.session-label-end > span {
  position: relative;
  background: var(--council-bg, #111);
  padding: 3px 14px;
  border-radius: 20px;
  border: 1px solid rgba(74, 222, 128, 0.12);
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(74, 222, 128, 0.5);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.session-end-journal {
  margin-top: 2px;
  width: 100%;
  max-width: 480px;
}
.session-end-journal summary {
  font-size: 0.62rem;
  color: rgba(74, 222, 128, 0.3);
  cursor: pointer;
  text-align: center;
  padding: 1px 0;
}
.session-end-journal summary:hover {
  color: rgba(74, 222, 128, 0.5);
}
.session-journal-md {
  text-align: left;
  padding: 8px 12px;
  margin-top: 4px;
  background: rgba(74, 222, 128, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(74, 222, 128, 0.06);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--os-text-muted);
  max-width: 500px;
}
/* --- In-Session Message Styling --- */
/* Messages within a session get a subtle green left accent + tinted background */
.council-message.in-session {
  border-left: 2px solid rgba(74, 222, 128, 0.12);
  margin-left: 2px;
  padding-left: 12px;
  background: rgba(74, 222, 128, 0.02);
  border-radius: 0 12px 12px 0;
}
/* --- Forgotten Session Prompt --- */
.session-forgotten-prompt {
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  margin: 4px 0;
}
.session-forgotten-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 10px;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.session-forgotten-actions {
  display: flex;
  gap: 8px;
}
.session-forgotten-actions button {
  all: unset;
  box-sizing: border-box;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.session-forgotten-actions button:first-child {
  background: rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 0.9);
}
.session-forgotten-actions button:first-child:hover {
  background: rgba(74, 222, 128, 0.25);
}
.session-forgotten-actions button:last-child {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
}
.session-forgotten-actions button:last-child:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* --- Light Theme Session Overrides --- */
body.light .becoming-app .session-badge.begin {
  background: rgba(22, 163, 74, 0.05) !important;
  border-color: rgba(22, 163, 74, 0.1) !important;
  color: rgba(22, 163, 74, 0.65) !important;
}
body.light .becoming-app .session-badge.begin:hover:not(:disabled) {
  background: rgba(22, 163, 74, 0.1) !important;
  color: rgba(22, 163, 74, 1) !important;
}
body.light .becoming-app .session-badge.active {
  background: rgba(22, 163, 74, 0.08) !important;
  border-color: rgba(22, 163, 74, 0.15) !important;
  color: rgba(22, 163, 74, 0.85) !important;
}
body.light .becoming-app .session-badge.active:hover {
  background: rgba(220, 38, 38, 0.06) !important;
  border-color: rgba(220, 38, 38, 0.12) !important;
  color: rgba(220, 38, 38, 0.75) !important;
}
body.light .becoming-app .session-pulse {
  background: #16a34a !important;
}
body.light .becoming-app .session-label {
  color: rgba(60, 60, 80, 0.2) !important;
}
body.light .becoming-app .session-label-start > span {
  color: rgba(22, 163, 74, 0.5) !important;
  background: #ffffff !important;
  border-color: rgba(22, 163, 74, 0.1) !important;
}
body.light .becoming-app .session-label-end > span {
  color: rgba(22, 163, 74, 0.5) !important;
  background: #ffffff !important;
  border-color: rgba(22, 163, 74, 0.1) !important;
}
body.light .becoming-app .session-opening-badge {
  background: rgba(22, 163, 74, 0.06) !important;
  border-color: rgba(22, 163, 74, 0.12) !important;
  color: rgba(22, 163, 74, 0.55) !important;
}
body.light .becoming-app .session-opening-loader-inner {
  background: rgba(22, 163, 74, 0.06) !important;
  border-color: rgba(22, 163, 74, 0.12) !important;
  color: rgba(22, 163, 74, 0.6) !important;
}
body.light .becoming-app .session-end-journal summary {
  color: rgba(22, 163, 74, 0.3) !important;
}
body.light .becoming-app .session-journal-md {
  background: rgba(22, 163, 74, 0.02) !important;
  border-color: rgba(22, 163, 74, 0.05) !important;
  color: rgba(60, 60, 80, 0.55) !important;
}
body.light .becoming-app .council-message.in-session {
  border-left-color: rgba(22, 163, 74, 0.1) !important;
  background: rgba(22, 163, 74, 0.018) !important;
}
body.light .becoming-app .session-forgotten-card {
  background: rgba(22, 163, 74, 0.04) !important;
  border-color: rgba(22, 163, 74, 0.12) !important;
  color: rgba(60, 60, 80, 0.6) !important;
}
body.light .becoming-app .session-forgotten-actions button:first-child {
  background: rgba(22, 163, 74, 0.1) !important;
  color: rgba(22, 163, 74, 0.85) !important;
}
body.light .becoming-app .session-forgotten-actions button:last-child {
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(60, 60, 80, 0.5) !important;
}
/* --- Session Control Buttons --- */
/* Override fixed 38px from .council-input-form button for the pill buttons */
.council-input-form .session-begin-btn,
.council-input-form .session-end-btn {
  width: auto !important;
  height: auto !important;
}
.session-begin-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 0.8);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.session-begin-btn:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 1);
}
.session-begin-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.session-end-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.18);
  color: rgba(239, 68, 68, 0.85);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.session-end-btn:hover {
  background: rgba(239, 68, 68, 0.18);
}
.session-saving-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 0.72rem;
  color: var(--os-text-muted);
  font-weight: 500;
}
/* --- Inline Confirm Dialog (replaces window.confirm) --- */
.council-inline-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.council-inline-confirm {
  background: rgba(30, 30, 40, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  max-width: 340px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.council-inline-confirm p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
.council-inline-confirm-actions {
  display: flex;
  gap: 0.625rem;
  justify-content: flex-end;
}
.council-inline-confirm-cancel {
  padding: 0.45rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--os-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.council-inline-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
}
.council-inline-confirm-ok {
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  border: none;
  background: rgba(248, 113, 113, 0.25);
  color: rgba(248, 113, 113, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.council-inline-confirm-ok:hover {
  background: rgba(248, 113, 113, 0.35);
}
/* Light theme */
body.light .council-inline-confirm {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .council-inline-confirm p {
  color: rgba(0, 0, 0, 0.8);
}
body.light .council-inline-confirm-cancel {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.5);
}
body.light .council-inline-confirm-cancel:hover {
  background: rgba(0, 0, 0, 0.05);
}
/* --- End Session Confirmation Dialog --- */
.session-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: council-nav-fade-in 0.15s ease;
}
.session-confirm-dialog {
  background: rgba(25, 25, 35, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 20px 24px;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.session-confirm-dialog p {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.session-confirm-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--os-text-muted);
  margin-bottom: 16px;
}
.session-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.session-confirm-cancel {
  all: unset;
  box-sizing: border-box;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.session-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.session-confirm-end {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.9);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  cursor: pointer;
  transition: background 0.15s;
}
.session-confirm-end:hover {
  background: rgba(239, 68, 68, 0.2);
}
/* Light theme: End Session Dialog */
body.light .session-confirm-overlay {
  background: rgba(0, 0, 0, 0.25);
}
body.light .session-confirm-dialog {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}
body.light .session-confirm-dialog p {
  color: rgba(30, 30, 40, 0.9) !important;
}
body.light .session-confirm-sub {
  color: rgba(60, 60, 80, 0.5) !important;
}
body.light .session-confirm-cancel {
  color: rgba(60, 60, 80, 0.5) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .session-confirm-cancel:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(60, 60, 80, 0.8) !important;
}
body.light .session-confirm-end {
  color: rgba(220, 38, 38, 0.85) !important;
  background: rgba(220, 38, 38, 0.06) !important;
  border-color: rgba(220, 38, 38, 0.15) !important;
}
body.light .session-confirm-end:hover {
  background: rgba(220, 38, 38, 0.12) !important;
}
/* --- Session Opening Loading --- */
.session-opening-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 4px;
  font-size: 0.7rem;
  color: rgba(74, 222, 128, 0.5);
  font-weight: 500;
}
/* --- Light Theme: Companion Status Bar --- */
body.light .becoming-app .companion-status-bar {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .becoming-app .companion-last-msg {
  color: rgba(60, 60, 80, 0.45) !important;
}
body.light .becoming-app .companion-session-time {
  color: rgba(22, 163, 74, 0.6) !important;
}
body.light .becoming-app .companion-status-bar .council-nav-divider {
  background: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .session-begin-btn {
  background: rgba(22, 163, 74, 0.06) !important;
  border-color: rgba(22, 163, 74, 0.12) !important;
  color: rgba(22, 163, 74, 0.7) !important;
}
body.light .becoming-app .session-begin-btn:hover:not(:disabled) {
  background: rgba(22, 163, 74, 0.12) !important;
  color: rgba(22, 163, 74, 1) !important;
}
body.light .becoming-app .session-end-btn {
  background: rgba(220, 38, 38, 0.06) !important;
  border-color: rgba(220, 38, 38, 0.12) !important;
  color: rgba(220, 38, 38, 0.75) !important;
}
body.light .becoming-app .session-saving-indicator {
  color: rgba(60, 60, 80, 0.5) !important;
}
body.light .becoming-app .session-opening-loading {
  color: rgba(22, 163, 74, 0.5) !important;
}
/**
 * Journal App Styles
 */
/* Main Layout */
.journal-app {
  display: flex;
  height: 100%;
  background: var(--os-glass-bg-solid);
  color: var(--os-text-primary);
  position: relative;
}
/* Sidebar */
.journal-sidebar {
  width: 180px;
  flex-shrink: 0;
  padding: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
}
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
  margin: 0;
  padding: 0 0.5rem;
}
.section-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.section-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.section-button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}
.section-button.active {
  background: rgba(217, 119, 6, 0.2);
  color: #d97706;
}
.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  opacity: 0.7;
}
.section-button.active .section-icon {
  opacity: 1;
}
.section-name {
  flex: 1;
}
.section-count {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--os-text-muted);
}
.section-button.active .section-count {
  background: rgba(217, 119, 6, 0.3);
  color: #d97706;
}
/* Filters */
.filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.5rem;
}
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  cursor: pointer;
}
.filter-checkbox input {
  accent-color: #d97706;
}
/* Main Content Area */
.journal-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Timeline */
.journal-timeline {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.timeline-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.timeline-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.date-filter-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: rgba(217, 119, 6, 0.15);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 6px;
  color: #f59e0b;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.date-filter-badge:hover {
  background: rgba(217, 119, 6, 0.25);
  border-color: rgba(217, 119, 6, 0.5);
}
/* Journal Calendar (sidebar) */
.journal-calendar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.4rem;
}
.jcal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.jcal-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.jcal-current-badge {
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(217, 119, 6, 0.8);
  background: rgba(217, 119, 6, 0.12);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.jcal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.jcal-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.jcal-nav:disabled {
  opacity: 0.25;
  cursor: default;
}
.jcal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.2rem;
}
.jcal-weekday {
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--os-text-hint);
  padding: 0.15rem;
}
.jcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.jcal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: 0.65rem;
  background: transparent;
  border: none;
  color: var(--os-text-hint);
  cursor: default;
  position: relative;
  transition: all 0.15s;
  padding: 0;
}
.jcal-day.blank {
  cursor: default;
}
.jcal-day.has-content {
  color: var(--os-text-secondary);
  cursor: pointer;
}
.jcal-day.has-content:hover {
  background: rgba(255, 255, 255, 0.1);
}
.jcal-day.today {
  border: 1px solid rgba(217, 119, 6, 0.4);
  color: rgba(217, 119, 6, 0.9);
}
.jcal-day.has-content::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.6);
}
.jcal-day.today.has-content::after {
  background: rgba(217, 119, 6, 0.7);
}
.jcal-day.selected {
  background: rgba(217, 119, 6, 0.3);
  color: #f59e0b;
}
.jcal-day.selected.today {
  border-color: rgba(217, 119, 6, 0.5);
}
.refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.timeline-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}
.timeline-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--os-text-muted);
}
.timeline-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--os-text-muted);
  text-align: center;
  padding: 3rem;
}
.timeline-empty p {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}
.timeline-empty span {
  font-size: 0.85rem;
}
/* Date Groups */
.date-group {
  margin-bottom: 1.5rem;
}
.date-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(217, 119, 6, 0.12);
}
.date-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(245, 158, 11, 0.85);
}
.date-header:hover .date-filter-icon {
  opacity: 0.5;
}
.date-filter-icon {
  opacity: 0;
  transition: opacity 0.15s ease;
  color: var(--os-text-muted);
}
.date-header.active {
  border-bottom-color: rgba(217, 119, 6, 0.3);
}
.entry-count {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.entries-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Entry Card */
/* --- Entry Card (compact timeline card) --- */
.entry-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.entry-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--os-text-hint);
  border-left-color: rgba(217, 119, 6, 0.4);
}
.entry-card.soul {
  border-left-color: rgba(239, 68, 68, 0.3);
}
.entry-card.thoughts {
  border-left-color: rgba(251, 191, 36, 0.3);
}
.entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.entry-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.entry-time {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.entry-section-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-transform: capitalize;
  font-weight: 500;
}
.entry-section-badge.soul {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
.entry-section-badge.thoughts {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
.entry-source {
  display: flex;
  align-items: center;
  opacity: 0.5;
}
.entry-source.voice {
  color: #4ade80;
  opacity: 0.8;
}
.entry-title {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0.5rem 0 0.25rem;
  color: var(--os-text-primary);
}
.entry-content {
  margin-top: 0.5rem;
}
.entry-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}
/* Markdown rendering inside entry cards */
.entry-text h1,
.entry-text h2,
.entry-text h3,
.entry-text h4,
.entry-text h5,
.entry-text h6 {
  margin: 0.4rem 0 0.2rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.entry-text h1 { font-size: 1rem; }
.entry-text h2 { font-size: 0.95rem; }
.entry-text h3 { font-size: 0.9rem; }
.entry-text h4,
.entry-text h5,
.entry-text h6 { font-size: 0.85rem; }
.entry-text p {
  margin: 0 0 0.3rem;
}
.entry-text p:last-child {
  margin-bottom: 0;
}
.entry-text ul,
.entry-text ol {
  margin: 0.15rem 0 0.3rem;
  padding-left: 1.25rem;
}
.entry-text li {
  margin-bottom: 0.1rem;
}
.entry-text em {
  color: var(--os-text-secondary);
  font-style: italic;
}
.entry-text strong {
  color: var(--os-text-secondary);
  font-weight: 600;
}
.entry-text code {
  font-size: 0.8rem;
  padding: 0.1rem 0.3rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: rgba(217, 119, 6, 0.9);
}
.entry-text hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0.4rem 0;
}
/* Today empty prompt */
.today-empty-prompt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  color: var(--os-text-hint);
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.15s ease;
}
.today-empty-prompt:hover {
  color: rgba(217, 119, 6, 0.8);
  border-color: rgba(217, 119, 6, 0.3);
  background: rgba(217, 119, 6, 0.05);
}
/* --- Entry Dialog (modal overlay) --- */
.entry-dialog-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 2rem;
}
.entry-dialog {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  background: var(--os-context-bg);
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.entry-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.entry-dialog-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.entry-dialog-date {
  font-size: 0.8rem;
  color: var(--os-text-muted);
}
.entry-dialog-time {
  font-size: 0.8rem;
  color: var(--os-text-muted);
}
.entry-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.entry-dialog-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.entry-dialog-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.entry-dialog-btn.primary {
  background: rgba(217, 119, 6, 0.2);
  border-color: rgba(217, 119, 6, 0.3);
  color: #f59e0b;
}
.entry-dialog-btn.primary:hover {
  background: rgba(217, 119, 6, 0.3);
}
.entry-dialog-btn.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.entry-dialog-title {
  padding: 0.75rem 1.25rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0;
}
.entry-dialog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 1.25rem 0;
}
.entry-dialog-tags.editing {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem 0;
}
.entry-dialog-tags .tags-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.entry-dialog-tags-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(217, 119, 6, 0.9);
  font-size: 0.8rem;
  font-family: inherit;
  padding: 0.25rem 0;
}
.entry-dialog-tags-input:focus {
  outline: none;
  border-bottom-color: #d97706;
}
.entry-dialog-tags-input::placeholder {
  color: var(--os-text-hint);
}
.entry-dialog-body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.entry-dialog-content {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--os-text-secondary);
}
.entry-dialog-content h1,
.entry-dialog-content h2,
.entry-dialog-content h3,
.entry-dialog-content h4,
.entry-dialog-content h5,
.entry-dialog-content h6 {
  margin: 0.75rem 0 0.35rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.entry-dialog-content h1 { font-size: 1.2rem; }
.entry-dialog-content h2 { font-size: 1.1rem; }
.entry-dialog-content h3 { font-size: 1rem; }
.entry-dialog-content h4,
.entry-dialog-content h5,
.entry-dialog-content h6 { font-size: 0.9rem; }
.entry-dialog-content p {
  margin: 0 0 0.75rem;
}
.entry-dialog-content p:last-child {
  margin-bottom: 0;
}
.entry-dialog-content ul,
.entry-dialog-content ol {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.5rem;
}
.entry-dialog-content li {
  margin-bottom: 0.2rem;
}
.entry-dialog-content em {
  color: var(--os-text-secondary);
  font-style: italic;
}
.entry-dialog-content strong {
  color: var(--os-text-primary);
  font-weight: 600;
}
.entry-dialog-content code {
  font-size: 0.85rem;
  padding: 0.1rem 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: rgba(217, 119, 6, 0.9);
}
.entry-dialog-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0.75rem 0;
}
.entry-dialog-editor {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.7;
  resize: none;
  box-sizing: border-box;
}
.entry-dialog-editor:focus {
  outline: none;
  border-color: #d97706;
}
.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.entry-tag {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  background: rgba(217, 119, 6, 0.15);
  border-radius: 4px;
  color: #d97706;
}
/* Right Panel (Calendar only) */
.journal-capture {
  width: 220px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.journal-capture > .journal-calendar {
  margin: 0.75rem 0.5rem 0;
}
/* FAB (Floating Action Button) */
.journal-fab {
  position: absolute;
  bottom: 1.5rem;
  right: 240px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #d97706;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.4);
  transition: all 0.2s ease;
  z-index: 10;
}
.journal-fab:hover {
  background: #f59e0b;
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(217, 119, 6, 0.5);
}
/* Timeline Add Entry Button */
.timeline-add-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(217, 119, 6, 0.15);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 8px;
  color: #f59e0b;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeline-add-btn:hover {
  background: rgba(217, 119, 6, 0.25);
  border-color: rgba(217, 119, 6, 0.5);
}
/* --- Capture Dialog --- */
.capture-dialog-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 1.5rem 2rem 5rem;
}
.capture-dialog {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  background: var(--os-context-bg);
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.capture-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.capture-dialog-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.capture-dialog-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.capture-dialog-routing-inline {
  display: flex;
  align-items: center;
  color: var(--os-text-muted);
}
.capture-dialog-routing-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: rgba(217, 119, 6, 0.15);
  border-radius: 4px;
  font-size: 0.7rem;
  color: #d97706;
  text-transform: capitalize;
}
.capture-dialog-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* EditableMarkdownBlock inside capture dialog — fill available space */
.capture-dialog-body .editable-markdown-edit-mode {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.capture-dialog-body .editable-markdown-editor-wrapper {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.capture-dialog-body .editable-markdown-editor {
  flex: 1 1 0;
  min-height: 0 !important;
}
.capture-dialog-body .editable-markdown-textarea,
.capture-dialog-body .editable-markdown-pre {
  height: 100% !important;
  min-height: 0 !important;
}
.capture-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.capture-dialog-destinations {
  display: flex;
  gap: 0.35rem;
}
.capture-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.capture-dialog-save {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: #d97706;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.capture-dialog-save:hover:not(:disabled) {
  background: #f59e0b;
}
.capture-dialog-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Voice Recorder */
.capture-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.voice-recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.record-button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  border: 2px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.record-button:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}
.record-button.recording {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
  }
}
.record-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.recording-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.audio-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
}
.audio-bar {
  width: 4px;
  background: #ef4444;
  border-radius: 2px;
  transition: height 0.1s ease;
}
.duration {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--os-text-secondary);
  font-variant-numeric: tabular-nums;
}
.transcribing-text,
.hint-text {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
/* Capture Divider */
.capture-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--os-text-hint);
  font-size: 0.75rem;
}
.capture-divider::before,
.capture-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
/* Text Input */
.capture-text {
  position: relative;
}
.capture-text textarea {
  width: 100%;
  padding: 0.75rem;
  padding-right: 2.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  resize: none;
}
.capture-text textarea:focus {
  outline: none;
  border-color: rgba(217, 119, 6, 0.5);
}
.capture-text textarea::placeholder {
  color: var(--os-text-muted);
}
.text-submit-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #d97706;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.text-submit-btn:hover:not(:disabled) {
  background: #f59e0b;
}
.text-submit-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
/* Capture Preview */
.capture-preview {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
}
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.preview-source {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.preview-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
}
.preview-clear:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.preview-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--os-text-primary);
}
/* Routing Preview */
.routing-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--os-text-muted);
}
.routing-preview {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
}
.routing-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
.routing-suggestion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.routing-dest {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--os-text-primary);
}
.routing-confidence {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  text-transform: uppercase;
}
.routing-confidence.high {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
.routing-confidence.medium {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
.routing-confidence.low {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
.routing-reason {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin-top: 0.35rem;
}
/* Destination Selector */
.capture-destination {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.capture-destination label {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.destination-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.dest-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dest-option:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--os-text-hint);
}
.dest-option.selected {
  background: rgba(217, 119, 6, 0.2);
  border-color: rgba(217, 119, 6, 0.4);
  color: #d97706;
}
/* Save Button */
.capture-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #d97706;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.capture-save-btn:hover:not(:disabled) {
  background: #f59e0b;
}
.capture-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Spinning animation for loaders */
.spinning {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ================================ */
/* Light Theme Overrides            */
/* ================================ */
body.light .journal-sidebar {
  border-right-color: rgba(0, 0, 0, 0.08);
}
body.light .sidebar-section-title {
  color: rgba(20, 20, 30, 0.45);
}
body.light .sidebar-item {
  color: rgba(20, 20, 30, 0.72);
}
body.light .sidebar-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 30, 0.88);
}
body.light .sidebar-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}
body.light .sidebar-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.55);
}
body.light .sidebar-item.active .sidebar-count {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
body.light .entry-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  border-left-color: rgba(0, 0, 0, 0.12);
}
body.light .entry-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  border-left-color: rgba(var(--accent-rgb), 0.4);
}
body.light .entry-time {
  color: rgba(20, 20, 30, 0.5);
}
body.light .entry-title {
  color: rgba(20, 20, 30, 0.9);
}
body.light .entry-text {
  color: rgba(20, 20, 30, 0.78);
}
body.light .entry-text strong,
body.light .entry-text b {
  color: rgba(20, 20, 30, 0.88);
}
body.light .entry-tag {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(20, 20, 30, 0.6);
}
body.light .timeline-date-header {
  color: rgba(20, 20, 30, 0.55);
}
body.light .date-filter-badge {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(20, 20, 30, 0.65);
}
body.light .timeline-empty {
  color: rgba(20, 20, 30, 0.4);
}
/* Canvas App Styles */
.canvas-app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--os-glass-bg-solid); /* Canvas needs solid — content is pinboard items */
  color: var(--os-text-primary);
  overflow: hidden;
  touch-action: none; /* Prevent browser pinch-to-zoom */
  -webkit-user-select: none;
  user-select: none;
}
/* ============================================
   Canvas List View
   ============================================ */
.canvas-list-view {
  padding: 1.5rem;
}
.canvas-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.canvas-list-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}
.canvas-new-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 8px;
  color: rgba(var(--accent-rgb), 1);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-new-btn:hover {
  background: rgba(var(--accent-rgb), 0.3);
}
.canvas-new-input {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.canvas-new-input input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 0.9rem;
}
.canvas-new-input input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.canvas-new-input button {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-new-input button:hover {
  background: rgba(255, 255, 255, 0.15);
}
.canvas-new-input button:first-of-type {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: white;
}
/* New pinboard creation form */
.canvas-new-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem;
}
.canvas-new-form-name {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
}
.canvas-new-form-name:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.canvas-new-form-field {
  padding: 0.45rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
}
.canvas-new-form-field:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}
.canvas-new-form-field::placeholder,
.canvas-new-form-name::placeholder {
  color: var(--os-text-hint);
}
.canvas-new-form-preview {
  border-radius: 6px;
  overflow: hidden;
  max-height: 200px;
  background: rgba(0, 0, 0, 0.2);
}
.canvas-new-form-preview img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  display: none;
}
.canvas-new-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.canvas-new-form-actions button {
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-new-form-actions button:hover {
  background: rgba(255, 255, 255, 0.12);
}
.canvas-new-form-create {
  background: rgba(var(--accent-rgb), 0.3) !important;
  border-color: rgba(var(--accent-rgb), 0.4) !important;
  color: white !important;
}
.canvas-new-form-create:disabled {
  opacity: 0.4;
  cursor: default;
}
.canvas-new-form-create:not(:disabled):hover {
  background: rgba(var(--accent-rgb), 0.4) !important;
}
.canvas-loading,
.canvas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem;
  color: var(--os-text-muted);
  text-align: center;
}
.canvas-empty p {
  margin: 0;
}
/* Old list style - kept for reference */
.canvas-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.canvas-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.canvas-list-item svg {
  color: rgba(var(--accent-rgb), 0.7);
}
.canvas-list-item-name {
  flex: 1;
  font-size: 0.9rem;
}
.canvas-list-item-delete {
  padding: 0.25rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}
.canvas-list-item:hover .canvas-list-item-delete {
  opacity: 1;
}
.canvas-list-item-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.9);
}
/* Tiles Grid View */
.canvas-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  padding: 0.5rem 0;
}
.canvas-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.canvas-tile:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.canvas-tile-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
}
.canvas-tile-preview.has-cover {
  background: transparent;
}
.canvas-tile-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.canvas-tile-preview svg {
  color: rgba(var(--accent-rgb), 0.5);
}
.canvas-tile:hover .canvas-tile-preview svg {
  color: rgba(var(--accent-rgb), 0.8);
}
.canvas-tile-info {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.canvas-tile-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}
.canvas-tile-description {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.canvas-tile-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.canvas-tile-modified {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.canvas-tile-modified svg {
  opacity: 0.6;
}
.canvas-tile-pins {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.canvas-tile-pins svg {
  opacity: 0.6;
}
/* Tile action buttons */
.canvas-tile-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.canvas-tile:hover .canvas-tile-actions {
  opacity: 1;
}
.canvas-tile-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-tile-action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--os-text-primary);
}
.canvas-tile-action.canvas-tile-delete:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
  color: rgba(239, 68, 68, 0.9);
}
/* Delete Confirmation Modal */
.canvas-delete-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.15s ease;
}
.canvas-delete-modal {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: scaleIn 0.2s ease;
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.canvas-delete-modal-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  color: rgba(239, 68, 68, 0.9);
}
.canvas-delete-modal h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.canvas-delete-modal p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}
.canvas-delete-modal p strong {
  color: var(--os-text-primary);
}
.canvas-delete-modal-warning {
  font-size: 0.8rem !important;
  color: rgba(239, 68, 68, 0.8) !important;
  margin-bottom: 1.25rem !important;
}
.canvas-delete-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}
.canvas-delete-modal-btn {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}
.canvas-delete-modal-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--os-text-secondary);
}
.canvas-delete-modal-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}
.canvas-delete-modal-btn.delete {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}
.canvas-delete-modal-btn.delete:hover {
  background: rgba(239, 68, 68, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
/* Cover Image Modal */
.canvas-cover-modal {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: scaleIn 0.2s ease;
}
.canvas-cover-modal-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  color: rgba(var(--accent-rgb), 0.9);
}
.canvas-cover-modal h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.canvas-cover-modal p {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--os-text-muted);
}
.canvas-cover-modal-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.canvas-cover-modal-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}
.canvas-details-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.canvas-cover-modal-input::placeholder {
  color: var(--os-text-hint);
}
.canvas-cover-modal-preview {
  margin-top: 1rem;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  max-height: 150px;
}
.canvas-cover-modal-preview img {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: cover;
  display: none;
}
/* Canvas Tile Context Menu */
.canvas-tile-context-menu {
  position: fixed;
  min-width: 160px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  animation: contextMenuIn 0.12s ease;
}
@keyframes contextMenuIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.canvas-tile-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease;
}
.canvas-tile-context-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.canvas-tile-context-item svg {
  opacity: 0.7;
}
.canvas-tile-context-item.danger {
  color: rgba(239, 68, 68, 0.9);
}
.canvas-tile-context-item.danger:hover {
  background: rgba(239, 68, 68, 0.15);
}
.canvas-tile-context-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 8px;
}
/* Rename input */
.canvas-tile-rename-input {
  width: 100%;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--os-text-primary);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 4px;
  outline: none;
}
.canvas-tile-rename-input:focus {
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}
.canvas-tile.renaming {
  outline: 2px solid rgba(var(--accent-rgb), 0.3);
  outline-offset: 2px;
}
/* ============================================
   Canvas Toolbar
   ============================================ */
.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.canvas-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.canvas-toolbar-btn.canvas-toolbar-add {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
}
.canvas-toolbar-btn.canvas-toolbar-add:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: rgba(var(--accent-rgb), 1);
}
.canvas-toolbar-title {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--os-text-secondary);
}
.canvas-toolbar-zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}
.canvas-toolbar-zoom button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-toolbar-zoom button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
.canvas-toolbar-zoom span {
  min-width: 48px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
/* ============================================
   Canvas Settings
   ============================================ */
.canvas-toolbar-settings {
  position: relative;
}
.canvas-toolbar-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(var(--accent-rgb), 1);
}
.canvas-settings-popover {
  width: 320px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 0;
  background: rgba(22, 22, 22, 0.97);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 999999;
}
.settings-section {
  padding: 0.75rem 1.25rem;
}
.settings-section:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.settings-section-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--os-text-muted);
  margin-bottom: 0.5rem;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-label {
  font-size: 0.8rem;
  color: var(--os-text-secondary);
}
.settings-toggle {
  width: 36px;
  height: 20px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.settings-toggle.active {
  background: rgba(var(--accent-rgb), 0.5);
}
.settings-toggle-knob {
  display: block;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.settings-toggle.active .settings-toggle-knob {
  transform: translateX(16px);
}
.settings-presets {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.settings-preset-btn {
  flex: 1;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.settings-preset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.settings-preset-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(var(--accent-rgb), 1);
}
/* Color grid for background presets */
.settings-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.settings-color-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.settings-color-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.settings-color-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.5);
}
.settings-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.settings-color-label {
  font-size: 0.6rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.settings-color-btn.active .settings-color-label {
  color: rgba(var(--accent-rgb), 0.9);
}
/* Custom color picker */
.settings-color-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
}
.settings-color-picker {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}
.settings-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}
.settings-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}
/* Wallpaper settings */
.settings-wallpaper-content {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.settings-wallpaper-options {
  display: flex;
  gap: 6px;
}
.settings-wallpaper-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.settings-wallpaper-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.settings-wallpaper-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: rgba(var(--accent-rgb), 1);
}
.settings-wallpaper-btn svg {
  opacity: 0.7;
}
.settings-wallpaper-btn.active svg {
  opacity: 1;
}
.settings-wallpaper-opacity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.settings-opacity-label {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  min-width: 50px;
}
.settings-opacity-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
}
.settings-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: rgba(var(--accent-rgb), 1);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.settings-opacity-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.settings-opacity-value {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  min-width: 32px;
  text-align: right;
}
.settings-wallpaper-url {
  margin-top: 4px;
}
.settings-url-input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.75rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  outline: none;
  transition: border-color 0.15s ease;
}
.settings-url-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.settings-url-input::placeholder {
  color: var(--os-text-hint);
}
/* ============================================
   Canvas Viewport
   ============================================ */
.canvas-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  contain: layout style;
  transition: background-color 0.2s ease;
  touch-action: none; /* Prevent browser gestures */
}
/* Wallpaper layer */
.canvas-wallpaper {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}
.canvas-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  will-change: transform;
}
.canvas-grid {
  --grid-opacity: 0.03;
  position: absolute;
  left: -20000px;
  top: -20000px;
  width: 40000px;
  height: 40000px;
  background-image:
    linear-gradient(rgba(255, 255, 255, var(--grid-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, var(--grid-opacity)) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}
.canvas-grid.light {
  background-image:
    linear-gradient(rgba(0, 0, 0, max(var(--grid-opacity), 0.08)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, max(var(--grid-opacity), 0.08)) 1px, transparent 1px);
}
/* ============================================
   Canvas Pins - Matches Desktop Sticky Notes
   ============================================ */
.canvas-pin {
  position: absolute;
  background: var(--pin-bg);
  border: 1px solid var(--pin-border);
  border-radius: 2px;
  color: var(--pin-text);
  transform: rotate(var(--pin-rotation, 0deg));
  box-shadow:
    2px 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08);
  cursor: grab;
  user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: visible;
  z-index: 1;
  /* Reduce flicker — isolate each pin's paint and layout */
  contain: layout style;
  will-change: transform;
}
/* Top shadow effect for paper-like appearance */
.canvas-pin::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  height: 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent);
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}
/* Invisible hover buffer zone - makes the hover area bigger than the visible pin
   so connection points stay visible when moving slightly beyond the pin edge */
.canvas-pin::after {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  pointer-events: auto;
  cursor: grab;
  /* Debug: uncomment to see hover area */
  /* background: rgba(255, 0, 0, 0.1); */
}
/* Transparent pins - minimal styling */
.canvas-pin.transparent {
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
}
.canvas-pin.transparent::before {
  display: none;
}
.canvas-pin:hover {
  transform: rotate(var(--pin-rotation, 0deg)) scale(1.02);
  box-shadow:
    3px 5px 15px rgba(0, 0, 0, 0.35),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08);
}
.canvas-pin.transparent:hover {
  transform: rotate(var(--pin-rotation, 0deg)) scale(1.02);
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.2);
}
.canvas-pin.selected {
  outline: 2px dashed rgba(255, 255, 255, 0.6);
  outline-offset: 6px;
}
.canvas-pin.dragging {
  cursor: grabbing;
  transform: rotate(var(--pin-rotation, 0deg)) scale(1.05);
  box-shadow:
    8px 12px 30px rgba(0, 0, 0, 0.45),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  transition: none;
}
.canvas-pin.transparent.dragging {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
/* Media pins (video, spotify, image) - no paper effect */
.canvas-pin.video,
.canvas-pin.image {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* Spotify and embed pins - transparent background to blend with iframe content */
.canvas-pin.spotify,
.canvas-pin.embed {
  border-radius: 12px;
  background: transparent !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  /* Keep overflow visible for connection points - content clipping handled by inner container */
  overflow: visible;
}
.canvas-pin.video::before,
.canvas-pin.spotify::before,
.canvas-pin.image::before,
.canvas-pin.embed::before {
  display: none;
}
.canvas-pin.video:hover,
.canvas-pin.image:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.canvas-pin.spotify:hover,
.canvas-pin.embed:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.canvas-pin.video.dragging,
.canvas-pin.spotify.dragging,
.canvas-pin.image.dragging,
.canvas-pin.embed.dragging {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
/* Text pin */
.canvas-pin-text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  overflow: hidden;
}
.canvas-pin-text textarea {
  width: 100%;
  flex: 1;
  background: transparent;
  border: none;
  color: var(--pin-text);
  font-size: 0.9rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
}
.canvas-pin-text-content {
  width: 100%;
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--pin-text);
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.canvas-pin-source-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--pin-text);
  opacity: 0.6;
  text-decoration: none;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transition: opacity 0.15s ease;
}
.canvas-pin-source-link:hover {
  opacity: 1;
  text-decoration: underline;
}
/* Image pin */
.canvas-pin-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.canvas-pin-image {
  width: 100%;
  flex: 1;
  object-fit: cover;
  border-radius: 2px;
  min-height: 0;
}
/* Annotation bar for images and media */
.canvas-pin-annotation {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  border-radius: 0 0 6px 6px;
  min-height: 28px;
}
.canvas-pin-annotation-text {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--os-text-primary);
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}
.canvas-pin-annotation-text:empty::before,
.canvas-pin.selected .canvas-pin-annotation-text:not(:empty)::before {
  content: none;
}
.canvas-pin.selected .canvas-pin-annotation-text:empty {
  color: var(--os-text-muted);
  font-style: italic;
}
.canvas-pin-annotation-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: white;
  outline: none;
}
.canvas-pin-annotation-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.canvas-pin-annotation-input::placeholder {
  color: var(--os-text-muted);
}
/* Annotation bar for media pins (video, spotify, embed) */
.canvas-pin-image-wrapper .canvas-pin-annotation.media,
.canvas-pin-video .canvas-pin-annotation.media,
.canvas-pin-spotify .canvas-pin-annotation.media,
.canvas-pin-embed-container .canvas-pin-annotation.media {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 8px 8px;
  padding: 8px 12px;
  margin-top: -2px;
  flex-shrink: 0;
  z-index: 10;
}
/* Override text badge for media pins - just text, no background */
.canvas-pin-annotation.media .canvas-pin-annotation-text {
  background: none;
  border: none;
  padding: 0;
}
/* Iframe wrapper - takes remaining flex space and contains the scaled iframe */
.canvas-pin-iframe-wrapper {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}
/* Video/Spotify iframe - scaled to fit while showing full content */
.canvas-pin-iframe {
  position: absolute;
  top: 0;
  left: 0;
  /* Render at fixed size, then scale to fit container */
  width: var(--iframe-native-width, 640px);
  height: var(--iframe-native-height, 360px);
  border: none;
  display: block;
  transform-origin: top left;
  /* Scale is calculated via JS and set as CSS variable */
  transform: scale(var(--iframe-scale, 1));
}
/* When annotation exists, iframe wrapper should not have bottom radius */
.canvas-pin-video:has(.canvas-pin-annotation) .canvas-pin-iframe-wrapper,
.canvas-pin-spotify:has(.canvas-pin-annotation) .canvas-pin-iframe-wrapper,
.canvas-pin-embed-container:has(.canvas-pin-annotation) .canvas-pin-iframe-wrapper {
  border-radius: 0;
}
/* Video/Spotify/Embed container */
.canvas-pin-video,
.canvas-pin-spotify,
.canvas-pin-embed-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
}
/* Give internal containers dark backgrounds to match their embeds */
.canvas-pin-video {
  background: #000;
}
.canvas-pin-spotify {
  background: #121212; /* Spotify's dark background */
}
.canvas-pin-embed-container {
  background: #1e1e1e;
}
/* Pin Titlebar */
.canvas-pin-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 8px;
  background: rgba(30, 30, 30, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px 12px 0 0;
  cursor: grab;
  flex-shrink: 0;
}
.canvas-pin-titlebar.spotify {
  background: rgba(18, 18, 18, 0.95);
  border-bottom-color: rgba(30, 215, 96, 0.2);
}
.canvas-pin-titlebar.embed {
  background: rgba(30, 30, 30, 0.95);
  border-bottom-color: rgba(251, 146, 60, 0.2);
}
.canvas-pin-drag-handle {
  color: var(--os-text-muted);
  flex-shrink: 0;
}
.canvas-pin-type-label {
  flex: 1;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--os-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.canvas-pin-titlebar.spotify .canvas-pin-type-label {
  color: rgba(30, 215, 96, 0.8);
}
.canvas-pin-titlebar.embed .canvas-pin-type-label {
  color: rgba(251, 146, 60, 0.8);
}
.canvas-pin-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.canvas-pin-close:hover {
  background: rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 1);
}
.canvas-pin-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.canvas-pin-open:hover {
  background: rgba(56, 189, 248, 0.24);
  color: rgba(125, 211, 252, 1);
}
/* Overlay to capture scroll/gesture events for pan/zoom */
/* Positioned below titlebar so titlebar remains interactive */
.canvas-pin.video::after,
/* Overlay for spotify/embed to block iframe interactions + extended hover buffer */
.canvas-pin.spotify::after,
.canvas-pin.embed::after {
  content: '';
  position: absolute;
  /* Extended bounds for hover buffer zone */
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  background: transparent;
  z-index: 5;
  cursor: grab;
  pointer-events: auto;
}
/* Inner overlay to block iframe interactions (separate from hover buffer) */
.canvas-pin.video .canvas-pin-iframe-wrapper::before,
.canvas-pin.spotify .canvas-pin-iframe-wrapper::before,
.canvas-pin.embed .canvas-pin-embed-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  cursor: grab;
  border-radius: 0 0 12px 12px;
  pointer-events: auto;
}
/* In interaction mode (double-click to toggle), allow interaction with embed */
.canvas-pin.video.interaction-mode::after,
.canvas-pin.spotify.interaction-mode::after,
.canvas-pin.embed.interaction-mode::after {
  pointer-events: none;
}
.canvas-pin.video.interaction-mode .canvas-pin-iframe-wrapper::before,
.canvas-pin.spotify.interaction-mode .canvas-pin-iframe-wrapper::before,
.canvas-pin.embed.interaction-mode .canvas-pin-embed-container::before {
  pointer-events: none;
}
/* Show visual indicator when in interaction mode */
.canvas-pin.video.interaction-mode,
.canvas-pin.spotify.interaction-mode,
.canvas-pin.embed.interaction-mode {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
/* Keep overlay during drag/resize to prevent iframe from capturing events */
.canvas-pin.video.dragging::after,
.canvas-pin.spotify.dragging::after,
.canvas-pin.embed.dragging::after,
.canvas-pin.video.resizing::after,
.canvas-pin.spotify.resizing::after,
.canvas-pin.embed.resizing::after {
  pointer-events: auto;
  cursor: grabbing;
}
/* Resize/Rotate handles for video/spotify/embed pins */
.canvas-pin.video .canvas-pin-resize,
.canvas-pin.spotify .canvas-pin-resize,
.canvas-pin.embed .canvas-pin-resize {
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}
.canvas-pin.video:hover .canvas-pin-resize,
.canvas-pin.spotify:hover .canvas-pin-resize,
.canvas-pin.embed:hover .canvas-pin-resize,
.canvas-pin.video.selected .canvas-pin-resize,
.canvas-pin.spotify.selected .canvas-pin-resize,
.canvas-pin.embed.selected .canvas-pin-resize {
  opacity: 1;
}
.canvas-pin.spotify .canvas-pin-resize::before {
  border-color: rgba(30, 215, 96, 0.7);
}
.canvas-pin.embed .canvas-pin-resize::before {
  border-color: rgba(251, 146, 60, 0.7);
}
.canvas-pin.video .canvas-pin-rotate,
.canvas-pin.spotify .canvas-pin-rotate,
.canvas-pin.embed .canvas-pin-rotate {
  z-index: 10;
  background: rgba(30, 30, 30, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
}
.canvas-pin.video:hover .canvas-pin-rotate,
.canvas-pin.spotify:hover .canvas-pin-rotate,
.canvas-pin.embed:hover .canvas-pin-rotate,
.canvas-pin.video.selected .canvas-pin-rotate,
.canvas-pin.spotify.selected .canvas-pin-rotate,
.canvas-pin.embed.selected .canvas-pin-rotate {
  opacity: 1;
}
.canvas-pin.spotify .canvas-pin-rotate {
  background: rgba(18, 18, 18, 0.9);
  border-color: rgba(30, 215, 96, 0.3);
}
.canvas-pin.spotify .canvas-pin-rotate svg {
  color: rgba(30, 215, 96, 0.7);
}
.canvas-pin.embed .canvas-pin-rotate {
  background: rgba(30, 30, 30, 0.9);
  border-color: rgba(251, 146, 60, 0.3);
}
.canvas-pin.embed .canvas-pin-rotate svg {
  color: rgba(251, 146, 60, 0.7);
}
/* Embed pin content (inside container) */
.canvas-pin-embed {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgba(30, 30, 30, 1);
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}
.canvas-pin-embed-thumb {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
}
.canvas-pin-embed-placeholder {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(var(--accent-rgb), 0.1));
  color: var(--os-text-hint);
}
.canvas-pin-embed-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.5);
}
.canvas-pin-embed-site {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(251, 146, 60, 0.9);
  text-transform: uppercase;
}
.canvas-pin-embed-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Resize handle */
.canvas-pin-resize {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}
.canvas-pin-resize::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}
.canvas-pin:hover .canvas-pin-resize {
  opacity: 1;
}
.canvas-pin-resize:hover {
  background: rgba(var(--accent-rgb), 0.4);
  border-color: rgba(var(--accent-rgb), 0.6);
}
.canvas-pin-resize:hover::before {
  border-color: white;
}
/* Rotation handle */
.canvas-pin-rotate {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%) rotate(calc(-1 * var(--pin-rotation, 0deg)));
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}
/* Line connecting rotation handle to pin */
.canvas-pin-rotate::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}
.canvas-pin-rotate svg {
  color: var(--os-text-secondary);
}
.canvas-pin:hover .canvas-pin-rotate {
  opacity: 1;
}
.canvas-pin-rotate:hover {
  background: rgba(var(--accent-rgb), 0.4);
  border-color: rgba(var(--accent-rgb), 0.6);
  transform: translateX(-50%) rotate(calc(-1 * var(--pin-rotation, 0deg))) scale(1.1);
}
.canvas-pin-rotate:hover svg {
  color: white;
}
.canvas-pin-rotate:active {
  cursor: grabbing;
}
/* ============================================
   Border Color Picker
   ============================================ */
/* Pin toolbar (color picker + annotation) */
.canvas-pin-toolbar {
  position: absolute;
  /* Position and transform calculated in JS to account for rotation */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 100;
}
.canvas-pin-border-picker {
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.border-picker-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}
.border-color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.border-color-btn.none {
  border-style: dashed;
}
.border-color-btn.annotation-btn {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(var(--accent-rgb), 0.9);
}
.border-color-btn.annotation-btn:hover {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.6);
}
.border-color-btn.annotation-btn.has-annotation {
  background: rgba(var(--accent-rgb), 0.4);
  border-color: rgba(var(--accent-rgb), 0.8);
  color: white;
}
.border-color-btn.delete-btn {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: rgba(239, 68, 68, 0.9);
}
.border-color-btn.delete-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: rgba(239, 68, 68, 0.6);
  color: white;
}
/* Annotation popover below toolbar */
.canvas-pin-annotation-popover {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  min-width: 220px;
}
.canvas-pin-annotation-popover .canvas-pin-annotation-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: white;
  outline: none;
  resize: vertical;
  min-height: 60px;
  max-height: 150px;
  font-family: inherit;
  line-height: 1.4;
}
.canvas-pin-annotation-popover .canvas-pin-annotation-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.canvas-pin-annotation-popover .canvas-pin-annotation-input::placeholder {
  color: var(--os-text-muted);
}
.border-color-btn.none svg {
  color: var(--os-text-muted);
}
.border-color-btn:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.5);
}
.border-color-btn.active {
  border-color: white;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
/* Pin with border color */
.canvas-pin.has-border-color {
  border: 2px solid var(--pin-accent-color) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--pin-accent-color) 40%, transparent),
              0 4px 16px rgba(0, 0, 0, 0.3);
}
.canvas-pin.has-border-color.selected {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.6),
              0 0 16px color-mix(in srgb, var(--pin-accent-color) 50%, transparent),
              0 4px 20px rgba(0, 0, 0, 0.4);
}
/* ============================================
   Edge Labels
   ============================================ */
.edge-label-input {
  width: 180px;
  text-align: center;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: white;
  font-size: 13px;
  padding: 6px 12px;
  outline: none;
  margin: 0 auto;
  display: block;
}
.edge-label-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}
.edge-label {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  cursor: grab;
  padding: 6px 14px;
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  white-space: nowrap;
  display: inline-block;
  margin: 0 auto;
  width: fit-content;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  user-select: none;
}
.edge-label:hover {
  background: rgba(50, 50, 50, 0.95);
  border-color: rgba(255, 255, 255, 0.25);
}
.edge-label:active {
  cursor: grabbing;
}
/* ============================================
   Alignment Guides
   ============================================ */
.alignment-guide {
  stroke: rgba(var(--accent-rgb), 0.7);
  stroke-width: 1;
  stroke-dasharray: 6 4;
  pointer-events: none;
}
.alignment-guide.horizontal {
  stroke: rgba(56, 189, 248, 0.7);
}
.alignment-guide.vertical {
  stroke: rgba(251, 113, 133, 0.7);
}
/* ============================================
   Groups / Areas
   ============================================ */
.canvas-group {
  position: absolute;
  background: color-mix(in srgb, var(--group-color) 8%, transparent);
  border: 2px dashed color-mix(in srgb, var(--group-color) 40%, transparent);
  border-radius: 12px;
  z-index: 0;
  overflow: visible;
  cursor: grab;
}
.canvas-group:hover {
  background: color-mix(in srgb, var(--group-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--group-color) 60%, transparent);
}
.canvas-group.selected {
  border-style: solid;
  border-color: var(--group-color);
  background: color-mix(in srgb, var(--group-color) 15%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--group-color) 30%, transparent);
}
.canvas-group-label {
  position: absolute;
  top: -28px;
  left: 8px;
  pointer-events: auto;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--group-color) 90%, black);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.canvas-group-label input {
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 12px;
  font-weight: 600;
  width: 150px;
  padding: 0;
}
.canvas-group-label input::placeholder {
  color: var(--os-text-muted);
}
.canvas-group-label span {
  opacity: 0.9;
}
/* Group toolbar (color picker + description button) */
.canvas-group-toolbar {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.canvas-group-color-picker {
  display: flex;
  gap: 4px;
}
.canvas-group-description-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-left: 4px;
}
.canvas-group-description-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-secondary);
}
.canvas-group-description-btn.has-description {
  color: rgba(74, 222, 128, 0.8);
  border-color: rgba(74, 222, 128, 0.3);
}
/* Group description popover */
.canvas-group-description-popover {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  padding: 8px;
  background: rgba(30, 30, 30, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  z-index: 101;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.canvas-group-description-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  padding: 8px;
  resize: none;
  font-family: inherit;
}
.canvas-group-description-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.canvas-group-description-input::placeholder {
  color: var(--os-text-hint);
}
/* Group description preview (shown at bottom of group) */
.canvas-group-description-preview {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  cursor: text;
  pointer-events: auto;
  max-height: 80px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  transition: background 0.15s ease;
}
.canvas-group-description-preview:hover {
  background: rgba(0, 0, 0, 0.7);
  color: var(--os-text-primary);
}
.group-color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  padding: 0;
}
.group-color-btn:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.5);
}
.group-color-btn.active {
  border-color: white;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
/* Group resize handles */
.canvas-group-resize {
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border: 2px solid var(--group-color);
  border-radius: 3px;
  z-index: 10;
  pointer-events: auto;
}
.canvas-group-resize.nw {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}
.canvas-group-resize.ne {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}
.canvas-group-resize.sw {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}
.canvas-group-resize.se {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}
.canvas-group-resize:hover {
  background: var(--group-color);
}
/* Group connection points (edge anchors) */
.canvas-group-connection-point {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(var(--accent-rgb), 0.6);
  border: 2px solid rgba(var(--accent-rgb), 1);
  border-radius: 50%;
  cursor: crosshair;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: auto;
}
.canvas-group:hover .canvas-group-connection-point,
.canvas-group.selected .canvas-group-connection-point {
  opacity: 1;
}
.canvas-group-connection-point:hover {
  transform: scale(1.3);
  background: rgba(var(--accent-rgb), 0.9);
}
.canvas-group-connection-point.top {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}
.canvas-group-connection-point.top:hover {
  transform: translateX(-50%) scale(1.3);
}
.canvas-group-connection-point.bottom {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}
.canvas-group-connection-point.bottom:hover {
  transform: translateX(-50%) scale(1.3);
}
.canvas-group-connection-point.left {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
}
.canvas-group-connection-point.left:hover {
  transform: translateY(-50%) scale(1.3);
}
.canvas-group-connection-point.right {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
}
.canvas-group-connection-point.right:hover {
  transform: translateY(-50%) scale(1.3);
}
/* ============================================
   Selection Box
   ============================================ */
.canvas-selection-box {
  position: absolute;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px dashed rgba(var(--accent-rgb), 0.5);
  pointer-events: none;
  z-index: 10000;
}
/* ============================================
   Minimap
   ============================================ */
.canvas-minimap {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 150px;
  height: 100px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  z-index: 100;
  transition: opacity 0.2s ease;
}
.canvas-minimap:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.canvas-minimap:active,
.canvas-minimap.dragging {
  cursor: grabbing;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.minimap-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.minimap-pin {
  position: absolute;
  border-radius: 2px;
  opacity: 0.65;
  min-width: 3px;
  min-height: 3px;
}
.minimap-viewport {
  position: absolute;
  border: 1.5px solid rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 2px;
  pointer-events: none;
}
/* ============================================
   Add Menu
   ============================================ */
.canvas-add-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
}
.canvas-add-menu {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 10001;
  min-width: 140px;
}
.canvas-add-menu button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.canvas-add-menu button:hover {
  background: rgba(var(--accent-rgb), 0.2);
  color: white;
}
.canvas-add-menu button svg {
  color: rgba(var(--accent-rgb), 0.7);
}
.canvas-add-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}
/* ============================================
   URL Input Modal
   ============================================ */
.canvas-url-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
}
.canvas-url-modal {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
  width: 400px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.canvas-url-modal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--os-text-primary);
  font-size: 0.95rem;
  font-weight: 500;
}
.canvas-url-modal-header svg {
  color: rgba(var(--accent-rgb), 0.8);
}
.canvas-url-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.canvas-url-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.canvas-url-input::placeholder {
  color: var(--os-text-hint);
}
.canvas-url-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
.canvas-url-modal-actions button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.canvas-url-modal-actions button:hover {
  background: rgba(255, 255, 255, 0.12);
}
.canvas-url-modal-actions button.primary {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: white;
}
.canvas-url-modal-actions button.primary:hover {
  background: rgba(var(--accent-rgb), 0.4);
}
/* ============================================
   Pin Modal (matching desktop sticky notes)
   ============================================ */
.canvas-pin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100003;
  touch-action: none;
}
.canvas-pin-modal {
  width: 90%;
  max-width: 700px;
  height: 80vh;
  max-height: 80vh;
  background: rgba(25, 25, 30, 0.98);
  border: 2px solid var(--modal-accent-color, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--modal-accent-bg, rgba(255, 255, 255, 0.05));
  animation: canvasPinModalAppear 0.25s ease-out;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@keyframes canvasPinModalAppear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.canvas-pin-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
  font-size: 0.95rem;
  font-weight: 500;
  flex-shrink: 0;
}
.canvas-pin-modal-header svg {
  opacity: 0.6;
}
.canvas-pin-modal-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.canvas-pin-modal-close:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}
.canvas-pin-modal-close svg {
  opacity: 1;
}
/* Type Selector */
.canvas-pin-type-selector {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.canvas-pin-type-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-pin-type-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}
.canvas-pin-type-btn.active {
  background: var(--modal-accent-bg, rgba(var(--accent-rgb), 0.2));
  border-color: var(--modal-accent-color, rgba(var(--accent-rgb), 0.5));
  color: var(--os-text-primary);
}
.canvas-pin-type-btn svg {
  opacity: 0.7;
}
.canvas-pin-type-btn.active svg {
  opacity: 1;
}
/* Note Editor in modal */
.canvas-pin-modal .note-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.canvas-pin-modal .note-editor-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.canvas-pin-modal .note-editor-input {
  flex: 1;
  min-height: 200px;
}
/* Video Input */
.canvas-pin-video-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.canvas-pin-video-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.canvas-pin-video-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--os-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  justify-content: center;
}
.canvas-pin-video-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}
.canvas-pin-video-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--os-text-primary);
}
.canvas-pin-video-preview {
  flex: 1;
  min-height: 200px;
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}
.canvas-pin-video-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.canvas-pin-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--os-text-hint);
}
.canvas-pin-video-placeholder svg {
  opacity: 0.5;
}
/* Video Search */
.canvas-pin-video-search-input {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  flex-shrink: 0;
}
.canvas-pin-video-search-input input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--os-text-primary);
  font-size: 0.9rem;
  outline: none;
}
.canvas-pin-video-search-input input::placeholder {
  color: var(--os-text-hint);
}
.canvas-pin-video-search-results {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.canvas-pin-video-search-result {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  flex-shrink: 0;
}
.canvas-pin-video-search-result:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.canvas-pin-video-search-result.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.search-result-thumbnail {
  position: relative;
  width: 120px;
  min-width: 120px;
  height: 68px;
  min-height: 68px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  overflow: hidden;
}
.search-result-thumbnail img {
  width: 120px;
  height: 68px;
  object-fit: cover;
}
.search-result-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-hint);
}
.search-result-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  font-size: 0.65rem;
  color: white;
}
.search-result-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.search-result-title {
  font-size: 0.85rem;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-result-channel {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.canvas-pin-video-no-results,
.canvas-pin-video-search-prompt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--os-text-hint);
}
.canvas-pin-video-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}
/* Common button styles */
.canvas-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-pin-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}
.canvas-pin-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}
.canvas-pin-btn.save {
  background: rgba(var(--accent-rgb), 0.9);
  color: white;
}
.canvas-pin-btn.save:hover {
  background: rgba(var(--accent-rgb), 1);
}
.canvas-pin-btn.save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Common URL input */
.canvas-pin-url-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.9rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  outline: none;
  transition: border-color 0.15s ease;
}
.canvas-pin-url-input:focus {
  border-color: var(--modal-accent-color, rgba(var(--accent-rgb), 0.5));
}
.canvas-pin-url-input::placeholder {
  color: var(--os-text-hint);
}
/* Image/Sticker Input */
.canvas-pin-image-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.canvas-pin-sticker-tabs {
  display: flex;
  gap: 6px;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.canvas-pin-sticker-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--os-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  justify-content: center;
}
.canvas-pin-sticker-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}
.canvas-pin-sticker-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--os-text-primary);
}
.canvas-pin-sticker-tab .tab-count {
  font-size: 0.7rem;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  opacity: 0.7;
}
.canvas-pin-sticker-tab.active .tab-count {
  background: rgba(var(--accent-rgb), 0.3);
  opacity: 1;
}
.canvas-pin-stickers-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}
.canvas-pin-stickers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
}
.canvas-pin-sticker-btn {
  width: 90px;
  height: 90px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-pin-sticker-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}
.canvas-pin-sticker-btn.selected {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.6);
}
.canvas-pin-sticker-btn img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.canvas-pin-custom-url-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}
.canvas-pin-image-preview {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
}
.canvas-pin-image-preview img {
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.canvas-pin-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--os-text-hint);
}
.canvas-pin-image-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}
/* Embed Input */
.canvas-pin-embed-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.canvas-pin-embed-preview {
  flex: 1;
  min-height: 200px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}
.canvas-pin-embed-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.canvas-pin-embed-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--os-text-muted);
}
.canvas-pin-embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--os-text-hint);
  text-align: center;
}
.canvas-pin-embed-placeholder .embed-hint {
  font-size: 0.75rem;
  opacity: 0.6;
  max-width: 300px;
}
.canvas-pin-embed-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(239, 68, 68, 0.8);
  text-align: center;
}
.canvas-pin-embed-error .embed-hint {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}
.canvas-pin-embed-iframely {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.iframely-preview-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.iframely-preview-thumbnail {
  flex: 1;
  width: 100%;
  object-fit: cover;
}
.iframely-preview-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(var(--accent-rgb), 0.1));
  color: var(--os-text-hint);
}
.iframely-preview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.5);
}
.iframely-preview-site {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(251, 146, 60, 0.9);
  text-transform: uppercase;
}
.iframely-preview-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--os-text-primary);
}
.iframely-preview-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  line-height: 1.4;
}
.iframely-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: var(--os-text-muted);
}
.iframely-powered {
  color: rgba(251, 146, 60, 0.8);
}
.iframely-site {
  font-weight: 500;
}
.iframely-ready {
  margin-left: auto;
  color: rgba(34, 197, 94, 0.8);
}
.canvas-pin-embed-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}
/* Game Input */
.canvas-pin-game-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.canvas-pin-games-filters {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.canvas-pin-games-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.canvas-pin-games-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--os-text-primary);
  font-size: 0.9rem;
  outline: none;
}
.canvas-pin-games-search input::placeholder {
  color: var(--os-text-hint);
}
.canvas-pin-games-category {
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--os-text-primary);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
}
.canvas-pin-games-category:focus {
  border-color: rgba(168, 85, 247, 0.4);
}
.canvas-pin-games-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 0.5rem 0;
  align-content: start;
}
.canvas-pin-game-item {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  height: fit-content;
}
.canvas-pin-game-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}
.canvas-pin-game-item.selected {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.5);
}
.game-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.game-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-hint);
}
.game-info {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.game-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-category {
  font-size: 0.65rem;
  color: rgba(168, 85, 247, 0.8);
  text-transform: uppercase;
}
.canvas-pin-games-loading,
.canvas-pin-games-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--os-text-hint);
}
.canvas-pin-game-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}
/* Spin animation for loaders */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
}
/* ============================================
   Canvas Edges Layer
   ============================================ */
.canvas-edges-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  z-index: 100;
  /* SVG background passes through, only edge paths are clickable */
  pointer-events: none;
}
/* Edge groups need pointer-events enabled for clicking */
.canvas-edge {
  pointer-events: auto;
}
/* The invisible hit area for clicking edges */
.canvas-edge path:first-of-type {
  pointer-events: stroke;
  cursor: pointer;
}
.canvas-edges-layer path {
  transition: stroke-width 0.15s ease, filter 0.15s ease;
}
/* Hover effect for edges */
.canvas-edge:hover path:last-of-type {
  stroke-width: 3px;
  filter: drop-shadow(0 0 6px currentColor);
}
/* Selected edge styling - more prominent */
.canvas-edge.selected path:last-of-type {
  stroke-width: 4px;
  filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 12px currentColor);
}
/* Add selection indicators at endpoints for selected edges */
.canvas-edge.selected circle.edge-endpoint {
  fill: currentColor;
  opacity: 0.8;
}
/* Draggable control point for reshaping edges */
.canvas-edge.selected circle.edge-control-point {
  cursor: grab;
  transition: transform 0.1s ease, filter 0.15s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.canvas-edge.selected circle.edge-control-point:hover {
  transform-origin: center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.canvas-edge.selected circle.edge-control-point:active {
  cursor: grabbing;
}
/* ============================================
   Pin Connection Points
   ============================================ */
/* Connection points wrapper - always allow pointer events to pass through to children */
.canvas-pin-connection-points {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.canvas-pin-connection-point {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(var(--accent-rgb), 1);
  border: 2px solid white;
  border-radius: 50%;
  cursor: crosshair;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  pointer-events: auto;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
}
/* Larger invisible hit area for easier clicking */
.canvas-pin-connection-point::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Uncomment to debug hit area: background: rgba(255,0,0,0.2); */
}
/* Show connection points on pin hover or when selected (via wrapper .visible class) */
.canvas-pin:hover .canvas-pin-connection-point,
.canvas-pin-connection-points.visible .canvas-pin-connection-point {
  opacity: 1;
}
/* Keep connection point visible when directly hovering it (even if outside pin bounds) */
.canvas-pin-connection-point:hover {
  opacity: 1 !important;
  background: rgba(var(--accent-rgb), 1);
}
/* Also keep ALL connection points visible when ANY connection point is hovered */
.canvas-pin-connection-points:hover .canvas-pin-connection-point {
  opacity: 1;
}
/* Position connection points on each edge */
.canvas-pin-connection-point.top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.canvas-pin-connection-point.top:hover {
  transform: translate(-50%, -50%) scale(1.3);
}
.canvas-pin-connection-point.right {
  top: 50%;
  right: 0;
  left: auto;
  transform: translate(50%, -50%);
}
.canvas-pin-connection-point.right:hover {
  transform: translate(50%, -50%) scale(1.3);
}
.canvas-pin-connection-point.bottom {
  bottom: 0;
  top: auto;
  left: 50%;
  transform: translate(-50%, 50%);
}
.canvas-pin-connection-point.bottom:hover {
  transform: translate(-50%, 50%) scale(1.3);
}
.canvas-pin-connection-point.left {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}
.canvas-pin-connection-point.left:hover {
  transform: translate(-50%, -50%) scale(1.3);
}
/* When dragging to create edge, highlight potential drop targets */
.canvas-pin.edge-target {
  box-shadow:
    2px 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08),
    0 0 0 2px rgba(74, 222, 128, 0.6),
    0 0 20px rgba(74, 222, 128, 0.3);
}
.canvas-pin.edge-target .canvas-pin-connection-point {
  opacity: 1;
}
/* Highlight the specific connection point being targeted */
.canvas-pin.edge-target[data-target-side="top"] .canvas-pin-connection-point.top,
.canvas-pin.edge-target[data-target-side="right"] .canvas-pin-connection-point.right,
.canvas-pin.edge-target[data-target-side="bottom"] .canvas-pin-connection-point.bottom,
.canvas-pin.edge-target[data-target-side="left"] .canvas-pin-connection-point.left {
  background: rgba(74, 222, 128, 1);
  box-shadow: 0 0 12px rgba(74, 222, 128, 1);
  transform-origin: center;
  animation: pulse-snap 0.6s ease-in-out infinite;
}
@keyframes pulse-snap {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
  }
}
/* Adjust for right side which uses different translate values */
.canvas-pin.edge-target[data-target-side="right"] .canvas-pin-connection-point.right {
  animation: pulse-snap-right 0.6s ease-in-out infinite;
}
@keyframes pulse-snap-right {
  0%, 100% {
    transform: translate(50%, -50%) scale(1.3);
  }
  50% {
    transform: translate(50%, -50%) scale(1.5);
  }
}
/* Adjust for bottom side */
.canvas-pin.edge-target[data-target-side="bottom"] .canvas-pin-connection-point.bottom {
  animation: pulse-snap-bottom 0.6s ease-in-out infinite;
}
@keyframes pulse-snap-bottom {
  0%, 100% {
    transform: translate(-50%, 50%) scale(1.3);
  }
  50% {
    transform: translate(-50%, 50%) scale(1.5);
  }
}
/* ============================================
   File Browser (Pin Modal)
   ============================================ */
.canvas-pin-file-browser {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 350px;
}
.canvas-file-browser-path {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  flex-wrap: wrap;
}
.canvas-file-browser-path-btn {
  background: none;
  border: none;
  color: var(--os-text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.canvas-file-browser-path-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}
.canvas-file-browser-path-segment {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--os-text-muted);
}
.canvas-file-browser-content {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.canvas-file-browser-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.canvas-file-browser-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: var(--os-text-secondary);
  font-size: 0.85rem;
  transition: all 0.15s ease;
}
.canvas-file-browser-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
.canvas-file-browser-item.selected {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.canvas-file-browser-item.folder {
  color: rgba(251, 191, 36, 0.9);
}
.canvas-file-browser-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-file-browser-empty {
  padding: 24px;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.85rem;
}
.canvas-file-browser-preview {
  width: 200px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.canvas-file-browser-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}
.canvas-file-browser-preview-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-file-browser-preview-content {
  flex: 1;
  overflow: auto;
  padding: 12px;
}
.canvas-file-browser-preview-content pre {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--os-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}
.canvas-file-browser-preview-content .loading {
  color: var(--os-text-muted);
  font-size: 0.8rem;
}
.canvas-file-browser-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ============================================
   File Card Pin
   ============================================ */
.canvas-pin-file-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(20, 20, 25, 0.95);
}
.canvas-pin-titlebar.file {
  background: rgba(var(--accent-rgb), 0.15);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
}
.canvas-pin-file-content {
  flex: 1;
  overflow: auto;
  padding: 12px;
  min-height: 0;
}
.canvas-pin-file-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--os-text-muted);
  font-size: 0.85rem;
}
.canvas-pin-file-markdown {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}
.canvas-pin-file-markdown h1 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--os-text-primary);
}
.canvas-pin-file-markdown h2 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 12px 0 6px 0;
  color: var(--os-text-primary);
}
.canvas-pin-file-markdown h3 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 10px 0 4px 0;
  color: var(--os-text-secondary);
}
.canvas-pin-file-markdown p {
  margin: 0 0 8px 0;
}
.canvas-pin-file-markdown li {
  margin: 0 0 4px 16px;
  list-style-type: disc;
}
.canvas-pin-file-markdown code {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.85em;
}
.canvas-pin-file-markdown strong {
  font-weight: 600;
  color: var(--os-text-primary);
}
.canvas-pin-file-markdown em {
  font-style: italic;
  color: var(--os-text-secondary);
}
/* Add file container to annotation selector */
.canvas-pin-file-container .canvas-pin-annotation.media {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 8px 8px;
  padding: 8px 12px;
  margin-top: -2px;
  flex-shrink: 0;
  z-index: 10;
}
/* ============================================
   Presentation Mode
   ============================================ */
.canvas-app.presentation-mode .canvas-toolbar {
  display: none;
}
.canvas-app.presentation-mode .canvas-minimap {
  display: none;
}
.canvas-app.presentation-mode .canvas-pin-connection-points {
  display: none;
}
.canvas-app.presentation-mode .canvas-pin-resize-handle {
  display: none;
}
.canvas-app.presentation-mode .canvas-selection-box {
  display: none;
}
/* Hide pin close buttons in presentation mode */
.canvas-app.presentation-mode .canvas-pin-close {
  display: none;
}
/* Hide edge controls in presentation mode */
.canvas-app.presentation-mode .edge-control-point,
.canvas-app.presentation-mode .edge-endpoint {
  display: none;
}
/* Disable selection highlighting on pins */
.canvas-app.presentation-mode .canvas-pin.selected {
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08);
}
/* Remove pointer events from interactive elements */
.canvas-app.presentation-mode .canvas-pin-titlebar {
  pointer-events: none;
}
/* Presentation indicator */
.canvas-presentation-indicator {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: fadeInUp 0.3s ease forwards, fadeOut 2s ease forwards 2s;
}
.canvas-presentation-indicator kbd {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Pin Notes Panel */
.pin-notes-panel {
  position: absolute;
  top: 42px;
  left: 0;
  width: 380px;
  height: calc(100% - 42px);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 12px 0;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 100;
}
.pin-notes-panel.open {
  transform: translateX(0);
}
.pin-notes-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 8px;
}
.pin-notes-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.pin-notes-panel-title span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pin-notes-panel-close {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pin-notes-panel-close:hover {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.1);
}
.pin-notes-panel-body {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
/* NoteEditor overrides for pin notes panel */
.pin-notes-panel-body .note-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pin-notes-panel-body .note-editor-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.pin-notes-panel-body .note-editor-input {
  flex: 1;
  min-height: 120px;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 1rem;
  border-radius: 8px;
}
.pin-notes-panel-body .note-editor-footer {
  flex-wrap: wrap;
  padding: 8px 12px 12px;
  gap: 8px;
}
.pin-notes-panel-body .note-editor-footer-left {
  display: none;
}
.pin-notes-panel-body .note-editor-actions {
  flex: 1;
  justify-content: flex-end;
}
.pin-notes-panel-body .note-editor-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
}
/* Light theme - Pin Notes Panel */
body.light .pin-notes-panel {
  background: rgba(250, 250, 250, 0.97);
  border-right-color: rgba(0, 0, 0, 0.1);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light .pin-notes-panel-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .pin-notes-panel-title {
  color: rgba(20, 20, 30, 0.85);
}
body.light .pin-notes-panel-close {
  color: rgba(20, 20, 30, 0.4);
}
body.light .pin-notes-panel-close:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.06);
}
body.light .pin-notes-panel-body .note-editor-input {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 30, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .pin-notes-panel-body .note-editor-input::placeholder {
  color: rgba(20, 20, 30, 0.3);
}
body.light .pin-notes-panel-body .note-editor-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
  background: transparent;
}
body.light .pin-notes-panel-body .note-editor-btn {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.7);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .pin-notes-panel-body .note-editor-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}
body.light .pin-notes-panel-body .note-editor-btn.primary {
  background: #6d28d9;
  color: #fff;
  border-color: transparent;
}
/* Notes indicator on pin titlebars */
.canvas-pin-notes-indicator {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: 4px;
  z-index: 10;
  position: relative;
}
.canvas-pin-notes-indicator:hover {
  color: rgba(var(--accent-rgb), 1);
  background: rgba(var(--accent-rgb), 0.15);
}
.canvas-pin-notes-indicator.has-notes {
  color: rgba(var(--accent-rgb), 1);
}
.canvas-pin-notes-indicator.has-notes::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
/* Floating notes indicator for image pins (no titlebar) */
.canvas-pin-notes-indicator.floating {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px;
  border-radius: 4px;
}
.canvas-pin-notes-indicator.floating:hover {
  background: rgba(0, 0, 0, 0.8);
}
/* ============================================
   Light Theme Overrides (body.light)
   ============================================ */
body.light .canvas-app {
  background: #f0f0f0;
  color: rgba(20, 20, 30, 0.9);
}
/* List view background */
body.light .canvas-app.canvas-list-view,
body.light .canvas-list-view {
  background: #f5f5f7;
}
/* Header title */
body.light .canvas-list-header h2 {
  color: rgba(20, 20, 30, 0.88);
}
/* New pinboard button */
body.light .canvas-new-btn {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 1);
}
body.light .canvas-new-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
}
/* New pinboard form inputs */
body.light .canvas-new-form-name,
body.light .canvas-new-form-field {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(20, 20, 30, 0.88);
}
body.light .canvas-new-form-name::placeholder,
body.light .canvas-new-form-field::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
/* Tile cards */
body.light .canvas-tile {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
body.light .canvas-tile:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
/* Tile preview section */
body.light .canvas-tile-preview {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
/* Tile text */
body.light .canvas-tile-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .canvas-tile-description {
  color: rgba(40, 40, 55, 0.55);
}
body.light .canvas-tile-meta,
body.light .canvas-tile-modified,
body.light .canvas-tile-pins {
  color: rgba(60, 60, 80, 0.5);
}
/* Tile action buttons (edit/delete on hover) */
body.light .canvas-tile-action {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(40, 40, 55, 0.55);
  backdrop-filter: blur(4px);
}
body.light .canvas-tile-action:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(20, 20, 30, 0.85);
}
body.light .canvas-tile-action.canvas-tile-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 0.8);
}
/* Empty / loading state */
body.light .canvas-loading,
body.light .canvas-empty {
  color: rgba(60, 60, 80, 0.45);
}
/* Toolbar */
body.light .canvas-toolbar {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.light .canvas-toolbar-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(40, 40, 55, 0.65);
}
body.light .canvas-toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}
body.light .canvas-toolbar-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: rgba(var(--accent-rgb), 1);
}
body.light .canvas-toolbar-title {
  color: rgba(20, 20, 30, 0.75);
}
body.light .canvas-toolbar-zoom {
  background: rgba(0, 0, 0, 0.04);
}
body.light .canvas-toolbar-zoom button {
  color: rgba(40, 40, 55, 0.55);
}
body.light .canvas-toolbar-zoom button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}
body.light .canvas-toolbar-zoom span {
  color: rgba(60, 60, 80, 0.55);
}
/* Settings popover */
/* Minimap */
body.light .canvas-minimap {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light .canvas-minimap:hover {
  border-color: rgba(0, 0, 0, 0.22);
}
body.light .minimap-viewport {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.08);
}
body.light .canvas-settings-popover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  color: rgba(20, 20, 30, 0.88);
}
body.light .settings-section:not(:last-child) {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
body.light .settings-section-label {
  color: rgba(60, 60, 80, 0.5);
}
body.light .settings-label {
  color: rgba(20, 20, 30, 0.8);
}
body.light .settings-toggle {
  background: rgba(0, 0, 0, 0.1);
}
body.light .settings-presets {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .settings-preset-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(40, 40, 55, 0.65);
}
body.light .settings-preset-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}
body.light .settings-preset-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(var(--accent-rgb), 1);
}
body.light .settings-color-grid {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
body.light .settings-color-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .settings-color-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.18);
}
body.light .settings-color-btn.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.5);
}
body.light .settings-color-swatch {
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .settings-color-label {
  color: rgba(40, 40, 55, 0.5);
}
body.light .settings-color-btn.active .settings-color-label {
  color: rgba(var(--accent-rgb), 1);
}
body.light .settings-color-picker {
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .settings-wallpaper-content {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
body.light .settings-wallpaper-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(40, 40, 55, 0.65);
}
body.light .settings-wallpaper-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(20, 20, 30, 0.85);
}
body.light .settings-wallpaper-btn.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(var(--accent-rgb), 1);
}
body.light .settings-toggle-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(40, 40, 55, 0.65);
}
body.light .settings-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
body.light .settings-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 1);
}
body.light .settings-opacity-label {
  color: rgba(40, 40, 55, 0.6);
}
body.light .settings-opacity-slider {
  background: rgba(0, 0, 0, 0.1);
}
/* Delete modal */
body.light .canvas-delete-modal {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.88);
}
body.light .canvas-delete-modal h3 {
  color: rgba(20, 20, 30, 0.9);
}
body.light .canvas-delete-modal p {
  color: rgba(60, 60, 80, 0.65);
}
body.light .canvas-delete-modal-btn:not(.delete) {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(40, 40, 55, 0.7);
}
body.light .canvas-delete-modal-btn:not(.delete):hover {
  background: rgba(0, 0, 0, 0.09);
}
/**
 * Music Studio App Styles
 *
 * Winamp/cliamp-inspired retro aesthetic — compact zones, monospace, spectrum
 */
/* ─── Root ─────────────────────────────────────────────────────────────────── */
.music-studio-app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  background: var(--os-glass-bg-solid);
  color: #00e5a0;
  user-select: none;
}
/* ─── Title Bar (Zone 1) ────────────────────────────────────────────────────── */
.ms-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(90deg, #2a2a2a 0%, #1e1e1e 100%);
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}
.ms-titlebar-logo {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #00e5a0;
  opacity: 0.7;
}
.ms-titlebar-title {
  flex: 1;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.ms-status-dot.playing {
  background: #00e5a0;
  box-shadow: 0 0 6px #00e5a0;
  animation: ms-pulse 1.8s ease-in-out infinite;
}
@keyframes ms-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/* ─── Track Display (Zone 2) ────────────────────────────────────────────────── */
.ms-track-display {
  background: #111;
  border-bottom: 1px solid #2a2a2a;
  padding: 0.6rem 0.75rem 0.5rem;
  flex-shrink: 0;
}
.ms-track-marquee-wrap {
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 0.3rem;
}
.ms-track-marquee {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #f0c040;
  letter-spacing: 0.02em;
}
.ms-track-marquee.scrolling {
  animation: ms-marquee 14s linear infinite;
}
@keyframes ms-marquee {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(0); }
  80%  { transform: translateX(calc(-100% + 220px)); }
  100% { transform: translateX(calc(-100% + 220px)); }
}
.ms-track-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ms-track-num {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.25);
  min-width: 2.5ch;
}
.ms-track-artist {
  flex: 1;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-bitrate {
  font-size: 0.55rem;
  color: #00e5a0;
  opacity: 0.5;
  letter-spacing: 0.08em;
}
/* ─── Visualizer (Zone 3) ────────────────────────────────────────────────────── */
.ms-visualizer {
  flex-shrink: 0;
  height: 60px;
  background: #0a0a0a;
  border-bottom: 1px solid #1e1e1e;
  display: flex;
  align-items: flex-end;
  padding: 4px 4px 2px;
  gap: 2px;
  box-sizing: border-box;
}
.ms-bar {
  flex: 1;
  min-width: 0;
  border-radius: 1px 1px 0 0;
  transition: height 0.08s linear;
  position: relative;
}
/* default idle state */
.ms-bar {
  height: 3px;
  background: #1e3a2e;
}
/* active bar colours — multi-stop like classic Winamp */
.ms-bar.active {
  background: linear-gradient(
    to top,
    #00e5a0 0%,
    #00c87a 35%,
    #ffe040 70%,
    #ff4040 100%
  );
}
/* peak dot */
.ms-bar::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff6060;
  border-radius: 1px;
  opacity: 0;
}
.ms-bar.active::after {
  opacity: 0.7;
}
/* ─── Controls (Zone 4) ────────────────────────────────────────────────────── */
.ms-controls {
  display: flex;
  align-items: center;
  gap: 0;
  background: #1e1e1e;
  border-bottom: 1px solid #2a2a2a;
  padding: 0.4rem 0.5rem;
  flex-shrink: 0;
}
.ms-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s;
  flex-shrink: 0;
}
.ms-btn:hover {
  color: #00e5a0;
  background: rgba(0, 229, 160, 0.08);
}
.ms-btn:active {
  color: #fff;
  background: rgba(0, 229, 160, 0.15);
  transform: translateY(1px);
}
.ms-btn.active {
  color: #00e5a0;
}
.ms-btn.dislike.active {
  color: #ff4040;
}
.ms-btn-play {
  width: 40px;
  height: 32px;
  color: #00e5a0;
  border-radius: 4px;
}
.ms-btn-play:hover {
  background: rgba(0, 229, 160, 0.12);
}
.ms-btn-play.playing {
  color: #ffe040;
}
.ms-btn-play.playing:hover {
  background: rgba(255, 224, 64, 0.12);
  color: #ffe040;
}
.ms-controls-spacer {
  flex: 1;
}
/* ─── Toolbar (Zone 5) ───────────────────────────────────────────────────────── */
.ms-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #191919;
  border-bottom: 1px solid #2a2a2a;
  padding: 0.25rem 0.5rem;
  flex-shrink: 0;
}
.ms-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: rgba(255,255,255,0.4);
  font-family: inherit;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.ms-toolbar-btn:hover {
  color: #00e5a0;
  border-color: rgba(0, 229, 160, 0.2);
  background: rgba(0, 229, 160, 0.05);
}
.ms-toolbar-btn.active {
  color: #00e5a0;
  border-color: rgba(0, 229, 160, 0.3);
  background: rgba(0, 229, 160, 0.08);
}
.ms-toolbar-btn.active-warn {
  color: #ff4040;
  border-color: rgba(255, 64, 64, 0.3);
  background: rgba(255, 64, 64, 0.08);
}
.ms-toolbar-spacer { flex: 1; }
.ms-playlist-select {
  background: transparent;
  border: 1px solid #333;
  border-radius: 2px;
  color: rgba(255,255,255,0.4);
  font-family: inherit;
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  max-width: 140px;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
}
.ms-playlist-select:hover,
.ms-playlist-select:focus {
  border-color: rgba(0, 229, 160, 0.3);
  color: rgba(255,255,255,0.6);
  outline: none;
}
/* ─── Panel (tracks / favorites) ────────────────────────────────────────────── */
.ms-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #111;
  min-height: 0;
}
.ms-panel-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid #222;
  background: #181818;
  flex-shrink: 0;
}
.ms-panel-title {
  flex: 1;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
}
.ms-panel-count {
  font-size: 0.6rem;
  color: rgba(0, 229, 160, 0.5);
}
.ms-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  border-radius: 2px;
}
.ms-panel-close:hover {
  color: #ff4040;
  background: rgba(255,64,64,0.1);
}
.ms-track-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ms-track-list::-webkit-scrollbar {
  width: 4px;
}
.ms-track-list::-webkit-scrollbar-track {
  background: #0a0a0a;
}
.ms-track-list::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}
.ms-track-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.3rem 0.6rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.ms-track-item:hover {
  background: rgba(0, 229, 160, 0.05);
}
.ms-track-item.current {
  background: rgba(0, 229, 160, 0.08);
}
.ms-track-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ms-track-idx {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.2);
  min-width: 2.5ch;
  text-align: right;
  font-family: inherit;
}
.ms-track-item.current .ms-track-idx {
  color: #00e5a0;
}
.ms-track-name {
  flex: 1;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}
.ms-track-item.current .ms-track-name {
  color: #00e5a0;
}
.ms-track-playing-icon {
  color: #00e5a0;
  opacity: 0.7;
  animation: ms-pulse 1.5s ease-in-out infinite;
}
/* ─── Empty state ────────────────────────────────────────────────────────────── */
.ms-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: rgba(255,255,255,0.2);
  font-size: 0.65rem;
  text-align: center;
}
/* ─── No-playlist banner ─────────────────────────────────────────────────────── */
.ms-no-playlist {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 200, 50, 0.06);
  border-top: 1px solid rgba(255, 200, 50, 0.12);
  color: rgba(255, 200, 50, 0.6);
  font-size: 0.6rem;
  flex-shrink: 0;
}
/* ─── Default idle panel ─────────────────────────────────────────────────────── */
.ms-idle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #0e0e0e;
  min-height: 0;
}
.ms-idle-art {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 229, 160, 0.25);
  background: radial-gradient(circle at 40% 35%, #1e1e1e, #0a0a0a);
  box-shadow: 0 0 0 6px rgba(0, 229, 160, 0.04);
}
.ms-idle-art.spinning {
  animation: ms-spin 4s linear infinite;
  border-color: #1e3a2e;
  color: rgba(0, 229, 160, 0.5);
  box-shadow: 0 0 0 6px rgba(0, 229, 160, 0.06), 0 0 20px rgba(0, 229, 160, 0.1);
}
@keyframes ms-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ms-idle-hint {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.2);
  text-align: center;
  letter-spacing: 0.05em;
}
/* French Learning App */
.window-body:has(.fr-app) {
  padding: 0 !important;
}
.fr-app {
  --fr-bg: #0a0a0f;
  --fr-surface: rgba(255, 255, 255, 0.03);
  --fr-surface-hover: rgba(255, 255, 255, 0.06);
  --fr-border: rgba(255, 255, 255, 0.06);
  --fr-text: rgba(255, 255, 255, 0.9);
  --fr-text-muted: rgba(255, 255, 255, 0.4);
  --fr-accent: #a78bfa;
  --fr-accent-bg: rgba(167, 139, 250, 0.1);
}
body.light .fr-app {
  --fr-bg: #f8f8fa;
  --fr-surface: rgba(0, 0, 0, 0.03);
  --fr-surface-hover: rgba(0, 0, 0, 0.05);
  --fr-border: rgba(0, 0, 0, 0.08);
  --fr-text: rgba(0, 0, 0, 0.85);
  --fr-text-muted: rgba(0, 0, 0, 0.4);
  --fr-accent: #7c3aed;
  --fr-accent-bg: rgba(167, 139, 250, 0.08);
}
body.gray .fr-app {
  --fr-bg: #1a1a22;
  --fr-surface: rgba(255, 255, 255, 0.04);
  --fr-surface-hover: rgba(255, 255, 255, 0.07);
  --fr-border: rgba(255, 255, 255, 0.08);
  --fr-text: rgba(255, 255, 255, 0.9);
  --fr-text-muted: rgba(255, 255, 255, 0.45);
  --fr-accent: #a78bfa;
  --fr-accent-bg: rgba(167, 139, 250, 0.12);
}
.fr-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--fr-bg, #0a0a0f);
  color: var(--fr-text, rgba(255, 255, 255, 0.9));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Views with sidebar — sidebar is position:fixed, content gets left margin */
.fr-app-with-nav > .fr-sidebar-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 50;
}
.fr-app-with-nav {
  padding-left: 42px; /* sidebar collapsed width */
}
.fr-app-with-nav:has(.fr-sidebar-nav.expanded) {
  padding-left: 150px;
}
/* Fallback for browsers without :has */
@supports not (selector(:has(*))) {
  .fr-app-with-nav {
    padding-left: 42px;
  }
}
/* ── Light theme ──────────────────────────────────────────────────── */
body.light .fr-app {
  background: var(--fr-bg);
  color: var(--fr-text);
}
body.light .fr-loading {
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-topbar {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .fr-topbar-title {
  color: rgba(0, 0, 0, 0.8);
}
body.light .fr-topbar-sub {
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-back-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.45);
}
body.light .fr-back-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
body.light .fr-session-label {
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-session-arrow {
  color: rgba(167, 139, 250, 0.4);
}
body.light .fr-stat-label {
  color: rgba(0, 0, 0, 0.3);
}
body.light .fr-session-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .fr-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}
body.light .fr-session-count {
  color: rgba(0, 0, 0, 0.3);
}
body.light .fr-card-lang {
  color: rgba(0, 0, 0, 0.2);
}
body.light .fr-card-french {
  color: rgba(0, 0, 0, 0.9);
}
body.light .fr-card-pronunciation {
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-show-btn {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
}
body.light .fr-show-btn:hover {
  background: rgba(0, 0, 0, 0.09);
  color: rgba(0, 0, 0, 0.85);
}
body.light .fr-card-example {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.07);
}
body.light .fr-example-fr {
  color: rgba(0, 0, 0, 0.7);
}
body.light .fr-example-en {
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-session-done h2 {
  color: rgba(0, 0, 0, 0.85);
}
body.light .fr-session-done p {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-add-manual {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .fr-manual-input {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.85);
}
body.light .fr-manual-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}
body.light .fr-manual-input:focus {
  border-color: rgba(124, 58, 237, 0.4);
}
body.light .fr-manual-btn {
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .fr-suggestion-row {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.light .fr-suggestion-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .fr-suggestion-word {
  color: rgba(0, 0, 0, 0.8);
}
body.light .fr-suggestion-count {
  color: rgba(0, 0, 0, 0.3);
}
body.light .fr-word-row {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
body.light .fr-word-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .fr-word-en {
  color: rgba(0, 0, 0, 0.6);
}
body.light .fr-word-arrow {
  color: rgba(0, 0, 0, 0.2);
}
body.light .fr-word-fr {
  color: rgba(0, 0, 0, 0.85);
}
body.light .fr-badge.scheduled {
  color: rgba(0, 0, 0, 0.25);
}
body.light .fr-delete-btn {
  color: rgba(0, 0, 0, 0.2);
}
body.light .fr-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
body.light .fr-empty-small {
  color: rgba(0, 0, 0, 0.25);
}
/* ── Loading ──────────────────────────────────────────────────────── */
.fr-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
}
/* ── Shared topbar ────────────────────────────────────────────────── */
.fr-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.fr-topbar-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
}
.fr-topbar-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}
.fr-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.fr-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
/* ── Home ─────────────────────────────────────────────────────────── */
.fr-app-home {
  background: linear-gradient(180deg, var(--fr-accent-bg) 0%, var(--fr-bg) 60%);
}
.fr-home {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 2rem;
  gap: 0.75rem;
  overflow-y: auto;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
/* Hero — new design with progress ring */
.fr-hero-new {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 0;
}
.fr-hero-ring-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}
.fr-hero-ring {
  width: 100%;
  height: 100%;
}
.fr-hero-ring circle:last-child {
  transition: stroke-dasharray 0.6s ease;
}
.fr-hero-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fr-hero-ring-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--fr-accent);
  line-height: 1;
}
.fr-hero-ring-label {
  font-size: 0.55rem;
  color: var(--fr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fr-hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fr-hero-stats-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.fr-hero-stat-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fr-text);
}
.fr-hero-stat-pill span {
  font-weight: 400;
  color: var(--fr-text-muted);
  font-size: 0.65rem;
}
.fr-hero-stat-pill.fr-stat-due {
  color: #fbbf24;
}
/* Home action cards */
.fr-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.fr-home-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  color: var(--fr-text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.fr-home-card:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-text);
  border-color: var(--fr-accent);
}
.fr-home-card:disabled {
  opacity: 0.4;
  cursor: default;
}
.fr-home-card .lucide-loader {
  animation: spin 1.5s linear infinite;
}
/* Recent words */
.fr-home-recent {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.fr-home-recent-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fr-text-muted);
}
.fr-home-recent-list {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 2px;
}
.fr-home-recent-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0.4rem 0.7rem;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.fr-home-recent-word:hover {
  border-color: var(--fr-accent);
  background: var(--fr-surface-hover);
}
.fr-recent-fr {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fr-text);
}
.fr-recent-en {
  font-size: 0.6rem;
  color: var(--fr-text-muted);
}
/* Old hero (keep for reference) */
.fr-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0 0.25rem;
}
.fr-hero-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.fr-hero-flag {
  font-size: 1.8rem;
  line-height: 1;
}
.fr-hero-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fr-text);
  letter-spacing: -0.5px;
}
.fr-streak {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.2);
  padding: 3px 10px;
  border-radius: 20px;
}
.fr-hero-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.3rem;
}
.fr-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.fr-hero-stat-num {
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}
body.light .fr-hero-stat-num {
  color: rgba(0, 0, 0, 0.85);
}
.fr-hero-stat-label {
  font-size: 0.62rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.light .fr-hero-stat-label {
  color: rgba(0, 0, 0, 0.35);
}
.fr-hero-stat-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.08);
}
body.light .fr-hero-stat-divider {
  background: rgba(0, 0, 0, 0.08);
}
/* Session card */
.fr-session-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, var(--fr-accent-bg), transparent);
  border: 1px solid var(--fr-border);
  border-radius: 12px;
  transition: all 0.15s;
  user-select: none;
  cursor: pointer;
}
.fr-session-card:hover {
  background: linear-gradient(135deg, var(--fr-accent-bg), var(--fr-surface));
  border-color: var(--fr-accent);
}
.fr-session-card.done {
  background: var(--fr-surface);
  border-color: var(--fr-border);
  cursor: default;
  opacity: 0.6;
}
.fr-session-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.fr-session-nums {
  display: flex;
  gap: 8px;
  align-items: center;
}
.fr-num {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.fr-num.review {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
}
.fr-num.new {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}
.fr-num.done {
  color: rgba(255, 255, 255, 0.3);
}
.fr-session-arrow {
  color: rgba(167, 139, 250, 0.5);
}
/* Quick actions grid */
.fr-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.5rem;
}
.fr-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.fr-quick-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}
.fr-quick-count {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.25);
}
body.light .fr-quick-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.6);
}
body.light .fr-quick-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.85);
}
body.light .fr-quick-count {
  color: rgba(0, 0, 0, 0.25);
}
/* Tools row */
.fr-tools {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fr-tool-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  background: none;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
}
.fr-tool-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}
.fr-tool-btn:disabled {
  cursor: default;
  opacity: 0.5;
}
.fr-tool-btn span {
  flex: 1;
}
body.light .fr-tool-btn {
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-tool-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.6);
}
.fr-action-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  padding: 1px 7px;
  border-radius: 10px;
  flex: unset !important;
}
/* ── Session ──────────────────────────────────────────────────────── */
.fr-session-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.fr-progress-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.fr-progress-fill {
  height: 100%;
  background: #a78bfa;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.fr-session-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}
/* Audio button */
.fr-audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.fr-audio-btn:hover {
  background: rgba(167, 139, 250, 0.15);
  border-color: rgba(167, 139, 250, 0.3);
  color: #a78bfa;
}
.fr-audio-btn.fr-audio-playing {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
  color: #a78bfa;
}
.fr-audio-sm {
  width: 24px;
  height: 24px;
}
.fr-audio-inline {
  width: 22px;
  height: 22px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.fr-word-row:hover .fr-audio-inline {
  opacity: 1;
}
.fr-audio-sentence {
  display: flex;
  flex-direction: row;
  width: auto;
  height: auto;
  border-radius: 20px;
  padding: 8px 16px;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.fr-audio-sentence:hover {
  color: #a78bfa;
}
body.light .fr-audio-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-audio-btn:hover,
body.light .fr-audio-btn.fr-audio-playing {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.25);
  color: #7c3aed;
}
body.light .fr-audio-sentence {
  color: rgba(0, 0, 0, 0.4);
}
/* Session split layout */
.fr-session-split {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.fr-session-main {
  flex: 1;
  display: flex;
  min-width: 280px;
}
.fr-session-context {
  width: 50%;
  max-width: 560px;
  min-width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--fr-surface, rgba(255, 255, 255, 0.02));
  position: relative;
  transition: width 0.2s ease, min-width 0.2s ease;
}
.fr-session-context.collapsed {
  width: 36px;
  min-width: 36px;
  padding: 0.6rem 0.3rem;
  overflow: hidden;
}
/* Context panels stack vertically */
.fr-context-columns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
/* Video panel spans full width */
.fr-context-columns .fr-panel-video {
  width: 100%;
}
.fr-context-toggle {
  position: sticky;
  top: 0;
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  display: flex;
  z-index: 1;
  flex-shrink: 0;
}
.fr-context-toggle:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}
.fr-session-context.collapsed .fr-context-toggle {
  align-self: center;
}
.fr-panel-video {
  padding: 0;
  background: none;
  border: none;
}
.fr-panel-video .fr-video-embed {
  border-radius: 8px;
}
.fr-panel-video .fr-video-sentence {
  padding: 0.3rem 0.2rem 0;
  font-size: 0.7rem;
}
/* Audio clip player */
.fr-panel-clip {
  padding: 0.4rem !important;
  background: rgba(167, 139, 250, 0.04) !important;
  border-color: rgba(167, 139, 250, 0.1) !important;
  gap: 0.3rem;
}
.fr-clip-player {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  display: block;
  background: #000;
  object-fit: contain;
}
.fr-word-video .fr-clip-player {
  max-width: 360px;
  border-radius: 8px;
}
.fr-clip-label {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  line-height: 1.3;
  padding: 0 0.5rem 0.4rem;
}
.fr-clip-transcript {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.fr-clip-fr {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.45;
}
.fr-clip-en {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  line-height: 1.35;
}
.fr-clip-en-loading {
  color: rgba(255, 255, 255, 0.2);
}
body.light .fr-clip-transcript {
  background: rgba(0, 0, 0, 0.03);
}
body.light .fr-clip-fr {
  color: rgba(0, 0, 0, 0.75);
}
body.light .fr-clip-en {
  color: rgba(0, 0, 0, 0.4);
}
.fr-clip-source {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-clip-source:hover {
  color: rgba(255, 255, 255, 0.5);
}
.fr-word-video audio {
  width: 100%;
  max-width: 360px;
  height: 36px;
  border-radius: 6px;
}
body.light .fr-panel-clip {
  background: rgba(167, 139, 250, 0.03) !important;
  border-color: rgba(167, 139, 250, 0.1) !important;
}
body.light .fr-clip-label {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-clip-source {
  color: rgba(0, 0, 0, 0.25);
}
.fr-answer-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 400px;
}
.fr-session-video {
  width: 100%;
  max-width: 340px;
}
.fr-session-video .fr-video-sentence {
  text-align: center;
  margin-top: 0.3rem;
}
body.light .fr-session-context {
  border-left-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}
body.light .fr-context-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-context-toggle:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.08);
}
@media (max-width: 550px) {
  .fr-session-split {
    flex-direction: column;
  }
  .fr-session-context {
    width: auto;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 200px;
  }
}
/* Flashcard */
.fr-flashcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
  gap: 12px;
  overflow-y: auto;
}
.fr-card-lang {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.fr-card-french-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fr-card-french {
  font-size: 32px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.fr-card-pronunciation {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}
.fr-show-btn {
  margin-top: 16px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s;
}
.fr-show-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}
/* Answer section */
.fr-answer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}
.fr-card-english {
  font-size: 20px;
  font-weight: 600;
  color: #4ade80;
  text-align: center;
}
.fr-card-example {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px 18px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fr-card-vault-examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.fr-card-vault-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(167, 139, 250, 0.6);
  margin-bottom: 2px;
}
.fr-card-vault-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(167, 139, 250, 0.05);
  border-radius: 8px;
  border-left: 2px solid rgba(167, 139, 250, 0.35);
}
.fr-card-vault-en {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}
.fr-card-vault-fr {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
}
.fr-card-vault-fr strong {
  color: #a78bfa;
  font-weight: 600;
}
body.light .fr-card-vault-item {
  background: rgba(124, 58, 237, 0.04);
  border-left-color: rgba(124, 58, 237, 0.3);
}
body.light .fr-card-vault-en {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-card-vault-fr {
  color: rgba(0, 0, 0, 0.75);
}
body.light .fr-card-vault-fr strong {
  color: #7c3aed;
}
body.light .fr-card-vault-label {
  color: rgba(124, 58, 237, 0.6);
}
.fr-example-fr {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  line-height: 1.5;
}
.fr-example-en {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.5;
}
/* Rating buttons */
.fr-rating-row {
  display: flex;
  gap: 10px;
  width: 100%;
}
.fr-rating-btn {
  flex: 1;
  padding: 11px 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.fr-rating-btn.hard {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
.fr-rating-btn.hard:hover {
  background: rgba(239, 68, 68, 0.2);
}
.fr-rating-btn.ok {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
.fr-rating-btn.ok:hover {
  background: rgba(251, 191, 36, 0.2);
}
.fr-rating-btn.easy {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}
.fr-rating-btn.easy:hover {
  background: rgba(74, 222, 128, 0.2);
}
/* Session done */
.fr-session-done {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
}
.fr-done-icon {
  color: #4ade80;
  opacity: 0.8;
}
.fr-session-done h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
.fr-session-done p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
.fr-btn-primary {
  margin-top: 8px;
  padding: 10px 28px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: #a78bfa;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
}
.fr-btn-primary:hover {
  opacity: 0.85;
}
/* ── Suggestions ──────────────────────────────────────────────────── */
.fr-add-manual {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.fr-manual-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  outline: none;
  transition: border-color 0.15s;
}
.fr-manual-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.fr-manual-input:focus {
  border-color: rgba(167, 139, 250, 0.4);
}
.fr-manual-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.fr-manual-btn:hover {
  background: rgba(167, 139, 250, 0.2);
}
.fr-suggestions-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.fr-suggestion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.1s;
}
.fr-suggestion-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.fr-suggestion-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fr-suggestion-word {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.fr-suggestion-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}
.fr-suggestion-example {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  line-height: 1.4;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.light .fr-suggestion-example {
  color: rgba(0, 0, 0, 0.4);
}
.fr-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(74, 222, 128, 0.2);
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.fr-add-btn:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.15);
}
.fr-add-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/* ── Word list ────────────────────────────────────────────────────── */
/* List header */
.fr-list-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--fr-border);
  flex-shrink: 0;
}
.fr-list-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  color: var(--fr-text-muted);
}
.fr-list-search-input {
  flex: 1;
  border: none;
  background: none;
  color: var(--fr-text);
  font-size: 0.78rem;
  outline: none;
}
.fr-list-search-input::placeholder {
  color: var(--fr-text-muted);
}
/* List filter tabs */
.fr-list-filters {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.fr-list-filter {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--fr-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.fr-list-filter:hover {
  background: var(--fr-surface);
}
.fr-list-filter.active {
  background: var(--fr-accent-bg);
  color: var(--fr-accent);
  border-color: var(--fr-accent);
}
.fr-list-filter-count {
  font-size: 0.65rem;
  opacity: 0.6;
}
/* Mastery dots */
.fr-word-mastery {
  display: flex;
  gap: 2px;
  align-items: center;
}
.fr-mastery-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fr-accent);
  opacity: 0.5;
}
.fr-badge.learned {
  color: #4ade80;
  font-size: 0.62rem;
}
.fr-word-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.fr-word-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  gap: 12px;
  transition: background 0.1s;
}
.fr-word-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.fr-word-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.fr-word-en {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.fr-word-arrow {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}
.fr-word-fr {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.fr-word-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fr-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fr-badge.new {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}
.fr-badge.due {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.1);
}
.fr-badge.scheduled {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  background: transparent;
  font-weight: 400;
  letter-spacing: 0;
}
.fr-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
}
.fr-word-row:hover .fr-delete-btn {
  opacity: 1;
}
.fr-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
/* ── Empty states ─────────────────────────────────────────────────── */
.fr-empty-small {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
}
/* ── Sentence practice view ───────────────────────────────────────── */
.fr-sentence-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  gap: 20px;
}
.fr-sentence-en-prompt {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  max-width: 340px;
}
.fr-sentence-fr {
  font-size: 20px;
  font-weight: 600;
  color: #c4b5fd;
  line-height: 1.4;
  max-width: 340px;
}
.fr-sentence-en-translation {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  max-width: 300px;
  line-height: 1.4;
}
.fr-sentence-reveal-btn {
  margin-top: 8px;
  padding: 10px 24px;
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  background: transparent;
  color: #a78bfa;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.fr-sentence-reveal-btn:hover {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.7);
}
.fr-sentence-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  gap: 12px;
}
.fr-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.fr-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}
.fr-nav-next {
  background: rgba(167, 139, 250, 0.12);
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.3);
}
.fr-nav-next:hover {
  background: rgba(167, 139, 250, 0.2);
  color: #ddd6fe;
  border-color: rgba(167, 139, 250, 0.5);
}
.fr-sentence-counter {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
}
/* ── Light theme: sentence view ───────────────────────────────────── */
body.light .fr-sentence-en-prompt {
  color: rgba(0, 0, 0, 0.85);
}
body.light .fr-sentence-fr {
  color: #7c3aed;
}
body.light .fr-sentence-en-translation {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-sentence-reveal-btn {
  border-color: rgba(124, 58, 237, 0.4);
  color: #7c3aed;
}
body.light .fr-sentence-reveal-btn:hover {
  background: rgba(124, 58, 237, 0.08);
}
body.light .fr-sentence-nav {
  border-top-color: rgba(0, 0, 0, 0.08);
}
body.light .fr-nav-btn {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.5);
}
body.light .fr-nav-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 0, 0, 0.2);
}
body.light .fr-nav-next {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.25);
}
body.light .fr-nav-next:hover {
  background: rgba(124, 58, 237, 0.15);
  color: #5b21b6;
}
body.light .fr-sentence-counter {
  color: rgba(0, 0, 0, 0.3);
}
/* ── Word detail split layout ──────────────────────────────────────── */
.fr-word-split {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.fr-word-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  gap: 1.5rem;
  min-width: 0;
}
.fr-word-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}
.fr-word-center .fr-detail-french {
  font-size: 2.2rem;
}
.fr-word-center .fr-detail-pronunciation {
  font-size: 0.85rem;
}
.fr-word-center .fr-detail-english {
  font-size: 1.1rem;
  margin-top: 0.3rem;
}
.fr-listen-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fr-regen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.15);
  background: rgba(167, 139, 250, 0.06);
  color: rgba(167, 139, 250, 0.5);
  cursor: pointer;
  transition: all 0.15s;
}
.fr-regen-btn:hover {
  background: rgba(167, 139, 250, 0.15);
  color: rgba(167, 139, 250, 0.9);
}
body.light .fr-regen-btn {
  border-color: rgba(167, 139, 250, 0.15);
  background: rgba(167, 139, 250, 0.05);
  color: rgba(124, 58, 237, 0.4);
}
body.light .fr-regen-btn:hover {
  background: rgba(167, 139, 250, 0.1);
  color: rgba(124, 58, 237, 0.8);
}
/* Main listen button */
.fr-listen-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 24px;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: #c4b5fd;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.75rem;
  transition: all 0.2s;
}
.fr-listen-btn:hover {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.35);
  color: #ddd6fe;
}
.fr-listen-btn.loading {
  background: rgba(167, 139, 250, 0.15);
  cursor: wait;
}
.fr-listen-btn.loading .lucide-loader {
  animation: spin 1.5s linear infinite;
}
.fr-listen-btn.playing,
.fr-listen-btn.looping {
  background: rgba(167, 139, 250, 0.25);
  border-color: rgba(167, 139, 250, 0.5);
  color: #ede9fe;
  animation: audioPulse 2s ease-in-out infinite;
}
body.light .fr-listen-btn {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.2);
  color: #7c3aed;
}
body.light .fr-listen-btn:hover {
  background: rgba(167, 139, 250, 0.14);
}
body.light .fr-listen-btn.playing,
body.light .fr-listen-btn.looping {
  background: rgba(167, 139, 250, 0.18);
  color: #6d28d9;
}
@keyframes audioPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(167, 139, 250, 0); }
}
/* Small audio buttons in panels */
.fr-audio-btn.fr-audio-sm {
  opacity: 0.5;
  transition: opacity 0.15s;
}
.fr-audio-btn.fr-audio-sm:hover {
  opacity: 0.9;
}
.fr-audio-btn.fr-audio-sm.fr-audio-playing,
.fr-audio-btn.fr-audio-sm.fr-audio-active {
  opacity: 1;
  color: #a78bfa;
}
.fr-audio-btn.fr-audio-sm.fr-audio-loading {
  opacity: 1;
  color: rgba(167, 139, 250, 0.6);
}
.fr-audio-btn.fr-audio-sm.fr-audio-loading .lucide-loader {
  animation: spin 1.5s linear infinite;
}
.fr-word-video {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fr-word-video .fr-video-sentence {
  text-align: center;
}
.fr-word-stats {
  display: flex;
  gap: 0.4rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.25);
}
.fr-word-right {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
}
.fr-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.fr-panel .fr-detail-section-label {
  margin-bottom: 0.15rem;
}
.fr-panel .fr-detail-ex-fr,
.fr-panel .fr-tatoeba-fr,
.fr-panel .fr-detail-vault-fr {
  font-size: 0.75rem;
}
.fr-panel .fr-detail-ex-en,
.fr-panel .fr-tatoeba-en,
.fr-panel .fr-detail-vault-en {
  font-size: 0.68rem;
}
/* Light theme */
body.light .fr-word-right {
  border-left-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}
body.light .fr-panel {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}
body.light .fr-word-stats {
  color: rgba(0, 0, 0, 0.25);
}
body.light .fr-audio-lg {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.15);
}
/* Narrow windows: stack vertically */
@media (max-width: 550px) {
  .fr-word-split {
    flex-direction: column;
  }
  .fr-word-left {
    flex: none;
    padding: 1rem;
  }
  .fr-word-right {
    width: auto;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
}
/* ── Word detail view (legacy) ────────────────────────────────────── */
.fr-word-detail {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fr-detail-french-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fr-detail-french {
  font-size: 32px;
  font-weight: 700;
  color: #c4b5fd;
  line-height: 1.2;
}
.fr-detail-pronunciation {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  margin-top: -8px;
}
.fr-detail-english {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.fr-detail-vault-example {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(167, 139, 250, 0.07);
  border-left: 2px solid rgba(167, 139, 250, 0.3);
  border-radius: 0 6px 6px 0;
}
.fr-detail-vault-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(167, 139, 250, 0.6);
}
.fr-detail-vault-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  line-height: 1.4;
}
.fr-detail-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 8px;
}
.fr-detail-vault-examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fr-detail-vault-bilingual {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(167, 139, 250, 0.05);
  border-radius: 8px;
  border-left: 2px solid rgba(167, 139, 250, 0.35);
}
.fr-detail-vault-en {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  line-height: 1.4;
}
.fr-detail-vault-fr {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  flex: 1;
}
.fr-detail-vault-fr strong {
  color: #a78bfa;
  font-weight: 600;
}
.fr-detail-examples {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fr-detail-example {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.fr-detail-ex-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.fr-detail-ex-fr {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
.fr-detail-ex-en {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  line-height: 1.4;
}
.fr-detail-sm2 {
  margin-top: 4px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.fr-detail-sm2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.fr-sm2-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fr-sm2-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fr-sm2-val {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.fr-sm2-legend {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  line-height: 1.4;
}
/* ── Light theme: word detail ─────────────────────────────────────── */
body.light .fr-detail-french {
  color: #7c3aed;
}
body.light .fr-detail-pronunciation {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-detail-english {
  color: rgba(0, 0, 0, 0.8);
}
body.light .fr-detail-vault-example {
  background: rgba(124, 58, 237, 0.05);
  border-left-color: rgba(124, 58, 237, 0.3);
}
body.light .fr-detail-vault-label {
  color: rgba(124, 58, 237, 0.6);
}
body.light .fr-detail-vault-text {
  color: rgba(0, 0, 0, 0.45);
}
body.light .fr-detail-vault-bilingual {
  background: rgba(124, 58, 237, 0.04);
  border-left-color: rgba(124, 58, 237, 0.3);
}
body.light .fr-detail-vault-en {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-detail-vault-fr {
  color: rgba(0, 0, 0, 0.8);
}
body.light .fr-detail-vault-fr strong {
  color: #7c3aed;
}
body.light .fr-detail-section-label {
  color: rgba(0, 0, 0, 0.3);
}
body.light .fr-detail-example {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
body.light .fr-detail-ex-fr {
  color: rgba(0, 0, 0, 0.8);
}
body.light .fr-detail-ex-en {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-detail-sm2 {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
body.light .fr-sm2-label {
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-sm2-val {
  color: rgba(0, 0, 0, 0.65);
}
body.light .fr-sm2-legend {
  color: rgba(0, 0, 0, 0.3);
}
/* ── Sources view ──────────────────────────────────────────────── */
.fr-sources {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fr-sources-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
}
.fr-source-add-row {
  display: flex;
  gap: 0.5rem;
}
.fr-source-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  outline: none;
}
.fr-source-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.fr-source-input:focus {
  border-color: rgba(255, 255, 255, 0.2);
}
.fr-source-add-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #a78bfa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.fr-source-add-btn:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.25);
}
.fr-source-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.fr-source-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.fr-source-result {
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  line-height: 1.4;
}
.fr-source-result.ok {
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.fr-source-result.err {
  background: rgba(248, 113, 113, 0.08);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.2);
}
.fr-sources-empty {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  padding: 2rem 0;
}
.fr-sources-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fr-source-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.5rem;
  align-items: start;
}
.fr-source-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  grid-column: 1;
  grid-row: 1;
}
.fr-source-title:hover {
  color: #a78bfa;
}
.fr-source-meta {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  grid-column: 1;
  grid-row: 2;
}
.fr-source-delete {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.fr-source-delete:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
/* ── Vault example source link (flashcard + word detail) ────────── */
.fr-vault-source {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.2rem;
}
.fr-vault-source.yt-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 82, 82, 0.6);
  text-decoration: none;
}
.fr-vault-source.yt-link:hover {
  color: #ff5252;
}
/* ── Light theme: sources ───────────────────────────────────────── */
body.light .fr-sources-desc {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-source-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}
body.light .fr-source-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
body.light .fr-source-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .fr-source-title {
  color: rgba(0, 0, 0, 0.8);
}
body.light .fr-source-meta {
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-sources-empty {
  color: rgba(0, 0, 0, 0.3);
}
body.light .fr-vault-source {
  color: rgba(0, 0, 0, 0.3);
}
/* ── Tatoeba native sentences ──────────────────────────────────── */
.fr-tatoeba-load-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.fr-tatoeba-load-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.8);
}
.fr-tatoeba-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fr-tatoeba-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.25rem 0;
}
.fr-tatoeba-empty {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}
.fr-tatoeba-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.fr-tatoeba-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.fr-tatoeba-fr {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
  flex: 1;
  line-height: 1.4;
}
.fr-tatoeba-en {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  padding-left: 0.1rem;
}
/* ── YouTube search button ─────────────────────────────────────── */
.fr-yt-search-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 82, 82, 0.06);
  border: 1px solid rgba(255, 82, 82, 0.15);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: rgba(255, 82, 82, 0.7);
  font-size: 0.75rem;
  text-decoration: none;
  width: 100%;
}
.fr-yt-search-btn:hover {
  background: rgba(255, 82, 82, 0.1);
  color: #ff5252;
}
/* ── Light theme: tatoeba + yt search ──────────────────────────── */
body.light .fr-tatoeba-load-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.45);
}
body.light .fr-tatoeba-load-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}
body.light .fr-tatoeba-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
body.light .fr-tatoeba-fr {
  color: rgba(0, 0, 0, 0.8);
}
body.light .fr-tatoeba-en {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-yt-search-btn {
  background: rgba(255, 82, 82, 0.04);
  border-color: rgba(255, 82, 82, 0.15);
  color: rgba(200, 50, 50, 0.7);
}
body.light .fr-yt-search-btn:hover {
  color: #c83232;
}
/* ── Video snippet ────────────────────────────────────────────── */
.fr-video-snippet {
  margin-top: 0.5rem;
}
.fr-video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}
.fr-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}
.fr-video-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.4rem;
  padding: 0 0.2rem;
}
.fr-video-sentence {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  line-height: 1.3;
}
.fr-video-title-link {
  font-size: 0.68rem;
  color: rgba(255, 82, 82, 0.6);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-video-title-link:hover {
  color: #ff5252;
}
.fr-video-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.6rem 0;
}
.fr-video-loading .lucide-loader {
  animation: spin 1.5s linear infinite;
}
.fr-video-error {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.25rem;
}
/* Light theme */
body.light .fr-video-embed {
  background: rgba(0, 0, 0, 0.05);
}
body.light .fr-video-sentence {
  color: rgba(0, 0, 0, 0.5);
}
body.light .fr-video-title-link {
  color: rgba(200, 50, 50, 0.5);
}
body.light .fr-video-title-link:hover {
  color: #c83232;
}
body.light .fr-video-loading {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-video-error {
  color: rgba(0, 0, 0, 0.3);
}
.fr-video-more-clips {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fr-video-clip-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  transition: background 0.15s;
}
.fr-video-clip-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
.fr-clip-sentence {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-clip-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  font-variant-numeric: tabular-nums;
}
body.light .fr-video-more-clips {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .fr-video-clip-link {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.6);
}
body.light .fr-video-clip-link:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.85);
}
body.light .fr-clip-time {
  color: rgba(0, 0, 0, 0.3);
}
/* ── Library view ─────────────────────────────────────────────── */
.fr-library {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  flex: 1;
}
.fr-library-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}
.fr-library-progress {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.15);
}
.fr-library-progress.done {
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.15);
}
.fr-library-progress.err {
  background: rgba(255, 82, 82, 0.06);
  border-color: rgba(255, 82, 82, 0.15);
}
.fr-progress-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(56, 189, 248, 0.8);
}
.fr-progress-step .lucide-loader {
  animation: spin 1.5s linear infinite;
}
.fr-progress-done {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.75rem;
  color: rgba(74, 222, 128, 0.8);
}
.fr-progress-done > :first-child {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fr-progress-stats {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  padding-left: 1.1rem;
}
.fr-progress-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255, 82, 82, 0.8);
}
.fr-library-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.fr-library-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.fr-library-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.fr-library-item-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}
.fr-library-item-meta {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  padding-left: 1.2rem;
}
/* ── Library search ───────────────────────────────────────────── */
.fr-library-search-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
}
.fr-library-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
}
.fr-library-search-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.fr-library-search-clear {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 2px;
  display: flex;
}
.fr-library-search-clear:hover {
  color: rgba(255, 255, 255, 0.6);
}
.fr-library-results-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  padding: 0.2rem 0;
}
.fr-seg-source {
  display: block;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.light .fr-library-search-row {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-library-search-input {
  color: rgba(0, 0, 0, 0.9);
}
body.light .fr-library-search-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}
body.light .fr-library-results-count {
  color: rgba(0, 0, 0, 0.3);
}
body.light .fr-seg-source {
  color: rgba(0, 0, 0, 0.25);
}
.fr-highlight {
  background: rgba(167, 139, 250, 0.25);
  color: #c4b5fd;
  border-radius: 2px;
  padding: 0 1px;
}
body.light .fr-highlight {
  background: rgba(167, 139, 250, 0.15);
  color: #7c3aed;
}
/* ── Inline player ────────────────────────────────────────────── */
.fr-inline-player {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.fr-inline-player-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  padding: 0 0.25rem;
}
.fr-inline-player-close {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-end;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}
.fr-inline-player-close:hover {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
.fr-transcript-seg {
  cursor: pointer;
}
.fr-transcript-seg.active {
  background: rgba(167, 139, 250, 0.08);
  border-left: 2px solid rgba(167, 139, 250, 0.5);
  padding-left: calc(0.5rem - 2px);
}
body.light .fr-inline-player {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .fr-inline-player-text {
  color: rgba(0, 0, 0, 0.5);
}
body.light .fr-transcript-seg.active {
  background: rgba(167, 139, 250, 0.06);
  border-left-color: rgba(167, 139, 250, 0.4);
}
/* ── Transcript view ──────────────────────────────────────────── */
.fr-transcript {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  flex: 1;
}
.fr-transcript-meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
}
.fr-transcript-segments {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.fr-transcript-seg {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  line-height: 1.35;
  transition: background 0.15s;
}
.fr-transcript-seg:hover {
  background: rgba(255, 255, 255, 0.06);
}
.fr-seg-time {
  flex-shrink: 0;
  width: 2.5rem;
  font-size: 0.68rem;
  color: rgba(56, 189, 248, 0.6);
  font-variant-numeric: tabular-nums;
  padding-top: 0.05rem;
}
.fr-seg-text {
  flex: 1;
}
/* Light theme */
body.light .fr-library-desc {
  color: rgba(0, 0, 0, 0.4);
}
body.light .fr-library-progress {
  background: rgba(56, 189, 248, 0.04);
  border-color: rgba(56, 189, 248, 0.15);
}
body.light .fr-library-progress.done {
  background: rgba(74, 222, 128, 0.04);
  border-color: rgba(74, 222, 128, 0.15);
}
body.light .fr-library-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light .fr-library-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .fr-library-item-title {
  color: rgba(0, 0, 0, 0.85);
}
body.light .fr-library-item-meta {
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-transcript-meta {
  color: rgba(0, 0, 0, 0.35);
}
body.light .fr-transcript-seg {
  color: rgba(0, 0, 0, 0.75);
}
body.light .fr-transcript-seg:hover {
  background: rgba(0, 0, 0, 0.04);
}
body.light .fr-seg-time {
  color: rgba(56, 189, 248, 0.7);
}
body.light .fr-progress-stats {
  color: rgba(0, 0, 0, 0.35);
}
/* ── Sentence dialog overlay ──────────────────────────────────── */
.fr-sentence-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2rem;
}
.fr-sentence-dialog {
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 16px;
  padding: 2rem;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.fr-sentence-dialog-fr {
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.5;
}
.fr-sentence-dialog-en {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  line-height: 1.4;
}
.fr-sentence-dialog-source {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.2);
}
.fr-sentence-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.fr-sentence-dialog-close {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0.4rem;
  display: flex;
}
.fr-sentence-dialog-close:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}
.fr-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.fr-clickable:hover {
  background: rgba(167, 139, 250, 0.06);
}
body.light .fr-sentence-overlay {
  background: rgba(255, 255, 255, 0.7);
}
body.light .fr-sentence-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(167, 139, 250, 0.15);
}
body.light .fr-sentence-dialog-fr {
  color: rgba(0, 0, 0, 0.9);
}
body.light .fr-sentence-dialog-en {
  color: rgba(0, 0, 0, 0.45);
}
/* ── Hoverable word tooltip ───────────────────────────────────── */
.fr-interactive-text {
  display: inline;
}
.fr-hoverable-word {
  cursor: default;
  border-radius: 2px;
  transition: background 0.1s;
}
.fr-hoverable-word {
  border: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.fr-hoverable-word:hover {
  background: rgba(167, 139, 250, 0.08);
  animation: wordBorderGlow 1s ease forwards;
}
@keyframes wordBorderGlow {
  0% { border-color: transparent; box-shadow: none; }
  30% { border-color: rgba(167, 139, 250, 0.2); box-shadow: 0 0 4px rgba(167, 139, 250, 0.1); }
  60% { border-color: rgba(167, 139, 250, 0.4); box-shadow: 0 0 8px rgba(167, 139, 250, 0.2); background: rgba(167, 139, 250, 0.12); }
  100% { border-color: rgba(167, 139, 250, 0.6); box-shadow: 0 0 14px rgba(167, 139, 250, 0.35); background: rgba(167, 139, 250, 0.18); }
}
.fr-word-tooltip {
  z-index: 10000;
  background: rgba(15, 15, 25, 0.97);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  min-width: 160px;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fr-tooltip-word {
  font-size: 1rem;
  font-weight: 600;
  color: #c4b5fd;
}
.fr-tooltip-english {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
}
.fr-tooltip-pron {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}
.fr-tooltip-unknown {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}
.fr-tooltip-actions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.15rem;
}
.fr-tooltip-play,
.fr-tooltip-add {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 6px;
  color: #a78bfa;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  width: fit-content;
}
.fr-tooltip-play:hover,
.fr-tooltip-add:hover {
  background: rgba(167, 139, 250, 0.2);
}
.fr-tooltip-play.active {
  background: rgba(167, 139, 250, 0.25);
  color: #ddd6fe;
}
.fr-tooltip-play .lucide-loader {
  animation: spin 1.5s linear infinite;
}
body.light .fr-word-tooltip {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(167, 139, 250, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .fr-tooltip-word { color: #7c3aed; }
body.light .fr-tooltip-english { color: rgba(0, 0, 0, 0.7); }
body.light .fr-tooltip-pron { color: rgba(0, 0, 0, 0.35); }
body.light .fr-tooltip-unknown { color: rgba(0, 0, 0, 0.3); }
/* ── Flashcard explore button ──────────────────────────────────── */
.fr-card-explore-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.45rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.72rem;
  cursor: pointer;
  margin-top: 0.25rem;
}
.fr-card-explore-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}
body.light .fr-card-explore-btn {
  border-color: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.3);
}
body.light .fr-card-explore-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.55);
}
/* ── Word Map ────────────────────────────────────────────────── */
.fr-map-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.fr-map-container {
  flex: 1;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(30, 20, 60, 0.3) 0%, rgba(10, 10, 15, 0.95) 100%);
}
/* Map side panel */
.fr-map-panel {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-left: 1px solid var(--fr-border);
  background: var(--fr-surface);
  animation: slideInRight 0.2s ease;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.fr-map-panel-header {
  display: flex;
  justify-content: flex-end;
}
.fr-map-panel-word {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fr-text);
  line-height: 1.2;
}
.fr-map-panel-english {
  font-size: 1rem;
  font-weight: 600;
  color: #4ade80;
}
.fr-map-panel-pron {
  font-size: 0.75rem;
  color: var(--fr-text-muted);
  font-style: italic;
}
.fr-map-panel-stats {
  display: flex;
  gap: 0.4rem;
  font-size: 0.65rem;
  color: var(--fr-text-muted);
}
.fr-map-panel-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.fr-map-panel-example {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.fr-map-panel-ex-fr {
  font-size: 0.78rem;
  color: var(--fr-text);
  line-height: 1.4;
}
.fr-map-panel-ex-en {
  font-size: 0.68rem;
  color: var(--fr-text-muted);
  font-style: italic;
  margin-top: 0.15rem;
}
.fr-map-panel-ex-source {
  font-size: 0.6rem;
  color: var(--fr-text-muted);
  margin-top: 0.15rem;
  opacity: 0.6;
}
.fr-map-panel-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  background: none;
  color: var(--fr-text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  margin-top: auto;
}
.fr-map-panel-full:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-text);
}
.fr-map-panel-clip {
  border-radius: 8px;
  overflow: hidden;
}
.fr-map-panel-clip .fr-clip-player {
  width: 100%;
  border-radius: 6px;
}
.fr-map-panel-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--fr-text-muted);
}
.fr-map-panel-loading .lucide-loader {
  animation: spin 1.5s linear infinite;
}
/* Story mode */
.fr-map-toolbar {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: rgba(15, 15, 25, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  z-index: 10;
}
.fr-map-story-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.08);
  color: rgba(167, 139, 250, 0.8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
.fr-map-story-btn.active {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
  color: #ddd6fe;
}
.fr-map-story-count {
  font-size: 0.7rem;
  color: rgba(74, 222, 128, 0.8);
  font-weight: 500;
}
.fr-map-generate-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 8px;
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.fr-map-generate-btn:hover {
  background: rgba(74, 222, 128, 0.2);
}
.fr-map-generate-btn .lucide-loader {
  animation: spin 1.5s linear infinite;
}
.fr-map-story-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fr-text);
}
.fr-map-story-en {
  font-size: 0.8rem;
  color: var(--fr-text-muted);
  font-style: italic;
  line-height: 1.5;
}
.fr-map-story-words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}
.fr-map-story-image {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  max-height: 200px;
}
.fr-map-story-image-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 120px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: var(--fr-text-muted);
  font-size: 0.72rem;
}
.fr-map-story-image-loading .lucide-image {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.fr-map-story-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 8px;
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 0.25rem;
}
.fr-map-story-save:hover {
  background: rgba(74, 222, 128, 0.15);
}
.fr-map-story-word-tag {
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  color: rgba(74, 222, 128, 0.8);
}
.fr-map-container {
  position: relative;
}
body.light .fr-map-toolbar {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
}
/* ── Curriculum ───────────────────────────────────────────────── */
.fr-curriculum {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}
.fr-curriculum-header { margin-bottom: 1.5rem; }
.fr-curriculum-header h2 { margin: 0; font-size: 1.3rem; color: var(--fr-text); }
.fr-curriculum-header p { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--fr-text-muted); }
.fr-curriculum-level {
  margin-bottom: 1.25rem;
  border: 1px solid var(--fr-border);
  border-radius: 12px;
  overflow: hidden;
}
.fr-curriculum-level.active { border-color: var(--fr-accent); }
.fr-curriculum-level.locked { opacity: 0.4; }
.fr-curriculum-level-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--fr-surface);
}
.fr-curriculum-level-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--fr-accent-bg);
  color: var(--fr-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.fr-curriculum-level-name { font-weight: 600; color: var(--fr-text); font-size: 0.9rem; }
.fr-curriculum-level-progress { font-size: 0.7rem; color: var(--fr-text-muted); }
.fr-curriculum-units {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--fr-border);
}
.fr-curriculum-unit-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  background: var(--fr-bg);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.fr-curriculum-unit-card:hover:not(:disabled) { background: var(--fr-surface-hover); }
.fr-curriculum-unit-card:disabled { cursor: default; }
.fr-curriculum-unit-card.completed .fr-unit-status { color: #4ade80; }
.fr-curriculum-unit-card.in-progress .fr-unit-status { color: var(--fr-accent); }
.fr-curriculum-unit-card.available .fr-unit-status { color: var(--fr-text-muted); }
.fr-curriculum-unit-card.locked .fr-unit-status { color: var(--fr-text-muted); opacity: 0.3; }
.fr-unit-title { font-size: 0.82rem; font-weight: 500; color: var(--fr-text); }
.fr-unit-title-fr { font-size: 0.7rem; color: var(--fr-text-muted); font-style: italic; }
/* Unit Detail */
.fr-unit-detail {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 2rem;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fr-unit-detail-header { display: flex; align-items: flex-start; gap: 0.75rem; }
.fr-unit-detail-level { font-size: 0.65rem; color: var(--fr-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.fr-unit-detail-title { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--fr-text); }
.fr-unit-detail-title-fr { font-size: 0.85rem; color: var(--fr-text-muted); font-style: italic; }
.fr-unit-progress-bar { height: 4px; background: var(--fr-surface); border-radius: 2px; overflow: hidden; }
.fr-unit-progress-fill { height: 100%; background: var(--fr-accent); border-radius: 2px; transition: width 0.3s; }
.fr-unit-section {
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  padding: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.fr-unit-section:hover { border-color: var(--fr-accent); }
.fr-unit-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fr-text);
  margin-bottom: 0.5rem;
}
.fr-unit-vocab-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fr-unit-vocab-item {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: var(--fr-accent-bg);
  border-radius: 6px;
  font-size: 0.78rem;
}
.fr-unit-vocab-fr { font-weight: 600; color: var(--fr-accent); }
.fr-unit-vocab-en { color: var(--fr-text-muted); }
.fr-unit-vocab-pron { font-size: 0.65rem; color: var(--fr-text-muted); font-style: italic; }
.fr-unit-grammar { font-size: 0.82rem; color: var(--fr-text); line-height: 1.6; margin-bottom: 0.5rem; }
.fr-unit-grammar-example { font-size: 0.78rem; padding: 0.2rem 0; }
.fr-unit-passage-fr { font-size: 0.95rem; line-height: 1.7; color: var(--fr-text); margin-bottom: 0.4rem; }
.fr-unit-passage-en { font-size: 0.8rem; color: var(--fr-text-muted); font-style: italic; line-height: 1.5; }
/* ── Language Journal ─────────────────────────────────────────── */
.fr-journal {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fr-journal-input-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--fr-border);
  flex-shrink: 0;
}
.fr-journal-input {
  flex: 1;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  background: var(--fr-surface);
  color: var(--fr-text);
  font-size: 0.9rem;
  outline: none;
}
.fr-journal-input:focus {
  border-color: var(--fr-accent);
}
.fr-journal-input::placeholder {
  color: var(--fr-text-muted);
}
.fr-journal-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.fr-journal-feed {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.fr-journal-sidebar {
  width: 200px;
  flex-shrink: 0;
  padding: 0.75rem;
  border-left: 1px solid var(--fr-border);
  background: var(--fr-surface);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow-y: auto;
}
.fr-journal-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--fr-text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.fr-journal-filter:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-text);
}
.fr-journal-filter.active {
  background: var(--fr-accent-bg);
  color: var(--fr-accent);
}
.fr-journal-filter-count {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0.5;
}
.fr-journal-stats {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: var(--fr-text-muted);
  padding: 0.3rem 0.5rem;
}
.fr-journal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--fr-text-muted);
}
.fr-journal-empty .lucide { color: var(--fr-accent); opacity: 0.5; }
.fr-journal-empty p { margin: 0; }
.fr-journal-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 12px;
  transition: border-color 0.15s;
}
.fr-journal-card:hover {
  border-color: var(--fr-accent);
}
.fr-journal-note {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fr-journal-note-original {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fr-text);
}
.fr-journal-translation {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  background: var(--fr-accent-bg);
  border-radius: 8px;
  border-left: 3px solid var(--fr-accent);
}
.fr-journal-trans-text {
  font-size: 0.88rem;
  color: var(--fr-accent);
  font-weight: 500;
  line-height: 1.5;
}
.fr-journal-pron {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--fr-text-muted);
}
.fr-journal-note-actions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.15rem;
}
.fr-journal-translating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--fr-text-muted);
}
.fr-journal-translating .lucide-loader {
  animation: spin 1.5s linear infinite;
}
.fr-journal-video {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fr-journal-thumb {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  max-height: 180px;
}
.fr-journal-embed {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: 8px;
  overflow: hidden;
}
.fr-journal-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.fr-journal-image {
  width: 100%;
  border-radius: 8px;
  max-height: 300px;
  object-fit: cover;
}
.fr-journal-video-actions {
  display: flex;
  gap: 0.4rem;
}
.fr-journal-link-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--fr-border);
  border-radius: 6px;
  background: none;
  color: var(--fr-text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.fr-journal-link-btn:hover,
.fr-journal-link-btn.active {
  color: var(--fr-accent);
  border-color: var(--fr-accent);
}
.fr-journal-link-btn .lucide-loader {
  animation: spin 1.5s linear infinite;
}
.fr-journal-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--fr-accent);
  text-decoration: none;
  word-break: break-all;
}
.fr-journal-link:hover { text-decoration: underline; }
.fr-journal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fr-journal-date {
  font-size: 0.62rem;
  color: var(--fr-text-muted);
  opacity: 0.5;
}
.fr-journal-delete {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: none;
  color: var(--fr-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fr-journal-card:hover .fr-journal-delete { opacity: 0.5; }
.fr-journal-delete:hover { opacity: 1; color: #f87171; }
/* ── French Chat ──────────────────────────────────────────────── */
.fr-chat-start {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.fr-chat-start-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  max-width: 400px;
}
.fr-chat-start-inner h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fr-text);
  margin: 0;
}
.fr-chat-start-inner p {
  color: var(--fr-text-muted);
  font-size: 0.85rem;
  margin: 0;
}
.fr-chat-start-inner .lucide {
  color: var(--fr-accent);
}
.fr-chat-section-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fr-text-muted);
  align-self: flex-start;
  margin-top: 0.5rem;
}
.fr-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}
.fr-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  background: var(--fr-surface);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.fr-chat-thread:hover {
  background: var(--fr-surface-hover);
  border-color: var(--fr-accent);
}
.fr-thread-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-thread-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.62rem;
  color: var(--fr-text-muted);
}
.fr-chat-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--fr-border);
  background: var(--fr-surface);
  color: var(--fr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.fr-chat-back:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-accent);
  border-color: var(--fr-accent);
}
.fr-chat-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.5rem;
}
.fr-chat-topic {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  background: var(--fr-surface);
  color: var(--fr-text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}
.fr-chat-topic:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-text);
  border-color: var(--fr-accent);
}
.fr-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fr-chat-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.fr-chat-messages {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fr-chat-msg {
  display: flex;
  max-width: 80%;
  min-width: 0;
}
.fr-chat-msg {
  flex-direction: column;
  gap: 3px;
}
.fr-chat-msg.selected .fr-chat-msg-content {
  border-color: var(--fr-accent) !important;
}
.fr-chat-msg-content {
  word-break: break-word;
  overflow-wrap: break-word;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
}
.fr-chat-msg-content:hover {
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.15);
  transform: translateY(-1px);
}
.fr-chat-msg-actions {
  display: flex;
  gap: 0.2rem;
}
.fr-chat-msg.user .fr-chat-msg-actions {
  align-self: flex-end;
}
.fr-chat-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--fr-text-muted);
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.15s;
}
.fr-chat-action-btn:hover,
.fr-chat-action-btn.active {
  opacity: 1;
  color: var(--fr-accent);
}
.fr-chat-msg:hover .fr-chat-action-btn {
  opacity: 0.7;
}
.fr-chat-user-expand {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--fr-border);
}
.fr-chat-user-fr {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fr-accent);
}
.fr-chat-user-pron {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--fr-text-muted);
  margin-top: 2px;
}
.fr-chat-msg.user {
  align-self: flex-end;
  max-width: 70%;
}
.fr-chat-msg.assistant {
  align-self: flex-start;
}
.fr-chat-msg-content {
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  position: relative;
}
.fr-chat-msg.user .fr-chat-msg-content {
  background: var(--fr-accent-bg);
  border: 1px solid var(--fr-accent);
  color: var(--fr-text);
  border-bottom-right-radius: 4px;
}
.fr-chat-msg.assistant .fr-chat-msg-content {
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  color: var(--fr-text);
  border-bottom-left-radius: 4px;
}
.fr-chat-french {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fr-text);
  margin-bottom: 0.2rem;
}
.fr-chat-translation {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--fr-text-muted);
  margin-top: 0.15rem;
}
.fr-chat-newword {
  font-size: 0.72rem;
  color: var(--fr-accent);
  margin-top: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: var(--fr-accent-bg);
  border-radius: 6px;
  display: inline-block;
}
/* Old in-bubble actions removed — now using fr-chat-msg-actions */
.fr-chat-typing {
  display: flex;
  gap: 4px;
  padding: 0.2rem 0;
}
.fr-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fr-text-muted);
  animation: chatBounce 1.2s ease-in-out infinite;
}
.fr-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.fr-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
  40% { transform: translateY(-6px); opacity: 1; }
}
.fr-chat-input-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--fr-border);
  background: var(--fr-bg);
}
.fr-chat-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fr-border);
  border-radius: 20px;
  background: var(--fr-surface);
  color: var(--fr-text);
  font-size: 0.85rem;
  outline: none;
}
.fr-chat-input:focus {
  border-color: var(--fr-accent);
}
.fr-chat-input::placeholder {
  color: var(--fr-text-muted);
}
.fr-chat-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--fr-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s;
}
.fr-chat-send:hover { opacity: 0.85; }
.fr-chat-send:disabled { opacity: 0.3; cursor: default; }
/* Coach sidebar */
.fr-chat-coach {
  width: 320px;
  min-width: 220px;
  max-width: 500px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem;
  border-right: 1px solid var(--fr-border);
  background: var(--fr-surface);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  resize: horizontal;
  overflow-x: hidden;
}
.fr-coach-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fr-accent);
}
.fr-coach-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fr-coach-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fr-text-muted);
}
.fr-coach-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}
.fr-coach-word {
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem;
  background: var(--fr-accent-bg);
  border-radius: 5px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s;
}
.fr-coach-word:hover {
  background: var(--fr-surface-hover);
}
.fr-coach-word-fr {
  font-weight: 600;
  color: var(--fr-accent);
}
.fr-coach-word-en {
  color: var(--fr-text-muted);
}
.fr-coach-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  background: none;
  color: var(--fr-text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.fr-coach-suggestion:hover {
  background: var(--fr-accent-bg);
  border-color: var(--fr-accent);
}
.fr-coach-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fr-text-muted);
  font-size: 0.72rem;
}
.fr-coach-loading .lucide-loader {
  animation: spin 1.5s linear infinite;
}
.fr-coach-empty {
  color: var(--fr-text-muted);
  font-size: 0.72rem;
  text-align: center;
  padding: 1rem 0.5rem;
  line-height: 1.5;
}
.fr-coach-translation {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fr-accent);
  line-height: 1.5;
  padding: 0.4rem 0.5rem;
  background: var(--fr-accent-bg);
  border-radius: 8px;
}
.fr-coach-speak {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--fr-border);
  border-radius: 6px;
  background: none;
  color: var(--fr-text-muted);
  font-size: 0.68rem;
  cursor: pointer;
  align-self: flex-start;
}
.fr-coach-speak:hover {
  color: var(--fr-accent);
  border-color: var(--fr-accent);
}
.fr-chat-msg.user {
  cursor: pointer;
}
.fr-coach-grammar {
  font-size: 0.7rem;
  color: var(--fr-text-muted);
  line-height: 1.4;
  padding: 0.3rem 0.4rem;
  background: rgba(251, 191, 36, 0.05);
  border-left: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: 0 4px 4px 0;
}
/* ── Theatre Game ─────────────────────────────────────────────── */
.fr-theatre {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0a0a12;
}
.fr-theatre-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}
.fr-theatre-score { font-weight: 600; }
.fr-theatre-round { color: rgba(255, 255, 255, 0.35); }
.fr-theatre-lives { font-size: 1rem; }
.fr-theatre-video {
  flex-shrink: 0;
  position: relative;
  background: #000;
}
.fr-theatre-player {
  width: 100%;
  max-height: 280px;
  display: block;
  object-fit: contain;
}
.fr-theatre-subtitle {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
}
.fr-theatre-prompt {
  text-align: center;
  padding: 0.6rem;
  font-size: 0.75rem;
  color: rgba(167, 139, 250, 0.6);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.fr-theatre-words {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  padding: 0 0.75rem 0.75rem;
  flex: 1;
  align-content: start;
}
.fr-theatre-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.7rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.15s;
}
.fr-theatre-word:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.3);
}
.fr-theatre-word-fr {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.fr-theatre-word-en {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
}
.fr-theatre-word.correct {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
}
.fr-theatre-word.correct .fr-theatre-word-fr { color: #4ade80; }
.fr-theatre-word.wrong {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
.fr-theatre-word.wrong .fr-theatre-word-fr { color: #f87171; text-decoration: line-through; }
.fr-theatre-word.missed {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}
.fr-theatre-word.missed .fr-theatre-word-fr { color: #fbbf24; }
.fr-theatre-word:disabled {
  cursor: default;
  opacity: 0.7;
}
.fr-theatre-word-seek {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.58rem;
  color: rgba(167, 139, 250, 0.6);
  margin-top: 2px;
}
.fr-theatre-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  gap: 0.5rem;
}
.fr-theatre-control-btns {
  display: flex;
  gap: 0.4rem;
}
.fr-theatre-ctrl-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}
.fr-theatre-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}
.fr-theatre-ctrl-btn.give-up {
  border-color: rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.5);
}
.fr-theatre-ctrl-btn.give-up:hover {
  background: rgba(251, 191, 36, 0.1);
  color: rgba(251, 191, 36, 0.8);
}
/* ── Word Catch Game ──────────────────────────────────────────── */
.fr-game-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.95) 0%, rgba(20, 15, 40, 0.95) 100%);
}
.fr-game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.fr-game-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  color: var(--fr-text);
}
.fr-game-start h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}
.fr-game-start p {
  font-size: 0.85rem;
  color: var(--fr-text-muted);
  margin: 0;
}
.fr-game-start .lucide {
  color: var(--fr-accent);
}
.fr-game-final-score {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--fr-accent) !important;
}
.fr-game-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.fr-btn-primary {
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: 10px;
  background: var(--fr-accent, #a78bfa);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.fr-btn-primary:hover {
  opacity: 0.85;
}
.fr-btn-primary:disabled {
  opacity: 0.4;
  cursor: default;
}
/* ── Stories view ─────────────────────────────────────────────── */
.fr-stories-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.fr-story-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 12px;
}
.fr-story-card-fr {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fr-text);
}
.fr-story-card-en {
  font-size: 0.8rem;
  color: var(--fr-text-muted);
  font-style: italic;
  line-height: 1.5;
}
.fr-story-card-date {
  font-size: 0.62rem;
  color: var(--fr-text-muted);
  opacity: 0.5;
}
body.light .fr-map-panel-example {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}
body.light .fr-map-container {
  background: radial-gradient(ellipse at center, rgba(230, 220, 250, 0.3) 0%, rgba(248, 248, 250, 0.95) 100%);
}
.fr-map-legend {
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
}
.fr-legend-item {
  font-size: 0.65rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.fr-legend-item::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.fr-legend-new { color: rgba(255, 255, 255, 0.35); }
.fr-legend-new::before { background: rgba(100, 100, 120, 0.5); }
.fr-legend-due { color: rgba(251, 191, 36, 0.7); }
.fr-legend-due::before { background: rgba(251, 191, 36, 0.5); }
.fr-legend-learned { color: rgba(167, 139, 250, 0.7); }
.fr-legend-learned::before { background: rgba(167, 139, 250, 0.5); }
body.light .fr-legend-new { color: rgba(0, 0, 0, 0.3); }
body.light .fr-legend-due { color: rgba(180, 130, 0, 0.7); }
body.light .fr-legend-learned { color: rgba(124, 58, 237, 0.7); }
/* ── Tab bar ─────────────────────────────────────────────────── */
/* Left sidebar navigation */
.fr-sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 42px;
  flex-shrink: 0;
  padding: 0.3rem;
  gap: 0.1rem;
  border-right: 1px solid var(--fr-border);
  background: var(--fr-bg);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s ease;
}
.fr-sidebar-nav.expanded {
  width: 150px;
  min-width: 120px;
  max-width: 220px;
  align-items: stretch;
  resize: horizontal;
  overflow: hidden;
}
.fr-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--fr-text-muted);
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 0.3rem;
  transition: all 0.15s;
  align-self: center;
}
.fr-nav-toggle:hover {
  color: var(--fr-text);
  background: var(--fr-surface-hover);
}
.fr-sidebar-nav.expanded .fr-nav-toggle {
  align-self: flex-end;
}
.fr-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  color: var(--fr-text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  flex-shrink: 0;
  gap: 0.5rem;
}
.fr-sidebar-nav.expanded .fr-nav-item {
  width: auto;
  justify-content: flex-start;
  padding: 0 0.5rem;
}
.fr-nav-item:hover {
  color: var(--fr-text);
  background: var(--fr-surface-hover);
}
.fr-nav-item.active {
  color: var(--fr-accent);
  background: var(--fr-accent-bg);
}
.fr-nav-item:disabled {
  opacity: 0.25;
  cursor: default;
}
.fr-nav-label {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.fr-nav-divider {
  height: 1px;
  width: 20px;
  margin: 0.25rem 0;
  background: var(--fr-border);
  align-self: center;
}
.fr-nav-header {
  opacity: 0.6;
  margin-top: 0.15rem;
}
.fr-nav-game {
  height: 30px;
}
.fr-nav-game .lucide {
  opacity: 0.7;
}
.fr-sidebar-nav.expanded .fr-nav-game {
  padding-left: 1.2rem;
}
/* Keep old tab classes for backward compat but hide */
.fr-tab-bar { display: none; }
.fr-tab { display: none; }
/* Tab dropdown */
.fr-tab-dropdown {
  position: relative;
}
.fr-tab-dropdown > .fr-tab {
  gap: 4px;
}
.fr-tab-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
}
.fr-tab-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 220px;
  background: var(--fr-bg, #0a0a0f);
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  padding: 0.35rem;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  animation: fadeInUp 0.15s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.fr-tab-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--fr-text-muted);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.fr-tab-dropdown-item:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-text);
}
.fr-tab-dropdown-item.active {
  color: var(--fr-accent);
}
.fr-dropdown-item-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: inherit;
}
.fr-dropdown-item-desc {
  font-size: 0.62rem;
  color: var(--fr-text-muted);
  opacity: 0.7;
}
/* Publish App */
.publish-app {
  height: 100%;
  color: var(--text-primary, rgba(255,255,255,0.95));
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
}
/* Sidebar */
.publish-sidebar {
  width: 240px;
  min-width: 200px;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.15);
}
.publish-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.publish-sidebar-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.publish-sidebar-actions {
  display: flex;
  gap: 4px;
}
/* Drafts list */
.publish-drafts-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.publish-draft-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  transition: background 0.15s;
}
.publish-draft-item:hover {
  background: rgba(255,255,255,0.06);
}
.publish-draft-item.selected {
  background: rgba(167, 139, 250, 0.15);
  color: rgba(255,255,255,0.95);
}
.publish-draft-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.publish-draft-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.publish-draft-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
.publish-draft-delete {
  opacity: 0;
  transition: opacity 0.15s;
}
.publish-draft-item:hover .publish-draft-delete {
  opacity: 0.5;
}
.publish-draft-delete:hover {
  opacity: 1 !important;
}
/* Status badges */
.publish-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 500;
}
.publish-status.draft {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
}
.publish-status.ready {
  background: rgba(56, 189, 248, 0.15);
  color: rgba(56, 189, 248, 0.8);
}
.publish-status.published {
  background: rgba(34, 197, 94, 0.15);
  color: rgba(34, 197, 94, 0.8);
}
/* Editor area */
.publish-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 36px;
}
.publish-filename {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.publish-saving {
  font-size: 11px;
  color: rgba(167, 139, 250, 0.6);
}
.publish-editor-wrapper {
  flex: 1;
  overflow: auto;
}
/* Font size override for CodeMirror */
.publish-editor-wrapper .cm-content {
  font-size: var(--publish-font-size, 15px) !important;
  max-width: none !important;
  margin: 0 !important;
}
.publish-editor-wrapper textarea {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.9);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 20px;
  resize: none;
  outline: none;
}
.publish-editor-wrapper textarea::placeholder {
  color: rgba(255,255,255,0.2);
}
.publish-editor-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255,255,255,0.25);
  font-size: 14px;
}
/* Publish panel (right) */
.publish-panel {
  width: 280px;
  min-width: 240px;
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.15);
  overflow-y: auto;
}
.publish-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.publish-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.publish-panel-section {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.publish-panel-section h4 {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
/* Reddit section */
.publish-reddit-input {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.publish-reddit-input label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}
.publish-reddit-input input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 5px 8px;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  outline: none;
}
.publish-reddit-input input:focus {
  border-color: rgba(167, 139, 250, 0.4);
}
/* Publish button */
.publish-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.publish-btn-reddit {
  background: rgba(255, 69, 0, 0.2);
  color: rgba(255, 140, 90, 0.9);
  border: 1px solid rgba(255, 69, 0, 0.3);
}
.publish-btn-reddit:hover:not(:disabled) {
  background: rgba(255, 69, 0, 0.3);
}
.publish-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* History */
.publish-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}
.publish-history-platform {
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}
.publish-history-link {
  color: rgba(167, 139, 250, 0.7);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.publish-history-link:hover {
  color: rgba(167, 139, 250, 1);
}
.publish-history-date {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}
/* Footer toggles */
.publish-footer-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
}
.publish-footer-toggle input[type="checkbox"] {
  accent-color: #a78bfa;
}
/* Common button */
.publish-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.4);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.publish-icon-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
/* Font controls */
.publish-font-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  padding: 2px 4px;
  outline: none;
  cursor: pointer;
}
.publish-font-select:hover {
  border-color: rgba(255,255,255,0.2);
}
.publish-icon-btn.active {
  background: rgba(167, 139, 250, 0.15);
  color: rgba(167, 139, 250, 0.8);
}
/* Outline panel */
.publish-outline-panel {
  width: 200px;
  min-width: 160px;
  border-left: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
  background: rgba(0,0,0,0.1);
}
.publish-outline-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.publish-outline {
  padding: 4px 6px;
}
.publish-outline-item {
  padding: 3px 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s;
}
.publish-outline-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
}
.publish-outline-item.level-1 { padding-left: 8px; font-weight: 600; color: rgba(255,255,255,0.7); font-size: 13px; }
.publish-outline-item.level-2 { padding-left: 16px; }
.publish-outline-item.level-3 { padding-left: 24px; font-size: 11px; }
.publish-outline-item.level-4 { padding-left: 32px; font-size: 11px; }
.publish-outline-item.level-5 { padding-left: 40px; font-size: 11px; }
.publish-outline-item.level-6 { padding-left: 48px; font-size: 11px; }
.publish-outline-empty {
  padding: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
}
/* Subreddit chips */
.publish-subreddit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.publish-subreddit-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(255, 69, 0, 0.12);
  border: 1px solid rgba(255, 69, 0, 0.2);
  border-radius: 12px;
  font-size: 11px;
  color: rgba(255, 140, 90, 0.85);
}
.publish-chip-remove {
  background: none;
  border: none;
  color: rgba(255, 140, 90, 0.5);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.publish-chip-remove:hover {
  color: rgba(255, 140, 90, 1);
}
.publish-subreddit-check {
  width: 14px;
  font-size: 11px;
  color: rgba(167, 139, 250, 0.8);
}
/* Subreddit picker */
.publish-subreddit-picker {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(0,0,0,0.2);
}
.publish-subreddit-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s;
}
.publish-subreddit-option:hover {
  background: rgba(255,255,255,0.06);
}
.publish-subreddit-option.selected {
  background: rgba(167, 139, 250, 0.12);
}
.publish-subreddit-name {
  color: rgba(255,255,255,0.7);
}
.publish-subreddit-option.selected .publish-subreddit-name {
  color: rgba(167, 139, 250, 0.9);
}
.publish-subreddit-members {
  font-size: 10px;
  color: rgba(255,255,255,0.25);
}
/* Loading */
.publish-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: rgba(255,255,255,0.3);
  font-size: 13px;
}
/* Publishing status */
.publish-status-msg {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 8px;
}
.publish-status-msg.success {
  background: rgba(34, 197, 94, 0.1);
  color: rgba(34, 197, 94, 0.8);
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.publish-status-msg.error {
  background: rgba(239, 68, 68, 0.1);
  color: rgba(239, 68, 68, 0.8);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.admin-app {
  height: 100%;
  display: flex;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}
.admin-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: rgba(255, 255, 255, 0.5);
}
/* Sidebar */
.admin-sidebar {
  width: 240px;
  min-width: 240px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-nav {
  display: flex;
  gap: 2px;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-nav-btn {
  flex: 1;
  padding: 6px 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.admin-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}
.admin-nav-btn.active {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
}
/* User list */
.admin-user-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
.admin-user-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 2px;
  transition: background 0.15s;
}
.admin-user-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.admin-user-item.active {
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
}
.admin-user-name {
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-user-email {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}
.admin-user-meta {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}
/* Main content */
.admin-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.admin-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
}
.admin-empty-small {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
  padding: 12px 0;
}
/* User detail */
.admin-detail-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.admin-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.admin-detail-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.admin-detail-meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}
.admin-detail-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.admin-btn {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.admin-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.admin-btn.danger {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.2);
}
.admin-btn.danger:hover {
  background: rgba(248, 113, 113, 0.1);
}
/* Detail sections */
.admin-detail-section {
  margin-bottom: 24px;
}
.admin-detail-section h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 8px 0;
}
.admin-google-account {
  padding: 6px 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}
.admin-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}
/* Log entries */
.admin-log-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.admin-log-entry {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 8px;
  font-size: 0.75rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  border-radius: 4px;
}
.admin-log-entry:hover {
  background: rgba(255, 255, 255, 0.03);
}
.admin-log-time {
  color: rgba(255, 255, 255, 0.3);
  min-width: 75px;
  flex-shrink: 0;
}
.admin-log-type {
  min-width: 55px;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
}
.admin-log-type.error { color: #f87171; }
.admin-log-type.request { color: #38bdf8; }
.admin-log-type.ai { color: #a78bfa; }
.admin-log-user {
  color: #38bdf8;
  min-width: 100px;
  flex-shrink: 0;
  font-size: 0.7rem;
}
.admin-log-detail {
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-log-error {
  color: #f87171;
  margin-left: 8px;
}
/* Section header */
.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.admin-section-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
/* System stats */
.admin-system h2 {
  margin: 0 0 20px 0;
  font-size: 1rem;
  font-weight: 600;
}
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.admin-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.admin-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}
.admin-stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Errors tab */
.admin-errors .error-entry {
  border-left: 2px solid rgba(248, 113, 113, 0.3);
  padding-left: 10px;
}
/* -----------------------------------------------------------------------------
 * 9. UTILITIES - Final utility classes (loaded last for highest specificity)
 * -------------------------------------------------------------------------- */
/*
  Meronex Desktop - Core Styles
  This file now mainly handles imports and common utility classes.
  Component-specific styles have been moved to their respective files.
*/
/* Utilities and common styles that haven't been modularized yet */
/* Standard focus styles */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--input-focus-border, #c084fc);
  outline-offset: 2px;
}
/* Transitions */
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-in;
}
/* Simple animations */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin,
.spinning {
  animation: spin 1s linear infinite;
}
/* Spinner */
.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/* Pulse animations */
@keyframes pulse-speak {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@keyframes pulse-loading {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* Truncate text utility */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* End of common styles */

/* Glass sidebar base */
.sidebar,
.glass-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 20;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transition: all 0.3s ease-in-out;
  
  /* Default (Dark) */
  background: rgba(15, 17, 21, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

body.light .glass-sidebar {
  background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

body.gray .glass-sidebar {
  background: rgba(26, 26, 26, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

body.zen .glass-sidebar {
  background: rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  color: white;
}

body.batman .glass-sidebar {
  background: rgba(10, 10, 15, 0.9);
  border-right: 1px solid rgba(0, 100, 200, 0.2);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}

.glass-sidebar nav {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.sidebar {
  width: 15.5rem;
  min-width: 15.5rem;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 5rem;
  min-width: 5rem;
  overflow: visible;
  /* Ensure flyouts don't affect layout calculations */
  contain: layout;
  /* Prevent sidebar from triggering document scroll */
  overscroll-behavior: none;
}

/* Keep overflow hidden during transition to prevent visual glitches */
.sidebar.transitioning {
  overflow: hidden !important;
}

.sidebar.transitioning .sidebar-nav {
  overflow: hidden !important;
}

.sidebar.collapsed .sidebar-header-wrapper {
  padding: 0.5rem;
}

.sidebar.collapsed .sidebar-logo-btn {
  margin-top: 1.5rem;
}

.sidebar.collapsed .sidebar-nav {
  padding: 0.25rem;
  overflow: visible;
}

.sidebar-menu-item span,
.sidebar-menu-item svg+span,
.sidebar-section-title {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.sidebar.collapsed .sidebar-menu-item>span:not(.sidebar-tooltip),
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .nav-title {
  display: none !important;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}

/* Hide ALL submenus when collapsed - they only show on hover as flyout */
.sidebar.collapsed .sidebar-submenu {
  display: none;
}

.sidebar.collapsed .nav-section li:hover>.sidebar-submenu {
  display: block;
}

/* Larger icons when collapsed */
.sidebar.collapsed .sidebar-menu-item {
  justify-content: center;
  padding: 0.75rem;
}

.sidebar.collapsed .sidebar-menu-item svg {
  width: 1.35rem;
  height: 1.35rem;
}

.sidebar.collapsed .nav-section ul {
  gap: 0.25rem;
}

/* Ensure nav section items show flyouts when collapsed */
.sidebar.collapsed .nav-section-items {
  overflow: visible;
}

/* Sidebar tooltip - shown when collapsed */
.sidebar-tooltip {
  display: none;
}

/* Only show tooltip structure when sidebar is collapsed */
.sidebar.collapsed .sidebar-tooltip {
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sidebar.collapsed .sidebar-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: rgba(30, 30, 35, 0.95);
}

.sidebar-menu-item {
  position: relative;
}

/* Show tooltip on hover */
.sidebar.collapsed .sidebar-menu-item:hover .sidebar-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Hide tooltip for flyout items (they have their own flyout menu) */
.sidebar.collapsed .sidebar-flyout-wrapper .sidebar-tooltip {
  display: none !important;
}

body.light .sidebar.collapsed .sidebar-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.light .sidebar.collapsed .sidebar-tooltip::before {
  border-right-color: rgba(255, 255, 255, 0.95);
}

/* Sidebar header */
.sidebar-header-wrapper {
  padding: 1.25rem 1rem 1rem;
  transition: all 0.3s;
}

.sidebar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.sidebar-logo-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  padding: 0.25rem;
  margin: -0.25rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease;
  font: inherit;
  color: inherit;
  text-decoration: none;
}

.sidebar-logo-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  overflow: hidden;
}

.sidebar-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-logo-btn:hover .sidebar-logo {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.sidebar-title {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  white-space: nowrap;
  margin: 0;
  line-height: 1;
  opacity: 0.9;
}

.sidebar-collapse-btn {
  padding: 0.4rem;
  border-radius: 0.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
}

.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

.sidebar-expand-btn {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  transform: translateX(-50%);
  width: 48px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s;
  z-index: 100;
}

.sidebar-expand-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

body.light .sidebar-expand-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.5);
}

body.light .sidebar-expand-btn:hover {
  background: white;
  color: rgba(0, 0, 0, 0.8);
}

/* Sidebar navigation */
.sidebar-nav {
  flex: 1;
  padding: 0.5rem 1rem 0.5rem 1.25rem;
  overflow-y: auto;
  transition: all 0.3s;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

body.light .sidebar-nav {
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

body.light .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}

body.light .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

.sidebar-nav ul {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li::before,
.sidebar-nav li::marker {
  content: none;
  display: none;
}

/* Section header button */
.nav-title-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.25rem 0.6rem;
  margin: 0.75rem 0 0.25rem;
}

.nav-title-btn:hover .nav-title {
  color: rgba(255, 255, 255, 0.6);
}

body.light .nav-title-btn:hover .nav-title {
  color: rgba(0, 0, 0, 0.6);
}

.nav-title {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  padding: 0;
  font-weight: 500;
  transition: color 0.2s ease, opacity 0.25s ease, transform 0.25s ease;
}

body.light .nav-title {
  color: rgba(0, 0, 0, 0.4);
}

.nav-title-chevron {
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.4;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

.nav-title-btn:hover .nav-title-chevron {
  opacity: 0.7;
}

/* Section items container animation */
.nav-section-items {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.nav-section-items.collapsed {
  opacity: 0;
  pointer-events: none;
}

.nav-section-items.expanded {
  opacity: 1;
}

.sidebar-section-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0.25rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
  background: transparent;
  border: none;
  cursor: pointer;
}

.sidebar-section-title {
  font-size: 0.55rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin-bottom: 0.6rem;
  opacity: 0.55;
}

/* Menu item */
.sidebar-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  text-decoration: none;
  background: transparent;
}

.sidebar-menu-item.active {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Active indicator bar */
.sidebar-active-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #c084fc;
  border-radius: 0 9999px 9999px 0;
}

/* Submenu */
.sidebar-submenu {
  margin-left: 1.5rem;
  margin-top: 0.25rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, transform 0.3s ease;
}

.sidebar-submenu.expanded {
  opacity: 1;
  transform: translateY(0);
}

.sidebar-submenu.collapsed {
  pointer-events: none;
}

/* Collapsed sidebar - submenu as flyout popup on hover */
.sidebar.collapsed .nav-section li {
  position: relative;
}

.sidebar.collapsed .nav-section li:hover>.sidebar-submenu {
  display: block !important;
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.5rem;
  margin-top: 0;
  padding: 0.5rem;
  border-left: none;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  max-height: none !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  z-index: 1000;
}

.sidebar.collapsed .nav-section li:hover>.sidebar-submenu::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 12px;
  border: 6px solid transparent;
  border-right-color: rgba(30, 30, 35, 0.98);
}

/* Submenu items in collapsed flyout */
.sidebar.collapsed .sidebar-submenu-item {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.sidebar.collapsed .sidebar-submenu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* --- Flyout Menu --- */
.sidebar-flyout-wrapper {
  position: relative;
  width: 100%;
}

.sidebar.collapsed .sidebar-flyout-wrapper {
  display: flex;
  justify-content: center;
}

.sidebar.collapsed .sidebar-flyout-wrapper .sidebar-menu-item {
  justify-content: center;
  width: 100%;
}

.sidebar-flyout {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.5rem;
  padding: 0.5rem;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}

.sidebar-flyout.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.sidebar-flyout-arrow {
  position: absolute;
  right: 100%;
  top: 12px;
  border: 6px solid transparent;
  border-right-color: rgba(30, 30, 35, 0.98);
}

.sidebar-flyout-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.25rem;
}

.sidebar-flyout-items {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sidebar-flyout-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.sidebar-flyout-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-flyout-item.active {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.1);
}

.sidebar-flyout-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

body.light .sidebar-flyout {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body.light .sidebar-flyout-arrow {
  border-right-color: rgba(255, 255, 255, 0.98);
}

body.light .sidebar-flyout-header {
  color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .sidebar-flyout-item {
  color: rgba(0, 0, 0, 0.8);
}

body.light .sidebar-flyout-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

body.light .sidebar-flyout-item.active {
  color: #9333ea;
  background: rgba(147, 51, 234, 0.08);
}

.sidebar-submenu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  border-radius: 0.4rem;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.sidebar-submenu-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.45;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 0.75rem 1rem;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.sidebar-version {
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}

.sidebar-refresh-btn {
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: all 0.2s;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
}

.sidebar-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}

/* Theme-specific overrides for sidebar */
.glass-sidebar.light .sidebar-title { color: #111827; }
.glass-sidebar.light .sidebar-section-title { color: #6b7280; }
.glass-sidebar.light .sidebar-menu-item { color: rgba(55, 65, 81, 0.85); }
.glass-sidebar.light .sidebar-menu-item:hover { background: rgba(0, 0, 0, 0.05); color: #111827; }
.glass-sidebar.light .sidebar-menu-item.active { background: rgba(0, 0, 0, 0.08); color: #c084fc; }
.glass-sidebar.light .sidebar-collapse-btn { border-color: #e5e7eb; background: white; color: rgba(0, 0, 0, 0.8); }
.glass-sidebar.light .sidebar-collapse-btn:hover { background: #f3f4f6; color: rgba(0, 0, 0, 0.9); }
.glass-sidebar.light .sidebar-submenu { border-left-color: #e5e7eb; }
.glass-sidebar.light .sidebar-footer { border-top-color: #e5e7eb; }
.glass-sidebar.light .sidebar-version { color: #6b7280; }
.glass-sidebar.light .sidebar-refresh-btn { color: #9ca3af; }
.glass-sidebar.light .sidebar-refresh-btn:hover { background: rgba(0, 0, 0, 0.05); color: #374151; }

.glass-sidebar .sidebar-title { color: white; }
.glass-sidebar .sidebar-section-title { color: #9ca3af; }
.glass-sidebar .sidebar-menu-item { color: rgba(255, 255, 255, 0.85); }
.glass-sidebar .sidebar-menu-item:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
.glass-sidebar .sidebar-menu-item.active { background: rgba(255, 255, 255, 0.12); color: #c084fc; }
.glass-sidebar .sidebar-collapse-btn { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: white; }
.glass-sidebar .sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.1); }

.glass-sidebar.zen .sidebar-title { color: rgba(255, 255, 255, 0.9); }
.glass-sidebar.zen .sidebar-section-title { color: rgba(255, 255, 255, 0.7); }
.glass-sidebar.zen .sidebar-menu-item { color: rgba(255, 255, 255, 0.92); }
.glass-sidebar.zen .sidebar-menu-item:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.98); }
.glass-sidebar.zen .sidebar-menu-item.active { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 1); border-left: 2px solid rgba(255, 255, 255, 0.4); }
.glass-sidebar.zen .sidebar-collapse-btn { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: white; }
.glass-sidebar.zen .sidebar-submenu { border-left-color: rgba(255, 255, 255, 0.3); }
.glass-sidebar.zen .nav-section button svg, .glass-sidebar.zen .nav-section a svg, .glass-sidebar.zen .nav-section .nav-link svg { color: rgba(255, 255, 255, 0.9) !important; fill: none !important; stroke: currentColor !important; }
.glass-sidebar.zen .nav-section li.active button svg, .glass-sidebar.zen .nav-section li.active a svg { color: rgba(255, 255, 255, 1) !important; fill: none !important; stroke: currentColor !important; }
.glass-sidebar.zen .nav-title { color: rgba(255, 255, 255, 0.5) !important; }
.glass-sidebar.zen .nav-title-btn:hover .nav-title { color: rgba(255, 255, 255, 0.75) !important; }
.glass-sidebar.zen .nav-title-chevron { color: rgba(255, 255, 255, 0.5); }
.glass-sidebar.zen .sidebar-submenu-item { color: white !important; }
.glass-sidebar.zen .sidebar-submenu-item:hover { color: white !important; background: rgba(255, 255, 255, 0.1); }
.glass-sidebar.zen .sidebar-submenu-item.active { color: #c084fc !important; background: rgba(192, 132, 252, 0.15); }
.glass-sidebar.zen .sidebar-submenu-dot { background: white !important; opacity: 0.8; }

.glass-sidebar.batman .sidebar-title { color: #93c5fd; }
.glass-sidebar.batman .sidebar-section-title { color: rgba(96, 165, 250, 0.6); }
.glass-sidebar.batman .sidebar-menu-item { color: #9ca3af; }
.glass-sidebar.batman .sidebar-menu-item:hover { background: rgba(30, 58, 138, 0.2); color: #93c5fd; }
.glass-sidebar.batman .sidebar-menu-item.active { background: rgba(30, 58, 138, 0.3); color: #93c5fd; border-left: 2px solid #3b82f6; }
.glass-sidebar.batman .sidebar-collapse-btn { border-color: rgba(59, 130, 246, 0.3); background: rgba(30, 58, 138, 0.2); color: #93c5fd; }
.glass-sidebar.batman .sidebar-submenu { border-left-color: rgba(59, 130, 246, 0.3); }

/* ===========================================
   MUSIC PLAYER - Simple Widget Styling
   =========================================== */

/* Headless mode: no visible UI, just the YouTube iframe container */
.music-player-headless {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.music-player {
  /* Match panel / navigation hint glass style */
  --widget-bg: rgba(255, 255, 255, 0.06);
  --widget-bg-hover: rgba(255, 255, 255, 0.12);
  --widget-border: rgba(255, 255, 255, 0.08);
  --widget-border-hover: rgba(255, 255, 255, 0.12);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: var(--widget-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--widget-border);
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease;
  overflow: hidden;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.music-player:hover,
.music-player.music-player-expanded {
  background: var(--widget-bg-hover);
  border-color: var(--widget-border-hover);
}

.music-player-expanded {
  width: auto;
  height: 3rem;
  padding: 0.35rem 0.5rem;
  gap: 0.35rem;
  overflow: visible;
  /* Dark solid background when expanded - matches standard panels */
  background: rgba(15, 15, 20, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Playlist thumbnail in expanded widget */
.music-player-widget-thumb {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
}

.music-player-widget-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Base Music Player Button */
.music-player-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 0.4rem !important;
  background: transparent !important;
  border: none !important;
  color: rgba(0, 0, 0, 0.8) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.music-player-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 1) !important;
  transform: scale(1.1) !important;
}

.music-player-btn:active {
  transform: scale(0.95) !important;
  background: rgba(0, 0, 0, 0.12) !important;
}

.music-player-icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}

.music-player-icon-btn:active {
  transform: scale(0.95) !important;
}

.music-player-loader {
  animation: spin 1s linear infinite;
}

.music-player-btn:disabled,
.music-player-icon-btn:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

/* Shuffle button */
.music-player-shuffle-btn {
  opacity: 0.5 !important;
  padding: 0.35rem !important;
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
}

.music-player-shuffle-btn.active {
  opacity: 1 !important;
  color: #38bdf8 !important;
}

.music-player-shuffle-btn:hover {
  opacity: 1;
}

/* Star Button */
.music-player-star-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.music-player-star-btn:hover {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.1) !important;
}

.music-player-star-btn.starred {
  color: #fbbf24 !important;
}

.music-player-star-btn.starred:hover {
  color: #f59e0b !important;
}

.music-player-star-btn.inline {
  width: 20px !important;
  height: 20px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Dislike Button */
.music-player-dislike-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.music-player-dislike-btn:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

.music-player-dislike-btn.disliked {
  color: #ef4444 !important;
}

.music-player-dislike-btn.disliked:hover {
  color: #dc2626 !important;
}

/* Tooltip */
.music-player-tooltip {
  position: absolute;
  bottom: 3rem;
  right: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  animation: tooltipFadeIn 0.2s ease;
  pointer-events: none;
}

.music-player-tooltip p {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
}

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

/* Music player title */
.music-player-title-wrapper {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  overflow: visible;
}

.music-player-title-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.35rem;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 0;
  max-width: 140px;
}

.music-player-title-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.music-player-title {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

.music-player-title-chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease;
}

.music-player-title-btn:hover .music-player-title {
  color: rgba(255, 255, 255, 0.95);
}

.music-player-title-btn:hover .music-player-title-chevron {
  color: rgba(255, 255, 255, 0.8);
}

/* Playlist dropdown menu */
.music-player-playlist-menu {
  position: absolute !important;
  bottom: calc(100% + 0.25rem) !important;
  right: 0 !important;
  transform: translateY(10px) !important;
  background: rgba(30, 30, 35, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.75rem !important;
  width: 100% !important;
  min-width: 220px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.music-player-playlist-menu.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Now Playing section */
.music-player-now-playing {
  padding: 0.75rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.music-player-now-playing:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.music-player-now-playing.copied {
  background: rgba(34, 197, 94, 0.15) !important;
}

.music-player-now-playing-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-size: 0.55rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.35rem !important;
}

.music-player-now-icon {
  color: #a855f7;
  animation: pulse 1.5s ease-in-out infinite;
}

.music-player-now-playing-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  min-width: 0 !important;
}

.music-player-now-playing-track {
  color: rgba(255, 255, 255, 0.4) !important;
  margin-right: 0.35rem !important;
  font-size: 0.7rem !important;
}

.music-player-now-playing-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
}

/* Starred and Disliked Sections */
.music-player-starred-section,
.music-player-disliked-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.music-player-starred-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.music-player-starred-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex: 1 !important;
  padding: 0.5rem 0.75rem !important;
  background: transparent !important;
  border: none !important;
  color: #fbbf24 !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.music-player-starred-header:hover {
  background: rgba(251, 191, 36, 0.08) !important;
}

.music-player-starred-header.disliked {
  color: rgba(239, 68, 68, 0.7) !important;
}

.music-player-starred-header.disliked:hover {
  color: #ef4444 !important;
}

.music-player-starred-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin-right: 0.5rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0.35rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.music-player-starred-copy:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.music-player-starred-copy.copied {
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.15) !important;
}

.music-player-starred-list {
  max-height: 120px !important;
  overflow-y: auto !important;
  padding: 0 0.5rem 0.5rem !important;
}

.music-player-starred-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.4rem 0.5rem !important;
  border-radius: 0.35rem !important;
  transition: background 0.15s ease !important;
}

.music-player-starred-item.playable { cursor: pointer !important; }
.music-player-starred-item:hover { background: rgba(255, 255, 255, 0.05) !important; }
.music-player-starred-item.playable:hover { background: rgba(251, 191, 36, 0.1) !important; }

.music-player-starred-play {
  color: rgba(255, 255, 255, 0.3) !important;
  flex-shrink: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease !important;
}

.music-player-starred-item.playable:hover .music-player-starred-play {
  opacity: 1 !important;
  color: #fbbf24 !important;
}

.music-player-starred-title {
  flex: 1 !important;
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.music-player-starred-item.disliked-item .music-player-starred-title {
  color: rgba(239, 68, 68, 0.8) !important;
}

.music-player-starred-item.disliked-item:hover .music-player-starred-title {
  color: #ef4444 !important;
}

.music-player-starred-remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: all 0.15s ease !important;
}

.music-player-starred-item:hover .music-player-starred-remove { opacity: 1 !important; }
.music-player-starred-remove:hover { color: #ef4444 !important; background: rgba(239, 68, 68, 0.15) !important; }

/* Track list */
.music-player-playlist-items {
  max-height: 180px !important;
  overflow-y: auto !important;
  padding: 0.25rem 0 !important;
}

.music-player-playlist-items::-webkit-scrollbar { width: 3px !important; }
.music-player-playlist-items::-webkit-scrollbar-track { background: transparent !important; }
.music-player-playlist-items::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15) !important; border-radius: 2px !important; }

.music-player-playlist-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.4rem 0.75rem !important;
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.65rem !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.music-player-playlist-item:hover { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.95) !important; }
.music-player-playlist-item.active { background: rgba(168, 85, 247, 0.15) !important; color: #a855f7 !important; }

.music-player-playlist-index {
  min-width: 1.25rem !important;
  color: rgba(255, 255, 255, 0.25) !important;
  font-size: 0.55rem !important;
}

.music-player-playlist-title {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.music-player-loading,
.music-player-no-tracks {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.65rem !important;
}

.music-player-loading .music-player-loader {
  animation: spin 1s linear infinite !important;
}

/* Track list panel - left side */
/* Note: .music-player-container is position: fixed in AppLayout.css
   Absolute children (.music-player-tracks-panel) still work with fixed parent */

.music-player-tracks-panel {
  position: absolute !important;
  right: calc(100% + 0.75rem) !important;
  bottom: 0 !important;
  width: 240px !important;
  max-height: 320px !important;
  background: rgba(20, 20, 25, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  animation: tracksPanelSlide 0.2s ease-out !important;
  display: flex !important;
  flex-direction: column !important;
}

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

.music-player-tracks-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.6rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.music-player-tracks-count {
  margin-left: auto !important;
  background: rgba(255, 255, 255, 0.1) !important;
  padding: 0.15rem 0.4rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.55rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.music-player-tracks-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0.25rem 0 !important;
}

.music-player-tracks-list::-webkit-scrollbar { width: 4px !important; }
.music-player-tracks-list::-webkit-scrollbar-track { background: transparent !important; }
.music-player-tracks-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15) !important; border-radius: 2px !important; }

.music-player-track-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.65rem !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.music-player-track-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.music-player-track-item.active {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #a855f7 !important;
}

.music-player-track-item.disliked {
  opacity: 0.4 !important;
}

.music-player-track-index {
  min-width: 1.25rem !important;
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 0.55rem !important;
  text-align: right !important;
}

.music-player-track-item.active .music-player-track-index {
  color: rgba(168, 85, 247, 0.7) !important;
}

.music-player-track-title {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.music-player-track-star {
  flex-shrink: 0 !important;
  color: #fbbf24 !important;
  opacity: 0.7 !important;
}

/* Light Theme Support */
body.light .music-player {
  --widget-bg: rgba(255, 255, 255, 0.85);
  --widget-bg-hover: rgba(255, 255, 255, 0.95);
  --widget-border: rgba(0, 0, 0, 0.1);
  --widget-border-hover: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.85);
}

body.light .music-player.music-player-expanded {
  /* Keep dark background even in light theme for contrast over light content */
  background: rgba(15, 15, 20, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}

body.light .music-player.music-player-expanded .music-player-btn {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.light .music-player.music-player-expanded .music-player-btn:hover {
  color: rgba(255, 255, 255, 1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

body.light .music-player.music-player-expanded .music-player-title {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.light .music-player.music-player-expanded .music-player-title:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

body.light .music-player-btn { color: rgba(0, 0, 0, 0.7) !important; }
body.light .music-player-star-btn { color: rgba(0, 0, 0, 0.25) !important; }
body.light .music-player-star-btn:hover { color: #f59e0b !important; background: rgba(251, 191, 36, 0.15) !important; }
body.light .music-player-dislike-btn { color: rgba(0, 0, 0, 0.25) !important; }
body.light .music-player-dislike-btn:hover { color: #ef4444 !important; background: rgba(239, 68, 68, 0.15) !important; }

body.light .music-player-playlist-menu { background: rgba(250, 250, 252, 0.98) !important; border-color: rgba(0, 0, 0, 0.1) !important; }
body.light .music-player-now-playing { border-color: rgba(0, 0, 0, 0.06) !important; }
body.light .music-player-starred-header { color: #f59e0b !important; }
body.light .music-player-starred-copy { color: rgba(0, 0, 0, 0.35) !important; }
body.light .music-player-starred-copy.copied { color: #16a34a !important; }

/* Zen Theme Support */
.theme-zen .music-player {
  --widget-bg: rgba(255, 255, 255, 0.12);
  --widget-bg-hover: rgba(255, 255, 255, 0.18);
  --widget-border: rgba(255, 255, 255, 0.15);
  --widget-border-hover: rgba(255, 255, 255, 0.2);
}

.theme-zen .music-player.music-player-expanded {
  background: rgba(15, 15, 20, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

.theme-zen .music-player-playlist-menu { background: rgba(40, 40, 45, 0.95) !important; border-color: rgba(255, 255, 255, 0.15) !important; }

/* ============================================
   MISSING STYLES RESTORED FROM ORIGINAL CSS
   ============================================ */

/* Music player icon (collapsed state) */
.music-player-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.music-player-icon:hover,
.music-player-icon.music-player-hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

body.light .music-player-icon {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}

.theme-zen .music-player-icon,
.theme-zen .music-player-icon:hover,
.theme-zen .music-player-icon.music-player-hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9) !important;
}

.theme-zen .music-player-icon svg,
.theme-zen .music-player-icon.music-player-hover svg {
  color: rgba(255, 255, 255, 0.9) !important;
  stroke: rgba(255, 255, 255, 0.9) !important;
}

/* Music player controls wrapper */
.music-player-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Disliked playlist item styles */
.music-player-playlist-item.disliked {
  color: rgba(239, 68, 68, 0.6) !important;
}

.music-player-playlist-item.disliked:hover {
  color: rgba(239, 68, 68, 0.9) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

.music-player-playlist-item.disliked .music-player-playlist-title {
  color: rgba(239, 68, 68, 0.7) !important;
}

.music-player-playlist-item.disliked:hover .music-player-playlist-title {
  color: #ef4444 !important;
}

.music-player-disliked-indicator {
  color: rgba(239, 68, 68, 0.5) !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.music-player-playlist-item.active .music-player-playlist-index {
  color: rgba(168, 85, 247, 0.5) !important;
}

/* Light theme disliked items */
body.light .music-player-playlist-item.disliked {
  color: rgba(220, 38, 38, 0.6) !important;
}

body.light .music-player-playlist-item.disliked:hover {
  color: rgba(220, 38, 38, 0.9) !important;
  background: rgba(220, 38, 38, 0.08) !important;
}

body.light .music-player-playlist-item.disliked .music-player-playlist-title {
  color: rgba(220, 38, 38, 0.7) !important;
}

body.light .music-player-playlist-item.disliked:hover .music-player-playlist-title {
  color: #dc2626 !important;
}

body.light .music-player-disliked-indicator {
  color: rgba(220, 38, 38, 0.5) !important;
}

body.light .music-player-icon-btn {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .music-player-tooltip {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light .music-player-tooltip p {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Disliked section styles */
.music-player-disliked-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.music-player-disliked-icon {
  color: rgba(239, 68, 68, 0.5) !important;
  flex-shrink: 0 !important;
}

.music-player-starred-item.disliked-item {
  opacity: 0.8 !important;
}

.music-player-starred-item.disliked-item .music-player-starred-title {
  color: rgba(239, 68, 68, 0.8) !important;
}

.music-player-starred-item.disliked-item:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

.music-player-starred-item.disliked-item:hover .music-player-starred-title {
  color: #ef4444 !important;
}

body.light .music-player-disliked-section {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light .music-player-starred-header.disliked {
  color: rgba(220, 38, 38, 0.7) !important;
}

body.light .music-player-starred-header.disliked:hover {
  color: #dc2626 !important;
}

body.light .music-player-starred-item.disliked-item .music-player-starred-title {
  color: rgba(220, 38, 38, 0.8) !important;
}

body.light .music-player-starred-item.disliked-item:hover {
  background: rgba(220, 38, 38, 0.08) !important;
}

body.light .music-player-starred-item.disliked-item:hover .music-player-starred-title {
  color: #dc2626 !important;
}

/* Zen theme overrides */
.theme-zen .music-player-btn {
  color: rgba(255, 255, 255, 0.8) !important;
}

.theme-zen .music-player-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.theme-zen .music-player-icon-btn {
  color: rgba(255, 255, 255, 0.9) !important;
}

.theme-zen .music-player-title {
  color: rgba(255, 255, 255, 0.8) !important;
}

.theme-zen .music-player-title:hover {
  color: rgba(255, 255, 255, 1) !important;
}

.theme-zen .music-player-now-playing {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-zen .music-player-now-playing:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.theme-zen .music-player-now-playing.copied {
  background: rgba(168, 85, 247, 0.2) !important;
}

.theme-zen .music-player-now-playing-label {
  color: rgba(255, 255, 255, 0.4) !important;
}

.theme-zen .music-player-now-playing-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

.theme-zen .music-player-playlist-item {
  color: rgba(255, 255, 255, 0.6) !important;
}

.theme-zen .music-player-playlist-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.theme-zen .music-player-playlist-index {
  color: rgba(255, 255, 255, 0.25) !important;
}

.theme-zen .music-player-playlist-items::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}

.theme-zen .music-player-starred-section {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-zen .music-player-starred-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.theme-zen .music-player-now-playing-track {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Light theme additional overrides */
body.light .music-player-now-playing:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

body.light .music-player-now-playing.copied {
  background: rgba(168, 85, 247, 0.1) !important;
}

body.light .music-player-now-playing-label {
  color: rgba(0, 0, 0, 0.4) !important;
}

body.light .music-player-now-playing-title {
  color: rgba(0, 0, 0, 0.85) !important;
}

body.light .music-player-playlist-item {
  color: rgba(0, 0, 0, 0.6) !important;
}

body.light .music-player-playlist-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

body.light .music-player-playlist-index {
  color: rgba(0, 0, 0, 0.25) !important;
}

body.light .music-player-playlist-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}

body.light .music-player-starred-section {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

body.light .music-player-starred-header:hover {
  background: rgba(251, 191, 36, 0.1) !important;
}

body.light .music-player-starred-item:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

body.light .music-player-starred-item.playable:hover {
  background: rgba(251, 191, 36, 0.1) !important;
}

body.light .music-player-starred-play {
  color: rgba(0, 0, 0, 0.25) !important;
}

body.light .music-player-starred-item.playable:hover .music-player-starred-play {
  color: #f59e0b !important;
}

body.light .music-player-starred-title {
  color: rgba(0, 0, 0, 0.7) !important;
}

body.light .music-player-starred-remove {
  color: rgba(0, 0, 0, 0.3) !important;
}

body.light .music-player-now-playing-track {
  color: rgba(0, 0, 0, 0.35) !important;
}

body.light .music-player-starred-copy:hover {
  color: rgba(0, 0, 0, 0.7) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

body.light .music-player-starred-copy.copied {
  color: #16a34a !important;
  background: rgba(34, 197, 94, 0.1) !important;
}

/* Music player playlist selector */
.music-player-playlist-selector {
  padding: 0.5rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
}

.music-player-playlist-selector-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.5rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.7rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.music-player-playlist-selector-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.music-player-playlist-selector-name {
  flex: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.light .music-player-playlist-selector {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

body.light .music-player-playlist-selector-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .music-player-playlist-selector-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.theme-zen .music-player-playlist-selector {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-zen .music-player-playlist-selector-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.theme-zen .music-player-playlist-selector-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Playlist selector dropdown */
.music-player-playlist-selector-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0.5rem !important;
  right: 0.5rem !important;
  background: rgba(30, 30, 35, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  z-index: 10 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  padding: 0.25rem !important;
}

/* Scrollbar for playlist selector dropdown */
.music-player-playlist-selector-dropdown::-webkit-scrollbar {
  width: 4px !important;
}

.music-player-playlist-selector-dropdown::-webkit-scrollbar-track {
  background: transparent !important;
}

.music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 2px !important;
}

.music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

.music-player-playlist-selector-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.5rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0.35rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.7rem !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.music-player-playlist-selector-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.music-player-playlist-selector-item.active {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #a855f7 !important;
}

.music-player-playlist-selector-thumb {
  width: 28px !important;
  height: 28px !important;
  object-fit: cover !important;
  border-radius: 0.35rem !important;
  flex-shrink: 0 !important;
}

/* Larger thumbnails in the dropdown items */
.music-player-playlist-selector-item .music-player-playlist-selector-thumb {
  width: 48px !important;
  height: 36px !important;
  border-radius: 0.25rem !important;
}

/* Placeholder when no thumbnail */
.music-player-playlist-selector-thumb-placeholder {
  width: 48px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.25rem !important;
  flex-shrink: 0 !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

body.light .music-player-playlist-selector-thumb-placeholder {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.35) !important;
}

.music-player-playlist-selector-item-name {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.light .music-player-playlist-selector-dropdown {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

body.light .music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}

body.light .music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

body.light .music-player-playlist-selector-item {
  color: rgba(0, 0, 0, 0.65) !important;
}

body.light .music-player-playlist-selector-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

body.light .music-player-playlist-selector-item.active {
  background: rgba(147, 51, 234, 0.1) !important;
  color: #9333ea !important;
}

.theme-zen .music-player-playlist-selector-dropdown {
  background: rgba(40, 40, 45, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.theme-zen .music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
}

.theme-zen .music-player-playlist-selector-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}
/* Pomodoro Timer - Main Widget */
.pomodoro-timer {
  /* Match panel / navigation hint glass style */
  --widget-bg: rgba(255, 255, 255, 0.06);
  --widget-bg-hover: rgba(255, 255, 255, 0.12);
  --widget-border: rgba(255, 255, 255, 0.08);
  --widget-border-hover: rgba(255, 255, 255, 0.12);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--widget-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--widget-border);
  border-radius: 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.pomodoro-timer:hover,
.pomodoro-timer.pomodoro-expanded {
  background: var(--widget-bg-hover);
  border-color: var(--widget-border-hover);
}

.pomodoro-timer.pomodoro-running {
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 50%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--activity-color, #38bdf8) 30%, transparent);
}

.pomodoro-timer.pomodoro-running::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
      var(--activity-color, #38bdf8) var(--progress, 0%),
      transparent var(--progress, 0%));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 2px;
  pointer-events: none;
  opacity: 0.8;
}

.pomodoro-expanded {
  width: 260px !important;
  height: 3rem !important;
  padding: 0.35rem 0.6rem !important;
  gap: 0.4rem !important;
  overflow: visible !important;
  justify-content: space-between !important;
  /* Dark solid background when expanded - matches standard panels */
  background: rgba(15, 15, 20, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

.pomodoro-daily-total-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}
.pomodoro-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0.4rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.pomodoro-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 1) !important;
  transform: scale(1.1) !important;
}

.pomodoro-btn:active {
  transform: scale(0.95) !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Specialized Buttons */
.pomodoro-time-btn {
  width: auto !important;
  height: auto !important;
  padding: 0.3rem 0.5rem !important;
}

.pomodoro-time-display {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
}

/* Activity Selector & Menu */
.pomodoro-activity-selector {
  position: relative !important;
  z-index: 10 !important;
  overflow: visible !important;
}

.pomodoro-activity-toggle {
  position: relative !important;
  z-index: 2 !important;
}

.pomodoro-activity-toggle-icon {
  font-size: 1.1rem !important;
  line-height: 1 !important;
}

.pomodoro-activity-menu {
  position: absolute !important;
  bottom: calc(100% + 0.5rem) !important;
  right: 0 !important;
  width: 260px !important; /* Slightly wider for the 4-column grid */
  z-index: 1001 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.4rem !important;
  padding: 0.6rem !important;
  background: rgba(30, 30, 35, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pomodoro-activity-menu.show-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.pomodoro-activity-menu-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
  font-size: 1.2rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid transparent !important;
  border-left: 3px solid var(--activity-color, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 0.5rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.pomodoro-activity-menu-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: scale(1.05) !important;
}

.pomodoro-activity-menu-item.active {
  background: color-mix(in srgb, var(--activity-color) 30%, transparent) !important;
  border-color: var(--activity-color) !important;
}

/* Quick Select Popup */
.pomodoro-quick-select {
  background: rgba(20, 20, 25, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  padding: 2rem !important;
  min-width: 650px !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(20px) !important;
}

/* Daily Totals */
.pomodoro-daily-total {
  font-size: 0.65rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  white-space: nowrap !important;
}

/* Light Theme Support */
body.light .pomodoro-timer {
  --widget-bg: rgba(255, 255, 255, 0.65);
  --widget-bg-hover: rgba(255, 255, 255, 0.8);
  --widget-border: rgba(0, 0, 0, 0.1);
  --widget-border-hover: rgba(0, 0, 0, 0.15);
}

body.light .pomodoro-timer.pomodoro-expanded {
  /* Keep dark background even in light theme for contrast over light content */
  background: rgba(15, 15, 20, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}

body.light .pomodoro-timer.pomodoro-expanded .pomodoro-btn {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.light .pomodoro-timer.pomodoro-expanded .pomodoro-btn:hover {
  color: rgba(255, 255, 255, 1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

body.light .pomodoro-timer.pomodoro-expanded .pomodoro-time-display {
  color: #fff !important;
}

body.light .pomodoro-timer.pomodoro-expanded .pomodoro-daily-total {
  color: rgba(255, 255, 255, 0.6) !important;
}

body.light .pomodoro-btn { color: rgba(0, 0, 0, 0.7) !important; }
body.light .pomodoro-btn:hover { background: rgba(0, 0, 0, 0.08) !important; color: rgba(0, 0, 0, 0.9) !important; }
body.light .pomodoro-time-display { color: #111827 !important; }
body.light .pomodoro-activity-menu { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.1) !important; }
body.light .pomodoro-activity-menu-item { background: rgba(0, 0, 0, 0.04) !important; }

/* Zen Theme Support */
.theme-zen .pomodoro-timer {
  --widget-bg: rgba(255, 255, 255, 0.12);
  --widget-bg-hover: rgba(255, 255, 255, 0.18);
  --widget-border: rgba(255, 255, 255, 0.15);
  --widget-border-hover: rgba(255, 255, 255, 0.2);
}

.theme-zen .pomodoro-timer.pomodoro-expanded {
  background: rgba(15, 15, 20, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

.theme-zen .pomodoro-activity-menu { background: rgba(40, 40, 45, 0.95) !important; border-color: rgba(255, 255, 255, 0.15) !important; }

/* ============================================
   MISSING STYLES RESTORED FROM ORIGINAL CSS
   ============================================ */

/* Icon Button (collapsed state) */
.pomodoro-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
}

.pomodoro-icon-btn:active {
  transform: scale(0.95);
}

/* Mini time display (collapsed running state) */
.pomodoro-mini-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pomodoro-mini-activity {
  font-size: 0.85rem;
}

body.light .pomodoro-mini-time {
  color: rgba(0, 0, 0, 0.85);
  text-shadow: none;
}

.theme-zen .pomodoro-mini-time {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.light .pomodoro-icon-btn {
  color: rgba(0, 0, 0, 0.7);
}

.theme-zen .pomodoro-btn,
.theme-zen .pomodoro-icon-btn {
  color: rgba(255, 255, 255, 0.8);
}

.theme-zen .pomodoro-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
}

/* Presets menu */
.pomodoro-presets {
  display: flex;
  gap: 0.2rem;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

.pomodoro-preset-btn {
  padding: 0.3rem 0.45rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 600;
  color: #fff !important;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.pomodoro-preset-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1);
}

.pomodoro-preset-btn.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  color: rgb(56, 189, 248);
}

body.light .pomodoro-preset-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

body.light .pomodoro-preset-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.9);
}

.theme-zen .pomodoro-preset-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

/* Progress ring */
.pomodoro-progress-ring {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}

.pomodoro-progress-bg {
  display: none;
}

.pomodoro-progress-bar {
  display: none;
}

body.light .pomodoro-progress-bg {
  stroke: rgba(0, 0, 0, 0.1);
}

/* Progress ring */

.pomodoro-daily-total-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  min-width: 140px;
  padding: 0.5rem;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: all 0.15s ease;
  z-index: 1002;
}

.pomodoro-daily-total-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 1rem;
  border: 5px solid transparent;
  border-top-color: rgba(30, 30, 35, 0.95);
}

.pomodoro-daily-total-wrapper:hover .pomodoro-daily-total-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pomodoro-tooltip-header {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pomodoro-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
}

.pomodoro-tooltip-icon {
  font-size: 0.85rem;
}

.pomodoro-tooltip-label {
  flex: 1;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
}

.pomodoro-tooltip-time {
  font-size: 0.65rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.pomodoro-tooltip-empty {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

body.light .pomodoro-daily-total {
  color: rgba(0, 0, 0, 0.6);
}

body.light .pomodoro-daily-total-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light .pomodoro-daily-total-tooltip::after {
  border-top-color: rgba(255, 255, 255, 0.95);
}

body.light .pomodoro-tooltip-header {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .pomodoro-tooltip-label {
  color: rgba(0, 0, 0, 0.8);
}

body.light .pomodoro-tooltip-time {
  color: rgba(0, 0, 0, 0.6);
}

body.light .pomodoro-tooltip-empty {
  color: rgba(0, 0, 0, 0.4);
}

.theme-zen .pomodoro-daily-total {
  color: rgba(255, 255, 255, 0.7);
}

.theme-zen .pomodoro-daily-total-tooltip {
  background: rgba(40, 40, 45, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Reset options buttons */
.pomodoro-reset-options {
  display: flex;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

.pomodoro-reset-option-btn {
  padding: 0.4rem 0.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: #fff;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.pomodoro-reset-option-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.15) 100%);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}

.pomodoro-reset-option-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Log & Reset - Green */
.pomodoro-reset-option-btn.pomodoro-log-reset {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  border-color: rgba(34, 197, 94, 0.6);
  color: #052e16;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.pomodoro-reset-option-btn.pomodoro-log-reset:hover {
  background: linear-gradient(180deg, #86efac 0%, #4ade80 100%);
  border-color: rgba(74, 222, 128, 0.8);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

/* Reset Day - Orange */
.pomodoro-reset-option-btn.pomodoro-reset-daily {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  border-color: rgba(234, 88, 12, 0.6);
  color: #431407;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.pomodoro-reset-option-btn.pomodoro-reset-daily:hover {
  background: linear-gradient(180deg, #fdba74 0%, #fb923c 100%);
  border-color: rgba(251, 146, 60, 0.8);
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.5), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

body.light .pomodoro-reset-option-btn {
  background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
  border-color: rgba(0, 0, 0, 0.15);
  color: #334155;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

body.light .pomodoro-reset-option-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #fff 100%);
  border-color: rgba(0, 0, 0, 0.2);
  color: #1e293b;
}

body.light .pomodoro-reset-option-btn.pomodoro-log-reset {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  border-color: rgba(22, 163, 74, 0.5);
  color: #052e16;
}

body.light .pomodoro-reset-option-btn.pomodoro-reset-daily {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  border-color: rgba(194, 65, 12, 0.5);
  color: #431407;
}

/* Activity menu tooltip */
.pomodoro-activity-menu-icon {
  transition: transform 0.15s ease;
}

.pomodoro-activity-menu-tooltip {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.3rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.85);
  border-radius: 0.35rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.15s ease;
  z-index: 10;
}

.pomodoro-activity-menu-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
}

.pomodoro-activity-menu-item:hover .pomodoro-activity-menu-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.pomodoro-activity-menu-item:hover .pomodoro-activity-menu-icon {
  transform: scale(1.1);
}

body.light .pomodoro-activity-menu-tooltip {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(30, 30, 35, 0.9);
}

body.light .pomodoro-activity-menu-tooltip::after {
  border-top-color: rgba(30, 30, 35, 0.9);
}

/* Quick Select Overlay */
.pomodoro-quick-select-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.15s ease;
  overflow: hidden;
}

body.pomodoro-popup-open {
  overflow: hidden;
}

body.pomodoro-popup-open .focus-mode-panel-content {
  overflow: hidden;
}

body.light .pomodoro-quick-select {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}

.pomodoro-quick-select-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.light .pomodoro-quick-select-header {
  color: rgba(0, 0, 0, 0.45);
}

.pomodoro-quick-status {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.pomodoro-quick-status.running {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.pomodoro-quick-status.paused {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
}

.pomodoro-section-label {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 0.75rem;
}

body.light .pomodoro-section-label {
  color: rgba(0, 0, 0, 0.3);
}

.pomodoro-quick-select-options {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.pomodoro-quick-option {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(15, 15, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pomodoro-quick-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: scale(1.03);
}

.pomodoro-quick-option.active {
  background: color-mix(in srgb, var(--activity-color, #38bdf8) 15%, transparent);
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 40%, transparent);
}

.pomodoro-quick-option.highlighted {
  background: color-mix(in srgb, var(--activity-color, #38bdf8) 12%, transparent);
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 30%, transparent);
  transform: scale(1.03);
}

.pomodoro-quick-option.playing,
.pomodoro-activity-btn.playing {
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 60%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--activity-color, #38bdf8) 30%, transparent);
}

.pomodoro-playing-indicator {
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  font-size: 0.6rem;
  color: var(--activity-color, #38bdf8);
  animation: pulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px var(--activity-color, #38bdf8));
}

.pomodoro-activity-btn .pomodoro-playing-indicator {
  bottom: auto;
  top: 0.35rem;
  right: auto;
  left: 0.35rem;
}

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

body.light .pomodoro-quick-option {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .pomodoro-quick-option:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
}

body.light .pomodoro-quick-option.active {
  background: color-mix(in srgb, var(--activity-color, #38bdf8) 10%, transparent);
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 25%, transparent);
}

body.light .pomodoro-quick-option.highlighted {
  background: color-mix(in srgb, var(--activity-color, #38bdf8) 10%, transparent);
  border-color: color-mix(in srgb, var(--activity-color, #38bdf8) 25%, transparent);
}

.pomodoro-quick-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.02em;
}

body.light .pomodoro-quick-key {
  color: rgba(0, 0, 0, 0.35);
}

.pomodoro-quick-label {
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff !important;
  letter-spacing: -0.02em;
}

body.light .pomodoro-quick-label {
  color: rgba(0, 0, 0, 0.8);
}

/* Activity Categories in Quick Select */
.pomodoro-quick-activities {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.pomodoro-activity-btn {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  background: rgba(15, 15, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--activity-color, rgba(255, 255, 255, 0.15));
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
}

.pomodoro-activity-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: scale(1.03);
}

.pomodoro-activity-btn.active {
  background: color-mix(in srgb, var(--activity-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--activity-color) 35%, transparent);
}

.pomodoro-activity-btn.highlighted {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.pomodoro-activity-btn.active.highlighted {
  background: color-mix(in srgb, var(--activity-color) 18%, transparent);
  border-color: color-mix(in srgb, var(--activity-color) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--activity-color) 20%, transparent);
}

body.light .pomodoro-activity-btn.highlighted {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.pomodoro-activity-key {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.02em;
}

.pomodoro-activity-btn.active .pomodoro-activity-key {
  color: var(--activity-color);
}

body.light .pomodoro-activity-key {
  color: rgba(0, 0, 0, 0.3);
}

body.light .pomodoro-activity-btn.active .pomodoro-activity-key {
  color: var(--activity-color);
}

.pomodoro-activity-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.pomodoro-activity-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: -0.01em;
}

.pomodoro-activity-btn.active .pomodoro-activity-label {
  color: var(--activity-color);
}

.pomodoro-activity-time {
  font-size: 0.55rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'JetBrains Mono', monospace;
}

.pomodoro-activity-btn.active .pomodoro-activity-time {
  color: color-mix(in srgb, var(--activity-color) 70%, white);
}

body.light .pomodoro-activity-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}

body.light .pomodoro-activity-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .pomodoro-activity-label {
  color: rgba(0, 0, 0, 0.7);
}

body.light .pomodoro-activity-time {
  color: rgba(0, 0, 0, 0.4);
}

.pomodoro-quick-select-hint {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 1.5rem;
}

.pomodoro-quick-select-hint kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0.1rem;
}

body.light .pomodoro-quick-select-hint {
  color: rgba(0, 0, 0, 0.35);
}

body.light .pomodoro-quick-select-hint kbd {
  color: rgba(0, 0, 0, 0.4);
}

/* Focus mode indicator */
.pomodoro-focus-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 3rem;
  height: 3rem;
  pointer-events: auto;
  z-index: 1001;
  color: rgba(255, 255, 255, 0.35);
}

body.light .pomodoro-focus-indicator {
  color: rgba(0, 0, 0, 0.25);
}

.theme-zen .pomodoro-focus-indicator {
  color: rgba(255, 255, 255, 0.3);
}

/* Container states */
.pomodoro-container.pomodoro-focus-idle {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.pomodoro-container.pomodoro-focus-idle .pomodoro-timer {
  width: 3rem;
  height: 3rem;
  padding: 0;
}

.pomodoro-container.pomodoro-focus-idle .pomodoro-timer.pomodoro-expanded {
  width: 3rem;
  height: 3rem;
  padding: 0;
}

/* Completion Overlay */
.pomodoro-completion-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000 !important;
  pointer-events: auto !important;
  cursor: pointer;
  animation: overlayFadeIn 0.5s ease forwards;
}

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

.pomodoro-completion-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  animation: contentSlideUp 0.6s ease 0.2s forwards;
  opacity: 0;
}

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

.pomodoro-completion-icon {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pomodoro-completion-circle {
  position: absolute;
  width: 100%;
  height: 100%;
}

.pomodoro-completion-circle circle {
  stroke: rgba(56, 189, 248, 0.3);
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  animation: circleReveal 1s ease 0.4s forwards;
}

@keyframes circleReveal {
  to { stroke-dashoffset: 0; }
}

.pomodoro-completion-check {
  font-size: 3rem;
  color: rgb(56, 189, 248);
  opacity: 0;
  animation: checkFadeIn 0.4s ease 0.8s forwards;
}

@keyframes checkFadeIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.pomodoro-completion-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.pomodoro-completion-title {
  font-size: 1.75rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pomodoro-completion-duration {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
}

.pomodoro-completion-total {
  font-size: 0.875rem;
  color: rgb(56, 189, 248);
  font-family: 'JetBrains Mono', monospace;
  padding: 0.5rem 1rem;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 2rem;
  margin-top: 0.5rem;
}

.pomodoro-completion-dismiss {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
  animation: pulseFade 2s ease infinite;
}

@keyframes pulseFade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

body.light .pomodoro-completion-overlay {
  background: rgba(255, 255, 255, 0.9);
}

body.light .pomodoro-completion-title {
  color: rgba(0, 0, 0, 0.85);
}

body.light .pomodoro-completion-duration {
  color: rgba(0, 0, 0, 0.5);
}

body.light .pomodoro-completion-dismiss {
  color: rgba(0, 0, 0, 0.3);
}

/* Confirmation Modal */
.pomodoro-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: confirmOverlayFadeIn 0.2s ease-out;
}

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

.pomodoro-confirm-modal {
  background: linear-gradient(145deg, rgba(30, 30, 35, 0.98), rgba(20, 20, 25, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  padding: 2rem 2.5rem;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  animation: confirmModalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.pomodoro-confirm-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pomodoro-confirm-icon.reset {
  color: rgba(148, 163, 184, 0.9);
}

.pomodoro-confirm-icon.resetDay {
  color: rgba(251, 146, 60, 0.9);
}

.pomodoro-confirm-content {
  margin-bottom: 1.75rem;
}

.pomodoro-confirm-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.pomodoro-confirm-message {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.35rem;
  line-height: 1.5;
}

.pomodoro-confirm-subtitle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  font-style: italic;
}

.pomodoro-confirm-actions {
  display: flex;
  gap: 0.75rem;
}

.pomodoro-confirm-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pomodoro-confirm-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pomodoro-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.pomodoro-confirm-proceed {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(252, 165, 165, 0.95);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.pomodoro-confirm-proceed:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
}

.pomodoro-confirm-proceed.resetDay {
  background: rgba(251, 146, 60, 0.15);
  color: rgba(253, 186, 116, 0.95);
  border-color: rgba(251, 146, 60, 0.25);
}

.pomodoro-confirm-proceed.resetDay:hover {
  background: rgba(251, 146, 60, 0.25);
  border-color: rgba(251, 146, 60, 0.4);
}

body.light .pomodoro-confirm-modal {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
}

body.light .pomodoro-confirm-icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .pomodoro-confirm-icon.reset {
  color: rgba(71, 85, 105, 0.9);
}

body.light .pomodoro-confirm-icon.resetDay {
  color: rgba(234, 88, 12, 0.9);
}

body.light .pomodoro-confirm-title {
  color: rgba(0, 0, 0, 0.9);
}

body.light .pomodoro-confirm-message {
  color: rgba(0, 0, 0, 0.65);
}

body.light .pomodoro-confirm-subtitle {
  color: rgba(0, 0, 0, 0.45);
}

body.light .pomodoro-confirm-cancel {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.65);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .pomodoro-confirm-cancel:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.85);
}

body.light .pomodoro-confirm-proceed {
  background: rgba(239, 68, 68, 0.1);
  color: rgba(185, 28, 28, 0.9);
  border-color: rgba(239, 68, 68, 0.2);
}

body.light .pomodoro-confirm-proceed:hover {
  background: rgba(239, 68, 68, 0.18);
}

body.light .pomodoro-confirm-proceed.resetDay {
  background: rgba(234, 88, 12, 0.1);
  color: rgba(194, 65, 12, 0.9);
  border-color: rgba(234, 88, 12, 0.2);
}

body.light .pomodoro-confirm-proceed.resetDay:hover {
  background: rgba(234, 88, 12, 0.18);
}
/* ─── Context Menu ─── */

.ctx-menu {
  position: fixed;
  z-index: 99999;
  min-width: 170px;
  max-width: 280px;
  padding: 4px 0;
  background: rgba(20, 20, 25, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.9);
  overflow: visible;
}

.ctx-menu-content {
  max-height: var(--ctx-menu-max-height, calc(100vh - 16px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

@keyframes ctx-menu-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ctx-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ctx-menu-item.disabled {
  opacity: 0.42;
  pointer-events: none;
}

.ctx-menu-item.suggestion {
  font-weight: 500;
  color: #38bdf8;
}

.ctx-menu-item.correct {
  color: #4ade80;
  pointer-events: none;
}

.ctx-menu-item.vocab {
  color: var(--accent);
}

.ctx-menu-item.ai-action {
  color: var(--accent);
}

.ctx-menu-item.standard {
  color: rgba(255, 255, 255, 0.6);
}

.ctx-menu-item .item-icon {
  width: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  text-align: center;
}

.ctx-menu-item .item-shortcut {
  margin-left: auto;
  padding-left: 24px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
}

.ctx-menu-item .item-chevron {
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
}

.ctx-menu-divider {
  height: 1px;
  margin: 4px 8px;
  background: rgba(255, 255, 255, 0.08);
}

.ctx-menu-label {
  padding: 3px 12px 2px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none;
}

.ctx-menu-loading {
  padding: 7px 12px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.ctx-submenu {
  position: absolute;
  min-width: 232px;
  max-height: min(72vh, 520px);
  overflow-y: auto;
  padding: 6px 0;
  border-radius: 10px;
  background: rgba(20, 20, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  z-index: 3;
}

.ctx-submenu.right {
  left: calc(100% + 8px);
}

.ctx-submenu.left {
  right: calc(100% + 8px);
}

.ctx-submenu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.ctx-submenu-item .item-shortcut {
  margin-left: auto;
  padding-left: 18px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.ctx-submenu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ctx-submenu-item .checkmark {
  width: 14px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.ctx-submenu-item.active {
  color: rgba(255, 255, 255, 0.96);
}

.ctx-submenu-divider {
  height: 1px;
  margin: 5px 12px;
  background: rgba(255, 255, 255, 0.12);
}

/* Editor surface menu (empty space + selection): Obsidian-like visual treatment */
.ctx-menu.ctx-menu-editor {
  min-width: 240px;
  max-width: 280px;
  padding: 6px 0;
  border-radius: 10px;
}

.ctx-menu.ctx-menu-editor .ctx-menu-item {
  padding: 4px 18px;
  font-size: 13.5px;
  line-height: 1.3;
  color: inherit;
  gap: 0;
}

.ctx-menu.ctx-menu-editor .ctx-menu-item.standard {
  color: inherit;
}

.ctx-menu.ctx-menu-editor .ctx-menu-item.disabled {
  color: inherit;
  opacity: 0.38;
}

.ctx-menu.ctx-menu-editor .ctx-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ctx-menu.ctx-menu-editor .ctx-menu-divider {
  margin: 5px 18px;
}

.ctx-menu.ctx-menu-editor .ctx-menu-label {
  padding-left: 18px;
  padding-right: 18px;
}

/* ─── AI Result Dialog ─── */

.ai-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ai-overlay-in 0.15s ease-out;
}

@keyframes ai-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ai-result-dialog {
  width: 90%;
  max-width: 520px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 25, 0.92);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  animation: ai-dialog-in 0.2s ease-out;
  overflow: hidden;
}

@keyframes ai-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Thinking state */
.ai-result-thinking {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.ai-result-thinking .spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ctx-spin 0.6s linear infinite;
  flex-shrink: 0;
}

@keyframes ctx-spin {
  to { transform: rotate(360deg); }
}

/* Error */
.ai-result-error {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: rgba(255, 100, 100, 0.8);
}

/* Result content */
.ai-result-content {
  padding: 24px;
  line-height: 1.7;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  flex: 1;
  min-height: 0;
}

/* Action buttons */
.ai-result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-result-btn {
  padding: 7px 16px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.ai-result-btn:hover {
  opacity: 0.85;
}

.ai-result-btn.discard {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

.ai-result-btn.accept {
  background: var(--accent);
  color: #fff;
}

.ai-result-shortcut {
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.6;
}

/* ─── Light Theme ─── */

body.light .ctx-menu {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  color: rgba(20, 20, 30, 0.9);
}

body.light .ctx-menu-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

body.light .ctx-menu-item.submenu.active {
  background: rgba(0, 0, 0, 0.06);
}

body.light .ctx-menu-item.standard {
  color: rgba(20, 20, 30, 0.6);
}

body.light .ctx-menu-item .item-shortcut {
  color: rgba(20, 20, 30, 0.25);
}

body.light .ctx-menu-item .item-chevron {
  color: rgba(20, 20, 30, 0.72);
}

body.light .ctx-menu-divider {
  background: rgba(0, 0, 0, 0.08);
}

body.light .ctx-menu.ctx-menu-editor .ctx-menu-item {
  color: inherit;
}

body.light .ctx-menu.ctx-menu-editor .ctx-menu-item.standard {
  color: inherit;
}

body.light .ctx-menu.ctx-menu-editor .ctx-menu-item.disabled {
  color: inherit;
  opacity: 0.4;
}

body.light .ctx-menu.ctx-menu-editor .ctx-menu-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

body.light .ctx-menu.ctx-menu-editor .ctx-menu-divider {
  background: rgba(0, 0, 0, 0.12);
}

body.light .ctx-menu-label {
  color: rgba(20, 20, 30, 0.4);
}

body.light .ctx-menu-loading {
  color: rgba(20, 20, 30, 0.4);
}

body.light .ctx-submenu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
}

body.light .ctx-submenu-item {
  color: rgba(20, 20, 30, 0.9);
}

body.light .ctx-submenu-item .item-shortcut {
  color: rgba(20, 20, 30, 0.5);
}

body.light .ctx-submenu-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

body.light .ctx-submenu-item .checkmark {
  color: rgba(20, 20, 30, 0.9);
}

body.light .ctx-submenu-divider {
  background: rgba(0, 0, 0, 0.12);
}

body.light .ai-result-overlay {
  background: rgba(0, 0, 0, 0.2);
}

body.light .ai-result-dialog {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2);
  color: rgba(20, 20, 30, 0.9);
}

body.light .ai-result-thinking {
  color: rgba(20, 20, 30, 0.5);
}

body.light .ai-result-actions {
  border-top-color: rgba(0, 0, 0, 0.08);
}

body.light .ai-result-btn.discard {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.6);
}
/* ============================================
   Focus Mode Overlay - Unified overlay for all focus modes
   ============================================ */

.focus-mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  /* Below pomodoro completion (10000) but above everything else */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
  /* Full background - covers the page completely */
  background: #0a0a0a;
}

body.light .focus-mode-overlay {
  background: #f5f5f5;
}

body.zen .focus-mode-overlay {
  /* Use the same wallpaper as the main app */
  background: linear-gradient(135deg, #F5F1E8 0%, #E8E3D8 100%);
  background-image:
    var(--app-bg-image),
    radial-gradient(circle at 20% 50%, rgba(139, 195, 74, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(76, 175, 80, 0.08) 0%, transparent 50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@keyframes panelSlideIn {
  from {
    opacity: 0.5;
    transform: scale(0.99);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.focus-mode-panel {
  width: 100%;
  max-width: 1100px;
  animation: panelSlideIn 0.15s ease-out;
  height: 88vh;
  /* Fixed height for consistency */
  margin: 0 auto;
  padding: 1.5rem 2rem;
  background: rgba(15, 15, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: auto;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

body.light .focus-mode-panel {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}

body.zen .focus-mode-panel {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.focus-mode-panel.ai-panel-open {
  max-width: 700px;
  margin-right: 430px;
}

.focus-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.focus-empty-state h2 {
  margin: 1rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.focus-empty-state p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
}

body.light .focus-empty-state {
  color: rgba(0, 0, 0, 0.4);
}

body.light .focus-empty-state h2 {
  color: rgba(0, 0, 0, 0.6);
}

body.light .focus-empty-state p {
  color: rgba(0, 0, 0, 0.4);
}

body.light .focus-mode-panel-title-row h3 {
  color: rgba(0, 0, 0, 0.7);
}

body.light .focus-mode-panel-content {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.focus-mode-panel-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  transition: opacity 0.3s ease;
}

.focus-mode-panel-header.faded {
  opacity: 0;
  pointer-events: none;
}

/* Fade out entire panel background while typing */
.focus-mode-panel.header-hidden {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Focus mode editor - rounded corners */
.focus-mode-panel .editable-markdown-editor-wrapper {
  border-radius: 16px;
  position: relative;
  border: none !important;
  outline: none;
}

/* Gradient at bottom removed for seamless editor look */
.focus-mode-panel .editable-markdown-editor-wrapper::after {
  display: none;
}

/* Make editor background more solid when panel fades away */
.focus-mode-panel.header-hidden .editable-markdown-editor-wrapper {
  background: rgba(15, 15, 20, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
}

body.light .focus-mode-panel.header-hidden .editable-markdown-editor-wrapper {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

body.zen .focus-mode-panel.header-hidden .editable-markdown-editor-wrapper {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Hide cursor after inactivity in focus mode */
body.cursor-hidden,
body.cursor-hidden * {
  cursor: none !important;
}

.focus-mode-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.focus-mode-panel-title-row h3 {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  opacity: 0.7;
  color: rgba(255, 255, 255, 0.95);
}

.focus-mode-panel-title-row h3.clickable {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.focus-mode-panel-title-row h3.clickable:hover {
  opacity: 1;
}

.focus-mode-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Show actions on hover of header area */
.focus-mode-panel-header:hover .focus-mode-panel-actions,
.focus-mode-panel-actions:hover {
  opacity: 1;
  pointer-events: auto;
}

/* Hide actions when editing */
.focus-mode-panel.is-editing .focus-mode-panel-actions {
  display: none !important;
}

.focus-mode-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* Allow shrinking in flexbox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  will-change: transform, opacity;
}

.focus-mode-panel-content::-webkit-scrollbar {
  width: 6px;
}

.focus-mode-panel-content::-webkit-scrollbar-track {
  background: transparent;
}

.focus-mode-panel-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

body.light .focus-mode-panel-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

/* Content transitions - subtle directional slide + fade */

/* Horizontal: Moving left through pages (pressing right arrow) */
.focus-content-slide-left {
  animation: contentSlideLeft 0.2s ease-out;
}

/* Horizontal: Moving right through pages (pressing left arrow) */
.focus-content-slide-right {
  animation: contentSlideRight 0.2s ease-out;
}

/* Vertical: Moving up through entries (pressing down arrow) */
.focus-content-slide-up {
  animation: contentSlideUp 0.15s ease-out;
}

/* Vertical: Moving down through entries (pressing up arrow) */
.focus-content-slide-down {
  animation: contentSlideDown 0.15s ease-out;
}

/* Bounce animation for scroll limits */
.focus-content-bounce {
  animation: contentBounce 0.3s ease-out;
}

@keyframes contentSlideLeft {
  0% {
    opacity: 0.4;
    transform: translateX(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes contentSlideRight {
  0% {
    opacity: 0.4;
    transform: translateX(-12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes contentSlideUp {
  0% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes contentSlideDown {
  0% {
    opacity: 0.5;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes contentBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* ============================================
   Focus Overlay UI - Clock, Hints, Indicators
   ============================================ */

/* Focus overlay UI container - hidden by default, no layout impact */
/* Container is always pointer-events: none, children handle their own */
.focus-overlay-ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1000;
}

.focus-overlay-ui .focus-clock,
.focus-overlay-ui .focus-journal-indicator {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.focus-overlay-ui.visible .focus-clock,
.focus-overlay-ui.visible .focus-journal-indicator {
  opacity: 1;
}

/* Focus Clock - positioned top right */
.focus-clock {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.focus-clock.time-display-wrapper {
  pointer-events: auto;
  cursor: default;
}

body.light .focus-clock {
  color: rgba(0, 0, 0, 0.4);
}

.focus-clock-time {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.focus-clock-date {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Timezone tooltip */
.timezone-tooltip {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: rgba(20, 20, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.75rem;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.focus-clock:hover .timezone-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

body.light .timezone-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.timezone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  gap: 1rem;
  font-size: 0.75rem;
}

.timezone-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.light .timezone-row:not(:last-child) {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.timezone-label {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

body.light .timezone-label {
  color: rgba(0, 0, 0, 0.5);
}

.timezone-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.timezone-day {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
}

body.light .timezone-day {
  color: rgba(0, 0, 0, 0.4);
}

.timezone-time {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

body.light .timezone-time {
  color: rgba(0, 0, 0, 0.8);
}

/* ============================================
   Focus Shortcuts - Help button and tooltip
   ============================================ */

.focus-shortcuts-wrapper {
  position: fixed;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  pointer-events: auto !important;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.focus-shortcuts-wrapper:hover {
  opacity: 1;
}

.focus-shortcuts-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(8px);
}

.focus-shortcuts-btn:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  transform: scale(1.05);
}

body.light .focus-shortcuts-btn {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}

body.light .focus-shortcuts-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  color: rgba(0, 0, 0, 0.6);
}

/* Shortcuts tooltip - shows on hover */
.focus-shortcuts-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  background: rgba(20, 20, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  min-width: 280px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.focus-shortcuts-wrapper:hover .focus-shortcuts-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

body.light .focus-shortcuts-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.focus-shortcuts-tooltip .shortcuts-section {
  margin-bottom: 0.75rem;
}

.focus-shortcuts-tooltip .shortcuts-section:last-child {
  margin-bottom: 0;
}

.focus-shortcuts-tooltip .shortcuts-section h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.light .focus-shortcuts-tooltip .shortcuts-section h4 {
  color: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.08);
}

.focus-shortcuts-tooltip .shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  gap: 1rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

body.light .focus-shortcuts-tooltip .shortcut-row {
  color: rgba(0, 0, 0, 0.6);
}

.focus-shortcuts-tooltip .shortcut-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
}

body.light .focus-shortcuts-tooltip .shortcut-key {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.08);
}

/* ============================================
   Focus Journal Indicator - Bottom center
   ============================================ */

.focus-journal-indicator {
  position: fixed;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 0.8rem;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.8);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.3s ease;
  pointer-events: none;
}

.focus-journal-indicator.ai-panel-open {
  transform: translateX(calc(-50% - 210px));
}

.focus-journal-current {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.focus-journal-mode {
  opacity: 0.6;
}

.focus-journal-separator {
  opacity: 0.4;
  font-size: 0.5rem;
}

.focus-journal-section {
  opacity: 1;
  font-weight: 500;
}

body.light .focus-journal-indicator {
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   Focus Navigation Guide - Tile Grid (Top Left)
   ============================================ */

.focus-nav-guide {
  position: fixed;
  top: 3rem;
  /* Lowered to avoid Mac window traffic light buttons */
  left: 1.5rem;
  z-index: 600;
  /* Above focus-mode-overlay (500) */
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.focus-nav-guide.visible {
  opacity: 0.7;
  pointer-events: auto;
}

.focus-nav-guide.visible:hover {
  opacity: 1;
}

.focus-nav-guide.hidden {
  opacity: 0;
  pointer-events: none;
}

.focus-nav-grid {
  display: flex;
  gap: 10px;
  position: relative;
}

.focus-nav-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.focus-nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
  padding: 0;
}

.focus-nav-dot.clickable {
  cursor: pointer;
  position: relative;
  outline: none;
}

.focus-nav-dot.clickable:focus {
  outline: none;
}

.focus-nav-dot.clickable:hover {
  transform: scale(1.3);
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

.focus-nav-dot.clickable:active {
  transform: scale(1.1);
}

.focus-nav-dot.current-mode {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.25);
}

.focus-nav-dot.active {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.focus-nav-dot.active.clickable:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
}

/* Drag and drop styles for mind journal dots */
.focus-nav-column.dragging .focus-nav-dot {
  cursor: grabbing;
}

.focus-nav-dot.dragging {
  opacity: 0.5;
  transform: scale(0.9);
}

.focus-nav-dot.drag-over {
  transform: scale(1.4);
  background: rgba(var(--accent-rgb), 0.6);
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
}

.focus-nav-dot[draggable="true"] {
  cursor: grab;
}

.focus-nav-dot[draggable="true"]:active {
  cursor: grabbing;
}

.focus-nav-more {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  font-weight: 500;
}

/* Light theme adjustments */
body.light .focus-nav-dot {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .focus-nav-dot.clickable:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

body.light .focus-nav-dot.current-mode {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(0, 0, 0, 0.2);
}

body.light .focus-nav-dot.active {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

body.light .focus-nav-dot.active.clickable:hover {
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.35);
}

body.light .focus-nav-more {
  color: rgba(0, 0, 0, 0.5);
}

/* Nav guide tooltip - single unified tooltip */
.focus-nav-tooltip {
  position: absolute;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  background: #111;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.focus-nav-tooltip.visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

body.light .focus-nav-tooltip {
  background: #fff;
  color: #111;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Focus Page Hint - Subtle indicator
   ============================================ */

.focus-page-hint {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.focus-page-hint.visible {
  opacity: 1;
}

.focus-page-hint.hidden {
  opacity: 0;
}

.focus-page-hint-label {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75rem;
  font-weight: 450;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

body.light .focus-page-hint-label {
  color: rgba(0, 0, 0, 0.4);
}

body.zen .focus-page-hint-label {
  color: rgba(90, 110, 70, 0.55);
}

/* ============================================
   Flush Message - Save confirmation
   ============================================ */

.flush-message {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  animation: flushFadeIn 0.2s ease;
}

.flush-message.success {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

.flush-message.error {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

@keyframes flushFadeIn {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   Tree Controls in Focus Mode
   ============================================ */

.focus-mode-panel .tree-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.focus-mode-panel .tree-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.focus-mode-panel .tree-control-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.focus-mode-panel .tree-control-btn.ai-context-btn {
  width: auto;
  padding: 0 0.5rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}

.focus-mode-panel .tree-control-btn.ai-context-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-light);
}

.focus-mode-panel .tree-control-btn .ai-btn-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.focus-mode-panel .tree-control-btn.copy-btn.success {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

body.light .focus-mode-panel .tree-control-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

body.light .focus-mode-panel .tree-control-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.9);
}

body.light .focus-mode-panel .tree-control-btn.ai-context-btn {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}

body.light .focus-mode-panel .tree-control-btn.ai-context-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
}

/* ============================================
   Todo Area Groups - Grouped Next items by area
   ============================================ */

.todo-area-group {
  margin-bottom: 1rem;
}

.todo-area-group:last-child {
  margin-bottom: 0;
}

.todo-area-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.todo-area-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--accent-rgb), 0.9);
}

body.light .todo-area-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .todo-area-label {
  color: rgba(var(--accent-rgb), 0.9);
}

/* ============================================
   Zen Navigation - Generalized Focus Mode for Vault Browsing
   Follows FocusModeOverlay styling patterns
   ============================================ */

.zen-navigation {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
  /* Always show wallpaper background */
  background-color: #0a0a0a;
  background-image:
    var(--app-bg-image),
    radial-gradient(circle at 20% 50%, rgba(139, 195, 74, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(76, 175, 80, 0.06) 0%, transparent 50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: zenFadeIn 0.2s ease-out;
}

.zen-navigation.light {
  background-color: #f5f5f5;
}

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

/* ============================================
   Panel - Main container (matches focus-mode-panel)
   ============================================ */

.zen-panel {
  width: 100%;
  max-width: 1100px;
  height: 88vh;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  background: rgba(15, 15, 20, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: panelSlideIn 0.15s ease-out;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.zen-navigation.light .zen-panel {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}

@keyframes panelSlideIn {
  from {
    opacity: 0.5;
    transform: scale(0.99);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Header hidden state - panel stays readable while reading */
.zen-panel.header-hidden {
  background: rgba(15, 15, 20, 0.88);
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Panel Header
   ============================================ */

.zen-panel-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: opacity 0.3s ease;
}

.zen-panel-header.faded {
  opacity: 0;
  pointer-events: none;
}

.zen-navigation.light .zen-panel-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.zen-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.zen-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============================================
   Quick Access Bar - Recent roots
   ============================================ */

.zen-quick-access {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  overflow-x: auto;
}

.zen-navigation.light .zen-quick-access {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

.zen-quick-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.zen-quick-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.zen-quick-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
}

.zen-navigation.light .zen-quick-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.6);
}

.zen-navigation.light .zen-quick-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.9);
}

.zen-navigation.light .zen-quick-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
}

/* ============================================
   Breadcrumbs
   ============================================ */

.zen-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  flex: 1;
}

.zen-breadcrumb {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.zen-breadcrumb:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.zen-breadcrumb.active {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.zen-breadcrumb:disabled {
  cursor: default;
}

.zen-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.25);
}

.zen-navigation.light .zen-breadcrumb {
  color: rgba(0, 0, 0, 0.5);
}

.zen-navigation.light .zen-breadcrumb:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

.zen-navigation.light .zen-breadcrumb.active {
  color: rgba(0, 0, 0, 0.9);
}

.zen-navigation.light .zen-breadcrumb-sep {
  color: rgba(0, 0, 0, 0.25);
}

/* ============================================
   Close Button
   ============================================ */

.zen-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.zen-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

.zen-navigation.light .zen-close-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

.zen-navigation.light .zen-close-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

/* ============================================
   Panel Content
   ============================================ */

.zen-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ============================================
   Empty State
   ============================================ */

.zen-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  gap: 0.5rem;
}

.zen-empty-state h2 {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.zen-empty-state p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
}

.zen-empty-state.zen-error {
  color: rgba(255, 100, 100, 0.8);
}

.zen-navigation.light .zen-empty-state {
  color: rgba(0, 0, 0, 0.4);
}

.zen-navigation.light .zen-empty-state h2 {
  color: rgba(0, 0, 0, 0.6);
}

.zen-navigation.light .zen-empty-state p {
  color: rgba(0, 0, 0, 0.4);
}

/* ============================================
   Tiles Container
   ============================================ */

.zen-tiles {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  overflow: auto;
  flex: 1;
  align-content: flex-start;
}

.zen-tiles-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.zen-tiles-vertical {
  flex-direction: column;
  align-items: stretch;
  max-width: 500px;
  margin: 0 auto;
}

/* ============================================
   Individual Tile
   ============================================ */

.zen-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
  max-width: 180px;
  text-align: center;
  animation: tileAppear 0.15s ease-out;
}

.zen-tiles-vertical .zen-tile {
  flex-direction: row;
  align-items: center;
  text-align: left;
  min-width: 100%;
  max-width: 100%;
  padding: 1rem 1.25rem;
}

@keyframes tileAppear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zen-tile:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.zen-tile.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2);
}

.zen-tile.folder .zen-tile-icon {
  color: rgba(250, 204, 21, 0.8);
}

.zen-tile.file .zen-tile-icon {
  color: rgba(147, 197, 253, 0.8);
}

.zen-tile-icon {
  flex-shrink: 0;
}

.zen-tile-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
  line-height: 1.3;
}

.zen-tiles-vertical .zen-tile-name {
  flex: 1;
}

.zen-tile-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
}

.zen-tile-preview {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: none;
}

.zen-tiles-vertical .zen-tile-preview {
  display: block;
  flex: 2;
  text-align: right;
}

/* Light theme tiles */
.zen-navigation.light .zen-tile {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

.zen-navigation.light .zen-tile:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}

.zen-navigation.light .zen-tile.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.zen-navigation.light .zen-tile-name {
  color: rgba(0, 0, 0, 0.85);
}

.zen-navigation.light .zen-tile-count,
.zen-navigation.light .zen-tile-preview {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.04);
}

.zen-navigation.light .zen-tile.folder .zen-tile-icon {
  color: rgba(180, 140, 20, 0.9);
}

.zen-navigation.light .zen-tile.file .zen-tile-icon {
  color: rgba(59, 130, 246, 0.8);
}

/* ============================================
   Content Slide Animations
   ============================================ */

.zen-content-slide-left {
  animation: contentSlideLeft 0.2s ease-out;
}

.zen-content-slide-right {
  animation: contentSlideRight 0.2s ease-out;
}

.zen-content-slide-up {
  animation: contentSlideUp 0.15s ease-out;
}

.zen-content-slide-down {
  animation: contentSlideDown 0.15s ease-out;
}

@keyframes contentSlideLeft {
  from { opacity: 0.4; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes contentSlideRight {
  from { opacity: 0.4; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

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

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

/* ============================================
   File View
   ============================================ */

.zen-file-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.zen-file-content {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.zen-navigation.light .zen-file-content {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.zen-file-content .markdown-block {
  color: rgba(255, 255, 255, 0.85);
}

.zen-navigation.light .zen-file-content .markdown-block {
  color: rgba(0, 0, 0, 0.85);
}

.zen-file-content .markdown-block h1,
.zen-file-content .markdown-block h2,
.zen-file-content .markdown-block h3 {
  color: rgba(255, 255, 255, 0.95);
}

.zen-navigation.light .zen-file-content .markdown-block h1,
.zen-navigation.light .zen-file-content .markdown-block h2,
.zen-navigation.light .zen-file-content .markdown-block h3 {
  color: rgba(0, 0, 0, 0.9);
}

.zen-file-content .markdown-block a {
  color: rgba(147, 197, 253, 0.9);
}

.zen-file-content .markdown-block code {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(250, 204, 21, 0.9);
}

.zen-file-content .markdown-block pre {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Editor styling */
.zen-editor {
  height: 100%;
}

.zen-file-view .editable-markdown-editor-wrapper {
  height: 100%;
  border-radius: 12px;
}

/* ============================================
   Panel Footer
   ============================================ */

.zen-panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: auto;
}

.zen-navigation.light .zen-panel-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}

.zen-nav-hint {
  display: flex;
  gap: 1.5rem;
}

.zen-nav-hint kbd {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.125rem 0.375rem;
  font-family: inherit;
  font-size: 0.7rem;
  margin: 0 0.125rem;
}

.zen-navigation.light .zen-nav-hint kbd {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}

.zen-level-indicator {
  opacity: 0.6;
}

/* ============================================
   Navigation Guide - Branching Tree Path
   Each level branches perpendicular from parent
   ============================================ */

.zen-nav-guide {
  position: fixed;
  top: 3rem;
  left: 1.5rem;
  z-index: 600;
  opacity: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.zen-nav-guide:hover {
  opacity: 1;
}

.zen-nav-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Each level container */
.zen-nav-level {
  display: flex;
  position: relative;
}

/* Horizontal level (even: 0, 2, 4...) */
.zen-nav-horizontal {
  flex-direction: row;
  gap: 6px;
  align-items: flex-start;
}

/* Vertical level (odd: 1, 3, 5...) - branches down directly under selected */
.zen-nav-vertical {
  flex-direction: column;
  gap: 6px;
  position: absolute;
  /* 16px = dot width (10px) + gap (6px) */
  left: calc(var(--parent-offset, 0) * 16px);
  top: 100%;
  margin-top: 6px;
}

/* Connector line from horizontal parent to vertical child - removed, using on-path instead */
.zen-nav-vertical::before {
  display: none;
}

/* Nested horizontal levels branch right directly next to selected */
.zen-nav-vertical > .zen-nav-horizontal {
  position: absolute;
  /* 16px = dot height (10px) + gap (6px) */
  top: calc(var(--parent-offset, 0) * 16px);
  left: 16px;
}

/* Connector line from vertical parent to horizontal child - removed, using on-path instead */
.zen-nav-vertical > .zen-nav-horizontal::before {
  display: none;
}

/* The dots */
.zen-nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

/* Folder dots - slightly different color */
.zen-nav-dot.folder {
  background: rgba(250, 204, 21, 0.3);
  border-color: rgba(250, 204, 21, 0.2);
}

/* Empty folder dots - square outline, no fill */
.zen-nav-dot.folder.empty {
  background: transparent;
  border-color: rgba(250, 204, 21, 0.4);
  border-style: dashed;
  border-radius: 2px; /* Square like files */
}

/* File dots */
.zen-nav-dot.file {
  background: rgba(147, 197, 253, 0.3);
  border-color: rgba(147, 197, 253, 0.2);
  border-radius: 2px;
}

.zen-nav-dot.clickable {
  cursor: pointer;
  position: relative;
  outline: none;
}

.zen-nav-dot.clickable:focus {
  outline: none;
}

.zen-nav-dot.clickable:hover {
  transform: scale(1.4);
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

.zen-nav-dot.folder.clickable:hover {
  background: rgba(250, 204, 21, 0.6);
  border-color: rgba(250, 204, 21, 0.5);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
}

.zen-nav-dot.file.clickable:hover {
  background: rgba(147, 197, 253, 0.6);
  border-color: rgba(147, 197, 253, 0.5);
  box-shadow: 0 0 12px rgba(147, 197, 253, 0.3);
}

.zen-nav-dot.clickable:active {
  transform: scale(1.1);
}

/* Selected dot (on the path but not current) */
.zen-nav-dot.selected {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.3);
}

.zen-nav-dot.folder.selected {
  background: rgba(250, 204, 21, 0.5);
  border-color: rgba(250, 204, 21, 0.35);
}

/* Active dot (current position) */
.zen-nav-dot.active {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transform: scale(1.2);
}

.zen-nav-dot.folder.active {
  background: rgba(250, 204, 21, 0.9);
  border-color: rgba(250, 204, 21, 0.7);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}

/* Empty folder when active - still no fill */
.zen-nav-dot.folder.empty.active {
  background: transparent;
  border-color: rgba(250, 204, 21, 0.9);
  border-style: dashed;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.3);
}

.zen-nav-dot.folder.empty.selected {
  background: transparent;
  border-color: rgba(250, 204, 21, 0.6);
}

.zen-nav-dot.file.active {
  background: rgba(147, 197, 253, 0.9);
  border-color: rgba(147, 197, 253, 0.7);
  box-shadow: 0 0 10px rgba(147, 197, 253, 0.5);
}

.zen-nav-dot.active.clickable:hover {
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
}

/* Gap connector - individual line segment in the gap between two dots */
.zen-nav-gap-connector {
  position: absolute;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* Horizontal level: gap connector is horizontal, in the 6px gap */
/* Position: after dot N ends (10px) + gap-index * 16px */
.zen-nav-horizontal > .zen-nav-gap-connector {
  top: 4px; /* vertically centered (10px dot, 2px line = 4px offset) */
  left: calc(10px + var(--gap-index, 0) * 16px); /* start after dot */
  width: 6px; /* just the gap */
  height: 2px;
}

/* Vertical level: gap connector is vertical, in the 6px gap */
.zen-nav-vertical > .zen-nav-gap-connector {
  left: 4px; /* horizontally centered */
  top: calc(10px + var(--gap-index, 0) * 16px); /* start after dot */
  width: 2px;
  height: 6px; /* just the gap */
}

/* On-path dot connector to next level - simple line in the gap */
.zen-nav-dot.on-path {
  position: relative;
}

/* Horizontal: line goes down from on-path dot to child level */
.zen-nav-horizontal > .zen-nav-dot.on-path::after {
  content: '';
  position: absolute;
  bottom: -6px; /* in the gap */
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  z-index: -1;
}

/* Vertical: line goes right from on-path dot to child level */
.zen-nav-vertical > .zen-nav-dot.on-path::after {
  content: '';
  position: absolute;
  right: -6px; /* in the gap */
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  z-index: -1;
}

/* Light theme */
.zen-navigation.light .zen-nav-gap-connector,
.zen-navigation.light .zen-nav-dot.on-path::after {
  background: rgba(0, 0, 0, 0.15);
}

.zen-nav-more {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 4px;
  font-weight: 500;
  align-self: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Before indicator - items hidden before visible window */
.zen-nav-more-before {
  order: -1; /* Place before dots */
}

/* After indicator - items hidden after visible window */
.zen-nav-more-after {
  order: 999; /* Place after dots */
}

/* In vertical levels, position indicators without interfering with horizontal branches */
.zen-nav-vertical > .zen-nav-more {
  position: relative;
  z-index: 1;
}

/* Light theme connector lines */
.zen-navigation.light .zen-nav-vertical::before {
  background: rgba(0, 0, 0, 0.15);
}

.zen-navigation.light .zen-nav-vertical > .zen-nav-horizontal::before {
  background: rgba(0, 0, 0, 0.15);
}

.zen-navigation.light .zen-nav-dot {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.1);
}

.zen-navigation.light .zen-nav-dot.folder {
  background: rgba(180, 140, 20, 0.25);
  border-color: rgba(180, 140, 20, 0.15);
}

.zen-navigation.light .zen-nav-dot.folder.empty {
  background: transparent;
  border-color: rgba(180, 140, 20, 0.4);
  border-style: dashed;
}

.zen-navigation.light .zen-nav-dot.folder.empty.active,
.zen-navigation.light .zen-nav-dot.folder.empty.selected {
  background: transparent;
}

.zen-navigation.light .zen-nav-dot.file {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.15);
}

.zen-navigation.light .zen-nav-dot.clickable:hover {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

.zen-navigation.light .zen-nav-dot.folder.clickable:hover {
  background: rgba(180, 140, 20, 0.5);
  border-color: rgba(180, 140, 20, 0.4);
  box-shadow: 0 0 12px rgba(180, 140, 20, 0.2);
}

.zen-navigation.light .zen-nav-dot.selected {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.25);
}

.zen-navigation.light .zen-nav-dot.folder.selected {
  background: rgba(180, 140, 20, 0.45);
  border-color: rgba(180, 140, 20, 0.3);
}

.zen-navigation.light .zen-nav-dot.active {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.zen-navigation.light .zen-nav-dot.folder.active {
  background: rgba(180, 140, 20, 0.85);
  border-color: rgba(180, 140, 20, 0.6);
  box-shadow: 0 0 10px rgba(180, 140, 20, 0.3);
}

.zen-navigation.light .zen-nav-dot.file.active {
  background: rgba(59, 130, 246, 0.85);
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.zen-navigation.light .zen-nav-more {
  color: rgba(0, 0, 0, 0.4);
}

/* Full path label - positioned above the nav tree, left-aligned with first tile */
.zen-nav-current-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: -2px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: auto;
  z-index: 601;
  animation: labelFadeIn 0.15s ease-out;
}

.zen-nav-current-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zen-nav-current-label > svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Favorite button in path label */
.zen-nav-favorite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.zen-nav-favorite-btn:hover {
  color: rgba(250, 204, 21, 0.8);
  background: rgba(250, 204, 21, 0.1);
}

.zen-nav-favorite-btn.active {
  color: rgba(250, 204, 21, 0.9);
}

.zen-nav-favorite-btn.active:hover {
  color: rgba(250, 204, 21, 1);
  background: rgba(250, 204, 21, 0.15);
}

.zen-navigation.light .zen-nav-favorite-btn {
  color: rgba(0, 0, 0, 0.25);
}

.zen-navigation.light .zen-nav-favorite-btn:hover {
  color: rgba(180, 140, 20, 0.8);
  background: rgba(180, 140, 20, 0.1);
}

.zen-navigation.light .zen-nav-favorite-btn.active {
  color: rgba(180, 140, 20, 0.9);
}

.zen-navigation.light .zen-nav-favorite-btn.active:hover {
  color: rgba(180, 140, 20, 1);
}

.zen-nav-current-label.folder {
  border-color: rgba(250, 204, 21, 0.4);
}

.zen-nav-current-label.folder svg {
  color: rgba(250, 204, 21, 0.9);
}

.zen-nav-current-label.file {
  border-color: rgba(147, 197, 253, 0.4);
}

.zen-nav-current-label.file svg {
  color: rgba(147, 197, 253, 0.9);
}

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

.zen-navigation.light .zen-nav-current-label {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}

.zen-navigation.light .zen-nav-current-label.folder {
  border-color: rgba(180, 140, 20, 0.4);
}

.zen-navigation.light .zen-nav-current-label.folder svg {
  color: rgba(180, 140, 20, 0.9);
}

.zen-navigation.light .zen-nav-current-label.file {
  border-color: rgba(59, 130, 246, 0.4);
}

.zen-navigation.light .zen-nav-current-label.file svg {
  color: rgba(59, 130, 246, 0.9);
}

/* Hovered state - slightly different styling */
.zen-nav-current-label.hovered {
  opacity: 0.85;
}

.zen-navigation.light .zen-nav-current-label.hovered {
  opacity: 0.85;
}

/* ============================================
   Context Menu (for favorites)
   ============================================ */

.zen-context-menu {
  position: fixed;
  z-index: 700;
  min-width: 180px;
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: contextMenuFadeIn 0.1s ease-out;
}

@keyframes contextMenuFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zen-context-menu-header {
  padding: 6px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zen-context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.1s ease;
  text-align: left;
}

.zen-context-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.zen-context-menu-item svg {
  color: rgba(250, 204, 21, 0.8);
  flex-shrink: 0;
}

/* Light theme context menu */
.zen-navigation.light .zen-context-menu {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.zen-navigation.light .zen-context-menu-header {
  color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.zen-navigation.light .zen-context-menu-item {
  color: rgba(0, 0, 0, 0.85);
}

.zen-navigation.light .zen-context-menu-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.zen-navigation.light .zen-context-menu-item svg {
  color: rgba(180, 140, 20, 0.9);
}

/* ============================================
   Main navigation area
   ============================================ */

.zen-nav-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
}

/* ============================================
   Roots Column (vault + favorites on the left)
   ============================================ */

.zen-nav-roots-column {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  position: relative;
}

.zen-nav-roots-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Vault dot in roots column */
.zen-nav-dot.vault {
  width: 14px;
  height: 14px;
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zen-nav-dot.vault svg {
  color: rgba(56, 189, 248, 0.7);
}

.zen-nav-dot.vault:hover {
  background: rgba(56, 189, 248, 0.3);
  border-color: rgba(56, 189, 248, 0.5);
}

.zen-nav-dot.vault:hover svg {
  color: rgba(56, 189, 248, 0.9);
}

.zen-nav-dot.vault.active {
  background: rgba(56, 189, 248, 0.4);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.zen-nav-dot.vault.active svg {
  color: rgba(56, 189, 248, 1);
}

.zen-nav-dot.vault.on-path {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.4);
}

/* Favorite dot in roots column (no star icon, just styled differently) */
.zen-nav-dot.favorite {
  width: 10px;
  height: 10px;
  background: rgba(250, 204, 21, 0.15);
  border-color: rgba(250, 204, 21, 0.3);
}

.zen-nav-dot.favorite:hover {
  background: rgba(250, 204, 21, 0.3);
  border-color: rgba(250, 204, 21, 0.5);
}

.zen-nav-dot.favorite.active {
  background: rgba(250, 204, 21, 0.4);
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.3);
}

.zen-nav-dot.favorite.on-path {
  background: rgba(250, 204, 21, 0.25);
  border-color: rgba(250, 204, 21, 0.4);
}

/* ============================================
   Favorites Column (legacy, now part of roots)
   ============================================ */

.zen-nav-favorites-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
}

/* Favorites level base */
.zen-nav-fav-level {
  display: flex;
  position: relative;
}

/* Favorites vertical level (0, 2, 4...) - the favorites list itself */
.zen-nav-fav-vertical {
  flex-direction: column;
  gap: 6px;
}

/* Favorites horizontal level (1, 3, 5...) - expanded folder contents */
.zen-nav-fav-horizontal {
  flex-direction: row;
  gap: 6px;
  position: absolute;
  /* Position to the right of the selected item in parent vertical list */
  /* 16px = dot size (10px) + gap (6px) */
  top: calc(var(--parent-offset, 0) * 16px);
  left: calc(100% + 6px);
}

/* Nested vertical in favorites - branches down from selected horizontal item */
.zen-nav-fav-horizontal > .zen-nav-fav-vertical {
  position: absolute;
  /* 16px = dot width (10px) + gap (6px) */
  left: calc(var(--parent-offset, 0) * 16px);
  top: calc(100% + 6px);
}

/* Star tile - the root of favorites */
.zen-nav-dot.favorite-root {
  width: 14px;
  height: 14px;
  background: rgba(250, 204, 21, 0.15);
  border-color: rgba(250, 204, 21, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zen-nav-dot.favorite-root svg {
  color: rgba(250, 204, 21, 0.7);
}

.zen-nav-dot.favorite-root:hover {
  background: rgba(250, 204, 21, 0.3);
  border-color: rgba(250, 204, 21, 0.5);
}

.zen-nav-dot.favorite-root:hover svg {
  color: rgba(250, 204, 21, 0.9);
}

.zen-nav-dot.favorite-root.active {
  background: rgba(250, 204, 21, 0.4);
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.3);
}

.zen-nav-dot.favorite-root.active svg {
  color: rgba(250, 204, 21, 1);
}

/* On-path state for favorites (parent item when drilling into subfolders) */
.zen-nav-dot.favorite.on-path {
  background: rgba(250, 204, 21, 0.4);
  border-color: rgba(250, 204, 21, 0.5);
}

.zen-nav-dot.file.favorite.on-path {
  background: rgba(147, 197, 253, 0.4);
  border-color: rgba(147, 197, 253, 0.5);
}

/* Light theme */
.zen-navigation.light .zen-nav-dot.favorite-root {
  background: rgba(180, 140, 20, 0.1);
  border-color: rgba(180, 140, 20, 0.25);
}

.zen-navigation.light .zen-nav-dot.favorite-root svg {
  color: rgba(180, 140, 20, 0.7);
}

.zen-navigation.light .zen-nav-dot.favorite-root:hover {
  background: rgba(180, 140, 20, 0.25);
  border-color: rgba(180, 140, 20, 0.4);
}

.zen-navigation.light .zen-nav-dot.favorite-root.active {
  background: rgba(180, 140, 20, 0.35);
  border-color: rgba(180, 140, 20, 0.5);
}

.zen-nav-dot.folder.favorite {
  background: rgba(250, 204, 21, 0.2);
  border-color: rgba(250, 204, 21, 0.3);
}

.zen-nav-dot.folder.favorite:hover {
  background: rgba(250, 204, 21, 0.5);
  border-color: rgba(250, 204, 21, 0.5);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
}

.zen-nav-dot.folder.favorite.active {
  background: rgba(250, 204, 21, 0.8);
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
}

.zen-nav-dot.file.favorite {
  background: rgba(147, 197, 253, 0.25);
  border-color: rgba(147, 197, 253, 0.35);
}

.zen-nav-dot.file.favorite:hover {
  background: rgba(147, 197, 253, 0.5);
  border-color: rgba(147, 197, 253, 0.5);
  box-shadow: 0 0 12px rgba(147, 197, 253, 0.3);
}

.zen-nav-dot.file.favorite.active {
  background: rgba(147, 197, 253, 0.8);
  border-color: rgba(147, 197, 253, 0.6);
  box-shadow: 0 0 10px rgba(147, 197, 253, 0.4);
}

/* Currently navigated favorite (subtle indicator) */
.zen-nav-dot.favorite.current {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: 2px;
}

/* Light theme favorites */
.zen-navigation.light .zen-nav-favorites {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.zen-navigation.light .zen-nav-favorites-icon {
  color: rgba(180, 140, 20, 0.7);
}

.zen-navigation.light .zen-nav-dot.folder.favorite {
  background: rgba(180, 140, 20, 0.2);
  border-color: rgba(180, 140, 20, 0.25);
}

.zen-navigation.light .zen-nav-dot.folder.favorite:hover {
  background: rgba(180, 140, 20, 0.45);
  border-color: rgba(180, 140, 20, 0.4);
}

.zen-navigation.light .zen-nav-dot.folder.favorite.active {
  background: rgba(180, 140, 20, 0.7);
  border-color: rgba(180, 140, 20, 0.5);
}

.zen-navigation.light .zen-nav-dot.file.favorite {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.25);
}

.zen-navigation.light .zen-nav-dot.file.favorite:hover {
  background: rgba(59, 130, 246, 0.4);
  border-color: rgba(59, 130, 246, 0.4);
}

.zen-navigation.light .zen-nav-dot.file.favorite.active {
  background: rgba(59, 130, 246, 0.7);
  border-color: rgba(59, 130, 246, 0.5);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
  .zen-navigation {
    padding: 1rem;
  }

  .zen-panel {
    padding: 1rem;
    height: 95vh;
    border-radius: 16px;
  }

  .zen-tile {
    min-width: 100px;
    padding: 1rem;
  }

  .zen-tiles-vertical .zen-tile {
    min-width: 100%;
  }

  .zen-panel-footer {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .zen-quick-access {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
/* ============================================
   Reusable Note Editor Component
   ============================================ */

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

.note-editor-input-wrapper {
  position: relative;
  padding: 1rem 1.25rem;
}

.note-editor-input {
  width: 100%;
  min-height: 350px;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.75;
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
  tab-size: 2;
}

.note-editor-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.note-editor-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  white-space: pre-line;
}

/* Popups (Insert Menu & Tag Menu) */
.note-editor-popup {
  position: fixed;
  min-width: 220px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  z-index: 100010;
  backdrop-filter: blur(12px);
  animation: noteEditorPopupAppear 0.15s ease-out;
}

@keyframes noteEditorPopupAppear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.note-editor-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.4rem;
}

.note-editor-popup-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.note-editor-popup-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.note-editor-popup-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease;
  text-align: left;
}

.note-editor-popup-item:hover,
.note-editor-popup-item.selected {
  background: rgba(255, 255, 255, 0.1);
}

.note-editor-popup-icon {
  font-size: 1rem;
}

.note-editor-popup-label {
  flex: 1;
}

.note-editor-popup-key {
  font-size: 0.7rem;
  font-weight: 600;
  font-family: system-ui, -apple-system, sans-serif;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
}

.note-editor-popup-arrow {
  font-size: 0.75rem;
  opacity: 0.4;
}

.note-editor-popup-tag {
  font-size: 0.75rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  color: rgba(147, 197, 253, 0.8);
  background: rgba(147, 197, 253, 0.15);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.note-editor-popup-empty {
  padding: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  font-style: italic;
}

/* Emoji Picker Container */
.note-editor-emoji-picker-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100010;
  animation: noteEditorPopupAppear 0.15s ease-out;
}

.note-editor-emoji-picker-container .emoji-picker {
  width: 380px;
  max-height: 450px;
  background: rgba(30, 30, 35, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* Footer */
.note-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.note-editor-footer-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.note-editor-char-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
}

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

.note-editor-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.note-editor-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.note-editor-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}

.note-editor-btn.save {
  background: rgba(var(--accent-rgb), 0.9);
  color: white;
}

.note-editor-btn.save:hover {
  background: rgba(var(--accent-rgb), 1);
}

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

.note-editor-btn.organize {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.note-editor-btn.organize:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  color: rgba(var(--accent-rgb), 1);
}

.note-editor-btn.organize:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.note-editor-btn.organize .spinning {
  animation: spin 1s linear infinite;
}

/* Light theme support */
body.light .note-editor-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.9);
}

body.light .note-editor-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

body.light .note-editor-popup {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .note-editor-popup-header {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .note-editor-popup-close {
  color: rgba(0, 0, 0, 0.4);
}

body.light .note-editor-popup-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}

body.light .note-editor-popup-item {
  color: rgba(0, 0, 0, 0.8);
}

body.light .note-editor-popup-item:hover,
body.light .note-editor-popup-item.selected {
  background: rgba(0, 0, 0, 0.08);
}

body.light .note-editor-popup-key {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}

body.light .note-editor-footer {
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .note-editor-char-count {
  color: rgba(0, 0, 0, 0.4);
}

body.light .note-editor-btn.cancel {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

body.light .note-editor-btn.cancel:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Color Picker for Sticky Notes */
.note-editor-color-picker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.note-editor-color-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.note-editor-color-swatches {
  display: flex;
  gap: 0.5rem;
}

.note-editor-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-editor-color-swatch:hover {
  transform: scale(1.1);
}

.note-editor-color-swatch.selected {
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.note-editor-color-swatch svg {
  color: inherit;
  opacity: 0.8;
}

body.light .note-editor-color-picker {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .note-editor-color-label {
  color: rgba(0, 0, 0, 0.5);
}

body.light .note-editor-color-swatch.selected {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}





.screensaver-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #0a0a0f;
  cursor: default;
  opacity: 0;
  transition: opacity 0.8s ease-out;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Centered layer for main content to prevent layout shifts */
.screensaver-main-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.screensaver-main-layer > * {
  pointer-events: auto;
}

.screensaver-overlay.visible {
  opacity: 1;
}

/* Wallpaper background for zen theme */
.screensaver-overlay.has-wallpaper {
  background: transparent;
}

.screensaver-wallpaper {
  position: absolute;
  inset: 0;
  /* Use screensaver-specific bg if set, otherwise fall back to app bg image */
  background-image: var(--screensaver-bg-image, var(--app-bg-image));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.4) saturate(0.8);
  animation: screensaver-wallpaper-zoom 30s ease-in-out infinite alternate;
}

@keyframes screensaver-wallpaper-zoom {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

/* Ambient background effects */
.screensaver-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.screensaver-gradient {
  position: absolute;
  /* Extend 15% beyond viewport on all sides to prevent edges showing during animation */
  inset: -15%;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(var(--accent-rgb), 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(var(--accent-rgb), 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(16, 185, 129, 0.08) 0%, transparent 40%);
  animation: screensaver-ambient-shift 20s ease-in-out infinite;
}

@keyframes screensaver-ambient-shift {

  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }

  25% {
    transform: scale(1.1) translate(5%, -3%);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.05) translate(-3%, 5%);
    opacity: 1;
  }

  75% {
    transform: scale(1.15) translate(-5%, -5%);
    opacity: 0.85;
  }
}

.screensaver-particles {
  position: absolute;
  /* Extend beyond viewport to prevent edges showing during drift animation */
  inset: -5%;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(2px 2px at 70% 40%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(2px 2px at 15% 85%, rgba(255, 255, 255, 0.08), transparent);
  background-size: 100% 100%;
  animation: screensaver-particles-drift 30s linear infinite;
}

@keyframes screensaver-particles-drift {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-20px);
  }
}

/* Main content container */
.screensaver-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  animation: screensaver-content-float 8s ease-in-out infinite;
}

@keyframes screensaver-content-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Time block */
.screensaver-time-block {
  text-align: center;
}

.screensaver-greeting {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.screensaver-time {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: clamp(4rem, 15vw, 10rem);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 4px 30px rgba(var(--accent-rgb), 0.3);
}

.screensaver-date {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
  letter-spacing: 0.05em;
}

/* Weather and location block - single line */
.screensaver-weather-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

.screensaver-location-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.screensaver-location-inline svg {
  opacity: 0.6;
}

.screensaver-weather-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.screensaver-weather-inline svg {
  opacity: 0.7;
}

.screensaver-divider {
  opacity: 0.3;
}

/* Timer block - with large centered icon */
.screensaver-timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.screensaver-timer-ring-container {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Centered content inside the ring */
.screensaver-timer-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  z-index: 1;
}

.screensaver-timer-center-icon {
  font-size: 4rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

/* Label below the ring */
.screensaver-timer-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
}

.screensaver-timer-ring {
  position: absolute;
  width: 160px;
  height: 160px;
  /* Filter is applied inline with the actual color */
  animation: screensaver-ring-glow 3s ease-in-out infinite;
}

.screensaver-timer-ring-bg {
  stroke: rgba(255, 255, 255, 0.08);
}

.screensaver-timer-ring-progress {
  transition: stroke-dashoffset 1s linear;
}

.screensaver-timer-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.02em;
}

@keyframes screensaver-ring-glow {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

/* Music block - compact single row */
.screensaver-music-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

.screensaver-music-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(15, 15, 20, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.screensaver-music-row svg {
  opacity: 0.5;
  flex-shrink: 0;
}

.screensaver-music-title {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.screensaver-music-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  flex-shrink: 0;
}

.screensaver-music-visualizer .bar {
  width: 2px;
  background: linear-gradient(to top, var(--accent-dark), var(--accent));
  border-radius: 1px;
  animation: screensaver-music-bar 0.5s ease-in-out infinite alternate;
}

.screensaver-music-visualizer .bar:nth-child(1) {
  height: 40%;
  animation-delay: 0s;
}

.screensaver-music-visualizer .bar:nth-child(2) {
  height: 70%;
  animation-delay: 0.1s;
}

.screensaver-music-visualizer .bar:nth-child(3) {
  height: 100%;
  animation-delay: 0.2s;
}

@keyframes screensaver-music-bar {
  0% {
    transform: scaleY(0.3);
  }

  100% {
    transform: scaleY(1);
  }
}

/* Quote block - compact */
.screensaver-quote-block {
  max-width: 550px;
  text-align: center;
  padding: 0.75rem;
  animation: screensaver-quote-fade 0.8s ease-out 0.3s both;
}

@keyframes screensaver-quote-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.screensaver-quote-text {
  font-family: 'Inter', serif;
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

.screensaver-quote-author {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

/* Dismiss hint */
.screensaver-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.05em;
  animation: screensaver-hint-pulse 3s ease-in-out infinite;
}

@keyframes screensaver-hint-pulse {

  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.4;
  }
}

/* Screensaver Command Menu */
.screensaver-command-menu {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 0.75rem;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 100002;
  animation: screensaver-menu-appear 0.2s ease-out;
}

@keyframes screensaver-menu-appear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.screensaver-command-menu-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.25rem 0.5rem 0.5rem;
  margin-bottom: 0.25rem;
}

.screensaver-command-menu-title.music {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.screensaver-command-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.screensaver-command-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.screensaver-command-item.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.screensaver-command-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: system-ui, -apple-system, sans-serif;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.7);
}

.screensaver-command-label {
  flex: 1;
}

/* Individual Notes List in Command Menu */
.screensaver-command-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 180px;
  overflow-y: auto;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.screensaver-command-notes-list::-webkit-scrollbar {
  width: 4px;
}

.screensaver-command-notes-list::-webkit-scrollbar-track {
  background: transparent;
}

.screensaver-command-notes-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.screensaver-command-note-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.15s ease;
}

.screensaver-command-note-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.screensaver-command-note-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
}

.screensaver-command-note-text {
  flex: 1;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screensaver-command-note-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.screensaver-command-note-item:hover .screensaver-command-note-delete {
  opacity: 1;
}

.screensaver-command-note-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

/* Cursor Trail Effect */
.screensaver-cursor-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100003;
  overflow: hidden;
}

.screensaver-trail-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;

  /* Gradient glow effect */
  background: radial-gradient(circle at center,
      rgba(147, 197, 253, 0.9) 0%,
      rgba(139, 92, 246, 0.6) 40%,
      rgba(236, 72, 153, 0.3) 70%,
      transparent 100%);

  /* Dynamic sizing based on position in trail */
  --scale: calc(0.3 + (var(--particle-index) / var(--particle-total)) * 0.7);
  --opacity: calc(0.2 + (var(--particle-index) / var(--particle-total)) * 0.8);

  animation: trailFade 0.6s ease-out forwards;
  box-shadow:
    0 0 10px rgba(147, 197, 253, 0.5),
    0 0 20px rgba(var(--accent-rgb), 0.3),
    0 0 30px rgba(236, 72, 153, 0.2);
}

@keyframes trailFade {
  0% {
    opacity: var(--opacity, 0.8);
    transform: translate(-50%, -50%) scale(var(--scale, 1));
  }

  50% {
    opacity: calc(var(--opacity, 0.8) * 0.6);
    transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 1.5));
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 0.3));
  }
}

/* Every other particle has slightly different color */
.screensaver-trail-particle:nth-child(odd) {
  background: radial-gradient(circle at center,
      rgba(52, 211, 153, 0.9) 0%,
      rgba(59, 130, 246, 0.6) 40%,
      rgba(168, 85, 247, 0.3) 70%,
      transparent 100%);
  box-shadow:
    0 0 10px rgba(52, 211, 153, 0.5),
    0 0 20px rgba(59, 130, 246, 0.3),
    0 0 30px rgba(168, 85, 247, 0.2);
}

/* Delete Mode Overlay */
.screensaver-delete-mode {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 16px;
  padding: 1rem;
  min-width: 320px;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.2s ease;
  z-index: 100001;
}

.screensaver-delete-mode-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fca5a5;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(239, 68, 68, 0.15);
}

.screensaver-delete-mode-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 280px;
  overflow-y: auto;
}

.screensaver-delete-mode-list::-webkit-scrollbar {
  width: 4px;
}

.screensaver-delete-mode-list::-webkit-scrollbar-track {
  background: transparent;
}

.screensaver-delete-mode-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.screensaver-delete-mode-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-left: 3px solid var(--sticky-accent, rgba(255, 255, 255, 0.2));
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.screensaver-delete-mode-item:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

.screensaver-delete-mode-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #fca5a5;
}

.screensaver-delete-mode-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screensaver-delete-mode-hint {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

.screensaver-delete-mode-hint kbd {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
  font-family: system-ui, -apple-system, sans-serif;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
}

/* ===========================================
   SCREENSAVER CORNER PANEL (Remote Control)
   =========================================== */
.screensaver-corner-panel {
  position: fixed;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(20, 20, 25, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0.85rem;
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 100002;
  animation: screensaver-panel-appear 0.2s ease-out;
}

@keyframes screensaver-panel-appear {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.screensaver-panel-section {
  padding: 0.5rem 0;
}

.screensaver-panel-section:first-child {
  padding-top: 0;
}

.screensaver-panel-section:last-child {
  padding-bottom: 0;
}

.screensaver-panel-section+.screensaver-panel-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.5rem;
}

.screensaver-panel-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.5rem;
}

.screensaver-panel-section-header svg {
  opacity: 0.7;
}

/* Timer Controls */
.screensaver-panel-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.screensaver-panel-timer-category {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 30px;
  padding: 0 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.75rem;
}

.screensaver-panel-timer-category:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--timer-color, rgba(255, 255, 255, 0.3));
  box-shadow: 0 0 0 1px var(--timer-color, rgba(255, 255, 255, 0.1));
}

.screensaver-panel-timer-category svg.rotated {
  transform: rotate(180deg);
}

.screensaver-panel-timer-icon {
  font-size: 0.9rem;
}

.screensaver-panel-timer-label {
  font-weight: 500;
}

.screensaver-panel-timer-time-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 30px;
  padding: 0 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--timer-color, #38bdf8);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.screensaver-panel-timer-time-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--timer-color, rgba(255, 255, 255, 0.3));
}

.screensaver-panel-timer-time-btn.paused {
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.6);
}

.screensaver-panel-timer-time-btn svg.rotated {
  transform: rotate(180deg);
}

.screensaver-panel-timer-time {
  font-variant-numeric: tabular-nums;
}

.screensaver-panel-timer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.screensaver-panel-timer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--timer-color, #38bdf8);
}

.screensaver-panel-timer-btn.running {
  background: rgba(var(--timer-color, 56, 189, 248), 0.15);
  border-color: var(--timer-color, #38bdf8);
  color: var(--timer-color, #38bdf8);
}

/* Category Picker */
.screensaver-panel-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease,
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.25s ease,
              padding 0.25s ease;
  pointer-events: none;
}

.screensaver-panel-categories.expanded {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 0.5rem;
  padding: 0.35rem;
  pointer-events: auto;
}

.screensaver-panel-category {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--cat-color, rgba(255, 255, 255, 0.15));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-panel-category:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  border-left-color: var(--cat-color, rgba(255, 255, 255, 0.3));
}

.screensaver-panel-category.active {
  background: color-mix(in srgb, var(--cat-color) 20%, transparent);
  border-color: var(--cat-color, #a78bfa);
  border-left-color: var(--cat-color, #a78bfa);
  box-shadow: 0 0 8px var(--cat-color, rgba(167, 139, 250, 0.4));
}

.screensaver-panel-category-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.screensaver-panel-category-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screensaver-panel-category.active .screensaver-panel-category-label {
  color: var(--cat-color, #a78bfa);
}

/* Duration Picker */
.screensaver-panel-durations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease,
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.25s ease,
              padding 0.25s ease;
  pointer-events: none;
}

.screensaver-panel-durations.expanded {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 0.5rem;
  padding: 0.5rem;
  pointer-events: auto;
}

.screensaver-panel-duration {
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-panel-duration:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.screensaver-panel-duration.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

/* Music Controls */
.screensaver-panel-music-title {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screensaver-panel-music-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.screensaver-panel-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

/* Music Visualizer Canvas */
.screensaver-panel-visualizer-canvas {
  width: 100%;
  height: 48px;
  padding: 0;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.screensaver-panel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-panel-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.screensaver-panel-btn.play {
  width: 36px;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.screensaver-panel-btn.play:hover {
  background: rgba(34, 197, 94, 0.25);
}

.screensaver-panel-btn.play.playing {
  background: rgba(34, 197, 94, 0.2);
}

.screensaver-panel-btn.active.star {
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.3);
  background: rgba(250, 204, 21, 0.15);
}

.screensaver-panel-btn.active.dislike {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.15);
}

/* AI Button */
.screensaver-panel-ai-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 10px;
  color: var(--accent-light);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-panel-ai-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: #e0d4fc;
}

.screensaver-panel-ai-btn svg {
  color: var(--accent);
}

.screensaver-panel-ai-badge {
  margin-left: auto;
  padding: 0.15rem 0.4rem;
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 4px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Light Theme for Corner Panel */
.screensaver-overlay.theme-light .screensaver-corner-panel {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.screensaver-overlay.theme-light .screensaver-panel-section+.screensaver-panel-section {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.screensaver-overlay.theme-light .screensaver-panel-section-header {
  color: rgba(0, 0, 0, 0.45);
}

.screensaver-overlay.theme-light .screensaver-panel-timer-category {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}

.screensaver-overlay.theme-light .screensaver-panel-timer-category:hover {
  background: rgba(0, 0, 0, 0.08);
}

.screensaver-overlay.theme-light .screensaver-panel-timer-time-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

.screensaver-overlay.theme-light .screensaver-panel-timer-time-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.screensaver-overlay.theme-light .screensaver-panel-timer-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

.screensaver-overlay.theme-light .screensaver-panel-timer-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.screensaver-overlay.theme-light .screensaver-panel-categories,
.screensaver-overlay.theme-light .screensaver-panel-durations {
  background: rgba(0, 0, 0, 0.03);
}

.screensaver-overlay.theme-light .screensaver-panel-category {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  border-left-color: var(--cat-color, rgba(0, 0, 0, 0.15));
}

.screensaver-overlay.theme-light .screensaver-panel-category:hover {
  background: rgba(0, 0, 0, 0.08);
  border-left-color: var(--cat-color, rgba(0, 0, 0, 0.25));
}

.screensaver-overlay.theme-light .screensaver-panel-category.active {
  background: color-mix(in srgb, var(--cat-color) 15%, transparent);
  border-color: var(--cat-color);
}

.screensaver-overlay.theme-light .screensaver-panel-category-label {
  color: rgba(0, 0, 0, 0.75);
}

.screensaver-overlay.theme-light .screensaver-panel-category.active .screensaver-panel-category-label {
  color: var(--cat-color);
}

.screensaver-overlay.theme-light .screensaver-panel-duration {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

.screensaver-overlay.theme-light .screensaver-panel-duration:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

.screensaver-overlay.theme-light .screensaver-panel-music-title {
  color: rgba(0, 0, 0, 0.6);
}

.screensaver-overlay.theme-light .screensaver-panel-visualizer-canvas {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.screensaver-overlay.theme-light .screensaver-panel-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

.screensaver-overlay.theme-light .screensaver-panel-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

.screensaver-overlay.theme-light .screensaver-panel-ai-btn {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}

.screensaver-overlay.theme-light .screensaver-panel-ai-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.screensaver-overlay.theme-light .screensaver-panel-ai-badge {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(0, 0, 0, 0.6);
}

/* Page Picker for AI Context */
.screensaver-page-picker {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 16px;
  padding: 1rem;
  min-width: 340px;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(var(--accent-rgb), 0.15);
  animation: slideUp 0.2s ease;
  z-index: 100003;
}

.screensaver-page-picker-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.9);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}

.screensaver-page-picker-header svg {
  color: rgba(var(--accent-rgb), 0.8);
}

.screensaver-page-picker-close {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-page-picker-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.screensaver-page-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 320px;
  overflow-y: auto;
}

.screensaver-page-picker-list::-webkit-scrollbar {
  width: 4px;
}

.screensaver-page-picker-list::-webkit-scrollbar-track {
  background: transparent;
}

.screensaver-page-picker-list::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 2px;
}

.screensaver-page-picker-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.screensaver-page-picker-item:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.screensaver-page-picker-item.sticky-notes {
  background: linear-gradient(135deg, rgba(255, 243, 176, 0.12), rgba(255, 213, 130, 0.08));
  border-color: rgba(234, 179, 8, 0.2);
}

.screensaver-page-picker-item.sticky-notes:hover {
  background: linear-gradient(135deg, rgba(255, 243, 176, 0.2), rgba(255, 213, 130, 0.15));
  border-color: rgba(234, 179, 8, 0.4);
}

.screensaver-page-picker-item svg {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}

.screensaver-page-picker-item.sticky-notes svg {
  color: rgba(234, 179, 8, 0.9);
}

.screensaver-page-picker-plus {
  margin-left: auto;
  font-size: 0.65rem;
  color: rgba(234, 179, 8, 0.7);
  background: rgba(234, 179, 8, 0.15);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.screensaver-page-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
}

.screensaver-page-picker-empty svg {
  opacity: 0.5;
}

.screensaver-page-picker-hint {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

.screensaver-page-picker-hint kbd {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
  font-family: system-ui, -apple-system, sans-serif;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
}

/* Music Controls in Command Menu */
.screensaver-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
}

.screensaver-music-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 44px;
  height: 52px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-music-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.screensaver-music-btn.play {
  width: 52px;
  height: 52px;
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-light);
}

.screensaver-music-btn.play:hover {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.screensaver-music-btn.play.playing {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.screensaver-music-btn.active.favorite {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fcd34d;
}

.screensaver-music-btn.active.favorite svg {
  fill: currentColor;
}

.screensaver-music-btn.active.dislike {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.screensaver-music-btn-key {
  font-size: 0.6rem;
  opacity: 0.5;
  font-family: system-ui, -apple-system, sans-serif;
}

.screensaver-music-btn .spinning {
  animation: spin 1s linear infinite;
}

/* Sticky Notes */
.screensaver-sticky-notes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100001;
}

.screensaver-sticky-note {
  position: absolute;
  width: 160px;
  min-height: 100px;
  padding: 1rem;
  background: var(--sticky-bg);
  border: 1px solid var(--sticky-border);
  border-radius: 2px;
  color: var(--sticky-text);
  font-size: 0.85rem;
  line-height: 1.4;
  transform: rotate(var(--sticky-rotation, 0deg));
  box-shadow:
    2px 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: grab;
}

.screensaver-sticky-note:hover {
  transform: rotate(var(--sticky-rotation, 0deg)) scale(1.02);
  box-shadow:
    3px 5px 15px rgba(0, 0, 0, 0.2),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
}

.screensaver-sticky-note.dragging {
  cursor: grabbing;
  transform: rotate(0deg) scale(1.05);
  box-shadow:
    8px 12px 30px rgba(0, 0, 0, 0.35),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
  z-index: 100;
  transition: none;
}

.screensaver-sticky-note.selected {
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.8),
    2px 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
}

.screensaver-sticky-note.selected:hover {
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.9),
    3px 5px 15px rgba(0, 0, 0, 0.2),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
}

.screensaver-sticky-note.multi-dragging {
  cursor: grabbing;
  transform: rotate(0deg) scale(1.03);
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.9),
    6px 10px 25px rgba(0, 0, 0, 0.3),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
  z-index: 100;
  transition: none;
}

.screensaver-sticky-selected-indicator {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: rgba(59, 130, 246, 0.9);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Selection Rectangle */
.screensaver-selection-rect {
  position: fixed;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 2px;
  pointer-events: none;
  z-index: 99999;
  animation: selectionPulse 1s ease infinite;
}

@keyframes selectionPulse {

  0%,
  100% {
    background: rgba(59, 130, 246, 0.1);
  }

  50% {
    background: rgba(59, 130, 246, 0.15);
  }
}

.screensaver-sticky-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 12px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent);
  border-radius: 2px 2px 0 0;
}

.screensaver-sticky-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--sticky-text);
  opacity: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-sticky-note:hover .screensaver-sticky-delete {
  opacity: 0.6;
}

.screensaver-sticky-delete:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.3);
  color: #b91c1c;
}

.screensaver-sticky-content {
  word-wrap: break-word;
  overflow: hidden;
  cursor: pointer;
}

.screensaver-sticky-content .markdown-block {
  font-size: 0.85rem;
  line-height: 1.5;
}

.screensaver-sticky-content .markdown-block p {
  margin: 0 0 0.5em 0;
}

.screensaver-sticky-content .markdown-block p:last-child {
  margin-bottom: 0;
}

.screensaver-sticky-content .markdown-block ul,
.screensaver-sticky-content .markdown-block ol {
  margin: 0.25em 0;
  padding-left: 1.25em;
}

.screensaver-sticky-content .markdown-block li {
  margin: 0.15em 0;
}

.screensaver-sticky-content .markdown-block code {
  background: rgba(0, 0, 0, 0.15);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-size: 0.85em;
}

.screensaver-sticky-content .markdown-block pre {
  background: rgba(0, 0, 0, 0.15);
  padding: 0.5em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.5em 0;
}

.screensaver-sticky-content .markdown-block strong {
  font-weight: 600;
}

.screensaver-sticky-content .markdown-block a {
  color: inherit;
  text-decoration: underline;
  opacity: 0.8;
}

.screensaver-sticky-content .markdown-block a:hover {
  opacity: 1;
}

.screensaver-sticky-content .markdown-block blockquote {
  border-left: 2px solid currentColor;
  margin: 0.5em 0;
  padding-left: 0.75em;
  opacity: 0.85;
}

/* Inline Edit Mode for Sticky Notes */
.screensaver-sticky-edit-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: -0.25rem;
}

.screensaver-sticky-edit-input {
  width: 100%;
  min-height: 60px;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--sticky-border);
  border-radius: 4px;
  color: var(--sticky-text);
  font-size: 0.85rem;
  line-height: 1.4;
  font-family: inherit;
  resize: none;
  outline: none;
}

.screensaver-sticky-edit-input:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.screensaver-sticky-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.screensaver-sticky-edit-btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-sticky-edit-btn.cancel {
  background: rgba(0, 0, 0, 0.1);
  color: var(--sticky-text);
}

.screensaver-sticky-edit-btn.cancel:hover {
  background: rgba(0, 0, 0, 0.15);
}

.screensaver-sticky-edit-btn.save {
  background: rgba(59, 130, 246, 0.9);
  color: white;
}

.screensaver-sticky-edit-btn.save:hover {
  background: rgba(59, 130, 246, 1);
}

.screensaver-sticky-date {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 0.65rem;
  opacity: 0.5;
}

/* Resize Handle */
.screensaver-sticky-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.screensaver-sticky-resize::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.4;
}

.screensaver-sticky-note:hover .screensaver-sticky-resize {
  opacity: 1;
}

.screensaver-sticky-note.resizing {
  cursor: se-resize;
}

.screensaver-sticky-note.resizing .screensaver-sticky-resize {
  opacity: 1;
}

/* Note Input Modal */
.screensaver-note-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100003;
}

.screensaver-note-modal {
  width: 90%;
  max-width: 700px;
  height: 80vh;
  max-height: 80vh;
  background: rgba(25, 25, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: screensaver-modal-appear 0.25s ease-out;
  display: flex;
  flex-direction: column;
}

/* Make note editor fill the modal */
.screensaver-note-modal .note-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.screensaver-note-modal .note-editor-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.screensaver-note-modal .note-editor-input {
  flex: 1;
  min-height: 200px;
  height: 100%;
  resize: none;
}

.screensaver-note-modal .note-editor-footer {
  flex-shrink: 0;
}

.screensaver-note-modal .note-editor-color-picker {
  flex-shrink: 0;
}

.screensaver-note-modal-header {
  flex-shrink: 0;
}

@keyframes screensaver-modal-appear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.screensaver-note-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
}

.screensaver-note-modal-header svg {
  opacity: 0.6;
}

.screensaver-note-input-wrapper {
  position: relative;
  padding: 1rem 1.25rem;
}

.screensaver-note-input {
  width: 100%;
  min-height: 350px;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.75;
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
  tab-size: 2;
}

.screensaver-note-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.screensaver-note-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.screensaver-note-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.screensaver-note-char-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
}

.screensaver-note-modal-actions {
  display: flex;
  gap: 0.5rem;
}

.screensaver-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-note-btn.cancel {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

.screensaver-note-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.screensaver-note-btn.save {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: white;
}

.screensaver-note-btn.save:hover {
  filter: brightness(1.1);
}

.screensaver-note-btn.save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mini Insert Menu */
.screensaver-mini-insert-menu {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 260px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  z-index: 100010;
  backdrop-filter: blur(12px);
  animation: insertMenuAppear 0.15s ease-out;
}

@keyframes insertMenuAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.screensaver-mini-insert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.4rem;
}

.screensaver-mini-insert-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-mini-insert-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.screensaver-mini-insert-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease;
  text-align: left;
}

.screensaver-mini-insert-item:hover,
.screensaver-mini-insert-item.selected {
  background: rgba(255, 255, 255, 0.1);
}

.screensaver-mini-insert-icon {
  font-size: 1rem;
}

.screensaver-mini-insert-label {
  flex: 1;
}

.screensaver-mini-insert-key {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
}

.screensaver-mini-insert-arrow {
  font-size: 0.75rem;
  opacity: 0.4;
}

/* Tag Menu in Screensaver */
.screensaver-tag-menu {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 260px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  z-index: 100010;
  backdrop-filter: blur(12px);
  animation: tagMenuAppear 0.15s ease-out;
}

@keyframes tagMenuAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.screensaver-tag-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.4rem;
}

.screensaver-tag-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.screensaver-tag-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.screensaver-tag-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease;
  text-align: left;
}

.screensaver-tag-menu-item:hover,
.screensaver-tag-menu-item.selected {
  background: rgba(255, 255, 255, 0.1);
}

.screensaver-tag-menu-icon {
  font-size: 1rem;
}

.screensaver-tag-menu-label {
  flex: 1;
}

.screensaver-tag-menu-tag {
  font-size: 0.75rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  color: rgba(147, 197, 253, 0.8);
  background: rgba(147, 197, 253, 0.15);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

/* Emoji Picker in Screensaver */
.screensaver-emoji-picker-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100010;
  animation: emojiPickerAppear 0.15s ease-out;
}

@keyframes emojiPickerAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.screensaver-emoji-picker-container .emoji-picker {
  width: 380px;
  max-height: 450px;
  background: rgba(30, 30, 35, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* Sun countdown in weather block */
.screensaver-sun-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.screensaver-sun-countdown.daytime {
  color: rgba(251, 191, 36, 0.7);
}

.screensaver-sun-countdown.nighttime {
  color: rgba(147, 197, 253, 0.7);
}

.screensaver-sun-countdown svg {
  opacity: 0.8;
}

/* Light theme adjustments */
.screensaver-overlay.theme-light {
  background: #fafafa;
}

.screensaver-overlay.theme-light .screensaver-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(var(--accent-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(16, 185, 129, 0.06) 0%, transparent 40%);
}

.screensaver-overlay.theme-light .screensaver-particles {
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(0, 0, 0, 0.08), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(0, 0, 0, 0.06), transparent),
    radial-gradient(2px 2px at 70% 40%, rgba(0, 0, 0, 0.07), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(0, 0, 0, 0.05), transparent);
}

.screensaver-overlay.theme-light .screensaver-greeting {
  color: rgba(0, 0, 0, 0.4);
}

.screensaver-overlay.theme-light .screensaver-time {
  color: rgba(0, 0, 0, 0.85);
  text-shadow: 0 4px 30px rgba(var(--accent-rgb), 0.15);
}

.screensaver-overlay.theme-light .screensaver-date {
  color: rgba(0, 0, 0, 0.5);
}

.screensaver-overlay.theme-light .screensaver-weather,
.screensaver-overlay.theme-light .screensaver-temp {
  color: rgba(0, 0, 0, 0.6);
}

.screensaver-overlay.theme-light .screensaver-location {
  color: rgba(0, 0, 0, 0.4);
}

.screensaver-overlay.theme-light .screensaver-timer-block {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

.screensaver-overlay.theme-light .screensaver-timer-label {
  color: rgba(0, 0, 0, 0.5);
}

.screensaver-overlay.theme-light .screensaver-timer-time {
  color: rgba(0, 0, 0, 0.85);
}

.screensaver-overlay.theme-light .screensaver-music-block {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.screensaver-overlay.theme-light .screensaver-music-label {
  color: rgba(0, 0, 0, 0.4);
}

.screensaver-overlay.theme-light .screensaver-music-title {
  color: rgba(0, 0, 0, 0.7);
}

.screensaver-overlay.theme-light .screensaver-quote-text {
  color: rgba(0, 0, 0, 0.6);
}

.screensaver-overlay.theme-light .screensaver-quote-author {
  color: rgba(0, 0, 0, 0.35);
}

.screensaver-overlay.theme-light .screensaver-hint {
  color: rgba(0, 0, 0, 0.2);
}

/* Zen theme adjustments */
.screensaver-overlay.theme-zen {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.screensaver-overlay.theme-zen.has-wallpaper {
  background: transparent;
}

.screensaver-overlay.theme-zen .screensaver-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(34, 197, 94, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(74, 222, 128, 0.08) 0%, transparent 40%);
}

.screensaver-overlay.theme-zen.has-wallpaper .screensaver-gradient {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%),
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(34, 197, 94, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(16, 185, 129, 0.12) 0%, transparent 50%);
}

/* Settings page screensaver section */
.screensaver-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.screensaver-timeout-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.screensaver-timeout-pill {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}

.screensaver-timeout-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.screensaver-timeout-pill.active {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border-color: transparent;
  color: white;
}

body.light .screensaver-timeout-pill {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

body.light .screensaver-timeout-pill:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}

body.light .screensaver-timeout-pill.active {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border-color: transparent;
  color: white;
}

/* ============================================
   ACTIVITY TIMELINE
   ============================================ */

.activity-with-timeline {
  display: flex;
  gap: 2rem;
  height: 100%;
  min-height: 0;
}

.activity-log-section {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.activity-timeline {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 1.5rem;
  overflow-y: auto;
}

.activity-timeline-header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.activity-timeline-date {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: 0.5rem;
}

.activity-timeline-summary {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
}

.timeline-stat {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.timeline-stat.focus {
  color: rgba(129, 230, 217, 0.9);
}

.timeline-stat.idle,
.timeline-stat.gap {
  color: rgba(255, 255, 255, 0.35);
}

.activity-timeline-track {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 0;
}

.timeline-entry {
  display: grid;
  grid-template-columns: 70px 20px 1fr;
  gap: 0.5rem;
  align-items: stretch;
}

/* Absolute positioned entries */
.timeline-abs-entry {
  display: grid;
  grid-template-columns: 70px 20px 1fr;
  gap: 0.5rem;
  align-items: start;
}

.timeline-line-background {
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}
/* ============================================
   HYPNOTIC BREATHING INTERFACE
   Designed to induce calm, trance-like state
   ============================================ */

.breath-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #000;
  opacity: 1;
}

.breath-overlay.entering {
  animation: fadeIn 0.8s ease-out;
}

.breath-overlay.exiting {
  animation: fadeOut 0.5s ease-out forwards;
}

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

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

/* Theme backgrounds - deep, dark, calming */
.breath-reactor { background: radial-gradient(ellipse at center, #0a0a12 0%, #000 70%); }
.breath-forest { background: radial-gradient(ellipse at center, #0a120a 0%, #020502 70%); }
.breath-ocean { background: radial-gradient(ellipse at center, #0a1218 0%, #020508 70%); }

/* ============================================
   HYPNOTIC RINGS - Concentric circles that pulse
   ============================================ */
.breath-rings {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.breath-ring-outer {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  opacity: 0;
  animation: ringPulseOut 15s ease-out infinite;
}

.breath-ring-outer:nth-child(1) { animation-delay: 0s; }
.breath-ring-outer:nth-child(2) { animation-delay: 3s; }
.breath-ring-outer:nth-child(3) { animation-delay: 6s; }
.breath-ring-outer:nth-child(4) { animation-delay: 9s; }
.breath-ring-outer:nth-child(5) { animation-delay: 12s; }

@keyframes ringPulseOut {
  0% {
    width: 200px;
    height: 200px;
    opacity: 0.3;
  }
  100% {
    width: 800px;
    height: 800px;
    opacity: 0;
  }
}

.breath-reactor .breath-ring-outer { border-color: rgba(0, 255, 255, 0.15); }
.breath-forest .breath-ring-outer { border-color: rgba(74, 222, 128, 0.12); }
.breath-ocean .breath-ring-outer { border-color: rgba(56, 189, 248, 0.12); }

/* ============================================
   SLOW ROTATING SPIRAL GLOW
   ============================================ */
.breath-spiral {
  position: fixed;
  width: 600px;
  height: 600px;
  pointer-events: none;
  opacity: 0.4;
  animation: spiralRotate 60s linear infinite;
}

.breath-spiral::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--glow, rgba(0, 255, 255, 0.08)) 30deg,
    transparent 60deg,
    var(--glow, rgba(0, 255, 255, 0.05)) 120deg,
    transparent 150deg,
    var(--glow, rgba(0, 255, 255, 0.08)) 210deg,
    transparent 240deg,
    var(--glow, rgba(0, 255, 255, 0.05)) 300deg,
    transparent 330deg
  );
  border-radius: 50%;
  filter: blur(30px);
}

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

.breath-reactor .breath-spiral { --glow: rgba(0, 255, 255, 0.08); }
.breath-forest .breath-spiral { --glow: rgba(74, 222, 128, 0.06); }
.breath-ocean .breath-spiral { --glow: rgba(56, 189, 248, 0.07); }

/* ============================================
   MAIN CONTAINER - Gentle float
   ============================================ */
.breath-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  animation: gentleFloat 8s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ============================================
   THE BREATHING CIRCLE - Hypnotic center
   ============================================ */
.breath-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Soft, glowing border */
  border: 2px solid var(--color, #00ffff);
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--color) 5%, transparent) 0%,
    transparent 70%
  );
  
  /* Layered glow for depth */
  box-shadow: 
    0 0 40px color-mix(in srgb, var(--color) 30%, transparent),
    0 0 80px color-mix(in srgb, var(--color) 15%, transparent),
    0 0 120px color-mix(in srgb, var(--color) 8%, transparent),
    inset 0 0 60px color-mix(in srgb, var(--color) 8%, transparent);
  
  transform: scale(0.7);
  transition: border-color 0.8s ease, box-shadow 0.8s ease;
}

/* Inner glow ring */
.breath-circle::before {
  content: '';
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color) 30%, transparent);
  animation: innerRingPulse 4s ease-in-out infinite;
}

@keyframes innerRingPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.02); }
}

/* Breathing animations - SMOOTH like actual lungs */
.breath-circle.breath-phase-inhale {
  animation: lungInhale 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.breath-circle.breath-phase-topup {
  animation: lungTopup 0.5s ease-out forwards;
}

.breath-circle.breath-phase-hold {
  animation: lungHold 4s ease-in-out forwards;
}

.breath-circle.breath-phase-exhale {
  animation: lungExhale 6s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.breath-circle.breath-phase-complete {
  animation: lungComplete 3s ease-in-out infinite;
}

.breath-circle.breath-phase-rest {
  transform: scale(0.7);
  opacity: 0.5;
}

@keyframes lungInhale {
  0% { transform: scale(0.7); }
  100% { transform: scale(1.15); }
}

@keyframes lungTopup {
  0% { transform: scale(1.15); filter: brightness(1); }
  50% { transform: scale(1.2); filter: brightness(1.2); }
  100% { transform: scale(1.15); filter: brightness(1); }
}

@keyframes lungHold {
  0%, 100% { transform: scale(1.15); }
  50% { transform: scale(1.12); }
}

@keyframes lungExhale {
  0% { transform: scale(1.15); }
  100% { transform: scale(0.7); }
}

@keyframes lungComplete {
  0%, 100% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(0.95); opacity: 0.9; }
}

/* ============================================
   CENTER TEXT - Minimal, non-distracting
   ============================================ */
.breath-inner {
  text-align: center;
  z-index: 2;
}

.breath-label {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  margin-bottom: 0.3rem;
  opacity: 0.9;
  transition: color 0.8s ease;
}

.breath-reactor .breath-label {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.breath-forest .breath-label,
.breath-ocean .breath-label {
  font-family: 'Inter', -apple-system, sans-serif;
  text-transform: capitalize;
  letter-spacing: 0.15em;
  font-weight: 300;
}

.breath-instruction {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.1em;
  font-weight: 300;
}

.breath-reactor .breath-instruction {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
}

/* ============================================
   CYCLE COUNTER - Subtle
   ============================================ */
.breath-cycle-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  opacity: 0.6;
}

.breath-cycle-number {
  font-size: 1.5rem;
  font-weight: 200;
  color: var(--color);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.breath-reactor .breath-cycle-number {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
}

.breath-cycle-label {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ============================================
   HINT - Very subtle
   ============================================ */
.breath-hint {
  position: fixed;
  bottom: 2rem;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.12);
  letter-spacing: 0.1em;
  transition: opacity 0.3s ease;
}

.breath-overlay:hover .breath-hint {
  color: rgba(255, 255, 255, 0.25);
}

.breath-reactor .breath-hint {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

/* ============================================
   THEME PICKER - Minimal
   ============================================ */
.breath-theme-btn {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.breath-theme-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.breath-theme-menu {
  position: fixed;
  top: 4.5rem;
  right: 1.5rem;
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.5rem;
  backdrop-filter: blur(20px);
  z-index: 10;
  animation: menuFade 0.2s ease-out;
}

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

.breath-theme-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: none;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}

.breath-theme-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.breath-theme-item.active {
  background: rgba(255, 255, 255, 0.1);
}

/* AI Chat uses global --accent / --accent-rgb from themes.css (set via Settings > Accent) */

/* AI Context Mention & Hashtag Menus - Hardened */
.ai-chat-mention-menu {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--os-context-bg) !important;
  border: 2px solid var(--accent) !important;
  border-radius: 12px !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5) !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  animation: slideUpFade 0.15s ease-out !important;
}

body.light .ai-chat-mention-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15) !important;
}

.ai-chat-mention-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

body.light .ai-chat-mention-header {
  background: rgba(0, 0, 0, 0.02) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

.ai-chat-mention-list {
  max-height: 300px !important;
  overflow-y: auto !important;
  padding: 0.5rem 0 !important;
}

.ai-chat-mention-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 0.6rem 1rem !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.85rem !important;
  text-align: left !important;
  cursor: pointer !important;
}

.ai-chat-mention-item:hover,
.ai-chat-mention-item.selected {
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: #fff !important;
}

body.light .ai-chat-mention-item {
  color: rgba(0, 0, 0, 0.75) !important;
}

body.light .ai-chat-mention-item:hover,
body.light .ai-chat-mention-item.selected {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent) !important;
}

.ai-chat-mention-title {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ai-chat-mention-type {
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 0.1rem 0.4rem !important;
  border-radius: 4px !important;
}

body.light .ai-chat-mention-type {
  color: rgba(0, 0, 0, 0.4) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

/* News item styling */
.ai-chat-mention-item.news-item {
  border-left: 2px solid #c9a227 !important;
}

.ai-chat-mention-item.news-item:hover,
.ai-chat-mention-item.news-item.selected {
  background: rgba(201, 162, 39, 0.12) !important;
  border-left-color: #e6c74c !important;
}

.ai-chat-mention-type.news-type {
  background: rgba(201, 162, 39, 0.2) !important;
  color: #c9a227 !important;
}

body.light .ai-chat-mention-item.news-item {
  border-left-color: #8b6914 !important;
}

body.light .ai-chat-mention-item.news-item:hover,
body.light .ai-chat-mention-item.news-item.selected {
  background: rgba(139, 105, 20, 0.1) !important;
}

body.light .ai-chat-mention-type.news-type {
  background: rgba(139, 105, 20, 0.15) !important;
  color: #8b6914 !important;
}

.ai-chat-mention-hint {
  padding: 0.6rem 1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.35) !important;
  display: flex !important;
  gap: 1rem !important;
}

body.light .ai-chat-mention-hint {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.4) !important;
}

/* AI Chat Overlay & Panel */
.ai-chat-overlay {
  position: fixed !important;
  top: 28px !important;
  right: 0 !important;
  bottom: 80px !important;
  left: auto !important;
  /* Width is set via inline style for dynamic sizing */
  max-width: 100vw !important;
  z-index: 99000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s, width 0.15s ease-out;
  overflow: hidden;
}

/* Drop below maximized app windows */
.ai-chat-overlay.app-maximized {
  z-index: 10002;
}

.ai-chat-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Focus mode specific - ensure proper positioning */
.ai-chat-overlay.focus-mode,
.ai-chat-overlay.thoughts-focus-mode,
.ai-chat-overlay.daily-focus-mode,
.ai-chat-overlay.activity-focus-mode,
.ai-chat-overlay.notes-focus-mode {
  /* Width is set via inline style */
  left: auto !important;
  right: 0 !important;
}

/* When maximized, overlay takes full width */
.ai-chat-overlay.maximized,
.ai-chat-overlay.thoughts-focus-mode.maximized,
.ai-chat-overlay.daily-focus-mode.maximized,
.ai-chat-overlay.activity-focus-mode.maximized,
.ai-chat-overlay.notes-focus-mode.maximized {
  width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
}

/* Standalone mode - fills the entire browser tab */
.ai-chat-overlay.standalone {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
}

/* When maximized in focus mode, overlay takes full width */
.ai-chat-overlay.focus-mode.maximized {
  width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
}

.ai-chat-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  /* Glassmorphism — uses OS glass variables so gray theme applies */
  background: var(--os-glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-left: 1px solid var(--os-glass-border);
  box-shadow:
    -8px 0 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
  pointer-events: auto;
  overflow: hidden;
  box-sizing: border-box;
  /* Ensure all children are constrained */
  contain: layout style;
}

/* Top shine effect for glassmorphism - matching desktop widgets */
.ai-chat-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Ensure all direct children of panel are properly constrained */
.ai-chat-panel > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Ensure all descendants are contained within their parent width */
.ai-chat-panel * {
  box-sizing: border-box;
  min-width: 0;
}

.ai-chat-panel.open {
  transform: translateX(0) !important;
}

/* Bonded window state - matching accent border on left edge */
.ai-chat-panel.open.has-bonded-window {
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  position: relative;
  box-shadow:
    -8px 0 32px rgba(0, 0, 0, 0.4),
    inset 12px 0 40px -30px rgba(var(--accent-rgb), 0.08);
}

/* Soft glow on the left edge */
.ai-chat-panel.open.has-bonded-window::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-rgb), 0.1) 0%,
    rgba(var(--accent-rgb), 0.4) 50%,
    rgba(var(--accent-rgb), 0.1) 100%
  );
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
  animation: panelBondEdgeGlow 4s ease-in-out infinite;
  z-index: 100;
  pointer-events: none;
}

/* Resize grip handle on AI panel left edge */
.ai-panel-resize-grip {
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: col-resize;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-panel-resize-grip::before {
  content: '';
  width: 6px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  transition: all 0.15s ease;
}

.ai-panel-resize-grip:hover::before {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
  width: 8px;
  height: 64px;
}

.has-bonded-window .ai-panel-resize-grip::before {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}

body.light .ai-panel-resize-grip::before {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .ai-panel-resize-grip:hover::before {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: none;
}

@keyframes panelBondEdgeGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.2);
    opacity: 0.7;
  }
  50% {
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.35);
    opacity: 1;
  }
}

/* Smooth transition when bond is released */
.ai-chat-panel.open:not(.has-bonded-window) {
  transition: 
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s,
    box-shadow 0.3s ease,
    border-left 0.3s ease;
}

/* Focus mode specific - constrain panel width */
.ai-chat-panel.focus-mode,
.ai-chat-panel.thoughts-focus-mode,
.ai-chat-panel.daily-focus-mode,
.ai-chat-panel.activity-focus-mode,
.ai-chat-panel.notes-focus-mode {
  width: 100% !important;
  /* max-width is controlled by parent overlay's inline style */
}

.ai-chat-panel.maximized {
  width: 100% !important;
  max-width: 100% !important;
  border-left: none;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.85) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

/* Maximized overrides focus-mode width */
.ai-chat-panel.focus-mode.maximized {
  max-width: 100% !important;
}

.ai-chat-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 0.75rem 0 1rem;
  background: transparent;
  border-bottom: 1px solid var(--os-divider);
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ai-chat-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--os-text-muted);
  letter-spacing: 0.3px;
}

.ai-chat-title svg {
  opacity: 0.5;
}

.ai-chat-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.ai-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-chat-btn:hover {
  background: var(--os-hover-bg);
  color: var(--os-text-primary);
}

.ai-chat-btn.active { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.ai-chat-btn.clear:hover { color: #f87171; background: rgba(239, 68, 68, 0.1); }
.ai-chat-btn.maximize:hover { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.ai-chat-btn.close:hover { color: var(--os-text-primary); background: var(--os-hover-bg); }

/* ── Bond Banner ────────────────────────────────────────────────────── */
.ai-chat-bonded-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: rgba(var(--accent-rgb), 0.22);
  border-top: 1px solid rgba(var(--accent-rgb), 0.45);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
  padding: 0.55rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  animation: bondedRowIn 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Shimmer sweep on entry */
.ai-chat-bonded-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(var(--accent-rgb), 0.12) 50%,
    transparent 70%
  );
  animation: bondRowShimmer 0.6s ease-out forwards;
  pointer-events: none;
}

/* Left accent bar */
.ai-chat-bonded-row::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-rgb), 0.6) 0%,
    rgba(var(--accent-rgb), 1) 50%,
    rgba(var(--accent-rgb), 0.6) 100%
  );
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
  animation: bondBarPulse 3s ease-in-out infinite;
}

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

@keyframes bondRowShimmer {
  from { transform: translateX(-100%); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

@keyframes bondBarPulse {
  0%, 100% { opacity: 0.7; box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4); }
  50%       { opacity: 1;   box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7); }
}

/* Live dot */
.ai-chat-bond-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 1);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.8);
  flex-shrink: 0;
  animation: bondLiveDot 2s ease-in-out infinite;
}

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

/* Label area: dot + "BONDED" label + app chip */
.ai-chat-bonded-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-left: 0.35rem;
}

.ai-chat-bond-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}

/* App chip */
.ai-chat-bond-app-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  background: rgba(var(--accent-rgb), 0.18);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-light, rgba(var(--accent-rgb), 0.95));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ai-chat-bond-app-chip:hover {
  background: rgba(var(--accent-rgb), 0.28);
  border-color: rgba(var(--accent-rgb), 0.55);
}

.ai-chat-bond-app-chip svg {
  flex-shrink: 0;
  color: var(--accent);
}

.ai-chat-bond-app-chip .bond-chip-close {
  display: flex;
  align-items: center;
  margin-left: 0.15rem;
  opacity: 0.5;
  transition: opacity 0.12s;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}

.ai-chat-bond-app-chip:hover .bond-chip-close {
  opacity: 1;
}

/* Multi-Bond Tabs */
.ai-chat-bonded-tabs {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  overflow-x: auto;
  min-width: 0;
  padding-left: 0.25rem;
  position: relative;
  z-index: 1;
}

.ai-chat-bonded-tabs::-webkit-scrollbar { display: none; }

.ai-chat-bonded-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.75);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-chat-bonded-tab svg { color: rgba(var(--accent-rgb), 0.6); }

.ai-chat-bonded-tab:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-light);
}

.ai-chat-bonded-tab.active {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--accent-lighter, #fff);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}

.ai-chat-bonded-tab.active svg { color: var(--accent-light); }

.ai-chat-bonded-tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 0.1rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: inherit;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.12s;
}

.ai-chat-bonded-tab:hover .ai-chat-bonded-tab-close { opacity: 1; }
.ai-chat-bonded-tab-close:hover { background: rgba(255,255,255,0.15); color: #fff; opacity: 1; }
.ai-chat-bonded-tab.active .ai-chat-bonded-tab-close:hover { background: rgba(var(--accent-rgb), 0.3); }

/* Multi-bond layout tweak */
.ai-chat-bonded-row.multi-bond { padding: 0.45rem 0.6rem; }
.ai-chat-bonded-row.multi-bond::after { display: none; }

/* Light theme */
body.light .ai-chat-bonded-row {
  background: rgba(var(--accent-rgb), 0.15);
  border-top-color: rgba(var(--accent-rgb), 0.35);
  border-bottom-color: rgba(var(--accent-rgb), 0.2);
}

body.light .ai-chat-bond-label { color: rgba(var(--accent-rgb), 0.6); }
body.light .ai-chat-bond-live-dot { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.6); }

body.light .ai-chat-bond-app-chip {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}

body.light .ai-chat-bond-app-chip:hover {
  background: rgba(var(--accent-rgb), 0.18);
}

body.light .ai-chat-bonded-tab {
  background: rgba(var(--accent-rgb), 0.07);
  border-color: rgba(var(--accent-rgb), 0.18);
  color: rgba(var(--accent-rgb), 0.7);
}

body.light .ai-chat-bonded-tab:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

body.light .ai-chat-bonded-tab.active {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--accent-dark);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2);
}

body.light .ai-chat-bonded-tab-close:hover { background: rgba(0,0,0,0.1); color: #000; }
body.light .ai-chat-bonded-tab.active .ai-chat-bonded-tab-close:hover { background: rgba(var(--accent-rgb), 0.2); }

/* Bonded Action Button */
.ai-chat-bonded-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-chat-bonded-action:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-light);
}

.ai-chat-bonded-action:active {
  transform: scale(0.95);
}

body.light .ai-chat-bonded-action {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

body.light .ai-chat-bonded-action:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-dark);
}

/* Context Inspector — fullscreen dialog */
.ai-context-inspector-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.15s ease-out;
}

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

.ai-context-inspector-dialog {
  width: 720px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 30, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.ai-context-inspector-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.ai-context-inspector-header svg:first-child {
  color: var(--accent);
  opacity: 0.8;
}

.ai-context-inspector-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.ai-context-inspector-meta {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}

.ai-context-inspector-copy {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  margin-left: 4px;
  transition: all 0.15s ease;
}

.ai-context-inspector-copy:hover {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.ai-context-inspector-copy.copied {
  color: #4ade80;
}

.ai-context-inspector-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  margin-left: 4px;
}

.ai-context-inspector-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.ai-context-inspector-body {
  flex: 1;
  overflow: auto;
  padding: 18px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.ai-context-inspector-body::-webkit-scrollbar {
  width: 6px;
}

.ai-context-inspector-body::-webkit-scrollbar-track {
  background: transparent;
}

.ai-context-inspector-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.ai-context-inspector-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Context tab — markdown rendering */
.ai-context-inspector-context {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ai-context-inspector-context .markdown-block {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.ai-context-inspector-context .markdown-block h1,
.ai-context-inspector-context .markdown-block h2,
.ai-context-inspector-context .markdown-block h3,
.ai-context-inspector-context .markdown-block h4 {
  color: rgba(255, 255, 255, 0.92);
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  font-weight: 600;
}

.ai-context-inspector-context .markdown-block h1 { font-size: 16px; }
.ai-context-inspector-context .markdown-block h2 { font-size: 14px; }
.ai-context-inspector-context .markdown-block h3 { font-size: 13px; }

.ai-context-inspector-context .markdown-block p {
  margin: 0.4em 0;
}

.ai-context-inspector-context .markdown-block ul,
.ai-context-inspector-context .markdown-block ol {
  padding-left: 1.4em;
  margin: 0.3em 0;
}

.ai-context-inspector-context .markdown-block li {
  margin: 0.15em 0;
}

.ai-context-inspector-context .markdown-block code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent-light);
}

.ai-context-inspector-context .markdown-block pre {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0.5em 0;
  overflow-x: auto;
}

.ai-context-inspector-context .markdown-block pre code {
  background: none;
  padding: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}

.ai-context-inspector-context .markdown-block strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.ai-context-inspector-context .markdown-block em {
  color: rgba(255, 255, 255, 0.65);
}

.ai-context-inspector-context .markdown-block hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 1em 0;
}

.ai-context-inspector-context .markdown-block blockquote {
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  padding-left: 12px;
  margin: 0.5em 0;
  color: rgba(255, 255, 255, 0.6);
}

/* Inspector section labels & loading */
.ai-context-inspector-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 10px;
  margin-top: 8px;
}

.ai-context-inspector-section-label:first-child {
  margin-top: 0;
}

.ai-context-inspector-loading {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  padding: 40px 0;
  text-align: center;
}

.ai-context-inspector-context hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 16px 0;
}

/* Inspector Tabs */
.ai-context-inspector-tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 2px;
}

.ai-context-inspector-tab {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-context-inspector-tab:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

.ai-context-inspector-tab.active {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.1);
}

/* Bond Tab Content */
.ai-context-inspector-bond {
  white-space: normal;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.bond-section {
  margin-bottom: 18px;
}

.bond-section:last-child {
  margin-bottom: 0;
}

.bond-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 6px;
}

.bond-section-value {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.bond-section-pre {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'SF Mono', 'Fira Code', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 200px;
  overflow: auto;
}

.bond-section-instructions {
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 240px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.bond-section-instructions::-webkit-scrollbar {
  width: 5px;
}

.bond-section-instructions::-webkit-scrollbar-track {
  background: transparent;
}

.bond-section-instructions::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.bond-section-instructions .markdown-block {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

.bond-section-instructions .markdown-block h1,
.bond-section-instructions .markdown-block h2,
.bond-section-instructions .markdown-block h3 {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  font-weight: 600;
}

.bond-section-instructions .markdown-block h2 { font-size: 13px; }
.bond-section-instructions .markdown-block h3 { font-size: 12px; }

.bond-section-instructions .markdown-block p {
  margin: 0.3em 0;
}

.bond-section-instructions .markdown-block ul,
.bond-section-instructions .markdown-block ol {
  padding-left: 1.3em;
  margin: 0.2em 0;
}

.bond-section-instructions .markdown-block li {
  margin: 0.1em 0;
}

.bond-section-instructions .markdown-block code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent-light);
}

.bond-section-instructions .markdown-block strong {
  color: rgba(255, 255, 255, 0.85);
}

.bond-tools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bond-tool-item {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.bond-tool-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.bond-tool-type {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.bond-tool-type.read {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}

.bond-tool-type.write {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

.bond-tool-type.action {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.bond-tool-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.bond-tool-badge {
  font-size: 9px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}

.bond-tool-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.45;
}

.bond-tool-params {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.bond-tool-param {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

.bond-tool-param code {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
}

.bond-tool-param-type {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
}

/* Bond Channel (Inspector App tab) */
.bond-channel-cooldowns {
  padding: 6px 12px;
}

.bond-channel-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.72rem;
}

.bond-channel-type {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 1px 6px;
  border-radius: 3px;
}

.bond-channel-time {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.68rem;
}

.bond-channel-history {
  padding: 6px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bond-channel-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.7rem;
  color: rgba(var(--accent-rgb), 0.5);
}

.bond-channel-msg svg {
  opacity: 0.4;
  flex-shrink: 0;
}

.bond-channel-msg-type {
  color: rgba(255, 255, 255, 0.5);
}

.bond-channel-msg-time {
  color: rgba(255, 255, 255, 0.25);
  margin-left: auto;
  font-size: 0.65rem;
}

body.light .bond-channel-type {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

body.light .bond-channel-time {
  color: rgba(0, 0, 0, 0.35);
}

body.light .bond-channel-msg {
  color: rgba(var(--accent-rgb), 0.5);
}

body.light .bond-channel-msg-type {
  color: rgba(0, 0, 0, 0.5);
}

body.light .bond-channel-msg-time {
  color: rgba(0, 0, 0, 0.25);
}

/* Inspector Groups & Collapsible Sections */
.inspector-group {
  margin-bottom: 16px;
}

.inspector-group:last-child {
  margin-bottom: 0;
}

.inspector-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}

.inspector-group-header svg {
  opacity: 0.7;
}

.inspector-group-meta {
  margin-left: auto;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.inspector-group-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s ease;
}

.inspector-group-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.inspector-section {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  margin-bottom: 4px;
  overflow: hidden;
}

.inspector-section:last-child {
  margin-bottom: 0;
}

.inspector-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.15s ease;
  user-select: none;
}

.inspector-section-header:hover {
  background: rgba(255, 255, 255, 0.06);
}

.inspector-section-header svg:first-child {
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.inspector-section-title {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inspector-section-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.inspector-section-meta svg {
  color: rgba(255, 255, 255, 0.2);
}

.inspector-section-source {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  font-family: 'SF Mono', 'Fira Code', monospace;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inspector-section-chars {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

.inspector-section-copy {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: all 0.15s ease;
}

.inspector-section-header:hover .inspector-section-copy {
  opacity: 1;
}

.inspector-section-copy:hover {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.inspector-section-copy.copied {
  opacity: 1;
  color: #4ade80;
}

.inspector-section-content {
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.inspector-section-content::-webkit-scrollbar {
  width: 5px;
}

.inspector-section-content::-webkit-scrollbar-track {
  background: transparent;
}

.inspector-section-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.inspector-section-content .markdown-block {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

.inspector-section-content .markdown-block h1,
.inspector-section-content .markdown-block h2,
.inspector-section-content .markdown-block h3 {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  font-weight: 600;
}

.inspector-section-content .markdown-block h1 { font-size: 14px; }
.inspector-section-content .markdown-block h2 { font-size: 13px; }
.inspector-section-content .markdown-block h3 { font-size: 12px; }

.inspector-section-content .markdown-block p {
  margin: 0.3em 0;
}

.inspector-section-content .markdown-block ul,
.inspector-section-content .markdown-block ol {
  padding-left: 1.3em;
  margin: 0.2em 0;
}

.inspector-section-content .markdown-block li {
  margin: 0.1em 0;
}

.inspector-section-content .markdown-block code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent-light);
}

.inspector-section-content .markdown-block pre {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0.5em 0;
  overflow-x: auto;
}

.inspector-section-content .markdown-block pre code {
  background: none;
  padding: 0;
  font-size: 10.5px;
}

.inspector-section-content .markdown-block strong {
  color: rgba(255, 255, 255, 0.85);
}

.inspector-section-content .markdown-block hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 10px 0;
}

.inspector-section-content .markdown-block blockquote {
  border-left: 2px solid rgba(var(--accent-rgb), 0.3);
  padding-left: 10px;
  margin: 0.4em 0;
  color: rgba(255, 255, 255, 0.55);
}

/* Light theme — Inspector section labels */
body.light .ai-context-inspector-section-label {
  color: var(--accent);
}

body.light .ai-context-inspector-loading {
  color: rgba(0, 0, 0, 0.35);
}

body.light .ai-context-inspector-context hr {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Light theme — Inspector Tabs & Bond */
body.light .ai-context-inspector-tabs {
  background: rgba(0, 0, 0, 0.05);
}

body.light .ai-context-inspector-tab {
  color: rgba(0, 0, 0, 0.4);
}

body.light .ai-context-inspector-tab:hover {
  color: rgba(0, 0, 0, 0.65);
  background: rgba(0, 0, 0, 0.04);
}

body.light .ai-context-inspector-tab.active {
  color: rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.08);
}

body.light .bond-section-label {
  color: rgba(0, 0, 0, 0.4);
}

body.light .bond-section-value {
  color: rgba(0, 0, 0, 0.75);
}

body.light .bond-section-pre {
  color: rgba(0, 0, 0, 0.65);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .bond-section-instructions {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

body.light .bond-section-instructions .markdown-block {
  color: rgba(0, 0, 0, 0.6);
}

body.light .bond-section-instructions .markdown-block h1,
body.light .bond-section-instructions .markdown-block h2,
body.light .bond-section-instructions .markdown-block h3 {
  color: rgba(0, 0, 0, 0.8);
}

body.light .bond-section-instructions .markdown-block code {
  background: rgba(0, 0, 0, 0.06);
  color: var(--accent);
}

body.light .bond-section-instructions .markdown-block strong {
  color: rgba(0, 0, 0, 0.8);
}

body.light .bond-tool-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .bond-tool-name {
  color: rgba(0, 0, 0, 0.85);
}

body.light .bond-tool-desc {
  color: rgba(0, 0, 0, 0.5);
}

body.light .bond-tool-param {
  background: rgba(0, 0, 0, 0.04);
}

body.light .bond-tool-param code {
  color: rgba(0, 0, 0, 0.65);
}

body.light .bond-tool-param-type {
  color: rgba(0, 0, 0, 0.35);
}

body.light .ai-context-inspector-overlay {
  background: rgba(0, 0, 0, 0.3);
}

body.light .ai-context-inspector-dialog {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
}

body.light .ai-context-inspector-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .ai-context-inspector-header svg:first-child {
  color: var(--accent);
}

body.light .ai-context-inspector-title {
  color: rgba(0, 0, 0, 0.85);
}

body.light .ai-context-inspector-meta {
  color: rgba(0, 0, 0, 0.35);
}

body.light .ai-context-inspector-copy {
  color: rgba(0, 0, 0, 0.3);
}

body.light .ai-context-inspector-copy:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}

body.light .ai-context-inspector-copy.copied {
  color: #16a34a;
}

body.light .ai-context-inspector-close {
  color: rgba(0, 0, 0, 0.35);
}

body.light .ai-context-inspector-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}

body.light .ai-context-inspector-body {
  color: rgba(0, 0, 0, 0.65);
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

body.light .ai-context-inspector-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}

body.light .ai-context-inspector-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.18);
}

body.light .ai-context-inspector-context .markdown-block {
  color: rgba(0, 0, 0, 0.7);
}

body.light .ai-context-inspector-context .markdown-block h1,
body.light .ai-context-inspector-context .markdown-block h2,
body.light .ai-context-inspector-context .markdown-block h3,
body.light .ai-context-inspector-context .markdown-block h4 {
  color: rgba(0, 0, 0, 0.85);
}

body.light .ai-context-inspector-context .markdown-block code {
  background: rgba(0, 0, 0, 0.06);
  color: var(--accent);
}

body.light .ai-context-inspector-context .markdown-block pre {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .ai-context-inspector-context .markdown-block pre code {
  color: rgba(0, 0, 0, 0.65);
}

body.light .ai-context-inspector-context .markdown-block strong {
  color: rgba(0, 0, 0, 0.85);
}

body.light .ai-context-inspector-context .markdown-block em {
  color: rgba(0, 0, 0, 0.55);
}

body.light .ai-context-inspector-context .markdown-block hr {
  border-top-color: rgba(0, 0, 0, 0.08);
}

body.light .ai-context-inspector-context .markdown-block blockquote {
  border-left-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(0, 0, 0, 0.5);
}

/* Light theme — Inspector Groups & Sections */
body.light .inspector-group-header {
  color: var(--accent);
  border-bottom-color: rgba(var(--accent-rgb), 0.12);
}

body.light .inspector-group-meta {
  color: rgba(0, 0, 0, 0.3);
}

body.light .inspector-group-toggle {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.35);
}

body.light .inspector-group-toggle:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

body.light .inspector-section {
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .inspector-section-header {
  background: rgba(0, 0, 0, 0.02);
}

body.light .inspector-section-header:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .inspector-section-header svg:first-child {
  color: rgba(0, 0, 0, 0.3);
}

body.light .inspector-section-title {
  color: rgba(0, 0, 0, 0.75);
}

body.light .inspector-section-meta svg {
  color: rgba(0, 0, 0, 0.2);
}

body.light .inspector-section-source {
  color: rgba(0, 0, 0, 0.25);
}

body.light .inspector-section-chars {
  color: rgba(0, 0, 0, 0.2);
}

body.light .inspector-section-copy {
  color: rgba(0, 0, 0, 0.2);
}

body.light .inspector-section-copy:hover {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.06);
}

body.light .inspector-section-copy.copied {
  color: #16a34a;
}

body.light .inspector-section-content {
  border-top-color: rgba(0, 0, 0, 0.04);
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

body.light .inspector-section-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}

body.light .inspector-section-content .markdown-block {
  color: rgba(0, 0, 0, 0.65);
}

body.light .inspector-section-content .markdown-block h1,
body.light .inspector-section-content .markdown-block h2,
body.light .inspector-section-content .markdown-block h3 {
  color: rgba(0, 0, 0, 0.8);
}

body.light .inspector-section-content .markdown-block code {
  background: rgba(0, 0, 0, 0.06);
  color: var(--accent);
}

body.light .inspector-section-content .markdown-block pre {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .inspector-section-content .markdown-block pre code {
  color: rgba(0, 0, 0, 0.65);
}

body.light .inspector-section-content .markdown-block strong {
  color: rgba(0, 0, 0, 0.8);
}

body.light .inspector-section-content .markdown-block hr {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .inspector-section-content .markdown-block blockquote {
  border-left-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(0, 0, 0, 0.5);
}

/* Bonded Row with Vibe Mode Active */
.ai-chat-bonded-row.vibe-active {
  background: linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.15) 0%,
    rgba(139, 92, 246, 0.1) 30%,
    rgba(236, 72, 153, 0.08) 70%,
    rgba(16, 185, 129, 0.12) 100%
  );
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #10b981, #8b5cf6, #ec4899, #10b981) 1;
  overflow: visible;
  padding: 0.65rem 0.85rem;
  position: relative;
}

.ai-chat-bonded-row.vibe-active::after {
  background: linear-gradient(
    180deg,
    #10b981 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
  width: 3px;
  box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.5);
}

/* Vibe Mode Indicator - shown when vibe mode is active */
.ai-chat-vibe-indicator {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  border: none;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.9) 0%,
    rgba(139, 92, 246, 0.85) 50%,
    rgba(236, 72, 153, 0.8) 100%
  );
  color: white;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  position: relative;
  overflow: visible;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Glow ring */
.ai-chat-vibe-indicator::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    #10b981 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
  z-index: -1;
  filter: blur(6px);
  opacity: 0.7;
}

.ai-chat-vibe-indicator:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.ai-chat-vibe-indicator svg {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

body.light .ai-chat-bonded-row.vibe-active {
  background: linear-gradient(
    90deg,
    rgba(5, 150, 105, 0.12) 0%,
    rgba(124, 58, 237, 0.08) 30%,
    rgba(219, 39, 119, 0.06) 70%,
    rgba(5, 150, 105, 0.1) 100%
  );
  border-image: linear-gradient(90deg, #059669, #7c3aed, #db2777, #059669) 1;
}

body.light .ai-chat-bonded-row.vibe-active::after {
  background: linear-gradient(
    180deg,
    #059669 0%,
    #7c3aed 50%,
    #db2777 100%
  );
  box-shadow: 0 0 6px 2px rgba(5, 150, 105, 0.4);
}

body.light .ai-chat-vibe-indicator {
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, 0.95) 0%,
    rgba(124, 58, 237, 0.9) 50%,
    rgba(219, 39, 119, 0.85) 100%
  );
  color: white;
}

body.light .ai-chat-vibe-indicator::before {
  background: linear-gradient(
    135deg,
    #059669 0%,
    #7c3aed 50%,
    #db2777 100%
  );
}

/* Tool-only messages (no text content, just action indicator) - compact inline row */
.ai-chat-message.tool-only {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

.ai-chat-message.tool-only .ai-chat-message-avatar {
  align-self: center;
  opacity: 0.5;
  margin-bottom: 0;
}

.ai-chat-message.tool-only .ai-chat-message-content {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-chat-message.tool-only .ai-chat-tool-calls {
  margin-bottom: 0;
}

/* Tool Call Results - Show tool name and message */
.ai-chat-tool-calls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.ai-chat-tool-result {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-chat-tool-result.success {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}

.ai-chat-tool-result.error {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.12);
}

.ai-chat-tool-result:hover {
  transform: none;
}

.ai-chat-tool-result.success:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.ai-chat-tool-result.error:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

.ai-chat-tool-result-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.ai-chat-tool-result.success .ai-chat-tool-result-header {
  color: var(--accent-light);
}

.ai-chat-tool-result.success .ai-chat-tool-result-header svg {
  color: var(--accent);
}

.ai-chat-tool-result.error .ai-chat-tool-result-header {
  color: #fca5a5;
}

.ai-chat-tool-result.error .ai-chat-tool-result-header svg {
  color: #f87171;
}

.ai-chat-tool-name {
  text-transform: capitalize;
}

.ai-chat-tool-duration {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Inline message for simple results */
.ai-chat-tool-inline-message {
  margin-left: 0.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
}

.ai-chat-tool-inline-message::before {
  content: '→ ';
  opacity: 0.5;
}

/* Rich message with markdown */
.ai-chat-tool-rich-message {
  padding: 0.5rem 0 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.ai-chat-tool-rich-message p {
  margin: 0.25rem 0;
}

.ai-chat-tool-rich-message strong {
  color: rgba(255, 255, 255, 0.95);
}

.ai-chat-tool-rich-message ul,
.ai-chat-tool-rich-message ol {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

.ai-chat-tool-rich-message li {
  margin: 0.15rem 0;
}

/* Rich result styling */
.ai-chat-tool-result.rich {
  padding: 0.6rem 0.75rem;
}

.ai-chat-tool-result.rich .ai-chat-tool-result-header {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.25rem;
}

.ai-chat-tool-result-message {
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  padding-left: 1.1rem;
}

.ai-chat-tool-result-message.error {
  color: #fca5a5;
  padding-left: 0;
  padding-top: 0.25rem;
}

/* Implement missing tool button */
.ai-chat-implement-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.15));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-chat-implement-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.25));
  border-color: rgba(var(--accent-rgb), 0.5);
  transform: translateY(-1px);
}

.ai-chat-implement-btn:active {
  transform: translateY(0);
}

/* Light theme */
body.light .ai-chat-tool-result.success {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.12);
}

body.light .ai-chat-tool-result.success:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
}

body.light .ai-chat-tool-result.success .ai-chat-tool-result-header {
  color: #4f46e5;
}

body.light .ai-chat-tool-result.success .ai-chat-tool-result-header svg {
  color: #6366f1;
}

body.light .ai-chat-tool-result.error {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.12);
}

body.light .ai-chat-tool-result.error:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

body.light .ai-chat-tool-result.error .ai-chat-tool-result-header {
  color: #dc2626;
}

body.light .ai-chat-tool-result.error .ai-chat-tool-result-header svg {
  color: #ef4444;
}

body.light .ai-chat-tool-duration {
  color: rgba(0, 0, 0, 0.35);
}

body.light .ai-chat-tool-result-message {
  color: #1e293b;
}

body.light .ai-chat-tool-result-message.error {
  color: #dc2626;
}

body.light .ai-chat-tool-inline-message {
  color: rgba(0, 0, 0, 0.6);
}

body.light .ai-chat-tool-rich-message {
  color: #1e293b;
}

body.light .ai-chat-tool-rich-message strong {
  color: #0f172a;
}

body.light .ai-chat-tool-result.rich .ai-chat-tool-result-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .ai-chat-implement-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.08));
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}

body.light .ai-chat-implement-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.15));
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* Tool Call Detail Modal */
.ai-chat-tool-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100010;
  animation: fadeIn 0.15s ease;
}

.ai-chat-tool-modal-content {
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease;
}

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

.ai-chat-tool-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-chat-tool-modal-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  text-transform: capitalize;
}

.ai-chat-tool-modal-title svg {
  color: var(--accent);
}

.ai-chat-tool-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-chat-tool-modal-copy {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  padding: 0.4rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.15s ease;
}

.ai-chat-tool-modal-copy:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ai-chat-tool-modal-copy.copied {
  color: #4ade80;
}

.ai-chat-tool-modal-close {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  padding: 0.4rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.15s ease;
}

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

.ai-chat-tool-modal-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ai-chat-tool-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-chat-tool-section-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
}

.ai-chat-tool-section-label.success {
  color: #4ade80;
}

.ai-chat-tool-section-label.success svg {
  color: #22c55e;
}

.ai-chat-tool-section-label.error {
  color: #f87171;
}

.ai-chat-tool-section-label.error svg {
  color: #ef4444;
}

.ai-chat-tool-section-label.user {
  color: #60a5fa;
}

.ai-chat-tool-section-label.user svg {
  color: #3b82f6;
}

.ai-chat-tool-code.user-message {
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
}

.ai-chat-tool-code {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #e2e8f0;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-chat-tool-code.error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

body.light .ai-chat-tool-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .ai-chat-tool-modal-header {
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .ai-chat-tool-modal-title {
  color: #1e293b;
}

body.light .ai-chat-tool-modal-copy {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
}

body.light .ai-chat-tool-modal-copy:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1e293b;
}

body.light .ai-chat-tool-modal-copy.copied {
  color: #16a34a;
}

body.light .ai-chat-tool-modal-close {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
}

body.light .ai-chat-tool-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1e293b;
}

body.light .ai-chat-tool-section-label {
  color: rgba(0, 0, 0, 0.5);
}

body.light .ai-chat-tool-section-label.user {
  color: #2563eb;
}

body.light .ai-chat-tool-code.user-message {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.15);
  color: #1e40af;
}

body.light .ai-chat-tool-code {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #334155;
}

body.light .ai-chat-tool-code.error {
  background: rgba(239, 68, 68, 0.05);
  color: #dc2626;
}

/* Debug Modal - Request/Response Viewer */
.ai-chat-debug-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  animation: fadeIn 0.15s ease-out;
}

.ai-chat-debug-modal-content {
  background: rgba(20, 20, 25, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease-out;
}

.ai-chat-debug-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.ai-chat-debug-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.ai-chat-debug-modal-title svg {
  color: var(--accent);
}

.ai-chat-debug-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-chat-debug-copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-chat-debug-copy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ai-chat-debug-copy-btn.small {
  padding: 4px 8px;
  font-size: 0.7rem;
}

.ai-chat-debug-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

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

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

.ai-chat-debug-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-chat-debug-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-chat-debug-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.ai-chat-debug-section-label svg {
  color: #60a5fa;
}

.ai-chat-debug-section-label.success svg {
  color: #4ade80;
}

.ai-chat-debug-section-label.tool svg {
  color: var(--accent);
}

.ai-chat-debug-section-label.error svg {
  color: #f87171;
}

.ai-chat-debug-code {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 350px;
  overflow-y: auto;
}

/* Light theme for debug modal */
body.light .ai-chat-debug-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .ai-chat-debug-modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .ai-chat-debug-modal-title {
  color: #1e293b;
}

body.light .ai-chat-debug-modal-title svg {
  color: var(--accent);
}

body.light .ai-chat-debug-copy-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

body.light .ai-chat-debug-copy-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1e293b;
}

body.light .ai-chat-debug-modal-close {
  color: rgba(0, 0, 0, 0.4);
}

body.light .ai-chat-debug-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1e293b;
}

body.light .ai-chat-debug-section-label {
  color: rgba(0, 0, 0, 0.5);
}

body.light .ai-chat-debug-section-label svg {
  color: #2563eb;
}

body.light .ai-chat-debug-section-label.success svg {
  color: #16a34a;
}

body.light .ai-chat-debug-section-label.tool svg {
  color: var(--accent);
}

body.light .ai-chat-debug-section-label.error svg {
  color: #dc2626;
}

body.light .ai-chat-debug-code {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #334155;
}

/* Tool Metrics */
.ai-chat-debug-section-label.metrics svg {
  color: #38bdf8;
}

.ai-chat-debug-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-chat-debug-metric-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.75rem;
}

.ai-chat-debug-metric-row .metric-tool {
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-transform: capitalize;
}

.ai-chat-debug-metric-row .metric-calls {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
}

.ai-chat-debug-metric-row .metric-success {
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
}

.ai-chat-debug-metric-row .metric-success.all {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.ai-chat-debug-metric-row .metric-success.some {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.ai-chat-debug-metric-row .metric-success.none {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.ai-chat-debug-metric-row .metric-duration {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.65rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

body.light .ai-chat-debug-section-label.metrics svg {
  color: #0284c7;
}

body.light .ai-chat-debug-metric-row {
  background: rgba(0, 0, 0, 0.03);
}

body.light .ai-chat-debug-metric-row .metric-tool {
  color: #1e293b;
}

body.light .ai-chat-debug-metric-row .metric-calls {
  color: rgba(0, 0, 0, 0.5);
}

body.light .ai-chat-debug-metric-row .metric-success.all {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

body.light .ai-chat-debug-metric-row .metric-success.some {
  background: rgba(202, 138, 4, 0.12);
  color: #ca8a04;
}

body.light .ai-chat-debug-metric-row .metric-success.none {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

body.light .ai-chat-debug-metric-row .metric-duration {
  color: rgba(0, 0, 0, 0.4);
}

body.light .ai-chat-message-model:hover {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.06);
}

/* Context Row & Chips */
.ai-chat-context-row {
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.5rem 0.75rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

.ai-chat-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ai-chat-context-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: var(--accent-light);
  font-size: 0.75rem;
  font-weight: 500;
}

.ai-chat-context-chip button {
  background: transparent;
  border: none;
  padding: 0;
  color: rgba(196, 181, 253, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.ai-chat-context-chip button:hover { color: #fff; }

/* Messages Area */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0; /* Allow flex shrinking */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.ai-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.ai-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

body.light .ai-chat-messages {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

body.light .ai-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

body.light .ai-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.ai-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.4);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.ai-chat-empty-icon {
  margin-bottom: 1.5rem;
  color: var(--accent);
  opacity: 0.8;
  animation: float 3s ease-in-out infinite;
}

.ai-chat-empty h3 { color: rgba(255, 255, 255, 0.9); margin-bottom: 0.5rem; }
.ai-chat-empty p { font-size: 0.9rem; margin-bottom: 1.5rem; }

.ai-chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: min(300px, 100%);
  box-sizing: border-box;
}

.ai-chat-suggestions button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
}

.ai-chat-suggestions button:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: #fff;
  transform: translateY(-1px);
}

/* Message Bubbles */
.ai-chat-message {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  align-items: flex-start;
}

.ai-chat-message.user {
  margin-top: 0.5rem;
  flex-direction: row-reverse;
}


.ai-chat-message.assistant {
  align-items: flex-start;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.ai-chat-message.assistant:first-child {
  border-top: none;
  padding-top: 0;
}

/* System messages (window bond notifications) */
.ai-chat-message.system {
  justify-content: center;
  padding: 0.5rem 0;
}

.ai-chat-message.system .ai-chat-message-avatar {
  display: none;
}

.ai-chat-system-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.06));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 20px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  animation: systemMessageIn 0.25s ease-out;
}

.ai-chat-system-content p {
  margin: 0;
}

.ai-chat-system-content strong {
  color: var(--accent-light);
  font-weight: 600;
}

.ai-chat-system-content svg {
  color: var(--accent);
  opacity: 0.8;
}

@keyframes systemMessageIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

body.light .ai-chat-system-content {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.04));
  border-color: rgba(var(--accent-rgb), 0.15);
  color: rgba(0, 0, 0, 0.75);
}

body.light .ai-chat-system-content strong {
  color: var(--accent);
}

body.light .ai-chat-system-content svg {
  color: var(--accent);
}

/* Context update — compact inline status (tab open/close/switch) */
.ai-chat-context-update {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  justify-content: center;
}

.ai-chat-context-update svg {
  opacity: 0.4;
  flex-shrink: 0;
}

.ai-chat-context-update .markdown-block {
  display: inline;
}

.ai-chat-context-update .markdown-block p {
  display: inline;
  margin: 0;
}

.ai-chat-context-update strong {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

body.light .ai-chat-context-update {
  color: rgba(0, 0, 0, 0.3);
}

body.light .ai-chat-context-update strong {
  color: rgba(0, 0, 0, 0.45);
}

/* Bond/unbond event chips */
.ai-chat-bond-event {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 12px;
  font-size: 0.7rem;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

.ai-chat-bond-event svg { opacity: 0.5; flex-shrink: 0; }
.ai-chat-bond-event strong { font-weight: 500; color: rgba(255, 255, 255, 0.45); }

.ai-chat-bond-event.connect { color: rgba(var(--accent-rgb), 0.5); }
.ai-chat-bond-event.connect svg { opacity: 0.7; color: rgba(var(--accent-rgb), 0.7); }
.ai-chat-bond-event.connect strong { color: rgba(var(--accent-rgb), 0.8); }

body.light .ai-chat-bond-event { color: rgba(0,0,0,0.3); }
body.light .ai-chat-bond-event strong { color: rgba(0,0,0,0.45); }
body.light .ai-chat-bond-event.connect { color: rgba(var(--accent-rgb), 0.6); }
body.light .ai-chat-bond-event.connect strong { color: var(--accent-dark); }

/* App-initiated messages (bond channel) */
.ai-chat-app-message {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.72rem;
  color: rgba(251, 191, 36, 0.6);
  justify-content: center;
}

.ai-chat-app-message svg {
  opacity: 0.5;
  color: #f59e0b;
  flex-shrink: 0;
}

body.light .ai-chat-app-message {
  color: rgba(217, 119, 6, 0.5);
}

body.light .ai-chat-app-message svg {
  color: #d97706;
}

.ai-chat-message-avatar {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  margin-top: 2px;
}

.ai-chat-message.user .ai-chat-message-avatar {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

.ai-chat-message-content {
  padding: 0;
  border-radius: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  flex: 1;
  overflow-x: hidden;
  box-sizing: border-box;
  user-select: text;
  -webkit-user-select: text;
}

/* User messages get padding since they have a background */
.ai-chat-message.user .ai-chat-message-content {
  padding: 0.5rem 0.85rem;
}

.ai-chat-message-content p {
  margin: 0;
}

.ai-chat-message-content p + p {
  margin-top: 0.35rem;
}

.ai-chat-message-content ul,
.ai-chat-message-content ol {
  margin: 0.25rem 0;
  padding-left: 1.1rem;
}

.ai-chat-message-content li {
  margin: 0.1rem 0;
}

.ai-chat-message.assistant .ai-chat-message-content {
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.9);
}

.ai-chat-message.user .ai-chat-message-content {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 12px;
  color: #fff;
  padding: 0.5rem 0.85rem;
}

/* Thinking Block */
.ai-chat-thinking-block {
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.ai-chat-thinking-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-chat-thinking-header:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); }
.ai-chat-thinking-tokens { margin-left: auto; font-family: monospace; opacity: 0.6; }

.ai-chat-thinking-content {
  padding: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Message Footer & Actions */
.ai-chat-message-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0;
  border-top: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ai-chat-message:hover .ai-chat-message-footer {
  opacity: 1;
}

.ai-chat-message-model {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: auto;
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-chat-message-model:hover {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.ai-chat-message-copy {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 0.7rem !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
}

.ai-chat-message-copy:hover { color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.1) !important; }
.ai-chat-message-copy.copied { color: #4ade80 !important; background: rgba(74, 222, 128, 0.1) !important; }

/* Feedback Buttons */
.ai-chat-feedback-buttons {
  display: flex;
  gap: 0.25rem;
  margin-left: 0.5rem;
}

.ai-chat-feedback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-chat-feedback-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
}

.ai-chat-feedback-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.ai-chat-feedback-btn.active.positive {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.ai-chat-feedback-btn.active.negative {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}

/* Input Container & Toolbar */
.ai-chat-input-container {
  margin: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  flex-shrink: 0;
  box-shadow: none;
  max-width: calc(100% - 1.5rem);
  box-sizing: border-box;
}

.ai-chat-input-wrapper { position: relative; }

.ai-chat-input-container textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  resize: none;
  padding: 0.25rem;
  outline: none;
  line-height: 1.5;
}

.ai-chat-input-container textarea::placeholder { color: rgba(255, 255, 255, 0.3); }

.ai-chat-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: none;
}

.ai-chat-toolbar-left { display: none; } /* Hidden - context/sessions/history icons */
.ai-chat-toolbar-right { display: flex; align-items: center; gap: 0.5rem; }

.ai-chat-toolbar-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.ai-chat-toolbar-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ai-chat-toolbar-btn.active.image { color: #fb923c; background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.3); }
.ai-chat-toolbar-btn.active.thinking { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.3); }
.ai-chat-toolbar-btn.active.voice { color: #f87171; background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); animation: pulse 1.5s ease-in-out infinite; }
.ai-chat-toolbar-btn.active.transcribing { color: #60a5fa; background: rgba(96, 165, 250, 0.1); border-color: rgba(96, 165, 250, 0.3); }
.ai-chat-toolbar-btn.active.transcribing svg { animation: spin 1s linear infinite; }

.ai-chat-context-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #121216;
}

.ai-chat-send-inline {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-chat-send-inline:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); }
.ai-chat-send-inline:disabled { opacity: 0.3; cursor: not-allowed; }
.ai-chat-send-inline.image-mode { background: #fb923c; }

/* Context & Session inline containers - need relative positioning for dropdown menus */
.ai-chat-context-inline,
.ai-chat-sessions-inline {
  position: relative;
}

/* Menus & Toolbars */
.toolbar-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: rgba(25, 25, 30, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  width: 280px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: slideUpFade 0.2s ease-out;
}

.ai-chat-context-menu-header, .ai-chat-session-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.6);
}

.ai-chat-context-menu-list, .ai-chat-session-list { flex: 1; overflow-y: auto; padding: 0.5rem; }

.ai-chat-context-group-label {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.3);
}

.ai-chat-context-menu-item, .ai-chat-session-item {
  width: 100%;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: transparent; border: none; border-radius: 8px;
  color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; text-align: left;
  cursor: pointer; transition: all 0.15s;
}

.ai-chat-context-menu-item:hover, .ai-chat-session-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }

.ai-chat-context-menu-hint {
  padding: 0.6rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
}

.ai-chat-context-menu-hint strong {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-family: monospace;
}

.ai-chat-context-menu-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Prompt History Panel */
.ai-chat-history-inline {
  position: relative;
}

.ai-chat-history-menu {
  width: 320px;
  max-height: 450px;
}

.ai-chat-history-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.ai-chat-history-header span {
  flex: 1;
}

.ai-chat-history-clear {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.ai-chat-history-clear:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

.ai-chat-history-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.ai-chat-history-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
}

.ai-chat-history-search input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.ai-chat-history-search button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.ai-chat-history-search button:hover {
  color: rgba(255, 255, 255, 0.8);
}

.ai-chat-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0.5rem;
  max-height: 320px;
}

.ai-chat-history-group {
  margin-bottom: 0.5rem;
}

.ai-chat-history-group-label {
  padding: 0.5rem 0.5rem 0.25rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}

.ai-chat-history-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}

.ai-chat-history-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.ai-chat-history-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.ai-chat-history-item-app {
  font-size: 0.65rem;
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.ai-chat-history-item-delete {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.15s;
  flex-shrink: 0;
}

.ai-chat-history-item:hover .ai-chat-history-item-delete {
  opacity: 1;
}

.ai-chat-history-item-delete:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
}

.ai-chat-history-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

.ai-chat-history-empty p {
  margin: 0.25rem 0;
}

.ai-chat-toolbar-btn.has-history {
  color: rgba(var(--accent-rgb), 0.8);
}

/* Image Generation Specifics */
.ai-chat-image-loading { padding: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ai-chat-image-loading-animation { position: relative; width: 64px; height: 64px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ai-chat-image-loading-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); animation: shimmer 1.5s infinite; }
.ai-chat-image-loading-text { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }

.ai-chat-image-container { margin-bottom: 1rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }
.ai-chat-generated-image { width: 100%; display: block; cursor: zoom-in; }
.ai-chat-image-prompt { padding: 0.75rem; background: rgba(0, 0, 0, 0.3); font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); display: flex; gap: 0.5rem; }

/* Footer Hint */
.ai-chat-footer {
  padding: 0.6rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  font-size: 0.7rem; color: rgba(255, 255, 255, 0.3);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.ai-chat-shortcut { color: rgba(255, 255, 255, 0.5); font-weight: 600; }

/* Sync indicator */
.ai-chat-sync-indicator {
  display: flex; align-items: center; justify-content: center;
  opacity: 0.5; transition: opacity 0.2s ease;
}
.ai-chat-sync-indicator.connected { color: #4ade80; opacity: 0.7; }
.ai-chat-sync-indicator.disconnected { color: #f87171; opacity: 0.6; }
body.light .ai-chat-sync-indicator.connected { color: #22c55e; }
body.light .ai-chat-sync-indicator.disconnected { color: #ef4444; }
.ai-chat-model-badge { margin-left: auto; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(255, 255, 255, 0.05); font-size: 0.65rem; letter-spacing: 0.02em; font-weight: 500; border: none; }
.ai-chat-model-badge.clickable { cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.15s ease; }
.ai-chat-model-badge.clickable:hover { filter: brightness(1.2); }
.ai-chat-model-badge.thinking { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.ai-chat-model-badge.image { color: #fb923c; background: rgba(251, 146, 60, 0.1); cursor: default; }
/* Provider-specific colors */
.ai-chat-model-badge.provider-google { color: #4285f4; background: rgba(66, 133, 244, 0.12); }
.ai-chat-model-badge.provider-anthropic { color: #cc7722; background: rgba(204, 119, 34, 0.12); }
.ai-chat-model-badge.provider-openai { color: #10a37f; background: rgba(16, 163, 127, 0.12); }
.ai-chat-model-badge.provider-deepseek { color: #4d6bfe; background: rgba(77, 107, 254, 0.12); }

/* Model Switcher Menu */
.ai-chat-model-switcher { position: relative; margin-left: auto; }
.ai-chat-model-switcher-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: rgba(25, 25, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  animation: slideUpFade 0.15s ease-out;
}
.ai-chat-model-switcher-group { margin-bottom: 8px; }
.ai-chat-model-switcher-group:last-child { margin-bottom: 0; }
.ai-chat-model-switcher-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--provider-color);
  padding: 4px 8px 6px;
  opacity: 0.9;
}
.ai-chat-model-switcher-group button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.1s ease;
}
.ai-chat-model-switcher-group button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.ai-chat-model-switcher-group button.active {
  background: color-mix(in srgb, var(--provider-color) 18%, transparent);
  color: var(--provider-color);
  font-weight: 600;
}

/* Animations */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* =============================================
   LIGHT THEME SUPPORT - Comprehensive
   ============================================= */

/* Panel & Header */
body.light .ai-chat-panel {
  background: var(--os-glass-bg-solid);
  border-left: none;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.light .ai-chat-panel::after {
  display: none;
}
body.light .ai-chat-panel.open.has-bonded-window {
  border-left: none;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
}
body.light .ai-chat-panel.open.has-bonded-window::before {
  display: none;
}
body.light .ai-chat-panel.maximized {
  background: var(--os-glass-bg-solid);
}
/* Header & buttons use OS variables — adapt automatically */

/* Context Row & Chips */
body.light .ai-chat-context-row { 
  background: rgba(0, 0, 0, 0.03); 
  border-bottom-color: rgba(0, 0, 0, 0.06); 
}
body.light .ai-chat-context-chip {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
body.light .ai-chat-context-chip button { color: rgba(var(--accent-rgb), 0.5); }
body.light .ai-chat-context-chip button:hover { color: var(--accent); }

/* Empty State */
body.light .ai-chat-empty { color: rgba(0, 0, 0, 0.5); }
body.light .ai-chat-empty-icon { color: var(--accent); }
body.light .ai-chat-empty h3 { color: rgba(0, 0, 0, 0.85); }
body.light .ai-chat-empty p { color: rgba(0, 0, 0, 0.55); }

/* Suggestion Buttons */
body.light .ai-chat-suggestions button {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}
body.light .ai-chat-suggestions button:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}

/* Messages */
body.light .ai-chat-message.assistant .ai-chat-message-content {
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.88);
}
body.light .ai-chat-message.assistant {
  border-top-color: rgba(0, 0, 0, 0.06);
}
body.light .ai-chat-message.user .ai-chat-message-content {
  background: rgba(0, 0, 0, 0.04);
  border: none;
  color: rgba(0, 0, 0, 0.88);
}
body.light .ai-chat-message.assistant .ai-chat-message-avatar { 
  background: rgba(var(--accent-rgb), 0.12); 
  color: var(--accent); 
}
body.light .ai-chat-message.user .ai-chat-message-avatar { 
  background: rgba(0, 0, 0, 0.08); 
  color: rgba(0, 0, 0, 0.7); 
}

/* Message Footer */
body.light .ai-chat-message-footer { border-top-color: rgba(0, 0, 0, 0.06); }
body.light .ai-chat-message-model { color: rgba(0, 0, 0, 0.35); }
body.light .ai-chat-message-copy { color: rgba(0, 0, 0, 0.4) !important; }
body.light .ai-chat-message-copy:hover { color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.08) !important; }

/* Feedback Buttons - Light Theme */
body.light .ai-chat-feedback-btn {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.35);
}
body.light .ai-chat-feedback-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}

/* Thinking Block */
body.light .ai-chat-thinking-block {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}
body.light .ai-chat-thinking-header {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-chat-thinking-header:hover { 
  background: rgba(0, 0, 0, 0.05); 
  color: rgba(0, 0, 0, 0.7); 
}
body.light .ai-chat-thinking-content {
  color: rgba(0, 0, 0, 0.6);
  border-top-color: rgba(0, 0, 0, 0.06);
}

/* Input Container */
body.light .ai-chat-input-container { 
  background: rgba(255, 255, 255, 0.95); 
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
body.light .ai-chat-input-container textarea { color: rgba(0, 0, 0, 0.88); }
body.light .ai-chat-input-container textarea::placeholder { color: rgba(0, 0, 0, 0.4); }
body.light .ai-chat-input-toolbar { border-top-color: rgba(0, 0, 0, 0.08); }

/* Toolbar Buttons */
body.light .ai-chat-toolbar-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.55);
}
body.light .ai-chat-toolbar-btn:hover { 
  background: rgba(0, 0, 0, 0.08); 
  color: rgba(0, 0, 0, 0.85); 
}
body.light .ai-chat-toolbar-btn.active.thinking { 
  color: var(--accent); 
  background: rgba(var(--accent-rgb), 0.1); 
  border-color: rgba(var(--accent-rgb), 0.3); 
}
body.light .ai-chat-toolbar-btn.active.voice { color: #dc2626; background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.3); }
body.light .ai-chat-toolbar-btn.active.transcribing { color: #2563eb; background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.3); }
body.light .ai-chat-toolbar-btn.active.image {
  color: #ea580c;
  background: rgba(234, 88, 12, 0.1);
  border-color: rgba(234, 88, 12, 0.3);
}

/* Context Count Badge */
body.light .ai-chat-context-count {
  background: var(--accent);
  border-color: #fff;
}

/* Send Button */
body.light .ai-chat-send-inline { background: var(--accent); }
body.light .ai-chat-send-inline:hover:not(:disabled) { box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); }
body.light .ai-chat-send-inline.image-mode { background: #ea580c; }

/* Menus */
body.light .toolbar-menu { 
  background: rgba(255, 255, 255, 0.98); 
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .ai-chat-context-menu-header, 
body.light .ai-chat-session-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
body.light .ai-chat-context-group-label { color: rgba(0, 0, 0, 0.4); }
body.light .ai-chat-context-menu-item, 
body.light .ai-chat-session-item { color: rgba(0, 0, 0, 0.75); }
body.light .ai-chat-context-menu-item:hover, 
body.light .ai-chat-session-item:hover { 
  background: rgba(0, 0, 0, 0.04); 
  color: rgba(0, 0, 0, 0.92); 
}
body.light .ai-chat-context-menu-hint { 
  border-top-color: rgba(0, 0, 0, 0.06); 
  color: rgba(0, 0, 0, 0.45); 
}
body.light .ai-chat-context-menu-hint strong { 
  color: rgba(0, 0, 0, 0.65); 
  background: rgba(0, 0, 0, 0.06); 
}
body.light .ai-chat-context-menu-empty { color: rgba(0, 0, 0, 0.45); }

/* History - Light theme */
body.light .ai-chat-history-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
body.light .ai-chat-history-clear { color: rgba(0, 0, 0, 0.4); }
body.light .ai-chat-history-clear:hover { color: #dc2626; background: rgba(220, 38, 38, 0.08); }
body.light .ai-chat-history-search {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .ai-chat-history-search input { color: rgba(0, 0, 0, 0.85); }
body.light .ai-chat-history-search input::placeholder { color: rgba(0, 0, 0, 0.35); }
body.light .ai-chat-history-search button { color: rgba(0, 0, 0, 0.4); }
body.light .ai-chat-history-search button:hover { color: rgba(0, 0, 0, 0.7); }
body.light .ai-chat-history-group-label { color: rgba(0, 0, 0, 0.4); }
body.light .ai-chat-history-item { color: rgba(0, 0, 0, 0.75); }
body.light .ai-chat-history-item:hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.92); }
body.light .ai-chat-history-item-app { color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
body.light .ai-chat-history-item-delete { color: rgba(0, 0, 0, 0.25); }
body.light .ai-chat-history-item-delete:hover { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
body.light .ai-chat-history-empty { color: rgba(0, 0, 0, 0.45); }
body.light .ai-chat-toolbar-btn.has-history { color: var(--accent); }

/* Footer */
body.light .ai-chat-footer {
  background: rgba(0, 0, 0, 0.03);
  border-top-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}
body.light .ai-chat-shortcut { color: rgba(0, 0, 0, 0.55); }
body.light .ai-chat-model-badge { 
  background: rgba(0, 0, 0, 0.05); 
  color: rgba(0, 0, 0, 0.5);
}
body.light .ai-chat-model-badge.thinking { 
  color: var(--accent); 
  background: rgba(var(--accent-rgb), 0.1); 
}
body.light .ai-chat-model-badge.image {
  color: #ea580c;
  background: rgba(234, 88, 12, 0.1);
}
/* Provider colors work in light theme too - slightly bolder */
body.light .ai-chat-model-badge.provider-google { color: #1a73e8; background: rgba(26, 115, 232, 0.1); }
body.light .ai-chat-model-badge.provider-anthropic { color: #b35c00; background: rgba(179, 92, 0, 0.1); }
body.light .ai-chat-model-badge.provider-openai { color: #0d9373; background: rgba(13, 147, 115, 0.1); }
body.light .ai-chat-model-badge.provider-deepseek { color: #3a52cc; background: rgba(58, 82, 204, 0.1); }
/* Model switcher menu light theme */
body.light .ai-chat-model-switcher-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .ai-chat-model-switcher-group button {
  color: rgba(0, 0, 0, 0.7);
}
body.light .ai-chat-model-switcher-group button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #000;
}

/* Image Generation */
body.light .ai-chat-image-loading-animation { background: rgba(0, 0, 0, 0.04); }
body.light .ai-chat-image-loading-text { color: rgba(0, 0, 0, 0.55); }
body.light .ai-chat-image-container { border-color: rgba(0, 0, 0, 0.1); }
body.light .ai-chat-image-prompt { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.55); }

/* Loading State */
body.light .ai-chat-message.assistant.loading .ai-chat-message-content {
  background: rgba(0, 0, 0, 0.02);
}

/* Failed message retry styles */
.ai-chat-message-failed-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: #f87171;
  font-weight: 500;
}

.ai-chat-message-retry {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  padding: 0.25rem 0.5rem !important;
  background: rgba(248, 113, 113, 0.1) !important;
  border: none !important;
  border-radius: 4px !important;
  color: #f87171 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  margin-left: auto !important;
}

.ai-chat-message-retry:hover {
  background: rgba(248, 113, 113, 0.2) !important;
  color: #fca5a5 !important;
}

body.light .ai-chat-message-failed-label {
  color: #dc2626;
}

body.light .ai-chat-message-retry {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
}

/* Error banner styles */
.ai-chat-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  margin: 0 0.75rem 0.5rem;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 8px;
  color: #f87171;
  font-size: 0.8rem;
  line-height: 1.4;
}

.ai-chat-error > svg:first-child {
  flex-shrink: 0;
}

.ai-chat-error > span {
  flex: 1;
  word-break: break-word;
}

.ai-chat-error-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.ai-chat-error-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem;
  background: rgba(248, 113, 113, 0.15);
  border: none;
  border-radius: 4px;
  color: #f87171;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.7rem;
  font-weight: 500;
}

.ai-chat-error-actions button:hover {
  background: rgba(248, 113, 113, 0.25);
  color: #fca5a5;
}

.ai-chat-error-retry {
  padding: 0.3rem 0.6rem !important;
}

body.light .ai-chat-error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: #dc2626;
}

body.light .ai-chat-error-actions button {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

body.light .ai-chat-error-actions button:hover {
  background: rgba(220, 38, 38, 0.18);
  color: #b91c1c;
}

/* Enhanced numbered lists in AI chat */
.ai-chat-message-content ol {
  margin: 0.75rem 0;
  padding-left: 0;
  list-style: none;
  counter-reset: ai-counter;
}

.ai-chat-message-content ol > li {
  counter-increment: ai-counter;
  position: relative;
  padding-left: 2.25em;
  margin: 0.6em 0;
  line-height: 1.65;
}

.ai-chat-message-content ol > li::before {
  content: counter(ai-counter);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-radius: 5px;
  font-size: 0.75em;
  font-weight: 600;
  font-family: 'SF Mono', Monaco, monospace;
}

body.light .ai-chat-message-content ol > li::before {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

/* Loading skeleton - Robust & Highly Visible */
.ai-chat-message.assistant.loading .ai-chat-message-content {
  min-width: 260px;
  background: rgba(255, 255, 255, 0.03);
}

.ai-chat-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.25rem 0;
  width: 100%;
}

.ai-chat-skeleton-line {
  height: 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  animation: skeletonPulse 2s ease-in-out infinite;
}

.ai-chat-skeleton-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.05) 30%,
    rgba(var(--accent-rgb), 0.4) 50%,
    rgba(var(--accent-rgb), 0.05) 70%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skeletonShimmer 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ai-chat-skeleton-line:nth-child(1) { height: 14px; width: 40% !important; animation-delay: 0s; }
.ai-chat-skeleton-line:nth-child(2) { width: 90% !important; animation-delay: 0.1s; }
.ai-chat-skeleton-line:nth-child(3) { width: 80% !important; animation-delay: 0.2s; }
.ai-chat-skeleton-line:nth-child(4) { width: 60% !important; animation-delay: 0.3s; }

/* Thinking indicator — shown during non-agent loading */
.ai-chat-thinking-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.25rem 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  animation: thinkingFadeIn 0.3s ease;
}

.ai-chat-thinking-indicator svg {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}

body.light .ai-chat-thinking-indicator {
  color: rgba(0, 0, 0, 0.45);
}

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

/* Nudge loading — shown when AI responds to an app-initiated message */
.ai-chat-nudge-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0;
  font-size: 0.78rem;
  color: rgba(251, 191, 36, 0.7);
}

.ai-chat-nudge-loading svg {
  color: #f59e0b;
}

body.light .ai-chat-nudge-loading {
  color: rgba(217, 119, 6, 0.6);
}

body.light .ai-chat-nudge-loading svg {
  color: #d97706;
}

@keyframes skeletonPulse {
  0%, 100% { background: rgba(255, 255, 255, 0.06); }
  50% { background: rgba(255, 255, 255, 0.09); }
}

@keyframes skeletonShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

body.light .ai-chat-skeleton-line {
  background: rgba(0, 0, 0, 0.05);
}

body.light .ai-chat-skeleton-line::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.05) 30%,
    rgba(var(--accent-rgb), 0.25) 50%,
    rgba(var(--accent-rgb), 0.05) 70%,
    transparent 100%
  );
}

/* Pulsing avatar for loading state */
.ai-chat-message.loading .ai-chat-message-avatar {
  animation: avatarPulse 1.5s ease-in-out infinite;
}

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

/* Agent Progress UI - Real-time tool execution feedback */
.ai-agent-progress {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
}

/* Header with animated indicator */
.ai-agent-progress-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ai-agent-progress-indicator {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 8px;
}

.ai-agent-progress-indicator svg {
  color: var(--accent);
}

.ai-agent-progress-indicator svg.spin,
.ai-agent-step-icon svg.spin {
  animation: spin 1s linear infinite;
}

.ai-agent-progress-indicator svg.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

.ai-agent-progress-indicator svg.flash {
  animation: flash 0.6s ease-in-out infinite;
}

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

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.ai-agent-progress-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-height: 32px;
}

.ai-agent-progress-status {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
}

.ai-agent-progress-iteration {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Timeline of completed tools */
.ai-agent-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-left: 15px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 12px;
}

.ai-agent-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0;
  position: relative;
}

.ai-agent-timeline-dot {
  position: absolute;
  left: -19px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1a1a1f;
}

.ai-agent-timeline-item.success .ai-agent-timeline-dot {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.ai-agent-timeline-item.error .ai-agent-timeline-dot {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

.ai-agent-timeline-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.ai-agent-timeline-tool {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.ai-agent-timeline-tool svg {
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.ai-agent-timeline-name {
  font-weight: 500;
}

.ai-agent-timeline-item.success .ai-agent-timeline-tool {
  color: #4ade80;
}

.ai-agent-timeline-item.error .ai-agent-timeline-tool {
  color: #f87171;
}

.ai-agent-timeline-summary {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  padding-left: 1rem;
  font-style: italic;
}

.ai-agent-timeline-item.success .ai-agent-timeline-summary {
  color: rgba(74, 222, 128, 0.7);
}

.ai-agent-timeline-error {
  font-size: 0.7rem;
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.25rem;
}

/* Currently executing tools */
.ai-agent-executing {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 15px;
  padding-left: 12px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.3);
}

.ai-agent-executing-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  animation: slideIn 0.2s ease-out;
}

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

.ai-agent-executing-spinner {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-agent-executing-spinner svg {
  color: var(--accent);
}

.ai-agent-executing-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--accent);
  flex: 1;
  min-width: 0;
}

.ai-agent-executing-info svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.ai-agent-executing-summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Light mode */
body.light .ai-agent-progress {
  background: rgba(var(--accent-rgb), 0.05);
  border-color: rgba(var(--accent-rgb), 0.15);
}

body.light .ai-agent-progress-indicator {
  background: rgba(var(--accent-rgb), 0.1);
}

body.light .ai-agent-progress-indicator svg {
  color: var(--accent);
}

body.light .ai-agent-progress-status {
  color: rgba(0, 0, 0, 0.9);
}

body.light .ai-agent-progress-iteration {
  color: rgba(0, 0, 0, 0.5);
}

body.light .ai-agent-timeline {
  border-left-color: rgba(0, 0, 0, 0.1);
}

body.light .ai-agent-timeline-dot {
  background: #fff;
}

body.light .ai-agent-timeline-item.success .ai-agent-timeline-dot {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

body.light .ai-agent-timeline-item.error .ai-agent-timeline-dot {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

body.light .ai-agent-timeline-tool {
  color: rgba(0, 0, 0, 0.8);
}

body.light .ai-agent-timeline-tool svg {
  color: rgba(0, 0, 0, 0.4);
}

body.light .ai-agent-timeline-item.success .ai-agent-timeline-tool {
  color: #16a34a;
}

body.light .ai-agent-timeline-item.error .ai-agent-timeline-tool {
  color: #dc2626;
}

body.light .ai-agent-timeline-summary {
  color: rgba(0, 0, 0, 0.5);
}

body.light .ai-agent-timeline-item.success .ai-agent-timeline-summary {
  color: rgba(22, 163, 74, 0.8);
}

body.light .ai-agent-executing {
  border-left-color: rgba(var(--accent-rgb), 0.3);
}

body.light .ai-agent-executing-item {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
}

body.light .ai-agent-executing-spinner svg,
body.light .ai-agent-executing-info {
  color: var(--accent);
}

/* Granular Steps Timeline - Replit-style detailed progress */
.ai-agent-steps {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.ai-agent-step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  animation: stepFadeIn 0.2s ease-out;
}

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

.ai-agent-step-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Step status colors */
.ai-agent-step-item.success {
  background: rgba(74, 222, 128, 0.08);
}

.ai-agent-step-item.success .ai-agent-step-icon {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.ai-agent-step-item.success .ai-agent-step-text {
  color: rgba(74, 222, 128, 0.9);
}

.ai-agent-step-item.error {
  background: rgba(248, 113, 113, 0.08);
}

.ai-agent-step-item.error .ai-agent-step-icon {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

.ai-agent-step-item.error .ai-agent-step-text {
  color: rgba(248, 113, 113, 0.9);
}

.ai-agent-step-item.warning {
  background: rgba(251, 191, 36, 0.08);
}

.ai-agent-step-item.warning .ai-agent-step-icon {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.ai-agent-step-item.warning .ai-agent-step-text {
  color: rgba(251, 191, 36, 0.9);
}

.ai-agent-step-item.thinking {
  background: rgba(var(--accent-rgb), 0.08);
}

.ai-agent-step-item.thinking .ai-agent-step-icon {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

.ai-agent-step-item.thinking .ai-agent-step-text {
  color: rgba(var(--accent-rgb), 0.9);
}

.ai-agent-step-item.executing {
  background: rgba(56, 189, 248, 0.08);
}

.ai-agent-step-item.executing .ai-agent-step-icon {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.ai-agent-step-item.executing .ai-agent-step-text {
  color: rgba(56, 189, 248, 0.9);
}

.ai-agent-step-item.validating {
  background: rgba(45, 212, 191, 0.08);
}

.ai-agent-step-item.validating .ai-agent-step-icon {
  background: rgba(45, 212, 191, 0.2);
  color: #2dd4bf;
}

.ai-agent-step-item.validating .ai-agent-step-text {
  color: rgba(45, 212, 191, 0.9);
}

.ai-agent-step-item.info,
.ai-agent-step-item.complete {
  background: rgba(255, 255, 255, 0.03);
}

.ai-agent-step-item.info .ai-agent-step-icon,
.ai-agent-step-item.complete .ai-agent-step-icon {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.ai-agent-step-item.info .ai-agent-step-text,
.ai-agent-step-item.complete .ai-agent-step-text {
  color: rgba(255, 255, 255, 0.7);
}

.ai-agent-step-text {
  flex: 1;
  line-height: 1.4;
  word-break: break-word;
}

.ai-agent-step-detail {
  display: block;
  font-size: 0.65rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}

/* Warning state for progress indicator */
.ai-agent-progress-indicator.warning {
  background: rgba(251, 191, 36, 0.15);
}

.ai-agent-progress-indicator.warning svg {
  color: #fbbf24;
}

/* Light mode steps */
body.light .ai-agent-steps {
  background: rgba(0, 0, 0, 0.04);
}

body.light .ai-agent-step-item.success {
  background: rgba(34, 197, 94, 0.08);
}

body.light .ai-agent-step-item.success .ai-agent-step-icon {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

body.light .ai-agent-step-item.success .ai-agent-step-text {
  color: #16a34a;
}

body.light .ai-agent-step-item.error {
  background: rgba(239, 68, 68, 0.08);
}

body.light .ai-agent-step-item.error .ai-agent-step-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

body.light .ai-agent-step-item.error .ai-agent-step-text {
  color: #dc2626;
}

body.light .ai-agent-step-item.warning {
  background: rgba(245, 158, 11, 0.08);
}

body.light .ai-agent-step-item.warning .ai-agent-step-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

body.light .ai-agent-step-item.warning .ai-agent-step-text {
  color: #d97706;
}

body.light .ai-agent-step-item.thinking {
  background: rgba(var(--accent-rgb), 0.06);
}

body.light .ai-agent-step-item.thinking .ai-agent-step-icon {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

body.light .ai-agent-step-item.thinking .ai-agent-step-text {
  color: var(--accent);
}

body.light .ai-agent-step-item.executing {
  background: rgba(14, 165, 233, 0.06);
}

body.light .ai-agent-step-item.executing .ai-agent-step-icon {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
}

body.light .ai-agent-step-item.executing .ai-agent-step-text {
  color: #0284c7;
}

body.light .ai-agent-step-item.validating {
  background: rgba(20, 184, 166, 0.06);
}

body.light .ai-agent-step-item.validating .ai-agent-step-icon {
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
}

body.light .ai-agent-step-item.validating .ai-agent-step-text {
  color: #0d9488;
}

body.light .ai-agent-step-item.info,
body.light .ai-agent-step-item.complete {
  background: rgba(0, 0, 0, 0.02);
}

body.light .ai-agent-step-item.info .ai-agent-step-icon,
body.light .ai-agent-step-item.complete .ai-agent-step-icon {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}

body.light .ai-agent-step-item.info .ai-agent-step-text,
body.light .ai-agent-step-item.complete .ai-agent-step-text {
  color: rgba(0, 0, 0, 0.6);
}

body.light .ai-agent-progress-indicator.warning {
  background: rgba(245, 158, 11, 0.12);
}

body.light .ai-agent-progress-indicator.warning svg {
  color: #d97706;
}

/* Edit Bar (above input when editing a message) */
.ai-chat-edit-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--accent-light);
}

.ai-chat-edit-bar svg:first-child {
  opacity: 0.7;
}

.ai-chat-edit-bar span {
  flex: 1;
}

.ai-chat-edit-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-chat-edit-bar button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

body.light .ai-chat-edit-bar {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

body.light .ai-chat-edit-bar button {
  color: rgba(0, 0, 0, 0.35);
}

body.light .ai-chat-edit-bar button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

/* Right-click context menu on user messages */
.ai-chat-msg-context-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}

.ai-chat-msg-context-menu {
  position: fixed;
  background: rgba(25, 25, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-width: 160px;
  z-index: 1000000;
  animation: contextMenuIn 0.1s ease-out;
}

@keyframes contextMenuIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.ai-chat-msg-context-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.1s ease;
}

.ai-chat-msg-context-menu button:hover {
  background: rgba(var(--accent-rgb), 0.15);
}

.ai-chat-msg-context-menu button svg {
  color: rgba(255, 255, 255, 0.5);
}

.ai-chat-msg-context-delete:hover {
  background: rgba(248, 113, 113, 0.15) !important;
  color: #f87171;
}
.ai-chat-msg-context-delete:hover svg {
  color: #f87171;
}

body.light .ai-chat-msg-context-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body.light .ai-chat-msg-context-menu button {
  color: rgba(0, 0, 0, 0.85);
}

body.light .ai-chat-msg-context-menu button:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

body.light .ai-chat-msg-context-menu button svg {
  color: rgba(0, 0, 0, 0.45);
}
/**
 * App Overlay Styles
 * 
 * Full-screen container for sandbox apps.
 * Apps open in true fullscreen mode with ESC to exit.
 */

.app-overlay {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: flex;
  flex-direction: column;
  background: #0a0a0f;
  animation: appOverlayFadeIn 0.2s ease-out;
}

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

/* Content - true fullscreen (Press ESC to close) */
.app-overlay-content {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Light theme */
.app-overlay.theme-light {
  background: #f8fafc;
}

/* Zen theme */
.app-overlay.theme-zen {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* Batman theme */
.app-overlay.theme-batman {
  background: #050510;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  color: inherit;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.app-shell.focus-mode,
.app-shell.thoughts-focus-mode,
.app-shell.daily-focus-mode,
.app-shell.activity-focus-mode,
.app-shell.notes-focus-mode {
  overflow: hidden;
}

/* Hide scrollbar on app-shell in focus modes (not children) */
.app-shell.focus-mode::-webkit-scrollbar,
.app-shell.thoughts-focus-mode::-webkit-scrollbar,
.app-shell.daily-focus-mode::-webkit-scrollbar,
.app-shell.activity-focus-mode::-webkit-scrollbar,
.app-shell.notes-focus-mode::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.app-shell.focus-mode,
.app-shell.thoughts-focus-mode,
.app-shell.daily-focus-mode,
.app-shell.activity-focus-mode,
.app-shell.notes-focus-mode {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide app-content backdrop effects in focus modes to prevent bleeding through */
.app-shell.focus-mode .app-content,
.app-shell.thoughts-focus-mode .app-content,
.app-shell.daily-focus-mode .app-content,
.app-shell.activity-focus-mode .app-content,
.app-shell.notes-focus-mode .app-content {
  visibility: hidden;
  pointer-events: none;
}

.app-content {
  flex: 1;
  padding: 48px clamp(24px, 5vw, 64px) 96px;
  color: inherit;
  position: relative;
  z-index: 1;
  /* Use 5rem (collapsed) as default, override when expanded */
  margin-left: 5rem;
  /* TEMP: Removed transition to test if brief state changes cause the shift */
  /* transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1); */
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100vw;
  /* Since app-shell is position:fixed, app-content needs explicit height */
  height: 100%;
  /* Prevent browser back/forward swipe navigation */
  overscroll-behavior: none !important;
}

/* Classic view: removed margin-left override to allow sidebar expansion to work */

/* Adjust content margin when sidebar is expanded (not collapsed) */
.app-shell:has(.sidebar:not(.collapsed)) .app-content {
  margin-left: 15.5rem;
}

/* When sidebar is collapsed, add extra top padding to account for expand button */
.app-shell:has(.sidebar.collapsed) .app-content {
  padding-top: 56px;
}

.app-grid {
  display: grid;
  gap: 24px;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

/* Full-width pages */
.app-grid:has(.weekly-plan-page),
.app-grid:has(.weekly-objectives-page) {
  max-width: none;
}

.app-content:has(.weekly-plan-page),
.app-content:has(.weekly-objectives-page) {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ===========================================
   PAGE PANELS - Consistent width and styling
   =========================================== */

/* Base page panel - standard width */
.page-panel {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Full-width page panels */
.page-panel.full-width {
  max-width: none;
  width: 100%;
  margin: 0;
}

/* ===========================================
   ZEN THEME - Dark Glassmorphism Page Panels
   Matches .settings-section styling
   =========================================== */

body.zen .page-panel {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
  margin: 1.5rem auto;
}

/* Full-width page panels in zen */
body.zen .page-panel.full-width {
  margin: 1.5rem;
  width: calc(100% - 3rem);
  max-width: none;
}

.page-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Fullscreen mode */
.app-shell.fullscreen-mode .sidebar {
  display: none;
}

.app-shell.fullscreen-mode .app-content {
  margin-left: 0;
  padding: 48px clamp(24px, 5vw, 64px);
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.app-shell.fullscreen-mode .app-grid {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.app-shell.fullscreen-mode .fullscreen-content {
  width: 100%;
}

/* Fullscreen writing mode should remove floating chrome (AI/music/timer/button). */
.app-shell.fullscreen-mode .focus-controls-wrapper,
.app-shell.fullscreen-mode .focus-mode-selector,
.app-shell.fullscreen-mode .fullscreen-toggle-btn {
  display: none !important;
}

/* Fullscreen toggle button - hidden in classical view */
.fullscreen-toggle-btn {
  display: none;
}

/* Focus Mode Selector Button */
.focus-mode-selector {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
}

.focus-mode-selector-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.focus-mode-selector-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.focus-mode-selector-btn svg {
  opacity: 0.8;
}

.focus-mode-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 160px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.focus-mode-selector:hover .focus-mode-menu,
.focus-mode-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.focus-mode-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.focus-mode-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

.focus-mode-menu-item .shortcut {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.5;
  font-family: 'SF Mono', Monaco, monospace;
}

body.light .focus-mode-selector-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

body.light .focus-mode-selector-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.8);
}

body.light .focus-mode-menu {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .focus-mode-menu-item {
  color: rgba(0, 0, 0, 0.7);
}

body.light .focus-mode-menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.9);
}

/* Hide in focus modes */
.app-shell.focus-mode .focus-mode-selector,
.app-shell.thoughts-focus-mode .focus-mode-selector,
.app-shell.daily-focus-mode .focus-mode-selector,
.app-shell.activity-focus-mode .focus-mode-selector,
.app-shell.notes-focus-mode .focus-mode-selector {
  display: none;
}

/* --- Floating Controls (AI, Music, Timer) --- */

.focus-controls-wrapper {
  display: contents;
}

/* In focus mode, position the wrapper as a container */
.app-shell.focus-mode .focus-controls-wrapper,
.app-shell.thoughts-focus-mode .focus-controls-wrapper,
.app-shell.daily-focus-mode .focus-controls-wrapper,
.app-shell.activity-focus-mode .focus-controls-wrapper,
.app-shell.notes-focus-mode .focus-controls-wrapper {
  display: block;
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 1000;
  pointer-events: none;
  background: transparent;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.ai-chat-hover-wrapper,
.music-player-hover-wrapper,
.pomodoro-hover-wrapper {
  display: contents;
}

.app-shell.focus-mode .ai-chat-hover-wrapper,
.app-shell.thoughts-focus-mode .ai-chat-hover-wrapper,
.app-shell.daily-focus-mode .ai-chat-hover-wrapper,
.app-shell.activity-focus-mode .ai-chat-hover-wrapper,
.app-shell.notes-focus-mode .ai-chat-hover-wrapper,
.app-shell.focus-mode .music-player-hover-wrapper,
.app-shell.thoughts-focus-mode .music-player-hover-wrapper,
.app-shell.daily-focus-mode .music-player-hover-wrapper,
.app-shell.activity-focus-mode .music-player-hover-wrapper,
.app-shell.notes-focus-mode .music-player-hover-wrapper,
.app-shell.focus-mode .pomodoro-hover-wrapper,
.app-shell.thoughts-focus-mode .pomodoro-hover-wrapper,
.app-shell.daily-focus-mode .pomodoro-hover-wrapper,
.app-shell.activity-focus-mode .pomodoro-hover-wrapper,
.app-shell.notes-focus-mode .pomodoro-hover-wrapper {
  display: block;
  position: absolute;
  right: 0;
  pointer-events: auto;
}

.app-shell.focus-mode .pomodoro-hover-wrapper,
.app-shell.thoughts-focus-mode .pomodoro-hover-wrapper,
.app-shell.daily-focus-mode .pomodoro-hover-wrapper,
.app-shell.activity-focus-mode .pomodoro-hover-wrapper,
.app-shell.notes-focus-mode .pomodoro-hover-wrapper {
  bottom: 0;
}

.app-shell.focus-mode .music-player-hover-wrapper,
.app-shell.thoughts-focus-mode .music-player-hover-wrapper,
.app-shell.daily-focus-mode .music-player-hover-wrapper,
.app-shell.activity-focus-mode .music-player-hover-wrapper,
.app-shell.notes-focus-mode .music-player-hover-wrapper {
  bottom: 3.25rem;
}

.app-shell.focus-mode .ai-chat-hover-wrapper,
.app-shell.thoughts-focus-mode .ai-chat-hover-wrapper,
.app-shell.daily-focus-mode .ai-chat-hover-wrapper,
.app-shell.activity-focus-mode .ai-chat-hover-wrapper,
.app-shell.notes-focus-mode .ai-chat-hover-wrapper {
  bottom: 6.5rem;
}

.app-shell.focus-mode .ai-chat-hover-wrapper .ai-chat-launch-btn,
.app-shell.thoughts-focus-mode .ai-chat-hover-wrapper .ai-chat-launch-btn,
.app-shell.daily-focus-mode .ai-chat-hover-wrapper .ai-chat-launch-btn,
.app-shell.activity-focus-mode .ai-chat-hover-wrapper .ai-chat-launch-btn,
.app-shell.notes-focus-mode .ai-chat-hover-wrapper .ai-chat-launch-btn,
.app-shell.focus-mode .music-player-hover-wrapper .music-player-container,
.app-shell.thoughts-focus-mode .music-player-hover-wrapper .music-player-container,
.app-shell.daily-focus-mode .music-player-hover-wrapper .music-player-container,
.app-shell.activity-focus-mode .music-player-hover-wrapper .music-player-container,
.app-shell.notes-focus-mode .music-player-hover-wrapper .music-player-container,
.app-shell.focus-mode .pomodoro-hover-wrapper .pomodoro-container,
.app-shell.thoughts-focus-mode .pomodoro-hover-wrapper .pomodoro-container,
.app-shell.daily-focus-mode .pomodoro-hover-wrapper .pomodoro-container,
.app-shell.activity-focus-mode .pomodoro-hover-wrapper .pomodoro-container,
.app-shell.notes-focus-mode .pomodoro-hover-wrapper .pomodoro-container {
  position: relative;
  bottom: auto;
  right: auto;
}

.ai-chat-launch-btn {
  position: fixed;
  bottom: 7rem;
  right: 0.5rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  color: var(--accent);
  cursor: pointer;
  z-index: 40;
  pointer-events: auto;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ai-chat-launch-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent-light);
}

/* Base positioning for containers */
.music-player-container {
  position: fixed;
  bottom: 3.75rem;
  right: 0.5rem;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
}

.pomodoro-container {
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
}

/* Hide in focus modes */
.app-shell.focus-mode .focus-mode-selector,
.app-shell.thoughts-focus-mode .focus-mode-selector,
.app-shell.daily-focus-mode .focus-mode-selector {
  display: none;
}

.app-shell.focus-idle .focus-controls-wrapper {
  opacity: 0;
  pointer-events: none;
}

/* ======================= */
/* Sandbox Apps Menu       */
/* ======================= */

.apps-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  animation: appsMenuFadeIn 0.2s ease-out;
}

@keyframes appsMenuFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.apps-menu {
  width: 95%;
  max-width: 900px;
  margin-top: 2rem;
  background: linear-gradient(145deg, rgba(30, 30, 40, 0.95), rgba(20, 20, 28, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 25px 80px rgba(0, 0, 0, 0.6),
    0 0 100px rgba(var(--accent-rgb), 0.1);
  overflow: hidden;
  animation: appsMenuSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes appsMenuSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.apps-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.apps-menu-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.apps-menu-title svg {
  color: var(--accent);
}

.apps-menu-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.apps-count {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

.apps-menu-header kbd {
  padding: 0.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.apps-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  padding: 1.25rem;
  max-height: 70vh;
  overflow-y: auto;
}

.apps-menu-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.apps-menu-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--accent-rgb), 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.apps-menu-card.selected {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.2) inset,
    0 8px 24px rgba(var(--accent-rgb), 0.15);
}

.apps-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.08));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 14px;
  flex-shrink: 0;
}

.apps-card-icon svg {
  color: var(--accent);
}

.apps-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.apps-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.apps-card-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apps-menu-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}

.apps-menu-empty svg {
  opacity: 0.3;
}

.apps-menu-empty p {
  margin: 0;
  font-size: 1rem;
}

.apps-menu-empty small {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.25);
}

.apps-menu-footer {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.875rem 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.apps-menu-footer span {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'SF Mono', Monaco, monospace;
}

/* Light theme */
body.light .apps-menu-overlay {
  background: rgba(0, 0, 0, 0.4);
}

body.light .apps-menu {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03) inset,
    0 25px 80px rgba(0, 0, 0, 0.25);
}

body.light .apps-menu-header {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .apps-menu-title {
  color: #1e293b;
}

body.light .apps-menu-title svg {
  color: var(--accent-dark);
}

body.light .apps-count {
  color: rgba(0, 0, 0, 0.4);
}

body.light .apps-menu-header kbd {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
}

body.light .apps-menu-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .apps-menu-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(var(--accent-rgb), 0.3);
}

body.light .apps-menu-card.selected {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.4);
}

body.light .apps-card-icon {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.05));
  border-color: rgba(var(--accent-rgb), 0.2);
}

body.light .apps-card-icon svg {
  color: var(--accent-dark);
}

body.light .apps-card-name {
  color: #1e293b;
}

body.light .apps-card-desc {
  color: rgba(0, 0, 0, 0.5);
}

body.light .apps-menu-empty {
  color: rgba(0, 0, 0, 0.4);
}

body.light .apps-menu-empty small {
  color: rgba(0, 0, 0, 0.3);
}

body.light .apps-menu-footer {
  background: rgba(0, 0, 0, 0.02);
  border-top-color: rgba(0, 0, 0, 0.05);
}

body.light .apps-menu-footer span {
  color: rgba(0, 0, 0, 0.4);
}
/* OS-Style Dock - Modern macOS-inspired with auto-hide */
.os-dock-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% - 4px));
  z-index: 10000;
  padding-bottom: 10px;
  pointer-events: none; /* Don't block clicks when hidden */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.3s;
}

/* Show dock when container is hovered or when .visible class is added */
.os-dock-container:hover,
.os-dock-container.visible {
  transform: translateX(-50%) translateY(0);
  z-index: 2147483646; /* Just below trigger, above everything including maximized windows */
  pointer-events: auto; /* Enable clicks when visible */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0s;
}

/* Invisible trigger zone at the bottom of screen */
.os-dock-trigger {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 2147483647;
  pointer-events: auto;
}

/* During window drag/resize: keep dock visible but non-interactive so bottom snap zone works */
.os-window-dragging .os-dock-trigger,
.os-window-resizing .os-dock-trigger {
  pointer-events: none !important;
}

.os-window-dragging .os-dock-container,
.os-window-resizing .os-dock-container {
  pointer-events: none !important;
  transform: translateX(-50%) translateY(0) !important;
  z-index: 2147483646 !important;
}

.os-dock {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--os-glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
  border: 1px solid var(--os-glass-border);
  box-shadow: var(--os-glass-shadow);
  transition: box-shadow 0.3s ease;
}

.os-dock:hover {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

.os-dock-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.os-dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--os-icon-bg);
  border-radius: 12px;
  color: var(--os-text-primary);
  transition: all 0.2s ease;
  position: relative;
}

.os-dock-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  border: 1.5px solid var(--os-glass-bg-solid, #141418);
  pointer-events: none;
  z-index: 1;
}

.os-dock-item:hover {
  transform: translateY(-12px) scale(1.18);
}

.os-dock-item:hover .os-dock-icon {
  background: var(--os-icon-bg-hover);
}

.os-dock-item:active {
  transform: translateY(-6px) scale(1.08);
}

.os-dock-item:active .os-dock-icon {
  background: var(--os-icon-bg);
}

.os-dock-item.open .os-dock-icon {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.os-dock-item.minimized .os-dock-icon {
  opacity: 0.6;
}

/* Minimized indicator - dimmer and smaller than open indicator */
.os-dock-item.minimized .os-dock-indicator {
  width: 3px;
  height: 3px;
  opacity: 0.5;
}

/* Indicator dot for open apps */
.os-dock-indicator {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}

/* Hover magnification effect on neighbors */
.os-dock-item:hover + .os-dock-item {
  transform: translateY(-6px) scale(1.08);
}

.os-dock-item:has(+ .os-dock-item:hover) {
  transform: translateY(-6px) scale(1.08);
}

/* Second neighbors get smaller effect */
.os-dock-item:hover + .os-dock-item + .os-dock-item {
  transform: translateY(-3px) scale(1.03);
}

.os-dock-item:has(+ .os-dock-item + .os-dock-item:hover) {
  transform: translateY(-3px) scale(1.03);
}

/* Tooltip on hover */
.os-dock-item::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 14px;
  background: var(--os-glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: var(--os-text-primary);
  font-size: 12px;
  font-weight: 500;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  box-shadow: var(--os-glass-shadow);
  border: 1px solid var(--os-glass-border);
}

.os-dock-item:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Separator between app groups */
.os-dock-separator {
  width: 1px;
  height: 40px;
  background: var(--os-divider);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Light Theme Dock ── */
body.light .os-dock {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 4px 16px rgba(0, 0, 0, 0.1),
    0 12px 40px rgba(0, 0, 0, 0.08);
}

body.light .os-dock:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 16px 48px rgba(0, 0, 0, 0.1);
}

body.light .os-dock-icon {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

body.light .os-dock-item:hover .os-dock-icon {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .os-dock-item.open .os-dock-icon {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}

body.light .os-dock-indicator {
  background: var(--accent-dark);
  box-shadow: 0 0 4px rgba(var(--accent-rgb), 0.4);
}

body.light .os-dock-item::before {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.9);
}

body.light .os-dock-separator {
  background: rgba(0, 0, 0, 0.1);
}

/* Context Menu */
.os-dock-context-menu {
  position: fixed;
  transform: translateX(-50%) translateY(-100%);
  margin-top: -8px;
  min-width: 200px;
  padding: 6px;
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 2147483647;
  animation: dockContextMenuIn 0.15s cubic-bezier(0.2, 0, 0, 1);
}

body.light .os-dock-context-menu {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

@keyframes dockContextMenuIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-100%) scale(1);
  }
}

.os-dock-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 450;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s ease;
}

body.light .os-dock-context-item {
  color: rgba(20, 20, 30, 0.9);
}

.os-dock-context-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.light .os-dock-context-item:hover {
  background: rgba(var(--accent-rgb), 0.12);
}

.os-dock-context-item:active {
  background: rgba(255, 255, 255, 0.15);
}

body.light .os-dock-context-item:active {
  background: rgba(var(--accent-rgb), 0.18);
}

.os-dock-context-item svg {
  opacity: 0.75;
  flex-shrink: 0;
}

.os-dock-context-divider {
  height: 1px;
  margin: 4px 8px;
  background: rgba(255, 255, 255, 0.1);
}

body.light .os-dock-context-divider {
  background: rgba(0, 0, 0, 0.08);
}

/* Section label (like "Assign To" in macOS) */
.os-dock-context-label {
  padding: 4px 12px 2px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.light .os-dock-context-label {
  color: rgba(60, 60, 80, 0.5);
}

/* Submenu container */
.os-dock-context-submenu-container {
  position: relative;
}

.os-dock-context-item.has-submenu {
  justify-content: space-between;
}

.os-dock-context-item.has-submenu .submenu-arrow {
  opacity: 0.5;
  margin-left: auto;
}

/* Submenu */
.os-dock-context-submenu {
  position: absolute;
  left: 100%;
  top: -6px;
  min-width: 180px;
  padding: 6px;
  background: rgba(30, 30, 30, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: all 0.15s ease;
  margin-left: 4px;
}

body.light .os-dock-context-submenu {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.os-dock-context-submenu-container:hover .os-dock-context-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Checkmark for selected items */
.os-dock-context-item .check-icon {
  margin-left: auto;
  opacity: 0.9;
}

/* Drag and drop styles */
body.os-dock-dragging {
  cursor: grabbing !important;
  user-select: none;
}

body.os-dock-dragging * {
  cursor: grabbing !important;
}

.os-dock-item.dragging {
  cursor: grabbing;
  position: relative;
}

.os-dock-item.dragging .os-dock-icon {
  background: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.3);
}

/* Disable hover effects during drag */
body.os-dock-dragging .os-dock-item:not(.dragging) {
  pointer-events: none;
}

body.os-dock-dragging .os-dock-item:not(.dragging):hover {
  transform: none;
}

body.os-dock-dragging .os-dock-item:hover::before {
  display: none;
}
/* Menu Bar - macOS style top bar, always visible */
.os-menubar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 14px;
  background: var(--os-glass-bg);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  z-index: 200000;
  user-select: none;
}

.menubar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Auto-hide menubar when a window is maximized */
.os-menubar.menubar-autohide {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.os-menubar.menubar-hidden {
  transform: translateY(-100%) !important;
  opacity: 0;
  pointer-events: none !important;
}

.os-menubar.menubar-autohide:not(.menubar-hidden) {
  transform: translateY(0) !important;
  opacity: 1;
  pointer-events: auto !important;
}

/* Invisible trigger zone at top of screen for auto-hide reveal */
.os-menubar-trigger {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 200001;
  pointer-events: auto;
}

.menubar-separator {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 2px;
}

.menubar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-primary);
  text-decoration: none;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.menubar-logo-img {
  height: 16px;
  width: 16px;
}

.menubar-app-name {
  display: none;
}


.menubar-menu-item {
  background: none;
  border: none;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.menubar-menu-item:hover {
  background: var(--os-hover-bg);
  color: var(--os-text-primary);
}

.menubar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.menubar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

/* Vertical divider between groups in menubar */
.menubar-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 6px;
  flex-shrink: 0;
}

/* Control icons cluster */
.menubar-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.menubar-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.menubar-control-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.menubar-control-btn.active {
  color: rgba(255, 255, 255, 0.8);
}

/* Equalizer bars animation for music playing */
.menubar-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 12px;
}

.menubar-eq-bars span {
  width: 2px;
  background: rgba(var(--accent-rgb), 0.9);
  border-radius: 1px;
  animation: menubar-eq-bounce 1s ease-in-out infinite;
}

.menubar-eq-bars span:nth-child(1) {
  animation-delay: 0s;
  height: 4px;
}

.menubar-eq-bars span:nth-child(2) {
  animation-delay: 0.2s;
  height: 8px;
}

.menubar-eq-bars span:nth-child(3) {
  animation-delay: 0.4s;
  height: 5px;
}

@keyframes menubar-eq-bounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.menubar-control-btn.timer-active {
  color: rgba(74, 222, 128, 0.9);
}

/* Info strip: weather | date | time */
.menubar-info-strip {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.menubar-info-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  font-weight: 400;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.menubar-info-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}

.menubar-info-sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 6px;
  user-select: none;
  flex-shrink: 0;
}

/* Legacy — keep for timer text */
.menubar-extra-timer-text {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.02em;
}


/* Appearance dropdown */
.mdp-appearance {
  width: 170px;
  padding: 8px;
}

.mdp-section {
  margin-bottom: 8px;
}

.mdp-section-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 5px;
  padding: 0 2px;
  text-transform: uppercase;
}

/* Theme: three inline buttons instead of slider */
.mdp-theme-buttons {
  display: flex;
  gap: 3px;
}

.mdp-theme-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 5px;
  font-size: 10px;
  font-family: inherit;
  transition: all 0.12s ease;
}

.mdp-theme-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
}

.mdp-theme-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Accent color dots — 6 per row */
.mdp-accent-dots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  justify-items: center;
}

.mdp-accent-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--dot-color);
  cursor: pointer;
  padding: 0;
  transition: all 0.12s ease;
}

.mdp-accent-dot:hover {
  transform: scale(1.15);
}

.mdp-accent-dot.active {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 4px var(--dot-color);
}

.mdp-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 0;
}

/* Widget Toggle Buttons */
.menubar-widget-toggles {
  display: none;
}

.menubar-widget-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.menubar-widget-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

.menubar-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--os-text-primary);
  transition: background 0.15s ease;
}

.menubar-item:hover {
  background: var(--os-hover-bg);
}

.menubar-item.weather {
  color: var(--os-text-primary);
}

.menubar-item.weather svg {
  opacity: 0.8;
}

.menubar-daylight {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--os-text-muted);
  margin-left: 2px;
}

.menubar-daylight svg {
  color: #facc15;
  opacity: 0.7;
}

/* Extension Status */
.menubar-item.extension-status {
  color: var(--os-text-secondary);
  padding: 4px 8px;
  gap: 0;
}

.menubar-item.extension-status svg {
  opacity: 0.6;
}

.menubar-item.extension-status:hover svg {
  opacity: 0.9;
}

.menubar-item.date {
  color: var(--os-text-secondary);
  white-space: nowrap;
}

/* Protocol Day */
button.menubar-item.protocol-day {
  gap: 3px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
}

button.menubar-item.protocol-day:hover {
  background: rgba(255, 255, 255, 0.08);
}

.menubar-item.protocol-day .protocol-day-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.35);
}

.menubar-item.protocol-day .protocol-day-number {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}

.menubar-time-wrapper {
  position: relative;
}

button.menubar-item.time {
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  min-width: auto;
}

button.menubar-item.time:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}

/* Timezone Panel */
.menubar-timezone-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: rgba(18, 18, 24, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 10010;
  animation: menubarPanelSlide 0.15s ease-out;
}

.timezone-panel-header {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.timezone-panel-title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.menubar-timezone-panel .timezone-block {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.menubar-timezone-panel .timezone-block:last-child {
  border-bottom: none;
}

.menubar-timezone-panel .timezone-block.local {
  background: rgba(255, 255, 255, 0.03);
}

.menubar-timezone-panel .timezone-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.menubar-timezone-panel .timezone-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.menubar-timezone-panel .timezone-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.menubar-timezone-panel .timezone-day {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.menubar-timezone-panel .timezone-time {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.menubar-timezone-panel .timezone-sun-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.menubar-timezone-panel .timezone-sun-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.menubar-timezone-panel .timezone-sun-item svg {
  opacity: 0.6;
}

.menubar-timezone-panel .timezone-sun-item.sunrise svg {
  color: #fbbf24;
}

.menubar-timezone-panel .timezone-sun-item.sunset svg {
  color: #f97316;
}

.menubar-timezone-panel .timezone-sun-item.daylight svg {
  color: #facc15;
}

/* Subtle separator between date and time */
button.menubar-item.date {
  padding-right: 0;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

/* Calendar dropdown */
.menubar-date-wrapper {
  position: relative;
}

.menubar-calendar-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: rgba(18, 18, 24, 0.96);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 10001;
  animation: cal-fade-in 0.12s ease;
}

@keyframes cal-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.cal-nav {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}

.cal-nav:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

.cal-title {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.01em;
}

.cal-title:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
  margin-bottom: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cal-weekday {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  width: 30px;
  text-align: center;
  padding: 2px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  justify-items: center;
}

.cal-day {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: default;
  transition: background 0.1s;
}

.cal-day:not(.outside):not(.today):hover {
  background: rgba(255, 255, 255, 0.08);
}

.cal-day.outside {
  color: rgba(255, 255, 255, 0.15);
}

.cal-day.today {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* Month picker grid */
.cal-months-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.cal-month-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s;
}

.cal-month-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.cal-month-btn.selected {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-light);
}

.cal-month-btn.today {
  background: rgba(var(--accent-rgb), 0.3);
  color: #fff;
  font-weight: 700;
}

/* Music Player Widget */
.menubar-music {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px 2px 4px;
  border-radius: 6px;
  background: transparent;
  border: none;
  transition: all 0.2s ease;
}

.menubar-music:hover {
  background: rgba(255, 255, 255, 0.06);
}

.menubar-music.playing {
  background: rgba(var(--accent-rgb), 0.08);
}

.menubar-music-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--os-text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.menubar-music-btn:hover {
  background: var(--os-hover-bg);
  color: var(--os-text-primary);
}

.menubar-music-btn.play {
  color: var(--os-text-primary);
}

.menubar-music.playing .menubar-music-btn.play {
  color: var(--os-accent);
}

.menubar-music-title {
  font-size: 11px;
  color: var(--os-text-secondary);
  margin-left: 6px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menubar-music.playing .menubar-music-title {
  color: var(--os-text-primary);
}

/* Separator before music - removed for cleaner look */
.menubar-music::after {
  display: none;
}

/* Title button with dropdown arrow */
.menubar-music-title-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: none;
  background: transparent;
  color: var(--os-text-secondary);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.menubar-music-title-btn:hover {
  background: var(--os-hover-bg);
  color: var(--os-text-primary);
}

.menubar-music-title-btn .menubar-music-title {
  margin-left: 0;
}

.menubar-music-title-btn svg {
  opacity: 0.5;
}

/* Expanded Music Panel */
.menubar-music-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 520px;
  background: var(--os-context-bg);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  box-shadow: var(--os-glass-shadow);
  overflow: hidden;
  z-index: 10010;
  animation: musicPanelSlide 0.2s ease-out;
}

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

/* Now Playing Section */
.music-panel-now-playing {
  padding: 16px;
  background: var(--os-hover-bg);
  border-bottom: 1px solid var(--os-divider);
}

.music-panel-now-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
  margin-bottom: 6px;
}

.music-panel-now-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--os-text-primary);
  line-height: 1.4;
  margin-bottom: 12px;
}

.music-panel-now-actions {
  display: flex;
  gap: 8px;
}

.music-panel-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--os-icon-bg);
  color: var(--os-text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.music-panel-action-btn:hover {
  background: var(--os-icon-bg-hover);
  color: var(--os-text-primary);
}

.music-panel-action-btn.active {
  background: var(--os-active-bg);
  color: var(--os-accent);
}

/* Panel Sections */
.music-panel-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--os-divider);
}

.music-panel-section:last-child {
  border-bottom: none;
}

.music-panel-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
  margin-bottom: 10px;
}

/* Playlists */
.music-panel-playlists {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.music-panel-playlist {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--os-text-secondary);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.music-panel-playlist:hover {
  background: var(--os-hover-bg);
  color: var(--os-text-primary);
}

.music-panel-playlist.active {
  background: var(--os-active-bg);
  color: var(--os-text-primary);
}

.music-panel-playlist-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}

.music-panel-playlist-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-panel-playlist svg {
  color: var(--os-accent);
  flex-shrink: 0;
}

/* Tracks */
.music-panel-tracks {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
}

.music-panel-track {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 6px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--os-text-secondary) !important;
  font-size: 11px !important;
  text-align: left !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: background 0.15s ease !important;
  width: 100% !important;
  pointer-events: auto !important;
}

.music-panel-track:hover:not(:disabled) {
  background: var(--os-hover-bg) !important;
  color: var(--os-text-primary) !important;
}

.music-panel-track:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.music-panel-track.active {
  background: var(--os-active-bg) !important;
  color: var(--os-accent) !important;
}

.music-panel-track svg {
  opacity: 0.5;
  flex-shrink: 0;
}

.music-panel-track:hover svg {
  opacity: 1;
}

.music-panel-more {
  padding: 6px 10px;
  font-size: 10px;
  color: var(--os-text-muted);
  text-align: center;
}

/* Two-column layout */
.music-panel-columns {
  display: flex;
  height: 320px;
}

.music-panel-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--os-divider);
}

.music-panel-left .music-panel-section-header {
  padding: 6px;
  border-bottom: 1px solid var(--os-divider);
  flex-shrink: 0;
}

.music-panel-right {
  width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
}

.music-panel-tracks-column {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.music-panel-tracks-column::-webkit-scrollbar {
  width: 4px;
}

.music-panel-tracks-column::-webkit-scrollbar-track {
  background: transparent;
}

.music-panel-tracks-column::-webkit-scrollbar-thumb {
  background: var(--os-divider);
  border-radius: 2px;
}


.music-panel-track-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.music-panel-empty {
  padding: 20px;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 11px;
}

.music-panel-track-index {
  flex-shrink: 0 !important;
  width: 16px !important;
  font-size: 10px !important;
  color: var(--os-text-muted) !important;
  text-align: right !important;
}

.music-panel-track.active .music-panel-track-index {
  color: var(--os-accent);
}

/* Timer Widget */
.menubar-timer {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 6px;
  background: transparent;
  border: none;
  transition: all 0.2s ease;
  position: relative;
}

.menubar-timer:hover {
  background: rgba(255, 255, 255, 0.06);
}

.menubar-timer.running {
  background: rgba(34, 197, 94, 0.08);
}

.menubar-timer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--os-text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.menubar-timer-btn:hover {
  background: var(--os-hover-bg);
  color: var(--os-text-primary);
}

.menubar-timer.running .menubar-timer-btn {
  color: rgba(34, 197, 94, 1);
}

.menubar-timer-display {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: none;
  background: transparent;
  color: var(--os-text-primary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.menubar-timer-display:hover {
  background: var(--os-hover-bg);
}

.menubar-timer-activity {
  font-size: 11px;
}

.menubar-timer-time {
  font-weight: 500;
}

.menubar-timer.running .menubar-timer-time {
  color: rgba(34, 197, 94, 1);
}

.menubar-timer-display svg {
  opacity: 0.5;
}

/* Timer Panel */
.menubar-timer-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--os-context-bg);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  box-shadow: var(--os-glass-shadow);
  overflow: hidden;
  z-index: 10010;
  animation: timerPanelSlide 0.2s ease-out;
}

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

.timer-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--os-hover-bg);
  border-bottom: 1px solid var(--os-divider);
}

.timer-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--os-text-primary);
}

.timer-panel-daily {
  font-size: 11px;
  color: rgba(34, 197, 94, 0.9);
  font-weight: 500;
}

.timer-panel-section {
  padding: 10px 14px;
}

.timer-panel-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
  margin-bottom: 8px;
}

.timer-panel-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.timer-panel-preset {
  padding: 6px 12px;
  border: none;
  background: var(--os-icon-bg);
  color: var(--os-text-primary);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.timer-panel-preset:hover {
  background: var(--os-icon-bg-hover);
  color: var(--os-text-primary);
}

.timer-panel-activities {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.timer-panel-activity {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--os-icon-bg);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
}

.timer-panel-activity:hover {
  background: var(--os-icon-bg-hover);
  transform: scale(1.1);
}

.timer-panel-activity.active {
  background: var(--os-active-bg);
  box-shadow: 0 0 0 1px var(--os-accent-glow);
}

.timer-panel-actions {
  padding: 10px 14px;
  border-top: 1px solid var(--os-divider);
  display: flex;
  gap: 8px;
}

.timer-panel-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: var(--os-icon-bg);
  color: var(--os-text-secondary);
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.timer-panel-action:hover {
  background: var(--os-icon-bg-hover);
  color: var(--os-text-primary);
}

.timer-panel-action.reset:hover {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.9);
}

/* Separator after timer - removed for cleaner look */
.menubar-timer::after {
  display: none;
}

/* Electron: traffic light padding, window dragging */
.is-electron .os-menubar {
  padding-left: 80px;
  padding-right: 80px;
  -webkit-app-region: drag;
}
.is-electron .os-menubar .menubar-item,
.is-electron .os-menubar .menubar-logo,
.is-electron .os-menubar .menubar-center > *,
.is-electron .os-menubar .menubar-right > * {
  -webkit-app-region: no-drag;
}
.is-electron.is-fullscreen .os-menubar {
  padding-left: 20px;
  padding-right: 20px;
}

/* Tauri: native titlebar handles drag + traffic lights, menubar is always visible */
.is-tauri .os-menubar {
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Show app name next to logo in native shell */
.is-electron .menubar-app-name,
.is-tauri .menubar-app-name {
  display: inline;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--os-text-primary);
  margin-left: 6px;
}

/* ===== Menubar Dropdown Panels (shared) ===== */
.menubar-panel-wrapper {
  position: relative;
}

.menubar-dropdown-panel,
.menubar-weather-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: rgba(18, 18, 24, 0.96);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 10010;
  animation: menubarPanelSlide 0.15s ease-out;
  overflow: hidden;
}

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

/* Shared open-app button */
.menubar-panel-open-btn,
.weather-panel-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 7px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.menubar-panel-open-btn:hover,
.weather-panel-open:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

/* ===== Music/Timer Dropdown shared controls ===== */
.mdp-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mdp-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdp-subtitle {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
}

.mdp-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mdp-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.mdp-btn-main {
  width: 36px;
  height: 36px;
  background: rgba(var(--accent-rgb), 0.8);
  color: white;
}

.mdp-btn-main:hover {
  background: rgba(var(--accent-rgb), 1);
  color: white;
}

.mdp-volume {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 8px;
  color: rgba(255, 255, 255, 0.4);
}

.mdp-volume-slider {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.mdp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.mdp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
}

/* ===== Timer Dropdown specific ===== */
.tdp-ring-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 4px;
}

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

.tdp-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tdp-activity {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: capitalize;
}

.tdp-daily {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

/* ===== Shared tabs row ===== */
.mdp-tabs {
  display: flex;
  gap: 1px;
  padding: 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.mdp-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  border-radius: 0;
}

.mdp-tab:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
}

.mdp-tab.active {
  color: rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--accent-rgb), 0.08);
}

/* ===== Scrollable list (tracks, playlists, favorites) ===== */
.mdp-list {
  max-height: 180px;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.mdp-list::-webkit-scrollbar {
  width: 4px;
}

.mdp-list::-webkit-scrollbar-track {
  background: transparent;
}

.mdp-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

.mdp-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.mdp-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.mdp-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.mdp-list-item.active {
  color: rgba(var(--accent-rgb), 0.95);
}

.mdp-list-idx {
  width: 18px;
  text-align: right;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.mdp-list-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdp-list-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.mdp-fav-star {
  color: rgba(250, 204, 21, 0.7);
  flex-shrink: 0;
}

.mdp-starred {
  color: rgba(250, 204, 21, 0.8) !important;
}

.mdp-music {
  width: 240px;
}

/* ===== Theme switcher dropdown ===== */
.mdp-theme {
  width: 148px;
  padding: 4px;
}

.mdp-theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s;
}

.mdp-theme-option:hover {
  background: var(--os-hover-bg);
}

.mdp-theme-option.active {
  color: var(--accent);
}

.mdp-theme-option span {
  flex: 1;
  text-align: left;
}

/* ===== Timer activity grid ===== */
.tdp-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 6px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tdp-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.1s, transform 0.1s;
}

.tdp-grid-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.tdp-grid-item.active {
  background: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4);
}

/* ===== Timer duration presets ===== */
.tdp-presets {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tdp-preset-btn {
  flex: 1;
  padding: 4px 0;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.tdp-preset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.tdp-preset-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(var(--accent-rgb), 0.95);
}

.weather-panel-current {
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.weather-panel-location {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.weather-panel-main {
  display: flex;
  align-items: center;
  gap: 6px;
}

.weather-panel-main svg {
  opacity: 0.7;
}

.weather-panel-temp {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.02em;
}

.weather-panel-condition {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: auto;
}

.weather-panel-sun {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.weather-panel-sun-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.weather-panel-sun-item svg {
  opacity: 0.6;
}

.weather-panel-daylight {
  color: rgba(250, 204, 21, 0.7);
}

.weather-panel-forecast {
  padding: 4px 0;
}

.weather-panel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.weather-panel-row:first-child {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.weather-panel-day {
  width: 58px;
  flex-shrink: 0;
}

.weather-panel-ficon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.weather-panel-rain {
  width: 28px;
  text-align: right;
  color: rgba(56, 189, 248, 0.7);
  font-size: 10px;
  flex-shrink: 0;
}

.weather-panel-lo {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}

.weather-panel-hi {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.8);
  width: 24px;
  text-align: right;
}

/* =============================================
   LIGHT THEME — Menubar is always dark, so force
   dark-theme OS variables inside menubar scope
   ============================================= */
body.light .os-menubar {
  /* Keep menubar dark in light theme for contrast against wallpaper */
  background: rgba(30, 30, 36, 0.82);
  border-bottom-color: rgba(0, 0, 0, 0.15);
  --os-text-primary: rgba(255, 255, 255, 0.95);
  --os-text-secondary: rgba(255, 255, 255, 0.7);
  --os-text-muted: rgba(255, 255, 255, 0.45);
  --os-text-hint: rgba(255, 255, 255, 0.35);
  --os-hover-bg: rgba(255, 255, 255, 0.1);
  --os-active-bg: rgba(var(--accent-rgb), 0.25);
  --os-divider: rgba(255, 255, 255, 0.12);
  --os-icon-bg: rgba(255, 255, 255, 0.1);
  --os-icon-bg-hover: rgba(255, 255, 255, 0.15);
  --os-glass-border: rgba(255, 255, 255, 0.1);
  --os-context-bg: rgba(20, 20, 30, 0.95);
}
/* DesktopMenu — Reusable menu component */

/* ── Main container ───────────────────────────────────────────── */
.dm-menu {
  position: fixed;
  z-index: 99999;
  min-width: 170px;
  max-width: 280px;
  padding: 4px 0;
  background: rgba(20, 20, 25, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.9);
  overflow: visible;
}

/* ── Scrollable content ───────────────────────────────────────── */
.dm-content {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* ── Items ────────────────────────────────────────────────────── */
.dm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.08s;
  user-select: none;
  white-space: nowrap;
}

.dm-item.dm-active,
.dm-item.dm-sub-trigger.dm-active {
  background: rgba(255, 255, 255, 0.1);
}

.dm-item.dm-disabled {
  opacity: 0.4;
  cursor: default;
}

.dm-item-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 13px;
}

.dm-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-item-shortcut {
  flex-shrink: 0;
  font-size: 11px;
  opacity: 0.5;
  margin-left: 16px;
}

.dm-item-chevron {
  flex-shrink: 0;
  font-size: 14px;
  opacity: 0.5;
  margin-left: 8px;
}

/* ── Divider ──────────────────────────────────────────────────── */
.dm-divider {
  height: 1px;
  margin: 4px 12px;
  background: rgba(255, 255, 255, 0.1);
}

/* ── Header ───────────────────────────────────────────────────── */
.dm-header {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  user-select: none;
}

/* ── Submenu ──────────────────────────────────────────────────── */
.dm-submenu {
  position: absolute;
  min-width: 200px;
  padding: 4px 0;
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  z-index: 3;
  max-height: min(72vh, 520px);
  overflow-y: auto;
}

.dm-submenu.right {
  left: calc(100% + 8px);
}

.dm-submenu.left {
  right: calc(100% + 8px);
}

/* ── Light theme ──────────────────────────────────────────────── */
body.light .dm-menu {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.85);
}

body.light .dm-item.dm-active {
  background: rgba(0, 0, 0, 0.06);
}

body.light .dm-divider {
  background: rgba(0, 0, 0, 0.08);
}

body.light .dm-header {
  color: rgba(0, 0, 0, 0.4);
}

body.light .dm-submenu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light .dm-item-shortcut {
  color: rgba(0, 0, 0, 0.4);
}
/* SpacesSwitcher - Menu bar spaces indicator and switcher */

.spaces-switcher {
  position: relative;
  display: flex;
  align-items: center;
}

/* Mission Control button inside dots pill */
.space-dot.mission-control {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.space-dot.mission-control:hover {
  color: rgba(255, 255, 255, 1);
}

.space-dot:focus-visible {
  outline: none;
}

/* Dot Indicators */
.spaces-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 22px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.spaces-dots:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
}

.spaces-dots.transitioning {
  pointer-events: none;
}

.space-dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.space-dot-inner {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: all 0.2s ease;
}

.space-dot:hover .space-dot-inner {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.space-dot.active .space-dot-inner {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* Desktop menu button */
.space-dot.menu-btn {
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.space-dot.menu-btn:hover {
  color: rgba(255, 255, 255, 1);
}

/* Custom tooltip for dots */
.space-dot-tooltip {
  position: fixed;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 400;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 300000;
  animation: tooltipIn 0.1s ease-out;
}

@keyframes tooltipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-2px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.space-dot.add-space {
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.2s ease;
}

.space-dot.add-space:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

.space-dot.add-space svg {
  color: rgba(255, 255, 255, 0.7);
}

/* Dropdown Panel */
.spaces-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
  z-index: 10100;
  animation: spaces-panel-in 0.15s ease-out;
}

@keyframes spaces-panel-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.spaces-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spaces-panel-add {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.spaces-panel-add:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
}

/* Spaces List */
.spaces-list {
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
}

.space-item {
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.space-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.space-item.active {
  background: rgba(255, 255, 255, 0.1);
}

.space-item-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.space-item-name:hover {
  color: white;
}

.space-item-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.space-item.active .space-item-index {
  background: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 1);
}

.space-item-label {
  flex: 1;
}

/* Drag handle */
.space-item-grip {
  color: rgba(255, 255, 255, 0.15);
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 0 2px;
  transition: color 0.15s ease;
}

.space-item:hover .space-item-grip {
  color: rgba(255, 255, 255, 0.35);
}

.space-item.dragging {
  opacity: 0.3;
}

.space-item.drop-above {
  box-shadow: 0 -2px 0 0 rgba(var(--accent-rgb), 0.6);
}

.space-item.drop-below {
  box-shadow: 0 2px 0 0 rgba(var(--accent-rgb), 0.6);
}

/* Ghost preview during drag */
.space-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-family: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0.85;
  transform: translate(-50%, -50%);
}

/* Edit hint on active desktop */
.space-item-edit-hint {
  color: rgba(255, 255, 255, 0.2);
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.space-item.active:hover .space-item-edit-hint {
  opacity: 1;
}

/* Action buttons (pin, delete) */
.space-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.space-item:hover .space-item-actions {
  opacity: 1;
}

/* Always show pin icon if pinned */
.space-item-actions:has(.pinned) {
  opacity: 1;
}

.space-action-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.space-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.space-action-btn.pinned {
  color: rgba(var(--accent-rgb), 0.8);
}

.space-action-btn.pinned:hover {
  color: rgba(var(--accent-rgb), 1);
}

.space-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.9);
}

/* Name Input */
.space-name-input {
  flex: 1;
  margin: 4px 6px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 13px;
  outline: none;
}

.space-name-input:focus {
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

/* Panel Footer */
.spaces-panel-footer {
  padding: 6px 12px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.spaces-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

/* ============================================
   Mini Desktop Preview
   ============================================ */

.space-preview {
  position: fixed;
  transform: translateX(-50%);
  background: rgba(20, 20, 25, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
  z-index: 10200;
  animation: space-preview-in 0.15s ease-out;
  pointer-events: auto;
}

@keyframes space-preview-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.space-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.space-preview-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.space-preview-count {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
}

/* Viewport clips the scaled content */
.space-preview-viewport {
  width: 240px;
  height: 150px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(30, 30, 40, 1) 0%, rgba(20, 20, 30, 1) 100%);
}

/* Full-size desktop scaled down */
.space-preview-desktop-scaled {
  position: absolute;
  width: 1920px;
  height: 1080px;
  transform: scale(0.125);
  transform-origin: top left;
  pointer-events: none;
}

/* Full-size dock representation */
.space-preview-dock-full {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 64px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Individual note in preview */
.space-preview-note {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.space-preview-note.video,
.space-preview-note.website,
.space-preview-note.game {
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

.space-preview-note.image {
  background: transparent !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Text note content */
.preview-note-text {
  padding: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  height: 100%;
}

/* Image note */
.preview-note-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video note with thumbnail */
.preview-note-video {
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
}

.preview-note-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-note-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 0, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* Website note */
.preview-note-website {
  width: 100%;
  height: 100%;
  background: rgba(30, 30, 35, 0.95);
  display: flex;
  flex-direction: column;
}

.preview-note-website-bar {
  height: 28px;
  background: rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Game note */
.preview-note-game {
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 25, 0.95);
  display: flex;
  flex-direction: column;
}

.preview-note-game-bar {
  height: 32px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(var(--accent-rgb), 0.9));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  font-weight: 600;
}

.preview-note-game img {
  flex: 1;
  width: 100%;
  object-fit: cover;
}

/* Embed preview */
.space-preview-note.embed {
  background: rgba(30, 30, 40, 0.9);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.preview-note-embed {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.preview-note-embed-bar {
  height: 32px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.9), rgba(234, 88, 12, 0.9));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  font-weight: 600;
}

/* Empty state */
.space-preview-empty-full {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 24px;
}

/* Delete confirmation dialog */
.space-delete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spaceDeleteFadeIn 0.15s ease;
}

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

.space-delete-dialog {
  background: rgba(30, 30, 40, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px 28px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  animation: spaceDeleteSlideIn 0.2s ease;
}

@keyframes spaceDeleteSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.space-delete-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.1);
  color: rgba(239, 68, 68, 0.8);
}

.space-delete-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 6px;
}

.space-delete-message {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin-bottom: 18px;
}

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

.space-delete-btn {
  flex: 1;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s ease;
}

.space-delete-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.space-delete-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.space-delete-btn.confirm {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.9);
}

.space-delete-btn.confirm:hover {
  background: rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 1);
}
/* Shared Window Component - Zen Glassmorphism (matches classical view panels) */
.window {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: var(--os-glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 10px;
  border: 1px solid var(--os-glass-border);
  box-shadow: var(--os-glass-shadow);
  overflow: hidden;
  transition: box-shadow 0.4s ease, opacity 0.4s ease, transform 0.3s ease, border-radius 0.3s ease;
  color: var(--os-text-primary);
}

/* Unsnap animation - when leaving snapped state */
.window.unsnapping {
  animation: windowUnsnapOut 0.3s ease-out forwards;
}

@keyframes windowUnsnapOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

.window:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.window.dragging {
  opacity: 1;
  cursor: grabbing;
  transition: none;
  transform: scale(1.01);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  /* Use solid background during drag instead of expensive blur */
  background: var(--os-glass-bg-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  will-change: transform;
}

.window.resizing {
  transition: none;
  /* Use solid background during resize instead of expensive blur */
  background: var(--os-glass-bg-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Shake animation when trying to open already-open window */
.window.shake {
  animation: windowShake 0.4s ease-in-out;
}

@keyframes windowShake {
  0%, 100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-8px);
  }
  30% {
    transform: translateX(8px);
  }
  45% {
    transform: translateX(-6px);
  }
  60% {
    transform: translateX(6px);
  }
  75% {
    transform: translateX(-3px);
  }
  90% {
    transform: translateX(3px);
  }
}

/* Maximized: edge-to-edge, no styling */
.window.maximized {
  border-radius: 0;
  border: none;
  background: var(--os-glass-bg-solid, #000000);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Smooth push-down when menubar auto-shows over maximized window */
.window.maximized.menubar-push {
  transition: top 0.25s ease, height 0.25s ease;
}

/* Smooth geometry transition — added temporarily during snap/maximize/restore */
.window.animating-geometry {
  transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              top 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.25s ease,
              box-shadow 0.25s ease;
}

/* Snapped: keep rounded corners and glass effect */
.window.snapped-left,
.window.snapped-right,
.window.snapped-top-left,
.window.snapped-top-right,
.window.snapped-top,
.window.snapped-bottom,
.window.snapped-bottom-left,
.window.snapped-bottom-right,
.window.snapped-ai-adjacent {
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Edge-touching sides get no radius and no border (flush to screen edge).
   Top edges always flush to menubar (no top radius). */
.window.snapped-left {
  border-radius: 0 0 10px 0;
  border-top: none;
  border-left: none;
  border-bottom: none;
}
.window.snapped-right {
  border-radius: 0 0 0 10px;
  border-top: none;
  border-right: none;
  border-bottom: none;
}
.window.snapped-top {
  border-radius: 0 0 10px 10px;
  border-top: none;
  border-left: none;
  border-right: none;
}
.window.snapped-bottom {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  border-left: none;
  border-right: none;
}
.window.snapped-top-left {
  border-radius: 0 0 10px 0;
  border-top: none;
  border-left: none;
  border-bottom: none;
}
.window.snapped-top-right {
  border-radius: 0 0 0 10px;
  border-top: none;
  border-right: none;
  border-bottom: none;
}
.window.snapped-bottom-left {
  border-radius: 0 10px 0 0;
  border-bottom: none;
  border-left: none;
}
.window.snapped-bottom-right {
  border-radius: 10px 0 0 0;
  border-bottom: none;
  border-right: none;
}

/* AI-adjacent snap - window bonded to AI panel */
.window.snapped-ai-adjacent {
  left: 0 !important;
  top: 28px !important;
  height: calc(100vh - 28px - 80px) !important;
  border-radius: 0;
  animation: windowSnapIn 0.35s ease-out forwards;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset -12px 0 40px -30px rgba(var(--accent-rgb), 0.08);
}

/* During resize drag, sync width instantly via CSS variable */
body.dragging-separator .window.snapped-ai-adjacent {
  width: calc(100vw - var(--ai-panel-width)) !important;
  transition: none !important;
  animation: none !important;
}

/* Soft glowing edge on the right */
.window.snapped-ai-adjacent::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-rgb), 0.1) 0%,
    rgba(var(--accent-rgb), 0.4) 50%,
    rgba(var(--accent-rgb), 0.1) 100%
  );
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
  animation: bondEdgeGlow 4s ease-in-out infinite;
  z-index: 100;
}

@keyframes windowSnapIn {
  0% {
    transform: translateX(8px);
    opacity: 0.9;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bondEdgeGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.2);
    opacity: 0.7;
  }
  50% {
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.35);
    opacity: 1;
  }
}

.window.maximized {
  background: var(--os-glass-bg-solid, #141418);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  /* Stay position: absolute within .os-desktop (which has top: 40px for menubar) */
}

/* Keep titlebar visible in maximized mode */
.window.maximized .window-titlebar {
  height: 36px;
  background: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.window.maximized .window-title,
.window.maximized:hover .window-title {
  color: var(--os-text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.window.maximized .window-title svg,
.window.maximized:hover .window-title svg {
  opacity: 0.85;
}

.window.maximized .window-controls {
  opacity: 1;
}

/* Electron: when maximized, hide app traffic lights (native macOS ones handle desktop control) */
.is-electron .window.maximized .window-controls {
  display: none;
}

/* Electron: when maximized with app dots hidden, pad title to clear native traffic lights */
.is-electron .window.maximized .window-titlebar {
  padding-left: 80px;
}

/* Tauri: when maximized, hide close/minimize dots (native titlebar has them),
   keep maximize button so user can restore/un-maximize */
.is-tauri .window.maximized .window-control.close,
.is-tauri .window.maximized .window-control.minimize {
  display: none;
}

.window.maximized .window-resize-handle {
  display: none;
}

/* Snap preview overlay */
.window-snap-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
  background: rgba(var(--accent-rgb), 0.15);
  border: 2px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 10px;
  z-index: 10000001;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

/* AI-adjacent snap preview - fills space left of AI panel */
.window-snap-preview.ai-adjacent {
  /* position is set dynamically via inline style */
  background: linear-gradient(
    90deg,
    rgba(var(--accent-rgb), 0.02) 0%,
    rgba(var(--accent-rgb), 0.06) 100%
  );
  border: 2px solid rgba(var(--accent-rgb), 0.3);
  box-shadow: inset -20px 0 40px -20px rgba(var(--accent-rgb), 0.08);
  animation: aiSnapPreviewIn 0.2s ease-out forwards;
  position: relative;
  overflow: hidden;
}

@keyframes aiSnapPreviewIn {
  0% {
    opacity: 0;
    transform: scaleX(0.98);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}


/* Title bar */
.window-titlebar {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border-bottom: 1px solid var(--os-divider);
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
  position: relative;
  /* Ensure titlebar stays above app content */
  z-index: 100;
}

/* When maximized, titlebar is not draggable */
.window.maximized .window-titlebar {
  cursor: default;
}

.window.dragging .window-titlebar {
  cursor: grabbing;
}

/* Traffic light controls - subtle zen style */
.window-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 10;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  -webkit-app-region: no-drag;
}

.window:hover .window-controls {
  opacity: 1;
}

.window-control {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.window-control::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Close button - Vibrant Red (macOS style) */
.window-control.close {
  background: #ff5f56;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.window-control.close:hover {
  background: #ff3b30;
  transform: scale(1.1);
}

.window-control.close::before {
  content: '×';
  font-size: 9px;
  color: rgba(80, 0, 0, 0.6);
}

/* Minimize button - Vibrant Yellow (macOS style) */
.window-control.minimize {
  background: #febc2e;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.window-control.minimize:hover {
  background: #f5a623;
  transform: scale(1.1);
}

.window-control.minimize::before {
  content: '−';
  font-size: 11px;
  color: rgba(120, 80, 0, 0.6);
}

/* Maximize button - Vibrant Green (macOS style) */
.window-control.maximize {
  background: #28c840;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.window-control.maximize:hover {
  background: #1db954;
  transform: scale(1.1);
}

/* macOS-style expand arrows — diagonal triangle pair */
.window-control.maximize::before {
  content: '⤢';
  font-size: 9px;
  color: rgba(0, 80, 0, 0.6);
  line-height: 1;
}

/* Restore state — inward arrows */
.window-control.maximize.is-restore::before {
  content: '⤡';
}

/* Pin button - Vibrant Purple */
.window-control.pin {
  background: #bf5af2;
  margin-left: 4px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.window-control.pin:hover {
  background: #a347d1;
  transform: scale(1.1);
}

.window-control.pin.pinned {
  background: #af52de;
}

.window-control.pin.pinned:hover {
  background: #9340bf;
}

.window-control.pin::before {
  content: '•';
  font-size: 9px;
  color: rgba(0, 0, 0, 0.5);
}

.window-control.pin.pinned::before {
  content: '•';
  color: rgba(0, 0, 0, 0.6);
}

/* Right side of titlebar */
.window-titlebar-right {
  display: flex;
  align-items: center;
  padding-right: 10px;
  min-width: 38px;
  justify-content: flex-end;
}

.window-open-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.window-open-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
}

.window-controls:hover .window-control::before {
  opacity: 1;
}

/* Traffic light tooltips */
.window-control[data-tooltip] {
  position: relative;
}

.window-control[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.85);
  color: var(--os-text-primary);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: 10020;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.2px;
}

.window-control[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.5s;
}

/* Light theme tooltip adjustments */
body.light .window-control[data-tooltip]::after {
  background: rgba(30, 30, 40, 0.92);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Light theme: consistent solid white background for all windows */
body.light .window {
  background: var(--os-glass-bg-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Light theme: remove accent glow on AI-snapped windows */
body.light .window.snapped-ai-adjacent {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
body.light .window.snapped-ai-adjacent::after {
  display: none;
}

/* Title */
.window-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--os-text-muted);
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.window:hover .window-title {
  color: var(--os-text-secondary);
}

.window-title svg {
  opacity: 0.5;
}

.window:hover .window-title svg {
  opacity: 0.7;
}

/* Legacy spacer — kept for backward compat */
.window-titlebar-spacer {
  width: 38px;
}

/* Body content */
.window-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  min-height: 0;
  /* Contain app elements - prevents z-index escaping beyond window */
  isolation: isolate;
  contain: layout style paint;
  position: relative;
  /* Inherit user-select: none from desktop — specific content areas re-enable it */
  user-select: none;
  -webkit-user-select: none;
  /* Match window's bottom corners so app content clips to the curve */
  border-radius: 0 0 10px 10px;
}


/* Disable pointer events on all window content during drag/resize
   to prevent iframes, canvases, and complex content from capturing events */
body.os-window-dragging .window-body,
body.os-window-resizing .window-body {
  pointer-events: none;
}

/* Resize handle — larger hit area, inset from edge */
.window-resize-handle {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  cursor: nwse-resize;
  opacity: 0.3;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.window:hover .window-resize-handle {
  opacity: 0.6;
}

.window-resize-handle:hover {
  opacity: 1 !important;
}

.window-resize-handle::before {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--os-text-muted);
  border-bottom: 2px solid var(--os-text-muted);
  border-radius: 0 0 2px 0;
  transition: border-color 0.15s ease;
}

.window-resize-handle:hover::before {
  border-color: var(--os-accent, #a78bfa);
}

/* Window Context Menu */
.window-context-menu {
  position: absolute;
  min-width: 180px;
  padding: 6px;
  background: var(--os-context-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 12px;
  border: 1px solid var(--os-glass-border);
  box-shadow: var(--os-glass-shadow);
  z-index: 10010;
  animation: windowContextMenuIn 0.12s ease-out;
}

@keyframes windowContextMenuIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.window-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--os-text-primary);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.1s ease;
}

.window-context-item:hover {
  background: var(--os-hover-bg);
}

.window-context-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.window-context-item.disabled {
  opacity: 0.5;
  cursor: default;
}

.window-context-item.disabled:hover {
  background: transparent;
}

.window-context-divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--os-divider);
}

.window-context-item.has-submenu {
  cursor: default;
}

.window-context-item .submenu-arrow {
  margin-left: auto;
  opacity: 0.5;
}

.window-context-submenu-container {
  position: relative;
}

.window-context-submenu {
  position: absolute;
  left: calc(100% - 4px);
  top: 0;
  min-width: 160px;
  padding: 6px;
  background: var(--os-context-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 12px;
  border: 1px solid var(--os-glass-border);
  box-shadow: var(--os-glass-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: all 0.15s ease;
}

.window-context-submenu-container:hover .window-context-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.window-context-submenu .space-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.window-context-submenu .current-check {
  margin-left: auto;
  color: rgba(34, 197, 94, 0.9);
}

/* Checkmark for selected options */
.window-context-item .check-icon {
  margin-left: auto;
  opacity: 0.9;
}

/* Scrollbar styling */
.window-body::-webkit-scrollbar {
  width: 8px;
}

.window-body::-webkit-scrollbar-track {
  background: transparent;
}

.window-body::-webkit-scrollbar-thumb {
  background: var(--os-divider);
  border-radius: 4px;
}

.window-body::-webkit-scrollbar-thumb:hover {
  background: var(--os-text-muted);
}
.app-error-boundary {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 2rem;
  box-sizing: border-box;
}

.app-error-content {
  text-align: center;
  max-width: 500px;
  color: rgba(255, 255, 255, 0.9);
}

.app-error-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.app-error-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: #f87171;
}

.app-error-message {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1.5rem 0;
  word-break: break-word;
}

.app-error-stack {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: left;
  overflow: auto;
  max-height: 150px;
}

.app-error-stack pre {
  margin: 0;
  font-size: 0.75rem;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  color: rgba(255, 255, 255, 0.6);
  white-space: pre-wrap;
  word-break: break-all;
}

.app-error-copy {
  margin-top: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.15s ease;
}

.app-error-copy:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.app-error-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.app-error-retry,
.app-error-close {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.app-error-retry {
  background: #3b82f6;
  color: white;
  border: none;
}

.app-error-retry:hover {
  background: #2563eb;
}

.app-error-close {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.app-error-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.app-error-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}
/* App Window - Content-specific styles (uses shared Window component) */
.app-window-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  /* Contain app elements - prevents z-index escaping beyond window */
  isolation: isolate;
  contain: layout style paint;
  position: relative;
}

.app-window-content > * {
  flex: 1;
  min-height: 0;
}
/* Finder Window - Content-specific styles (uses shared Window component) */

/* Body with sidebar */
.finder-window-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

/* Sidebar */
.finder-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 0;
  overflow-y: auto;
}

.finder-sidebar-section {
  margin-bottom: 20px;
}

.finder-sidebar-header {
  padding: 6px 20px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.35);
}

.finder-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  margin: 0 8px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.finder-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.finder-sidebar-item.active {
  background: rgba(59, 130, 246, 0.25);
  color: white;
}

.finder-sidebar-item svg {
  opacity: 0.6;
  flex-shrink: 0;
}

.finder-sidebar-item.active svg {
  opacity: 1;
}

/* App items styling - opens in separate window */
.finder-sidebar-item.is-app {
  color: rgba(255, 255, 255, 0.65);
  position: relative;
}

.finder-sidebar-item.is-app::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.3);
  border-top: 1.5px solid rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) rotate(45deg);
}

.finder-sidebar-item.is-app:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(var(--accent-rgb), 0.15);
}

.finder-sidebar-item.is-app:hover::after {
  border-color: rgba(255, 255, 255, 0.5);
}

/* Main content */
.finder-main {
  flex: 1;
  overflow: auto;
  min-width: 0;
  padding: 0;
}

/* Override panel styles inside finder */
.finder-main .panel,
.finder-main .section-card,
.finder-main .collapsible-panel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.finder-main .floating-panel-wrapper {
  padding: 0;
}

/* Hide panel headers since we have the sidebar navigation */
.finder-main .body-content-header.collapsible-header {
  display: none;
}

.finder-main .collapsible-content {
  padding: 1.25rem !important;
}

.finder-main .next-panel-content {
  padding: 1.25rem !important;
}

/* Journal pages inside finder */
.finder-main .page-panel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1.25rem !important;
}

/* App containers inside finder */
.finder-main .app-container,
.finder-main .sandbox-app {
  height: 100%;
  width: 100%;
}

/* NewsPanel specific - ensure it displays properly */
.finder-main .news-panel {
  height: 100%;
}

.finder-main .news-panel .news-panel-content {
  height: calc(100% - 56px);
  overflow: auto;
}

/* Pinned indicator in sidebar */
.finder-sidebar-pinned-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  opacity: 0.4;
}

.finder-sidebar-item.pinned .finder-sidebar-pinned-indicator {
  opacity: 0.5;
}

/* Context Menu */
.finder-context-menu {
  position: fixed;
  min-width: 180px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  z-index: 10010;
  animation: finderContextMenuIn 0.12s ease-out;
}

@keyframes finderContextMenuIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.finder-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.1s ease;
}

.finder-context-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.finder-context-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}

/* Sidebar scrollbar */
.finder-sidebar::-webkit-scrollbar {
  width: 8px;
}

.finder-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.finder-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.finder-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* =============================================
   LIGHT THEME SUPPORT
   ============================================= */

/* Sidebar */
body.light .finder-sidebar {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.06) 100%
  );
  border-right-color: rgba(0, 0, 0, 0.08);
}

body.light .finder-sidebar-header {
  color: rgba(0, 0, 0, 0.45);
}

body.light .finder-sidebar-item {
  color: rgba(0, 0, 0, 0.75);
}

body.light .finder-sidebar-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.92);
}

body.light .finder-sidebar-item.active {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

/* App items */
body.light .finder-sidebar-item.is-app {
  color: rgba(0, 0, 0, 0.65);
}

body.light .finder-sidebar-item.is-app::after {
  border-color: rgba(0, 0, 0, 0.3);
}

body.light .finder-sidebar-item.is-app:hover {
  color: rgba(0, 0, 0, 0.85);
  background: rgba(var(--accent-rgb), 0.1);
}

body.light .finder-sidebar-item.is-app:hover::after {
  border-color: rgba(0, 0, 0, 0.5);
}

/* Context Menu */
body.light .finder-context-menu {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

body.light .finder-context-item {
  color: rgba(0, 0, 0, 0.85);
}

body.light .finder-context-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Scrollbar */
body.light .finder-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

body.light .finder-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
/* Common Styles for Command Center Panels */

/* ==========================================
   COLLAPSIBLE PANELS - Shared Styles
   ========================================== */

.collapsible-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  position: relative;
  padding: 0 !important;
}

/* Collapsed state */
.collapsible-panel.collapsed {
  grid-template-rows: auto 0fr;
}

/* ==========================================
   HEADER - Consistent height, padding, layout
   ========================================== */

.collapsible-panel .body-content-header {
  position: relative;
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* ==========================================
   CONTENT - Consistent padding
   ========================================== */

.collapsible-panel .collapsible-content {
  padding: 0.75rem 1.5rem 1.5rem !important;
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease;
}

.collapsible-panel .next-panel-content {
  padding: 0 !important;
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease;
}

.collapsible-panel.collapsed .collapsible-content,
.collapsible-panel.collapsed .next-panel-content {
  opacity: 0;
  pointer-events: none;
  min-height: 0;
  padding: 0 !important;
}

/* Clickable header */
.collapsible-header {
  cursor: pointer;
}

.collapsible-header:hover h3 {
  color: rgba(255, 255, 255, 0.95);
}

body.light .collapsible-header:hover h3 {
  color: rgba(0, 0, 0, 0.95);
}

/* Title row takes full width */
.collapsible-panel .body-content-title-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Title group on the left */
.collapsible-panel .p1-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.collapsible-panel .p1-title-group h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* Actions always on the right, fixed position */
.collapsible-panel .body-content-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* All icon buttons: 28x28px */
.collapsible-panel .view-toggle-btn,
.collapsible-panel .add-item-btn,
.collapsible-panel .section-link-btn,
.collapsible-panel .btn-icon-link,
.collapsible-panel .section-collapse-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  min-height: 28px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Standardize icon sizes */
.collapsible-panel .view-toggle-btn svg,
.collapsible-panel .add-item-btn svg,
.collapsible-panel .section-link-btn svg,
.collapsible-panel .btn-icon-link svg,
.collapsible-panel .section-collapse-btn svg {
  width: 14px;
  height: 14px;
}

/* Flush button - taller with text */
.collapsible-panel .flush-btn {
  height: 28px !important;
  padding: 0 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 6px;
  font-size: 0.75rem;
}

.collapsible-panel .flush-btn svg {
  width: 14px;
  height: 14px;
}

/* Badges - same height as buttons */
.collapsible-panel .week-badge,
.collapsible-panel .subtitle-muted,
.collapsible-panel .collapsed-count {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 0.75rem;
  border-radius: 6px;
}

.collapsible-panel .collapsed-count {
  margin-left: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

body.light .collapsible-panel .collapsed-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}

/* Section icon wrapper - consistent size */
.collapsible-panel .section-icon-wrapper {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.collapsible-panel .section-icon-wrapper svg {
  width: 18px;
  height: 18px;
}

/* Collapse button - consistent across all panels */
.section-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.section-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.section-collapse-btn svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible-panel.collapsed .section-collapse-btn svg {
  transform: rotate(180deg);
}

/* Light theme */
body.light .section-collapse-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

body.light .section-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.8);
}

/* Zen theme */
body.zen .section-collapse-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.6));
}

body.zen .section-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.9));
}

/* Collapsed count badge */
.collapsed-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  margin-left: 0.5rem;
}

body.light .collapsed-count {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.06);
}

body.zen .collapsed-count {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.5));
  background: rgba(255, 255, 255, 0.1);
}

/* Active Projects Grid */
.active-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.active-project-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.active-project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple, var(--accent)));
  opacity: 0.8;
}

.active-project-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

body.light .active-project-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light .active-project-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body.zen .active-project-card {
  background: rgb(255 255 255 / calc(var(--zen-panel-opacity, 15%) + 2%));
  border-color: rgba(255, 255, 255, 0.1);
}

body.zen .active-project-card:hover {
  background: rgb(255 255 255 / calc(var(--zen-panel-opacity, 15%) + 5%));
}

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

.active-project-header svg {
  color: var(--accent-blue);
  opacity: 0.9;
}

.active-project-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  flex: 1;
}

body.light .active-project-header h3 {
  color: rgba(0, 0, 0, 0.85);
}

body.zen .active-project-header h3 {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.95));
}

.active-project-description {
  color: rgba(255, 255, 255, 0.6);
}

body.light .active-project-description {
  color: rgba(0, 0, 0, 0.5);
}

body.zen .active-project-description {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.6));
  opacity: 0.7;
}

.active-project-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  font-size: 0.8rem;
}

body.light .active-project-stats {
  background: rgba(0, 0, 0, 0.04);
}

body.zen .active-project-stats {
  background: rgba(0, 0, 0, 0.1);
}

.project-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

body.light .project-stat {
  color: rgba(0, 0, 0, 0.5);
}

body.zen .project-stat {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.6));
  opacity: 0.7;
}

.project-stat svg {
  opacity: 0.8;
}

.project-stat.in-progress {
  color: var(--accent-blue);
}

body.light .project-stat.in-progress {
  color: var(--accent-blue);
}

.project-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-left: auto;
}

body.light .project-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}

.project-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-green), #34d399);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.active-project-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.project-task-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

body.light .project-task-item {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.02);
}

body.light .project-task-item:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
}

body.zen .project-task-item {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.8));
  background: rgba(255, 255, 255, 0.03);
}

.project-task-item svg {
  flex-shrink: 0;
  margin-top: 3px;
}

/* Ledger Panel Specific */
.ledger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.ledger-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.ledger-item {
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

body.light .ledger-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}

/* P1 Actions Panel - Checkbox Column */
.checkbox-column {
  width: 40px;
  padding: 0.5rem !important;
  text-align: center;
}

.complete-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
}

.complete-checkbox:hover {
  color: rgba(34, 197, 94, 0.8);
  transform: scale(1.1);
}

.complete-checkbox:hover svg {
  stroke-width: 2.5;
}

body.light .complete-checkbox {
  color: rgba(0, 0, 0, 0.25);
}

body.light .complete-checkbox:hover {
  color: rgba(34, 197, 94, 0.9);
}

/* P1 Category View */
.p1-category-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p1-category-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}

.p1-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.p1-category-icon {
  font-size: 1rem;
}

.p1-category-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  flex: 1;
}

.p1-category-count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.p1-category-items {
  display: flex;
  flex-direction: column;
}

.p1-category-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

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

.p1-category-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.p1-category-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.p1-category-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.p1-category-item-name {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.p1-category-item-notes {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.p1-category-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.p1-category-item:hover .p1-category-item-actions {
  opacity: 1;
}

/* Light theme category view */
body.light .p1-category-group {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .p1-category-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .p1-category-label {
  color: rgba(0, 0, 0, 0.85);
}

body.light .p1-category-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}

body.light .p1-category-item {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

body.light .p1-category-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

body.light .p1-category-item-name {
  color: rgba(0, 0, 0, 0.85);
}

body.light .p1-category-item-notes {
  color: rgba(0, 0, 0, 0.5);
}

/* P1 Completed Section - now inside the panel */
.p1-completed-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.light .p1-completed-section {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.p1-completed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 0.5rem 0;
  user-select: none;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.15s ease;
}

.p1-completed-header:hover {
  color: rgba(255, 255, 255, 0.9);
}

.p1-completed-title {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.p1-completed-count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  color: #4ade80;
  margin-left: auto;
}

.p1-completed-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.p1-completed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.p1-completed-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.uncomplete-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #4ade80;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.uncomplete-checkbox:hover {
  color: rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}

.p1-completed-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.p1-completed-name {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  font-size: 0.9rem;
}

.category-tag-mini {
  font-size: 0.8rem;
  opacity: 0.7;
}

.p1-completed-time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Light theme completed section */
body.light .p1-completed-header {
  color: rgba(0, 0, 0, 0.5);
}

body.light .p1-completed-header:hover {
  color: rgba(0, 0, 0, 0.8);
}

body.light .p1-completed-count {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
  color: #16a34a;
}

body.light .p1-completed-list {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .p1-completed-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

body.light .uncomplete-checkbox {
  color: #16a34a;
}

body.light .uncomplete-checkbox:hover {
  color: rgba(0, 0, 0, 0.6);
}

body.light .p1-completed-name {
  color: rgba(0, 0, 0, 0.4);
}

body.light .p1-completed-time {
  color: rgba(0, 0, 0, 0.35);
}

/* P1 Header Actions */
.p1-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.15s ease;
}

.view-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.view-toggle-btn.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

body.light .view-toggle-btn {
  color: rgba(0, 0, 0, 0.35);
}

body.light .view-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
}

body.light .view-toggle-btn.active {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}

/* ============================================
   MODAL STYLES (for P1 Actions Panel and other modals)
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadeIn 0.15s ease;
}

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

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

.modal-content {
  width: 100%;
  max-width: 500px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  overflow: hidden;
  animation: slideUp 0.2s ease;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

body.light .modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

body.light .modal-header {
  border-color: rgba(0, 0, 0, 0.08);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

body.light .modal-header h3 {
  color: rgba(0, 0, 0, 0.85);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

body.light .modal-close {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.5);
}

body.light .modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

body.light .modal-footer {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}

/* Form Styles */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

body.light .form-group label {
  color: rgba(0, 0, 0, 0.7);
}

.modal-content .form-group input,
.modal-content .form-group select,
.modal-content .form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.9rem;
  font-family: inherit;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.modal-content .form-group input:focus,
.modal-content .form-group select:focus,
.modal-content .form-group textarea:focus {
  outline: none;
  border-color: rgba(201, 162, 39, 0.5) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1);
}

.modal-content .form-group input::placeholder,
.modal-content .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

body.light .modal-content .form-group input,
body.light .modal-content .form-group select,
body.light .modal-content .form-group textarea {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

body.light .modal-content .form-group input:focus,
body.light .modal-content .form-group select:focus,
body.light .modal-content .form-group textarea:focus {
  border-color: rgba(201, 162, 39, 0.6) !important;
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}

body.light .modal-content .form-group input::placeholder,
body.light .modal-content .form-group textarea::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

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

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

/* Modal Buttons */
.modal-btn {
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  font-family: inherit;
}

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

.modal-btn.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.modal-btn.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}

body.light .modal-btn.secondary {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}

body.light .modal-btn.secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
}

.modal-btn.primary {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.9), rgba(139, 92, 42, 0.9));
  color: white;
  font-weight: 600;
}

.modal-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(201, 162, 39, 1), rgba(139, 92, 42, 1));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
}

.modal-btn.primary:disabled {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.4);
}

body.light .modal-btn.primary:disabled {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.3);
}

.modal-btn.danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
  color: white;
  font-weight: 600;
}

.modal-btn.danger:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(239, 68, 68, 1), rgba(220, 38, 38, 1));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Confirm Modal (smaller) */
.modal-content.confirm-modal {
  max-width: 400px;
}

.confirm-modal .modal-body {
  padding: 1.5rem;
}

.confirm-modal .modal-body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

body.light .confirm-modal .modal-body p {
  color: rgba(0, 0, 0, 0.7);
}

.confirm-modal .modal-body strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

body.light .confirm-modal .modal-body strong {
  color: rgba(0, 0, 0, 0.9);
}


/* ===========================================
   WEEKLY OBJECTIVES PANEL (Command Center)
   Uses shared collapsible-panel styles from CommandCenterPanels.css
   =========================================== */

.objectives-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.objectives-list-wrapper,
.objectives-content {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
  padding: 0.25rem;
  margin: -0.25rem;
}

.objectives-list-wrapper:hover,
.objectives-content:hover {
  background: rgba(15, 15, 20, 0.75);
}

body.light .objectives-list-wrapper:hover,
body.light .objectives-content:hover {
  background: rgba(0, 0, 0, 0.03);
}

.objective-item {
  margin: 0;
  padding: 0;
}

.objective-item.checked .objective-text {
  opacity: 0.5;
  text-decoration: line-through;
}

.objective-content {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.3rem 0;
  line-height: 1.5;
}

.objective-bullet {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.objective-bullet.done {
  color: #22c55e;
}

body.light .objective-bullet {
  color: rgba(0, 0, 0, 0.35);
}

.objective-text {
  flex: 1;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

body.light .objective-text {
  color: rgba(0, 0, 0, 0.8);
}

.objective-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.objectives-content {
  padding: 0.5rem;
}

.objectives-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.objectives-empty svg {
  opacity: 0.5;
}

.objectives-empty p {
  margin: 0;
  font-size: 0.9rem;
}

.objectives-empty {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.objectives-empty:hover {
  background: rgba(15, 15, 20, 0.75);
}

.objectives-empty-hint {
  font-size: 0.75rem;
  opacity: 0.6;
  font-style: italic;
}

body.light .objectives-empty:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .objectives-empty {
  color: rgba(0, 0, 0, 0.5);
}

.set-objectives-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.set-objectives-link:hover {
  background: rgba(251, 146, 60, 0.25);
}

body.light .set-objectives-link {
  background: rgba(249, 115, 22, 0.1);
  color: #ea580c;
}

body.light .set-objectives-link:hover {
  background: rgba(249, 115, 22, 0.2);
}

.objectives-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

body.light .objectives-loading {
  color: rgba(0, 0, 0, 0.5);
}

.week-badge {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  margin-left: auto;
  margin-right: 0.5rem;
}

body.light .week-badge {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.05);
}





/* News Panel - Uses shared collapsible-panel styles from CommandCenterPanels.css */
.news-panel {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* News-specific content wrapper */
.news-panel .news-panel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Two-column layout for full-width news panel */
.news-panel.two-column .news-panel-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.news-panel.two-column .briefing-section {
  border-bottom: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding-right: 2rem;
  padding-bottom: 0;
}

body.light .news-panel.two-column .briefing-section {
  border-right-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
  .news-panel.two-column .news-panel-content {
    grid-template-columns: 1fr;
  }

  .news-panel.two-column .briefing-section {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-right: 0;
    padding-bottom: 14px;
  }
}

/* News meta badge in header */
.news-meta-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 0.5rem;
}

body.light .news-meta-badge {
  color: rgba(0, 0, 0, 0.5);
}

body.zen .news-meta-badge {
  color: var(--zen-panel-font-color, rgba(255, 255, 255, 0.5));
}

/* Spinning refresh button */
.news-panel .view-toggle-btn.spinning svg {
  animation: spin 1s linear infinite;
}

/* Fullscreen mode - Newspaper style */
.news-panel.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
  overflow: hidden;
  grid-template-rows: auto auto 1fr !important;
  /* Override inherited text color from Window component */
  color: rgba(0, 0, 0, 0.85) !important;
  /* Newspaper paper background with subtle texture */
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Fullscreen masthead - match paper background */
.news-panel.fullscreen .newspaper-masthead,
.news-panel.fullscreen .newspaper-masthead.nyt-style {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  border-bottom-color: rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 200; /* Above sidebar and pulse-layout */
  padding-left: 60px !important; /* Space for collapsed sidebar */
}

/* When sidebar is expanded, need more space */
.news-panel.fullscreen.has-sidebar:not(.sidebar-collapsed) .newspaper-masthead,
.news-panel.fullscreen.has-sidebar:not(.sidebar-collapsed) .newspaper-masthead.nyt-style {
  padding-left: 300px !important; /* Space for expanded sidebar */
}

/* When sidebar is collapsed */
.news-panel.fullscreen.has-sidebar.sidebar-collapsed .newspaper-masthead,
.news-panel.fullscreen.has-sidebar.sidebar-collapsed .newspaper-masthead.nyt-style {
  padding-left: 60px !important; /* Space for collapsed sidebar (48px + padding) */
}

.news-panel.fullscreen .newspaper-masthead:hover {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
}

.news-panel.fullscreen .masthead-title {
  color: #1a1714;
}

.news-panel.fullscreen .masthead-date,
.news-panel.fullscreen .masthead-edition {
  color: rgba(0, 0, 0, 0.6);
}

.news-panel.fullscreen .masthead-btn {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}

.news-panel.fullscreen .masthead-btn:hover {
  color: rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.25);
}

.news-panel.fullscreen .masthead-divider {
  background: rgba(0, 0, 0, 0.15);
}

/* Fullscreen header styling */
.news-panel.fullscreen .body-content-header {
  cursor: default;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

.news-panel.fullscreen .body-content-header h3 {
  color: #1a1714;
}

.news-panel.fullscreen .news-meta-badge {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.fullscreen .section-icon-wrapper.gold {
  background: rgba(201, 162, 39, 0.2);
  color: #8b6914;
}

.news-panel.fullscreen .view-toggle-btn,
.news-panel.fullscreen .section-collapse-btn {
  color: rgba(0, 0, 0, 0.6) !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.news-panel.fullscreen .view-toggle-btn:hover,
.news-panel.fullscreen .section-collapse-btn:hover {
  color: rgba(0, 0, 0, 0.9) !important;
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}

.news-panel.fullscreen .view-toggle-btn.active {
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

.news-panel.fullscreen .news-panel-content {
  height: calc(100vh - 70px);
  overflow-y: auto;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
}

.news-panel.fullscreen .newspaper-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
}

/* Briefing buttons in fullscreen */
.news-panel.fullscreen .briefing-btn {
  background: rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

.news-panel.fullscreen .briefing-btn:hover {
  background: rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}

.news-panel.fullscreen .briefing-btn.active {
  background: rgba(var(--accent-rgb), 0.15) !important;
  border-color: rgba(var(--accent-rgb), 0.35) !important;
  color: var(--accent-dark) !important;
}

/* Regenerate and other action buttons */
.news-panel.fullscreen .briefing-regen-btn,
.news-panel.fullscreen .briefing-generate-btn,
.news-panel.fullscreen .news-fetch-btn {
  background: rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

.news-panel.fullscreen .briefing-regen-btn:hover,
.news-panel.fullscreen .briefing-generate-btn:hover,
.news-panel.fullscreen .news-fetch-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: rgba(0, 0, 0, 0.95) !important;
}

.news-panel.fullscreen .briefing-text {
  columns: 3 280px;
  column-gap: 40px;
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  color: #2d2a26;
  padding: 20px 24px;
  border-radius: 0;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.03),
    0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  column-rule-color: rgba(0, 0, 0, 0.12);
}

.news-panel.fullscreen .briefing-text strong {
  color: #1a1714;
}

.news-panel.fullscreen .briefing-text h1,
.news-panel.fullscreen .briefing-text h2,
.news-panel.fullscreen .briefing-text h3,
.news-panel.fullscreen .briefing-text h4,
.news-panel.fullscreen .briefing-text .briefing-header {
  color: #5c4033;
  border-bottom-color: rgba(0, 0, 0, 0.15);
}

.news-panel.fullscreen .briefing-text p:first-of-type::first-letter {
  color: #8b4513;
}

.news-panel.fullscreen .briefing-text hr,
.news-panel.fullscreen .briefing-text .briefing-divider {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
}

/* Newspaper section tabs in fullscreen */
.news-panel.fullscreen .newspaper-sections {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 200; /* Above sidebar and pulse-layout */
}

.news-panel.fullscreen .section-tab {
  color: rgba(0, 0, 0, 0.8) !important;
  font-weight: 500;
}

.news-panel.fullscreen .section-tab:hover {
  color: rgba(0, 0, 0, 0.95) !important;
  background: rgba(0, 0, 0, 0.08) !important;
}

.news-panel.fullscreen .section-tab.active {
  color: rgba(0, 0, 0, 0.95) !important;
  font-weight: 600;
  border-bottom: 2px solid rgba(0, 0, 0, 0.4) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

.news-panel.fullscreen .section-tab:not(:last-child)::after {
  background: rgba(0, 0, 0, 0.25) !important;
}

.news-panel.fullscreen .section-divider {
  color: rgba(0, 0, 0, 0.3) !important;
  font-weight: 600;
}

/* Section tab briefing dots and generating states */
.news-panel.fullscreen .section-tab.has-briefing::before,
.news-panel.fullscreen .section-tab.generating::before {
  border-color: rgba(0, 0, 0, 0.4) !important;
}

.news-panel.fullscreen .section-tab.has-briefing .briefing-dot {
  background: rgba(52, 199, 89, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

.news-panel.fullscreen .masthead-btn.collapse-toggle.hidden {
  display: none;
}

/* Fullscreen overlay backdrop - newspaper paper background */
.news-panel.fullscreen::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: -1;
}

/* All themes use newspaper paper background in fullscreen */
body.light .news-panel.fullscreen::before,
body.light .news-panel.fullscreen,
body.gray .news-panel.fullscreen::before,
body.gray .news-panel.fullscreen,
body.zen .news-panel.fullscreen::before,
body.zen .news-panel.fullscreen,
body.batman .news-panel.fullscreen::before,
body.batman .news-panel.fullscreen {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hide everything else when news panel is fullscreen */
body.news-fullscreen-active .sidebar {
  display: none !important;
}

body.news-fullscreen-active .app-content {
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Match body background to newspaper paper in fullscreen */
body.news-fullscreen-active {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
}

body.news-fullscreen-active.light,
body.news-fullscreen-active.gray,
body.news-fullscreen-active.zen,
body.news-fullscreen-active.batman {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
}

/* Hide all panels except news panel */
body.news-fullscreen-active .panel:not(.news-panel) {
  display: none !important;
  visibility: hidden !important;
}

/* Hide floating controls */
body.news-fullscreen-active .focus-mode-selector,
body.news-fullscreen-active .fullscreen-toggle-btn,
body.news-fullscreen-active .ai-chat-launch-btn,
body.news-fullscreen-active .music-player-container,
body.news-fullscreen-active .pomodoro-container,
body.news-fullscreen-active .focus-controls-wrapper {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* NYT-Style Newspaper Masthead */
.newspaper-masthead {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(180deg, rgba(18, 18, 22, 0.98) 0%, rgba(14, 14, 18, 0.95) 100%);
  transition: background 0.2s ease;
  border-bottom: 1px solid rgba(201, 162, 39, 0.12);
}

.newspaper-masthead.nyt-style {
  padding: 12px 20px 0;
}

.masthead-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 10px;
}

.masthead-left,
.masthead-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
}

.masthead-right {
  justify-content: flex-end;
  gap: 4px;
}

.masthead-date-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 2px;
}

.masthead-date {
  font-size: 0.75rem;
  color: rgba(201, 162, 39, 0.85);
  font-weight: 600;
  font-family: 'Georgia', 'Times New Roman', serif;
  letter-spacing: 0.02em;
}

.masthead-edition {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

.masthead-center {
  text-align: center;
  flex: 1;
  position: relative;
}

.masthead-title {
  font-family: 'Chomsky', 'Old English Text MT', 'UnifrakturMaguntia', 'Times New Roman', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #f5f0e6;
  line-height: 1;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Fallback for browsers without custom font - use elegant serif */
@supports not (font-family: 'Chomsky') {
  .masthead-title {
    font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
}

.masthead-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(201, 162, 39, 0.6) 15%,
      rgba(201, 162, 39, 0.8) 50%,
      rgba(201, 162, 39, 0.6) 85%,
      transparent 100%);
  margin-top: 0;
  position: relative;
}

/* Elegant double-line divider like classic newspapers */
.masthead-divider::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 15%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0.12) 85%,
      transparent 100%);
  margin-bottom: 3px;
}

/* Fetch Progress Indicator - Removed in favor of subtle corner loader */
.fetch-progress-bar {
  display: none;
}

.fetch-progress-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 60px;
  overflow-y: auto;
}

.fetch-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-family: 'Source Sans 3', sans-serif;
  text-transform: capitalize;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

.fetch-group-chip.success {
  background: rgba(52, 199, 89, 0.15);
  color: #34c759;
}

.fetch-group-chip.failed {
  background: rgba(255, 69, 58, 0.15);
  color: #ff453a;
}

.fetch-group-chip svg {
  opacity: 0.8;
}

/* Masthead no longer clickable - hover style removed */

.news-panel.collapsed .newspaper-masthead {
  border-bottom-color: rgba(201, 162, 39, 0.1);
}

/* Keep old class names for backwards compat */
.masthead-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
}

.masthead-actions.right {
  justify-content: flex-end;
}

.masthead-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.masthead-btn:hover {
  color: rgba(201, 162, 39, 0.85);
  background: rgba(201, 162, 39, 0.08);
}

/* Refresh button states */
.masthead-btn.refresh-btn {
  position: relative;
  overflow: hidden;
}

.masthead-btn.refresh-btn.refreshing {
  cursor: wait;
  background: rgba(201, 162, 39, 0.15);
  border-color: rgba(201, 162, 39, 0.3);
}

.masthead-btn.refresh-btn.refreshing svg {
  animation: spin 1s linear infinite;
  color: rgba(201, 162, 39, 0.9);
}

.masthead-btn.refresh-btn.error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 0.9);
}

.masthead-btn.refresh-btn.error:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
}

.masthead-btn.refresh-btn .refresh-progress-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.6), rgba(201, 162, 39, 0.9));
  transition: width 0.3s ease;
  border-radius: 0 2px 2px 0;
}

.masthead-btn.spinning svg {
  animation: spin 1s linear infinite;
}

.masthead-btn.collapse-toggle svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-panel.collapsed .masthead-btn.collapse-toggle svg {
  transform: rotate(180deg);
}

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

  to {
    transform: rotate(360deg);
  }
}

/* Refresh menu dropdown */
.refresh-menu-container {
  position: relative;
}

.refresh-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.refresh-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-family: 'Georgia', serif;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.refresh-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.refresh-menu-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.refresh-menu-item > span:first-of-type {
  flex: 1;
}

.refresh-menu-hint {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.refresh-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 6px 0;
}

/* Fullscreen/newspaper mode */
.news-panel.fullscreen .refresh-menu,
.news-panel.newspaper .refresh-menu {
  background: rgba(245, 240, 230, 0.98);
  border-color: rgba(139, 105, 20, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.news-panel.fullscreen .refresh-menu-item,
.news-panel.newspaper .refresh-menu-item {
  color: rgba(60, 42, 33, 0.85);
}

.news-panel.fullscreen .refresh-menu-item:hover,
.news-panel.newspaper .refresh-menu-item:hover {
  background: rgba(139, 105, 20, 0.1);
}

.news-panel.fullscreen .refresh-menu-hint,
.news-panel.newspaper .refresh-menu-hint {
  color: rgba(60, 42, 33, 0.45);
}

.news-panel.fullscreen .refresh-menu-divider,
.news-panel.newspaper .refresh-menu-divider {
  background: rgba(139, 105, 20, 0.15);
}

/* Section Navigation - NYT Style */
.newspaper-sections {
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid rgba(201, 162, 39, 0.12);
  /* Elegant dark background with subtle warmth */
  background: linear-gradient(180deg, rgba(12, 12, 16, 0.92) 0%, rgba(8, 8, 12, 0.88) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0 20px;
  position: relative;
  z-index: 100;
}

.section-tabs-scroll {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 0;
  overflow: visible;
  scrollbar-width: none;
  padding: 10px 0;
  max-height: 76px;
  /* Limit to approximately 2 lines */
}

.section-tabs-scroll::-webkit-scrollbar {
  display: none;
}

/* Page Navigation Arrows - Full Height Edge Zones */
.page-nav-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 20;
}

.page-nav-btn svg {
  transition: all 0.2s ease;
  opacity: 0;
}

.page-nav-prev {
  left: 0;
}

.page-nav-next {
  right: 0;
}

/* Show arrow icon on hover */
.page-nav-btn:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent);
  color: rgba(255, 255, 255, 0.95);
}

.page-nav-btn:hover:not(:disabled) svg {
  opacity: 1;
}

.page-nav-next:hover:not(:disabled) {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.4), transparent);
}

.page-nav-btn:active:not(:disabled) {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent);
}

.page-nav-next:active:not(:disabled) {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.6), transparent);
}

.page-nav-btn:disabled {
  pointer-events: none !important;
  cursor: default;
}

.section-tab {
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-bottom: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

/* Elegant separator between tabs */
.section-tab:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(201, 162, 39, 0.25);
  font-size: 0.7rem;
  font-weight: 300;
}

.section-tab:hover {
  color: rgba(201, 162, 39, 0.95);
  background: transparent;
}

.section-tab.active {
  color: #f5f0e6;
  font-weight: 600;
  background: rgba(201, 162, 39, 0.12);
  border-radius: 4px;
  box-shadow: inset 0 -2px 0 rgba(201, 162, 39, 0.5);
}

/* Tab briefing status - elegant newspaper style */

/* Loaded: refined editorial underline with gold accent */
.section-tab.has-briefing {
  color: rgba(255, 255, 255, 0.85);
}

.section-tab.has-briefing::before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 25%;
  right: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.5), transparent);
}

/* Generating: subtle italic with animated underline */
.section-tab.generating {
  font-style: italic;
  color: rgba(201, 162, 39, 0.7);
}

.section-tab.generating::before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 25%;
  width: 0;
  height: 1px;
  background: rgba(201, 162, 39, 0.5);
  animation: underline-grow 2s ease-in-out infinite;
}

@keyframes underline-grow {
  0% {
    width: 0;
    left: 50%;
  }

  50% {
    width: 50%;
    left: 25%;
  }

  100% {
    width: 0;
    left: 50%;
  }
}

/* Section tab dropdown for overflow collections */
.section-tab-dropdown {
  position: relative;
  display: inline-flex;
  z-index: 1000;
}

.section-tab-dropdown .dropdown-trigger {
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.section-tab-dropdown .dropdown-trigger:hover {
  color: rgba(255, 255, 255, 0.9);
}

.section-tab-dropdown .dropdown-trigger.active {
  color: #fff;
  font-weight: 600;
}

.section-tab-dropdown .dropdown-trigger::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
}

.section-tab-dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(20, 20, 22, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 99999;
}

/* Invisible bridge to maintain hover when moving to dropdown */
.section-tab-dropdown .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -10px;
  right: -10px;
  height: 12px;
  pointer-events: auto;
}

.section-tab-dropdown:hover .dropdown-menu,
.section-tab-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.section-tab-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
  cursor: pointer;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.78rem;
  text-transform: capitalize;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
}

.section-tab-dropdown .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.section-tab-dropdown .dropdown-item.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
}

.section-tab-dropdown .dropdown-item .briefing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.section-tab-dropdown .dropdown-item.generating {
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
}

/* Light mode dropdown */
body.light .section-tab-dropdown .dropdown-trigger {
  color: rgba(0, 0, 0, 0.5);
}

body.light .section-tab-dropdown .dropdown-trigger:hover {
  color: rgba(0, 0, 0, 0.85);
}

body.light .section-tab-dropdown .dropdown-trigger.active {
  color: #1a1a1a;
}

body.light .section-tab-dropdown .dropdown-trigger::after {
  background: rgba(0, 0, 0, 0.12);
}

body.light .section-tab-dropdown .dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body.light .section-tab-dropdown .dropdown-item {
  color: rgba(0, 0, 0, 0.6);
}

body.light .section-tab-dropdown .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a1a;
}

body.light .section-tab-dropdown .dropdown-item.active {
  background: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

body.light .section-tab-dropdown .dropdown-item .briefing-dot {
  background: rgba(0, 0, 0, 0.4);
}

/* Light mode adjustments */
body.light .section-tab.has-briefing {
  color: rgba(0, 0, 0, 0.9);
}

body.light .section-tab.has-briefing::before {
  background: rgba(0, 0, 0, 0.3);
}

body.light .section-tab.generating {
  color: rgba(0, 0, 0, 0.55);
}

body.light .section-tab.generating::before {
  background: rgba(0, 0, 0, 0.25);
}


/* News Content Skeleton */
.news-skeleton {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  animation: fade-in 0.5s ease-out;
}

.skeleton-briefing {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.newspaper-theme .skeleton-image {
  background: rgba(0, 0, 0, 0.03);
}

.skeleton-text-meta {
  width: 120px;
  height: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.skeleton-text-line {
  width: 100%;
  height: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.newspaper-theme .skeleton-text-meta,
.newspaper-theme .skeleton-text-line,
body.light .skeleton-text-meta,
body.light .skeleton-text-line {
  background: rgba(0, 0, 0, 0.02);
}

body.light .skeleton-image,
body.light .skeleton-header,
body.light .skeleton-sub-header,
body.light .skeleton-item {
  background: rgba(0, 0, 0, 0.04);
}

body.light .skeleton-image::after,
body.light .skeleton-text-line::after,
body.light .skeleton-text-meta::after,
body.light .skeleton-header::after,
body.light .skeleton-sub-header::after,
body.light .skeleton-item::after {
  background: linear-gradient(90deg,
      transparent,
      rgba(0, 0, 0, 0.03),
      transparent);
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.skeleton-header {
  width: 100px;
  height: 18px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 15px;
  border-radius: 4px;
}

.skeleton-sub-header {
  width: 80%;
  height: 12px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 15px;
  border-radius: 4px;
}

.skeleton-item {
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 10px;
  border-radius: 6px;
}

/* Shimmer Animation */
.skeleton-image::after,
.skeleton-text-line::after,
.skeleton-text-meta::after,
.skeleton-header::after,
.skeleton-sub-header::after,
.skeleton-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.03),
      transparent);
  animation: skeleton-shimmer 1.5s infinite;
}

.newspaper-theme .skeleton-image::after,
.newspaper-theme .skeleton-text-line::after,
.newspaper-theme .skeleton-text-meta::after,
.newspaper-theme .skeleton-header::after,
.newspaper-theme .skeleton-sub-header::after,
.newspaper-theme .skeleton-item::after {
  background: linear-gradient(90deg,
      transparent,
      rgba(0, 0, 0, 0.02),
      transparent);
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.briefing-progress-floating-cancel {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.briefing-progress-floating-cancel:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

/* Light theme */
body.light .briefing-progress-floating {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light .briefing-progress-floating-bar {
  background: rgba(0, 0, 0, 0.08);
}

body.light .briefing-progress-floating-fill {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}

body.light .briefing-progress-floating-info {
  color: rgba(0, 0, 0, 0.6);
}

body.light .briefing-progress-floating-info .generating-spinner-small {
  color: var(--accent-dark);
}

body.light .briefing-progress-floating-time {
  color: rgba(var(--accent-rgb), 0.9);
}

body.light .briefing-progress-floating-cancel {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}

body.light .briefing-progress-floating-cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

/* Newspaper Body */
.newspaper-body {
  position: relative;
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

/* AI Briefing Panel */
.briefing-panel {
  border-bottom: 2px double rgba(255, 255, 255, 0.15);
  padding-bottom: 12px;
  margin-bottom: 0;
}

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

.briefing-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--accent);
}

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

.briefing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.briefing-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.briefing-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}

.briefing-content {
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.briefing-text {
  display: block;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

body.light .briefing-text {
  color: rgba(0, 0, 0, 0.85);
}

/* Newspaper theme - only when explicitly added */
.briefing-text.newspaper-theme {
  columns: 2 200px;
  column-gap: 28px;
  column-rule: 1px solid rgba(255, 255, 255, 0.1);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  font-family: 'Georgia', 'Times New Roman', serif;
}

/* Ensure briefing-text overrides markdown-text display when both classes are present */
.markdown-text.briefing-text,
.briefing-text.markdown-text {
  display: block;
}

/* Newspaper-style text selection */
.briefing-text {
  cursor: text;
}

.briefing-text ::selection {
  background: rgba(255, 213, 128, 0.85);
  color: #1a1208;
  text-shadow: none;
}

.briefing-text ::-moz-selection {
  background: rgba(255, 213, 128, 0.85);
  color: #1a1208;
  text-shadow: none;
}

/* Light theme selection */
body.light .briefing-text ::selection {
  background: rgba(255, 220, 140, 0.9);
  color: #1a1208;
  text-shadow: none;
}

body.light .briefing-text ::-moz-selection {
  background: rgba(255, 220, 140, 0.9);
  color: #1a1208;
  text-shadow: none;
}

/* Newspaper Theme */
.briefing-text.newspaper-theme {
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  color: #2d2a26;
  padding: 20px 24px;
  border-radius: 4px;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.03),
    0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  column-rule-color: rgba(0, 0, 0, 0.12);
}

/* Font Size Variations */
.briefing-text.font-small,
.stories-body.font-small,
.stories-detail-body.font-small {
  font-size: 0.85rem;
  line-height: 1.6;
}

.briefing-text.font-medium,
.stories-body.font-medium,
.stories-detail-body.font-medium {
  font-size: 1rem;
  line-height: 1.7;
}

.briefing-text.font-large,
.stories-body.font-large,
.stories-detail-body.font-large {
  font-size: 1.1rem;
  line-height: 1.75;
}

.briefing-text.font-xlarge,
.stories-body.font-xlarge,
.stories-detail-body.font-xlarge {
  font-size: 1.25rem;
  line-height: 1.8;
}

.briefing-text.font-xxlarge,
.stories-body.font-xxlarge,
.stories-detail-body.font-xxlarge {
  font-size: 1.4rem;
  line-height: 1.85;
}

/* Action divider */
.action-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}

.briefing-header {
  margin: 14px 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-light);
  letter-spacing: 0.01em;
}

.briefing-header:first-child {
  margin-top: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.95);
}

.briefing-paragraph {
  margin: 0 0 10px;
  line-height: 1.65;
}

/* Bullet points (no visible markers) */
.briefing-bullet {
  margin: 8px 0 8px 24px;
  padding: 4px 0 4px 12px;
  line-height: 1.55;
  text-indent: 0 !important;
  position: relative;
  border-left: 2px solid rgba(139, 105, 20, 0.2);
}

.bullet-marker {
  display: none;
}

.newspaper-theme .briefing-bullet,
body.light .briefing-bullet {
  border-left-color: rgba(139, 105, 20, 0.25);
}

/* Styled sub-headers like "Today's Key Takeaways:" */
.briefing-text .briefing-paragraph em:first-child:last-child {
  display: block;
  margin: 20px 0 12px 0;
  padding: 6px 0;
  font-size: 0.8em;
  font-weight: 700;
  font-style: normal;
  color: #5c4033;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(139, 105, 20, 0.2);
}

/* Key takeaway styling */
.briefing-takeaway {
  display: block;
  margin: 8px 0 16px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.9);
}

.takeaway-arrow {
  margin-right: 8px;
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

.briefing-text.newspaper-theme .briefing-takeaway {
  background: linear-gradient(90deg, rgba(139, 105, 20, 0.12), rgba(255, 248, 240, 0.03));
  border-left-color: #8b6914;
  color: #5c4033;
}

.briefing-text.newspaper-theme .takeaway-arrow {
  color: #8b6914;
}

/* Light theme takeaway styling */
body.light .briefing-takeaway {
  background: linear-gradient(90deg, rgba(139, 105, 20, 0.08), rgba(255, 248, 240, 0.02));
  border-left-color: #8b6914;
  color: #5c4033;
}

body.light .takeaway-arrow {
  color: #8b6914;
}

/* Italic text styling (no special box treatment) */
.briefing-text em {
  font-style: italic;
}

.briefing-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 6px 0;
}

/* Stories Section */
.stories-section {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-top: 8px;
}

.stories-section.expanded {
  border-color: rgba(255, 255, 255, 0.1);
}

.stories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: none;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.stories-header:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
}

.stories-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stories-header-left svg {
  color: rgba(255, 255, 255, 0.4);
}

.stories-count {
  font-weight: 400;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 10px;
}

.stories-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.story-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.story-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.story-source {
  flex-shrink: 0;
  width: 80px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(var(--accent-rgb), 0.7);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-title {
  flex: 1;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.briefing-link {
  display: inline;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.15s ease;
}

.briefing-link:hover {
  color: var(--accent-light);
}

/* Inline links for multi-number references like [20, 34] */
.briefing-link-inline {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: super;
  opacity: 0.75;
  cursor: pointer;
  transition: all 0.15s ease;
}

.briefing-link-inline:hover {
  color: var(--accent-light);
  opacity: 1;
}

.newspaper-theme .briefing-link-inline {
  color: #8b5a2b;
}

.newspaper-theme .briefing-link-inline:hover {
  color: #5c3a21;
  opacity: 1;
}

.briefing-link-num {
  font-size: 0.65em;
  font-weight: 600;
  vertical-align: super;
  opacity: 0.7;
  margin-right: 1px;
}

.briefing-link-title {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.briefing-link:hover .briefing-link-title {
  text-decoration-style: solid;
}

/* Newspaper theme links */
.newspaper-theme .briefing-link {
  color: #5c3a21;
}

.newspaper-theme .briefing-link:hover {
  color: #3d2615;
}

.newspaper-theme .briefing-link-title {
  text-decoration-color: #8b6914;
}

.briefing-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.briefing-empty svg {
  opacity: 0.6;
}

.briefing-loading {
  color: rgba(var(--accent-rgb), 0.7);
  animation: pulse-loading 1.5s ease-in-out infinite;
}

.briefing-btn.spinning svg {
  animation: spin 1s linear infinite;
}

.briefing-generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  border-radius: 10px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.briefing-generate-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.15));
  border-color: rgba(var(--accent-rgb), 0.5);
}

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

.briefing-footer {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.briefing-regen-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.briefing-regen-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.briefing-regen-btn svg {
  flex-shrink: 0;
  display: inline-block;
}

.briefing-regen-btn.spinning svg {
  animation: spin 1s linear infinite;
  transform-origin: center center;
}

.briefing-regen-btn.spinning {
  pointer-events: none;
  opacity: 0.8;
}

.briefing-regen-btn.spinning span {
  opacity: 0.6;
}

.newspaper-body::-webkit-scrollbar {
  width: 4px;
}

.newspaper-body::-webkit-scrollbar-track {
  background: transparent;
}

.newspaper-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

.newspaper-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Newspaper Content Layout */
/* ===================== NEWSPAPER FLOW LAYOUT ===================== */
.newspaper-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Removed flex: 1 - content flows naturally, scrolling handled by .newspaper-body */
}

/* Lead Story - Full Width */
.lead-story {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.lead-story:hover {
  opacity: 0.8;
}

.lead-kicker {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 4px;
}

.lead-title {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}

/* Main Content Grid */
.content-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Removed flex: 1 - let content determine height, not fill space */
}

/* Section Headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.section-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fetch-timestamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.55rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.section-header:hover .fetch-timestamp {
  opacity: 1;
}

.fetch-timestamp svg {
  opacity: 0.6;
}

/* Section headers in fullscreen - newspaper style */
.news-panel.fullscreen .section-header {
  color: rgba(0, 0, 0, 0.9) !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3) !important;
  font-weight: 800 !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
}

.news-panel.fullscreen .section-header .count-badge {
  background: rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.news-panel.fullscreen .fetch-timestamp {
  color: rgba(0, 0, 0, 0.6) !important;
}

.news-panel.fullscreen .section-header:hover .fetch-timestamp {
  color: rgba(0, 0, 0, 0.8) !important;
}

.news-panel.fullscreen .fetch-timestamp svg {
  opacity: 0.7;
}

/* Future and Stocks section headers with gradient text in fullscreen */
.news-panel.fullscreen .future-section .section-header span:first-child {
  background: linear-gradient(90deg, #5c4033, #8b4513) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.news-panel.fullscreen .stocks-section .section-header span:first-child {
  background: linear-gradient(90deg, #5c4033, #8b4513) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.news-panel.fullscreen .headlines-header {
  border-bottom: 2px solid rgba(0, 0, 0, 0.3) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

/* Headlines section in fullscreen - newspaper theme */
.news-panel.fullscreen .headlines-section {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.news-panel.fullscreen .source-column {
  border-right-color: rgba(0, 0, 0, 0.15) !important;
}

.news-panel.fullscreen .source-header {
  border-bottom-color: rgba(0, 0, 0, 0.2) !important;
}

.news-panel.fullscreen .source-name {
  color: rgba(0, 0, 0, 0.8) !important;
  font-weight: 800 !important;
}

.news-panel.fullscreen .source-count {
  color: rgba(0, 0, 0, 0.6) !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.news-panel.fullscreen .headline-item {
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

.news-panel.fullscreen .headline-item:hover {
  opacity: 0.8 !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

.news-panel.fullscreen .headline-title {
  color: rgba(0, 0, 0, 0.85) !important;
}

.news-panel.fullscreen .more-count {
  color: rgba(0, 0, 0, 0.5) !important;
}

.news-panel.fullscreen .more-section {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.news-panel.fullscreen .more-header,
.news-panel.fullscreen .more-header * {
  color: rgba(0, 0, 0, 0.7) !important;
}

.news-panel.fullscreen .more-header:hover,
.news-panel.fullscreen .more-header:hover * {
  color: rgba(0, 0, 0, 0.9) !important;
}

.news-panel.fullscreen .more-header svg {
  color: rgba(0, 0, 0, 0.5) !important;
}

.news-panel.fullscreen .more-source-column {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.news-panel.fullscreen .headline-link {
  color: rgba(0, 0, 0, 0.7) !important;
}

.news-panel.fullscreen .headline-link:hover {
  color: rgba(0, 0, 0, 0.95) !important;
}

.news-panel.fullscreen .show-all-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

.news-panel.fullscreen .show-all-btn:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

.news-panel.fullscreen .news-column {
  border-right-color: rgba(0, 0, 0, 0.15) !important;
}

.news-panel.fullscreen .article-source {
  color: rgba(0, 0, 0, 0.5) !important;
}

.news-panel.fullscreen .column-headline {
  color: rgba(0, 0, 0, 0.9) !important;
}

.news-panel.fullscreen .briefs-divider span {
  color: rgba(0, 0, 0, 0.4) !important;
}

.news-panel.fullscreen .briefs-divider::after {
  background: rgba(0, 0, 0, 0.15) !important;
}

.news-panel.fullscreen .brief-link {
  color: rgba(0, 0, 0, 0.65) !important;
}

.news-panel.fullscreen .brief-link:hover {
  color: rgba(0, 0, 0, 0.95) !important;
}

.news-panel.fullscreen .more-stories {
  color: rgba(0, 0, 0, 0.4) !important;
}

.news-panel.fullscreen .story-total {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.7) !important;
}

/* Action buttons in section headers - fullscreen newspaper style - fade in on hover */
.news-panel.fullscreen .section-actions {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.news-panel.fullscreen .section-header:hover .section-actions {
  opacity: 1;
}

/* Keep buttons visible if any are active */
.news-panel.fullscreen .section-header:has(.action-btn.active) .section-actions,
.news-panel.fullscreen .section-actions:has(.action-btn.active) {
  opacity: 1;
}

.news-panel.fullscreen .action-btn {
  background: rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

.news-panel.fullscreen .action-btn:hover {
  background: rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: rgba(0, 0, 0, 0.95) !important;
}

.news-panel.fullscreen .action-btn.active {
  background: rgba(var(--accent-rgb), 0.15) !important;
  border-color: rgba(var(--accent-rgb), 0.35) !important;
  color: var(--accent-dark) !important;
}

.section-actions {
  display: flex;
  gap: 6px;
  margin-right: 50px;
  /* Clear space for page navigation */
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn svg {
  width: 14px;
  height: 14px;
}

.action-btn:hover {
  background: rgba(201, 162, 39, 0.1);
  border-color: rgba(201, 162, 39, 0.25);
  color: rgba(201, 162, 39, 0.9);
}

.action-btn.active {
  background: rgba(201, 162, 39, 0.15);
  border-color: rgba(201, 162, 39, 0.35);
  color: #c9a227;
}

.action-btn.spinning svg {
  animation: spin 1s linear infinite;
}

/* Voice Menu Dropdown */
.voice-menu-container {
  position: relative;
}

.voice-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 6px;
  /* Creates invisible bridge for mouse hover */
  z-index: 100;
}

.voice-menu-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  /* Invisible hover bridge */
}

.voice-menu-dropdown-inner {
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: voiceMenuFadeIn 0.12s ease;
}

@keyframes voiceMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.voice-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}

.voice-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.voice-option svg {
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.voice-option span {
  font-size: 0.82rem;
  font-weight: 500;
  flex: 1;
}

.voice-option small {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
}

.voice-option:hover svg {
  color: var(--accent);
}

/* ===================== AI CONTEXT MENU ===================== */
.ai-context-menu-container {
  position: relative;
}

.ai-context-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(59, 130, 246, 0.15)) !important;
}

.ai-context-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(59, 130, 246, 0.25)) !important;
}

.ai-context-btn svg {
  color: var(--accent) !important;
}

.ai-context-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 6px;
  z-index: 100;
}

.ai-context-menu-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.ai-context-menu-dropdown-inner {
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 10px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--accent-rgb), 0.1);
  animation: aiMenuFadeIn 0.12s ease;
}

@keyframes aiMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-context-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}

.ai-context-option:hover {
  background: rgba(var(--accent-rgb), 0.15);
}

.ai-context-option svg {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}

.ai-context-option span {
  font-size: 0.8rem;
  font-weight: 500;
  flex: 1;
}

.ai-context-option small {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
}

.ai-context-option:hover svg {
  color: var(--accent);
}

/* ===================== LANGUAGE MENU ===================== */
.language-menu-container {
  position: relative;
}

.language-btn {
  font-size: 1rem !important;
  padding: 4px 6px !important;
}

.lang-code {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

.language-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 6px;
  z-index: 100;
}

.language-menu-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.language-menu-dropdown-inner {
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 6px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: voiceMenuFadeIn 0.12s ease;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}

.language-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.language-option.active {
  background: rgba(var(--accent-rgb), 0.15);
}

.language-option .lang-code {
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.5em;
  text-align: center;
  opacity: 0.6;
  flex-shrink: 0;
}

.language-option .lang-name {
  font-size: 0.82rem;
  font-weight: 500;
  flex: 1;
}

.language-option svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Light theme language menu */
body.light .language-menu-dropdown-inner {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body.light .language-option {
  color: rgba(0, 0, 0, 0.8);
}

body.light .language-option:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.light .language-option.active {
  background: rgba(var(--accent-rgb), 0.1);
}

body.light .language-option svg {
  color: var(--accent-dark);
}

/* ===================== RTL SUPPORT FOR ARABIC ===================== */
.briefing-text.rtl {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', 'Arial', serif;
  unicode-bidi: embed;
}

.briefing-text.rtl * {
  direction: rtl;
  text-align: right;
}

.briefing-text.rtl .briefing-header {
  text-align: right;
  direction: rtl;
}

.briefing-text.rtl .briefing-header:first-child {
  text-align: right;
}

.briefing-text.rtl .briefing-paragraph {
  text-align: right;
  direction: rtl;
}

.briefing-text.rtl p {
  text-align: right;
  direction: rtl;
}

.briefing-text.rtl .briefing-bullet {
  flex-direction: row-reverse;
  text-align: right;
  justify-content: flex-start;
}

.briefing-text.rtl .briefing-bullet .bullet-marker {
  margin-left: 0.5em;
  margin-right: 0;
}

.briefing-text.rtl .briefing-takeaway {
  flex-direction: row-reverse;
  text-align: right;
  justify-content: flex-start;
}

.briefing-text.rtl .briefing-takeaway .takeaway-arrow {
  margin-left: 0.5em;
  margin-right: 0;
  transform: scaleX(-1);
}

.briefing-text.rtl .briefing-link {
  flex-direction: row-reverse;
  direction: rtl;
}

.briefing-text.rtl .briefing-link-num {
  margin-left: 0.35em;
  margin-right: 0;
}

.briefing-text.rtl .briefing-link-title {
  direction: rtl;
  text-align: right;
}

.briefing-text.rtl hr,
.briefing-text.rtl .briefing-divider {
  direction: ltr;
  /* Dividers don't need RTL */
}

.briefing-text.rtl strong,
.briefing-text.rtl em {
  direction: inherit;
}

.count-badge {
  font-size: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 500;
}

/* Briefing Section */
.briefing-section {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  /* Prevent briefing from being compressed */
}

/* Scoped to news-panel to avoid collision with RhythmPanel's .briefing-body */
.news-panel .briefing-body {
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  overflow: visible !important;
  flex-shrink: 0;
  height: auto !important;
  max-height: none !important;
  /* Override RhythmPanel's max-height: 120px */
  padding: 0;
  /* Override RhythmPanel's padding */
}

.briefing-text p,
.briefing-text .briefing-paragraph {
  margin: 0 0 12px;
  text-indent: 1.5em;
}

/* Drop cap on first paragraph */
.briefing-text p:first-of-type {
  text-indent: 0;
}

.briefing-text p:first-of-type::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  padding-right: 8px;
  padding-top: 4px;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Playfair Display', 'Georgia', serif;
}

/* RTL languages (Arabic, Hebrew, etc.) - flip the drop cap to right side */
.briefing-text[dir="rtl"] p:first-of-type::first-letter {
  float: right;
  padding-right: 0;
  padding-left: 8px;
}

/* Newspaper theme drop cap */
.briefing-text.newspaper-theme p:first-of-type::first-letter {
  color: #8b4513;
}

.briefing-text hr,
.briefing-text .briefing-divider {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  margin: 18px 0;
}

.briefing-text strong {
  color: #fff;
}

/* Newspaper theme dividers and strong */
.briefing-text.newspaper-theme hr,
.briefing-text.newspaper-theme .briefing-divider {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
}

.briefing-text.newspaper-theme strong {
  color: #1a1714;
}

.briefing-text h1,
.briefing-text h2,
.briefing-text h3,
.briefing-text h4,
.briefing-text .briefing-header {
  margin: 10px 0 5px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-light);
  font-family: 'Playfair Display', 'Georgia', serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 3px;
  break-after: avoid;
  break-inside: avoid;
}

/* Newspaper theme headers */
.briefing-text.newspaper-theme h1,
.briefing-text.newspaper-theme h2,
.briefing-text.newspaper-theme h3,
.briefing-text.newspaper-theme h4,
.briefing-text.newspaper-theme .briefing-header {
  color: #5c4033;
  border-bottom-color: rgba(0, 0, 0, 0.15);
}

.briefing-text h1:first-child,
.briefing-text h2:first-child,
.briefing-text h3:first-child,
.briefing-text .briefing-header:first-child {
  margin-top: 0;
}

.briefing-text ul,
.briefing-text ol {
  margin: 8px 0;
  padding-left: 18px;
}

.briefing-text li {
  margin-bottom: 4px;
}

.briefing-loading-text {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

.briefing-empty {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  font-size: 0.75rem;
  margin: 0;
}

/* Newspaper-themed generating state */
.briefing-generating {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.briefing-generating .generating-masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
}

.briefing-generating .generating-line {
  height: 12px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.08) 100%);
  background-size: 200% 100%;
  border-radius: 3px;
}

.briefing-generating .generating-line.short {
  width: 40%;
  height: 18px;
}

.briefing-generating .generating-line.medium {
  width: 60%;
}

.briefing-generating .generating-line.long {
  width: 85%;
}

.briefing-generating .generating-line.full {
  width: 100%;
}

.briefing-generating .generating-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

.briefing-generating .generating-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.briefing-generating .generating-line.pulse-1 {
  animation: shimmer 2s ease-in-out infinite;
}

.briefing-generating .generating-line.pulse-2 {
  animation: shimmer 2s ease-in-out infinite 0.3s;
}

.briefing-generating .generating-line.pulse-3 {
  animation: shimmer 2s ease-in-out infinite 0.6s;
}

@keyframes shimmer {

  0%,
  100% {
    background-position: 200% 0;
    opacity: 0.6;
  }

  50% {
    background-position: -200% 0;
    opacity: 1;
  }
}

/* Clean generating state - no skeleton */
.briefing-generating-clean {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  text-align: center;
}

.briefing-generating-clean .generating-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}

.briefing-generating-clean .generating-spinner {
  animation: spin 1s linear infinite;
  color: var(--accent);
}

.briefing-generating .generating-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 20px;
}

.briefing-generating .generating-spinner {
  animation: spin 1s linear infinite;
  color: var(--accent);
}

/* Fullscreen newspaper theme for generating state */
.news-panel.fullscreen .briefing-generating {
  color: rgba(0, 0, 0, 0.7) !important;
}

.news-panel.fullscreen .briefing-generating .generating-header {
  color: rgba(0, 0, 0, 0.8) !important;
  font-family: 'Georgia', 'Times New Roman', serif;
}

.news-panel.fullscreen .briefing-generating .generating-spinner {
  color: #5c4033 !important;
}

.briefing-generating-clean .generating-spinner-small {
  animation: spin 1s linear infinite;
  opacity: 0.6;
}

/* Auto-image generation toggle button */
.auto-image-toggle {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.auto-image-toggle:hover {
  opacity: 1;
}

.auto-image-toggle.active {
  opacity: 1;
  color: var(--accent);
}

.news-panel.fullscreen .auto-image-toggle.active {
  color: #5c4033;
}

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

  to {
    transform: rotate(360deg);
  }
}

.briefing-generating-clean .generating-progress-section {
  width: 100%;
  max-width: 300px;
  margin-bottom: 20px;
}

.briefing-generating-clean .generating-progress-bar {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.briefing-generating-clean .generating-progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  border-radius: 4px;
  transition: width 0.5s ease-out;
}

.briefing-generating-clean .generating-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.briefing-generating-clean .generating-elapsed {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  color: rgba(var(--accent-rgb), 0.8);
}

.briefing-generating-clean .generating-count {
  color: rgba(255, 255, 255, 0.5);
}

.briefing-generating-clean .generating-collections-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 400px;
  margin-bottom: 16px;
}

.briefing-generating-clean .generating-collection-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

.briefing-generating-clean .generating-collection-item.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.briefing-generating-clean .generating-collection-item.pending {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.briefing-generating-clean .generating-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
}

/* Newspaper-themed loading overlay for fullscreen refresh */
.newspaper-loading-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  z-index: 10002 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-in;
  pointer-events: all;
}

.newspaper-loading-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 100001;
}

.newspaper-loading-close:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}

/* Fullscreen overlay - ensure it's above everything */
.newspaper-loading-overlay.fullscreen {
  z-index: 99999 !important;
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* App view overlay (not fullscreen) - overlay on panel */
.newspaper-loading-overlay.app-view {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(8px);
  z-index: 10001 !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.newspaper-loading-content {
  text-align: center;
  max-width: 500px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Typewriter GIF container for fullscreen loading */
.typewriter-container {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.typewriter-gif {
  width: 320px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
  filter: sepia(0.15) contrast(1.05);
  border: 3px solid rgba(92, 64, 51, 0.4);
}

.newspaper-loading-header {
  margin-bottom: 32px;
}

.newspaper-loading-icon {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}

/* Vintage printing press animation */
.newspaper-press-animation {
  position: relative;
  width: 120px;
  height: 80px;
}

.press-plate {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 8px;
  background: linear-gradient(90deg, #3a2e1f 0%, #5c4033 50%, #3a2e1f 100%);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: pressDown 1.5s ease-in-out infinite;
}

.press-paper {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 4px;
  background: linear-gradient(90deg, #f5f0e6 0%, #ebe5d8 50%, #f5f0e6 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  animation: paperMove 1.5s ease-in-out infinite;
}

@keyframes pressDown {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(4px);
  }
}

@keyframes paperMove {
  0% {
    transform: translateX(-50%) translateX(-10px);
    opacity: 0.7;
  }

  50% {
    transform: translateX(-50%) translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) translateX(10px);
    opacity: 0.7;
  }
}

.newspaper-loading-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.9);
  margin: 0 0 8px 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.newspaper-loading-subtitle {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
  font-style: italic;
}

.newspaper-loading-progress {
  margin-top: 24px;
}

.newspaper-progress-bar {
  position: relative;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.newspaper-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #5c4033 0%, #8b4513 50%, #5c4033 100%);
  background-size: 200% 100%;
  border-radius: 3px;
  transition: width 0.3s ease-out;
  animation: progressShimmer 2s ease-in-out infinite;
}

@keyframes progressShimmer {

  0%,
  100% {
    background-position: 200% 0;
  }

  50% {
    background-position: -200% 0;
  }
}

.newspaper-progress-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.7);
  font-family: 'Georgia', 'Times New Roman', serif;
}

.newspaper-progress-message {
  font-weight: 500;
}

.newspaper-progress-group {
  color: rgba(0, 0, 0, 0.5);
  font-style: italic;
}

.newspaper-progress-collections {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.newspaper-progress-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.7rem;
  border-radius: 12px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.newspaper-progress-badge.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.3);
}

.newspaper-progress-badge.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #991b1b;
  border-color: rgba(239, 68, 68, 0.3);
}

.briefing-generating-clean .generating-cancel {
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.briefing-generating-clean .generating-cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.briefing-generating .typewriter-icon {
  animation: typewriter-pulse 1s ease-in-out infinite;
}

@keyframes typewriter-pulse {

  0%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }

  50% {
    opacity: 0.8;
    transform: translateY(-1px);
  }
}

/* Light theme generating state */
body.light .briefing-generating .generating-line {
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.06) 0%,
      rgba(0, 0, 0, 0.12) 50%,
      rgba(0, 0, 0, 0.06) 100%);
  background-size: 200% 100%;
}

body.light .briefing-generating .generating-divider {
  background: rgba(0, 0, 0, 0.08);
}

/* Briefing skeleton loader - newspaper theme */
.briefing-skeleton {
  padding: 1.5rem;
}

.briefing-skeleton .skeleton-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--news-border, rgba(0, 0, 0, 0.1));
  white-space: nowrap;
}

.briefing-skeleton .skeleton-icon {
  color: var(--news-text-secondary, #5c4033);
  opacity: 0.6;
}

.briefing-skeleton .skeleton-icon.pulse {
  animation: skeleton-icon-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-icon-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.briefing-skeleton .skeleton-status {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--news-text-secondary, #5c4033);
  opacity: 0.7;
}

.briefing-skeleton .skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.briefing-skeleton .skeleton-line {
  height: 1rem;
  background: linear-gradient(
    90deg,
    var(--news-skeleton-start, rgba(92, 64, 51, 0.08)) 0%,
    var(--news-skeleton-mid, rgba(92, 64, 51, 0.15)) 50%,
    var(--news-skeleton-start, rgba(92, 64, 51, 0.08)) 100%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.briefing-skeleton .skeleton-line.long {
  width: 95%;
}

.briefing-skeleton .skeleton-line.medium {
  width: 75%;
}

.briefing-skeleton .skeleton-line.short {
  width: 50%;
}

.briefing-skeleton .skeleton-line:nth-child(1) { animation-delay: 0s; }
.briefing-skeleton .skeleton-line:nth-child(2) { animation-delay: 0.1s; }
.briefing-skeleton .skeleton-line:nth-child(3) { animation-delay: 0.2s; }
.briefing-skeleton .skeleton-line:nth-child(4) { animation-delay: 0.3s; }
.briefing-skeleton .skeleton-line:nth-child(5) { animation-delay: 0.4s; }
.briefing-skeleton .skeleton-line:nth-child(6) { animation-delay: 0.5s; }

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

/* Headlines Section - Newspaper Column Layout */
.headlines-section {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 6px;
}

.headlines-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.headlines-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

.headlines-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
}

.source-column {
  padding: 0 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.source-column:first-child {
  padding-left: 0;
}

.source-column:last-child {
  border-right: none;
  padding-right: 0;
}

.source-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.source-header.compact {
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.source-name {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

/* Fullscreen override for source-name - placed right after base rule */
.news-panel.fullscreen .source-name {
  color: rgba(0, 0, 0, 0.8) !important;
}

.source-count {
  font-size: 0.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 5px;
  border-radius: 3px;
}

.source-stories {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.source-stories.compact {
  gap: 6px;
}

.headline-item {
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.06);
  transition: all 0.15s ease;
}

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

.headline-item:hover {
  opacity: 0.7;
}

.headline-item.compact {
  padding: 4px 0;
}

.headline-title {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Fullscreen paper mode - dark text */
.fullscreen .headline-title,
.news-panel.fullscreen .headline-title,
section.fullscreen .headline-title {
  color: rgba(0, 0, 0, 0.85) !important;
}

.fullscreen .source-name,
.news-panel.fullscreen .source-name,
section.fullscreen .source-name {
  color: rgba(0, 0, 0, 0.7) !important;
}

.fullscreen .more-header,
.fullscreen .more-header span,
.news-panel.fullscreen .more-header,
.news-panel.fullscreen .more-header span {
  color: rgba(0, 0, 0, 0.6) !important;
}

.headline-item.compact .headline-title {
  font-size: 0.68rem;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.more-count {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  padding-top: 4px;
}

/* More Section - Additional Sources */
.more-section {
  padding: 16px;
  margin-top: 12px;
  border-radius: 6px;
}

.more-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.more-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s ease;
}

.more-header:hover {
  color: rgba(255, 255, 255, 0.7);
}

.more-header svg {
  color: rgba(255, 255, 255, 0.4);
}

/* Fullscreen override for more-header - placed right after base rule */
.news-panel.fullscreen .more-header,
.news-panel.fullscreen .more-header * {
  color: rgba(0, 0, 0, 0.7) !important;
}

.news-panel.fullscreen .more-header svg {
  color: rgba(0, 0, 0, 0.5) !important;
}

.more-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.more-source-column {
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Legacy grid (keeping for compatibility) */
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 14px;
  margin-top: 10px;
}

.more-link {
  display: block;
  font-size: 0.68rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.12s ease;
}

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

.link-source {
  display: block;
  font-size: 0.48rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 2px;
}

/* Lead Article - Featured Story */
.lead-article {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.lead-article:hover {
  opacity: 0.8;
}

.article-kicker {
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 3px;
}

.lead-headline {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}

/* Secondary Headlines */
.secondary-headlines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.headline-item {
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.headline-item:hover {
  opacity: 0.75;
}

.headline-source {
  display: block;
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1px;
}

.headline-title {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Fullscreen override for headline-title - placed right after base rule */
.news-panel.fullscreen .headline-title {
  color: rgba(0, 0, 0, 0.85) !important;
}

/* More Headlines Section */
.more-headlines {
  padding-top: 8px;
}

.more-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.more-divider:hover {
  opacity: 0.8;
}

.more-divider svg {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.more-divider span {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}

.story-total {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 0.5rem;
  margin-left: auto;
}

.headline-links {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.headline-links.expanded {
  max-height: 400px;
  overflow-y: auto;
}

.headline-link {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.12s ease;
  line-height: 1.35;
}

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

.show-all-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.15s ease;
}

.show-all-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

/* Multi-Column Layout */
.column-stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  min-height: 0;
}

.news-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.news-column:last-child {
  padding-right: 0;
  border-right: none;
}

.column-article {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.column-article:hover {
  opacity: 0.75;
}

.article-source {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 2px;
}

.column-headline {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Bottom Briefs Section */
.news-briefs {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.briefs-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.briefs-divider span {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}

.briefs-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.briefs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.brief-link {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

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

.more-stories {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

/* Legacy Lead Story (keep for backwards compat) */
.lead-story {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.lead-story:hover {
  opacity: 0.8;
}

.lead-story .story-source {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}

.lead-headline {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.28;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.lead-excerpt {
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Secondary Stories */
.secondary-stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.secondary-story {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.secondary-story:hover {
  opacity: 0.75;
}

.secondary-story .story-source {
  display: block;
  font-size: 0.54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 5px;
}

.secondary-headline {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

/* Brief Section */
.brief-section {
  padding-top: 6px;
}

.brief-header {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brief-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.brief-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: opacity 0.12s ease;
}

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

.brief-item:hover {
  opacity: 0.7;
}

.brief-source {
  flex-shrink: 0;
  width: 72px;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(var(--accent-rgb), 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  padding-right: 10px;
}

.brief-title {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Pagination */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.news-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.news-page-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.news-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.news-page-info {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
  min-width: 50px;
  text-align: center;
}

/* Loading & Empty States */
.news-loading,
.news-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 180px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  gap: 10px;
  font-size: 0.8rem;
}

.news-loading .generating-spinner {
  animation: spin 1s linear infinite;
  color: rgba(var(--accent-rgb), 0.8);
}

.news-loading .loading-progress-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}

.news-loading .loading-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  border-radius: 2px;
  transition: width 0.3s ease;
}

.news-loading.error {
  color: rgba(239, 68, 68, 0.9);
}

.news-loading.error .error-icon {
  color: #ef4444;
  opacity: 0.9;
}

.news-loading.error p {
  color: rgba(239, 68, 68, 0.9);
  font-weight: 500;
}

.news-empty-state svg {
  opacity: 0.35;
}

.news-fetch-btn {
  margin-top: 4px;
  padding: 8px 16px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.news-fetch-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
}

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

/* ===================== LIGHT THEME ===================== */
body.light .newspaper-masthead {
  background: transparent;
}

body.light .newspaper-masthead:hover {
  background: rgba(0, 0, 0, 0.02);
}

body.light .masthead-title {
  color: #1a1a1a;
}

body.light .masthead-date {
  color: rgba(0, 0, 0, 0.65);
}

body.light .masthead-edition {
  color: rgba(0, 0, 0, 0.45);
}

body.light .masthead-divider {
  background: linear-gradient(90deg,
      transparent 0%,
      #1a1a1a 10%,
      #1a1a1a 90%,
      transparent 100%);
}

body.light .masthead-divider::before {
  background: rgba(0, 0, 0, 0.12);
}

body.light .fetch-progress-bar {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .fetch-progress-track {
  background: rgba(0, 0, 0, 0.08);
}

body.light .fetch-progress-fill {
  background: linear-gradient(90deg, #8b6914, #c9a227);
}

body.light .fetch-progress-message {
  color: rgba(0, 0, 0, 0.7);
}

body.light .fetch-progress-items {
  color: #8b6914;
}

body.light .fetch-group-chip {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
}

body.light .fetch-group-chip.success {
  background: rgba(52, 199, 89, 0.12);
  color: #248a3d;
}

body.light .fetch-group-chip.failed {
  background: rgba(255, 69, 58, 0.12);
  color: #d70015;
}

body.light .masthead-btn {
  color: rgba(0, 0, 0, 0.35);
}

body.light .masthead-btn:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.04);
}

body.light .newspaper-sections {
  background: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light .section-tab {
  color: rgba(0, 0, 0, 0.5);
}

body.light .section-tab:not(:last-child)::after {
  background: rgba(0, 0, 0, 0.12);
}

body.light .section-tab:hover {
  color: rgba(0, 0, 0, 0.85);
  background: transparent;
}

body.light .section-tab.active {
  color: #1a1a1a;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.5);
}

body.light .page-nav-btn:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent);
  color: rgba(0, 0, 0, 0.8);
}

body.light .page-nav-next:hover:not(:disabled) {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.08), transparent);
}

body.light .page-nav-btn:active:not(:disabled) {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.15), transparent);
}

body.light .page-nav-next:active:not(:disabled) {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.15), transparent);
}

body.light .lead-story {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .lead-story .story-source {
  color: var(--accent-dark);
}

body.light .lead-headline {
  color: #1a1a1a;
}

body.light .lead-excerpt {
  color: rgba(0, 0, 0, 0.55);
}

body.light .secondary-stories {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .secondary-story .story-source {
  color: rgba(var(--accent-rgb), 0.7);
}

body.light .secondary-headline {
  color: #2a2a2a;
}

/* Light theme - Newspaper Layout */
/* Light theme - Newspaper Flow */
body.light .lead-story {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light .lead-kicker {
  color: var(--accent-dark);
}

body.light .lead-title {
  color: #1a1a1a;
}

body.light .section-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.45);
}

body.light .action-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.45);
}

body.light .action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}

body.light .action-btn.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}

body.light .voice-menu-dropdown-inner {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body.light .voice-option {
  color: rgba(0, 0, 0, 0.8);
}

body.light .voice-option:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.light .voice-option svg {
  color: rgba(0, 0, 0, 0.4);
}

body.light .voice-option small {
  color: rgba(0, 0, 0, 0.45);
}

body.light .voice-option:hover svg {
  color: var(--accent-dark);
}

body.light .ai-context-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(59, 130, 246, 0.1)) !important;
}

body.light .ai-context-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(59, 130, 246, 0.2)) !important;
}

body.light .ai-context-btn svg {
  color: var(--accent-dark) !important;
}

body.light .ai-context-menu-dropdown-inner {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--accent-rgb), 0.08);
}

body.light .ai-context-option {
  color: rgba(0, 0, 0, 0.85);
}

body.light .ai-context-option:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

body.light .ai-context-option svg {
  color: rgba(var(--accent-rgb), 0.65);
}

body.light .ai-context-option small {
  color: rgba(0, 0, 0, 0.45);
}

body.light .ai-context-option:hover svg {
  color: var(--accent-dark);
}

body.light .action-divider {
  background: rgba(0, 0, 0, 0.12);
}

body.light .count-badge {
  background: rgba(0, 0, 0, 0.05);
}

body.light .briefing-section {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .briefing-text {
  column-rule-color: rgba(0, 0, 0, 0.1);
}

body.light .briefing-text p:first-of-type::first-letter {
  color: var(--accent-dark);
}

body.light .news-panel .briefing-body {
  color: rgba(0, 0, 0, 0.8);
}

body.light .briefing-text hr,
body.light .briefing-text .briefing-divider {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent);
}

body.light .briefing-text h1,
body.light .briefing-text h2,
body.light .briefing-text h3,
body.light .briefing-text h4,
body.light .briefing-text .briefing-header {
  color: var(--accent-dark);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .briefing-text strong {
  color: #1a1a1a;
}

body.light .briefing-loading-text,
body.light .briefing-empty {
  color: rgba(0, 0, 0, 0.35);
}

/* Light theme - Headlines newspaper columns */
body.light .headlines-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .headlines-header {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

body.light .source-column {
  border-right-color: rgba(0, 0, 0, 0.08);
}

body.light .source-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .source-name {
  color: rgba(0, 0, 0, 0.55);
}

body.light .source-count {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.06);
}

body.light .headline-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .headline-title {
  color: rgba(0, 0, 0, 0.85);
}

body.light .more-count {
  color: rgba(0, 0, 0, 0.4);
}

body.light .more-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.015) 0%, rgba(0, 0, 0, 0.008) 100%);
  border-color: rgba(0, 0, 0, 0.05);
}

body.light .more-header {
  color: rgba(0, 0, 0, 0.45);
}

body.light .more-header:hover {
  color: rgba(0, 0, 0, 0.65);
}

body.light .more-header svg {
  color: rgba(0, 0, 0, 0.35);
}

body.light .more-sources-grid {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .more-source-column {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.04);
}

body.light .more-link {
  color: rgba(0, 0, 0, 0.55);
}

body.light .more-link:hover {
  color: var(--accent-dark);
}

body.light .link-source {
  color: rgba(0, 0, 0, 0.25);
}

body.light .news-column {
  border-right-color: rgba(0, 0, 0, 0.06);
}

body.light .article-source {
  color: rgba(0, 0, 0, 0.4);
}

body.light .news-briefs {
  border-top-color: rgba(0, 0, 0, 0.08);
}

body.light .briefs-divider span {
  color: rgba(0, 0, 0, 0.35);
}

body.light .briefs-divider::after {
  background: rgba(0, 0, 0, 0.08);
}

body.light .brief-link {
  color: rgba(0, 0, 0, 0.55);
}

body.light .brief-link:hover {
  color: var(--accent-dark);
}

body.light .more-stories {
  color: rgba(0, 0, 0, 0.3);
}

body.light .brief-header {
  color: rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light .brief-item {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .brief-source {
  color: rgba(var(--accent-rgb), 0.55);
}

body.light .brief-title {
  color: rgba(0, 0, 0, 0.7);
}

body.light .news-pagination {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .news-page-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
}

body.light .news-page-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}

body.light .news-page-info {
  color: rgba(0, 0, 0, 0.4);
}

/* Light theme briefing */
body.light .briefing-panel {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0.04));
  border-color: rgba(var(--accent-rgb), 0.15);
}

body.light .briefing-header {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: rgba(var(--accent-rgb), 0.1);
}

body.light .briefing-title {
  color: var(--accent-dark);
}

body.light .briefing-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
}

body.light .briefing-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}

body.light .briefing-btn.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}

body.light .briefing-content {
  color: rgba(0, 0, 0, 0.8);
}

body.light .briefing-link {
  color: var(--accent-dark);
}

body.light .briefing-link:hover {
  color: var(--accent-dark);
}

body.light .briefing-link-title {
  text-decoration-color: var(--accent-dark);
}

body.light .briefing-link-inline {
  color: var(--accent-dark);
}

body.light .briefing-link-inline:hover {
  color: var(--accent-dark);
  opacity: 1;
}

body.light .briefing-header {
  color: var(--accent-dark);
}

body.light .briefing-header:first-child {
  color: rgba(0, 0, 0, 0.9);
}

body.light .briefing-divider {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Light theme stories */
body.light .stories-section {
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .stories-section.expanded {
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .stories-header {
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.6);
}

body.light .stories-header:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.8);
}

body.light .stories-header-left svg {
  color: rgba(0, 0, 0, 0.4);
}

body.light .stories-count {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.05);
}

body.light .stories-list {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .story-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .story-source {
  color: rgba(var(--accent-rgb), 0.7);
}

body.light .story-title {
  color: rgba(0, 0, 0, 0.85);
}

body.light .briefing-empty {
  color: rgba(0, 0, 0, 0.4);
}

body.light .briefing-loading {
  color: rgba(var(--accent-rgb), 0.7);
}

body.light .briefing-generate-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.05));
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}

body.light .briefing-generate-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  border-color: rgba(var(--accent-rgb), 0.4);
}

body.light .briefing-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .briefing-regen-btn {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

body.light .briefing-regen-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}

body.light .news-loading,
body.light .news-empty-state {
  color: rgba(0, 0, 0, 0.4);
}

body.light .news-loading.error {
  color: rgba(220, 38, 38, 0.9);
}

body.light .news-loading.error .error-icon {
  color: #dc2626;
  opacity: 0.9;
}

body.light .news-loading.error p {
  color: rgba(220, 38, 38, 0.9);
}

body.light .news-fetch-btn {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}

/* ===================== ZEN THEME ===================== */
body.zen .newspaper-masthead {
  background: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.gray .newspaper-sections {
  background: rgba(20, 20, 25, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.zen .newspaper-sections {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

body.batman .newspaper-sections {
  background: rgba(10, 10, 15, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Newspaper Illustration Styles */
.newspaper-illustration {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
}

.newspaper-illustration-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.newspaper-illustration-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}

body.light .newspaper-illustration-loading {
  color: rgba(0, 0, 0, 0.7);
}

.news-panel.fullscreen .newspaper-illustration-image {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.news-panel.fullscreen .newspaper-illustration-loading {
  color: rgba(0, 0, 0, 0.7);
}

/* Fullscreen Image Viewer */
.newspaper-image-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: pointer;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.newspaper-image-fullscreen-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.newspaper-image-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.newspaper-image-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.newspaper-image-close:active {
  transform: scale(0.95);
}

body.light .newspaper-image-fullscreen {
  background: rgba(255, 255, 255, 0.98);
}

body.light .newspaper-image-close {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.8);
}

body.light .newspaper-image-close:hover {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.3);
}

/* ===================== FEED MANAGER MODAL ===================== */
.feed-manager-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.feed-manager-modal {
  width: 90%;
  max-width: 540px;
  max-height: 80vh;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.25s ease;
  overflow: hidden;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.feed-manager-modal.light {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.feed-manager-modal.zen {
  background: rgba(30, 30, 32, 0.98);
}

.feed-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.feed-manager-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.feed-manager-modal.light .feed-manager-header h2 {
  color: rgba(0, 0, 0, 0.85);
}

.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.feed-manager-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/* Manager Tabs */
.manager-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.manager-tab {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.manager-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

.manager-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Collections Manager */
.collections-manager {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manager-hint {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.collections-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.collection-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: grab;
  transition: all 0.15s ease;
  user-select: none;
}

.collection-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.collection-row.dragging {
  opacity: 0.5;
  cursor: grabbing;
  background: rgba(var(--accent-rgb), 0.1);
}

.collection-row.drag-over {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
}

.collection-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  cursor: grab;
  padding: 4px 2px;
  transition: color 0.15s;
}

.collection-drag-handle .drag-dots {
  font-size: 12px;
  letter-spacing: -3px;
  line-height: 1;
}

.collection-row:hover .collection-drag-handle {
  color: rgba(255, 255, 255, 0.5);
}

.collection-row.dragging .collection-drag-handle {
  cursor: grabbing;
}

/* Keep old styles for backwards compat but hide them */
.collection-reorder {
  display: none;
  flex-direction: column;
  gap: 2px;
}

.reorder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.12s ease;
}

.reorder-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

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

.collection-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-transform: capitalize;
}

.visibility-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.visibility-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.visibility-btn.hidden {
  color: rgba(255, 255, 255, 0.25);
}

.visibility-btn.hidden:hover {
  color: rgba(255, 255, 255, 0.5);
}

/* Create Collection Wizard */
.create-wizard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.wizard-step.active {
  opacity: 1;
}

.wizard-step.completed {
  opacity: 0.7;
}

.wizard-step .step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.wizard-step.active .step-number {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.wizard-step.completed .step-number {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: var(--accent);
}

.wizard-step .step-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.wizard-step.active .step-label {
  color: rgba(255, 255, 255, 0.85);
}

.wizard-step-line {
  width: 40px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 20px;
}

.wizard-content {
  text-align: center;
}

.wizard-content h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.wizard-hint {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 16px;
}

.wizard-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  font-size: 0.9rem;
  text-align: center;
  transition: all 0.15s;
}

.wizard-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}

.wizard-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.wizard-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.wizard-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
}

.wizard-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

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

.wizard-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

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

.wizard-btn .spinning {
  animation: spin 1s linear infinite;
}

/* Wizard Feed Selection */
.wizard-feeds-list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 4px;
}

.wizard-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.wizard-feed-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.wizard-feed-item.selected {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.wizard-feed-item input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
}

.wizard-feed-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wizard-feed-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.wizard-feed-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wizard-feed-url {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Light theme wizard */
body.light .wizard-step .step-number {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}

body.light .wizard-step.active .step-number {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: white;
}

body.light .wizard-step .step-label {
  color: rgba(0, 0, 0, 0.45);
}

body.light .wizard-step.active .step-label {
  color: rgba(0, 0, 0, 0.8);
}

body.light .wizard-step-line {
  background: rgba(0, 0, 0, 0.1);
}

body.light .wizard-content h3 {
  color: rgba(0, 0, 0, 0.85);
}

body.light .wizard-hint {
  color: rgba(0, 0, 0, 0.5);
}

body.light .wizard-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: #333;
}

body.light .wizard-input:focus {
  border-color: var(--accent-dark);
  background: rgba(0, 0, 0, 0.02);
}

body.light .wizard-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

body.light .wizard-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.65);
}

body.light .wizard-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: #333;
}

body.light .wizard-btn.primary {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

body.light .wizard-btn.primary:hover:not(:disabled) {
  background: var(--accent-dark);
}

body.light .wizard-feed-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .wizard-feed-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .wizard-feed-item.selected {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.25);
}

body.light .wizard-feed-title {
  color: rgba(0, 0, 0, 0.85);
}

body.light .wizard-feed-desc {
  color: rgba(0, 0, 0, 0.5);
}

body.light .wizard-feed-url {
  color: rgba(0, 0, 0, 0.35);
}

.feed-groups-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.group-tab {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: capitalize;
}

.group-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.group-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.group-tab.add-new {
  padding: 6px 10px;
  border-style: dashed;
  color: rgba(255, 255, 255, 0.35);
}

.group-tab.add-new:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.25);
}

.add-feed-row {
  display: flex;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.add-feed-row input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
}

.add-feed-row input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.add-feed-row button {
  padding: 0 14px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s ease;
}

.add-feed-row button:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
}

.feeds-list-modal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.muted.centered {
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.3);
}

.feed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.feed-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.feed-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.feed-row-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.feed-row-url {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-remove-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.feed-remove-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

/* Light theme modal */
body.light .feed-manager-modal .modal-close-btn {
  color: rgba(0, 0, 0, 0.4);
}

body.light .feed-manager-modal .modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

body.light .feed-manager-modal .feed-manager-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .feed-manager-modal .group-tab {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}

body.light .feed-manager-modal .group-tab:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.85);
}

body.light .feed-manager-modal .group-tab.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}

body.light .feed-manager-modal .add-feed-row input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}

body.light .feed-manager-modal .add-feed-row input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

body.light .feed-manager-modal .add-feed-row button {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}

body.light .feed-manager-modal .feed-row {
  background: rgba(0, 0, 0, 0.02);
}

body.light .feed-manager-modal .feed-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .feed-manager-modal .feed-row-title {
  color: rgba(0, 0, 0, 0.85);
}

body.light .feed-manager-modal .feed-row-url {
  color: rgba(0, 0, 0, 0.4);
}

body.light .feed-manager-modal .muted.centered {
  color: rgba(0, 0, 0, 0.35);
}

/* Light theme manager tabs */
body.light .manager-tabs {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .manager-tab {
  color: rgba(0, 0, 0, 0.5);
}

body.light .manager-tab:hover {
  color: rgba(0, 0, 0, 0.8);
}

body.light .manager-tab.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}

body.light .manager-hint {
  color: rgba(0, 0, 0, 0.4);
}

body.light .collection-row {
  background: rgba(0, 0, 0, 0.02);
}

body.light .reorder-btn {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.4);
}

body.light .reorder-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}

body.light .collection-row {
  background: rgba(0, 0, 0, 0.02);
}

body.light .collection-row:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.light .collection-row.dragging {
  background: rgba(var(--accent-rgb), 0.1);
}

body.light .collection-row.drag-over {
  border-color: var(--accent-dark);
  background: rgba(var(--accent-rgb), 0.12);
}

body.light .collection-drag-handle {
  color: rgba(0, 0, 0, 0.2);
}

body.light .collection-row:hover .collection-drag-handle {
  color: rgba(0, 0, 0, 0.45);
}

body.light .collection-name {
  color: rgba(0, 0, 0, 0.85);
}

body.light .visibility-btn {
  color: rgba(0, 0, 0, 0.5);
}

body.light .visibility-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}

body.light .visibility-btn.hidden {
  color: rgba(0, 0, 0, 0.25);
}

/* Selection Popup */
.selection-popup {
  z-index: 10000;
  min-width: 280px;
  max-width: 420px;
  max-height: 70vh;
  background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: popup-appear 0.15s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes popup-appear {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Action buttons row */
.selection-actions {
  display: flex;
  gap: 2px;
  padding: 6px;
}

.selection-actions button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.15s ease;
}

.selection-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.selection-actions button span {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.selection-actions button:hover span {
  opacity: 1;
}

/* Result view */
.selection-result {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.selection-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(40, 40, 45, 0.98) 0%, rgba(35, 35, 40, 0.95) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
}

.selection-action-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.selection-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: all 0.15s ease;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selection-close:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.15);
}

.selection-result-content {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;

  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.selection-result-content::-webkit-scrollbar {
  width: 8px;
}

.selection-result-content::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.selection-result-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.selection-result-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.selection-loading {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  font-size: 14px;
}

.selection-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.selection-text p {
  margin: 0 0 10px 0;
}

.selection-text p:last-child {
  margin-bottom: 0;
}

/* Font size variations for selection popup */
.selection-popup.font-small .selection-text {
  font-size: 13px;
  line-height: 1.6;
}

.selection-popup.font-medium .selection-text {
  font-size: 15px;
  line-height: 1.65;
}

.selection-popup.font-large .selection-text {
  font-size: 17px;
  line-height: 1.7;
}

.selection-popup.font-xlarge .selection-text {
  font-size: 19px;
  line-height: 1.75;
}

.selection-popup.font-xxlarge .selection-text {
  font-size: 21px;
  line-height: 1.8;
}

/* Adjust popup width for larger fonts */
.selection-popup.font-large {
  max-width: 480px;
}

.selection-popup.font-xlarge,
.selection-popup.font-xxlarge {
  max-width: 520px;
}

/* Light theme */
body.light .selection-popup {
  background: linear-gradient(135deg, #fefcf8 0%, #f8f4ec 100%);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.light .selection-actions button {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.65);
}

body.light .selection-actions button:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

body.light .selection-result-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .selection-action-label {
  color: rgba(0, 0, 0, 0.85);
}

body.light .selection-result-header {
  background: linear-gradient(180deg, rgba(252, 250, 245, 0.98) 0%, rgba(248, 244, 236, 0.95) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light .selection-close {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.4);
}

body.light .selection-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}

body.light .selection-text {
  color: rgba(0, 0, 0, 0.8);
}

body.light .selection-result-content {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

body.light .selection-result-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

body.light .selection-result-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* Pinboard picker */
.pinboard-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.pinboard-chip {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pinboard-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.pinboard-chip.selected {
  background: rgba(74, 144, 217, 0.3);
  border-color: rgba(74, 144, 217, 0.6);
  color: #fff;
  font-weight: 600;
}

.pinboard-note-input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  margin-bottom: 8px;
  outline: none;
  box-sizing: border-box;
}

.pinboard-note-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.pinboard-note-input:focus {
  border-color: rgba(74, 144, 217, 0.5);
}

.pinboard-confirm-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 8px;
  background: rgba(74, 144, 217, 0.3);
  border: 1px solid rgba(74, 144, 217, 0.5);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pinboard-confirm-btn:hover {
  background: rgba(74, 144, 217, 0.45);
}

body.light .pinboard-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}

body.light .pinboard-chip:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}

body.light .pinboard-chip.selected {
  background: rgba(74, 144, 217, 0.15);
  border-color: rgba(74, 144, 217, 0.5);
  color: #2563eb;
}

body.light .pinboard-note-input {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.85);
}

body.light .pinboard-note-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

body.light .pinboard-confirm-btn {
  background: rgba(74, 144, 217, 0.15);
  border-color: rgba(74, 144, 217, 0.4);
  color: #2563eb;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HACKER NEWS POINTS HIGHLIGHTING
   ═══════════════════════════════════════════════════════════════════════════ */

.hn-points {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  background: rgba(255, 102, 0, 0.15);
  color: #ff6600;
  margin-right: 6px;
  flex-shrink: 0;
  font-family: var(--font-mono, 'SF Mono', monospace);
}

.hn-points.hot {
  background: rgba(255, 102, 0, 0.25);
  color: #ff6600;
  animation: hn-pulse 2s ease-in-out infinite;
}

.hn-points.viral {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.35), rgba(255, 60, 0, 0.35));
  color: #ff3c00;
  animation: hn-glow 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.3);
}

@keyframes hn-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes hn-glow {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 12px rgba(255, 102, 0, 0.5);
  }
}

.headline-item.hn-hot {
  border-left: 2px solid rgba(255, 102, 0, 0.5);
  padding-left: 8px;
  margin-left: -10px;
}

.headline-item.hn-viral {
  border-left: 3px solid #ff6600;
  padding-left: 8px;
  margin-left: -11px;
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.08), transparent 50%);
}

.headline-item.hn-viral .headline-title {
  font-weight: 500;
}

/* Light mode adjustments */
body.light .hn-points {
  background: rgba(255, 102, 0, 0.12);
}

body.light .hn-points.hot {
  background: rgba(255, 102, 0, 0.2);
}

body.light .hn-points.viral {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.25), rgba(255, 60, 0, 0.25));
}

body.light .headline-item.hn-viral {
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.06), transparent 50%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOURCE STORIES POPUP
   ═══════════════════════════════════════════════════════════════════════════ */

.source-header.clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.source-header.clickable:hover {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.source-header.clickable:hover .source-name {
  color: var(--accent, #4a9eff);
}

body.light .source-header.clickable:hover {
  background: rgba(0, 0, 0, 0.04);
}

.source-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
  overflow: hidden;
  overscroll-behavior: contain;
}

.source-popup {
  background: var(--bg-secondary, #1a1a1a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.source-popup-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.source-popup-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  flex: 1;
}

.source-popup-count {
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
}

.source-popup-close {
  background: none;
  border: none;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.source-popup-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #fff);
}

.source-popup-content {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  overscroll-behavior: contain;
}

.source-popup-content::-webkit-scrollbar {
  width: 8px;
}

.source-popup-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.source-popup-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.source-popup-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  background-clip: padding-box;
}

.source-popup-item {
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.source-popup-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.source-popup-item.hn-hot {
  border-left: 2px solid rgba(255, 102, 0, 0.5);
  padding-left: 12px;
}

.source-popup-item.hn-viral {
  border-left: 3px solid #ff6600;
  padding-left: 11px;
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.08), transparent 40%);
}

.source-popup-item-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.source-popup-item-main .hn-points {
  margin-top: 2px;
}

.source-popup-title {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary, #fff);
  flex: 1;
}

.source-popup-item.hn-viral .source-popup-title {
  font-weight: 500;
}

.source-popup-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-left: 0;
}

.source-popup-item .hn-points~.source-popup-title~.source-popup-meta {
  padding-left: 52px;
}

.source-popup-time {
  font-size: 11px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.4));
  font-family: var(--font-mono, 'SF Mono', monospace);
}

.source-popup-description {
  margin: 6px 0 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
  padding-left: 0;
}

.source-popup-item .hn-points+.source-popup-title~.source-popup-description {
  padding-left: 52px;
}

/* Light mode */
body.light .source-popup {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

body.light .source-popup-header {
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .source-popup-header h3 {
  color: #1a1a1a;
}

body.light .source-popup-count {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.06);
}

body.light .source-popup-close {
  color: rgba(0, 0, 0, 0.4);
}

body.light .source-popup-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a1a;
}

body.light .source-popup-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .source-popup-title {
  color: #1a1a1a;
}

body.light .source-popup-description {
  color: rgba(0, 0, 0, 0.5);
}

body.light .source-popup-time {
  color: rgba(0, 0, 0, 0.4);
}

body.light .source-popup-item.hn-viral {
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.06), transparent 40%);
}

body.light .source-popup-content {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

body.light .source-popup-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

body.light .source-popup-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* Future Tab Styles */
.section-divider {
  color: rgba(201, 162, 39, 0.35);
  font-weight: 300;
  margin: 0 8px;
  user-select: none;
}

body.light .section-divider {
  color: rgba(139, 92, 42, 0.25);
}

.future-tab {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.12), rgba(var(--accent-rgb), 0.1)) !important;
  border: 1px solid rgba(139, 92, 176, 0.25) !important;
  border-radius: 4px !important;
}

.future-tab:hover {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.2), rgba(var(--accent-rgb), 0.18)) !important;
  border-color: rgba(139, 92, 176, 0.4) !important;
}

.future-tab.active {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.25), rgba(var(--accent-rgb), 0.22)) !important;
  border-color: rgba(139, 92, 176, 0.5) !important;
  color: #d4c4f4 !important;
}

body.light .future-tab {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.08), rgba(var(--accent-rgb), 0.06)) !important;
  border-color: rgba(139, 92, 176, 0.18) !important;
}

body.light .future-tab:hover {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.14), rgba(var(--accent-rgb), 0.12)) !important;
}

body.light .future-tab.active {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.18), rgba(var(--accent-rgb), 0.16)) !important;
  color: var(--accent-dark) !important;
}

/* Future Section Styles */
.future-section .section-header span:first-child {
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light .future-section .section-header span:first-child {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   NEWSPAPER VINTAGE - Future & Stocks Tabs
   ============================================ */

/* Future tab - vintage newspaper style */
.news-panel.newspaper .future-tab {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.15), rgba(var(--accent-rgb), 0.12)) !important;
  border: 1px solid rgba(139, 92, 176, 0.3) !important;
  border-radius: 4px !important;
  font-family: 'Georgia', serif !important;
  color: var(--accent-dark) !important;
}

.news-panel.newspaper .future-tab:hover {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.22), rgba(var(--accent-rgb), 0.18)) !important;
  border-color: rgba(139, 92, 176, 0.45) !important;
}

.news-panel.newspaper .future-tab.active {
  background: linear-gradient(135deg, rgba(139, 92, 176, 0.28), rgba(var(--accent-rgb), 0.24)) !important;
  border-color: rgba(139, 92, 176, 0.5) !important;
  color: #5b21b6 !important;
  font-weight: 600 !important;
}

/* Stocks tab - vintage newspaper style */
.news-panel.newspaper .stocks-tab {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.12), rgba(5, 140, 100, 0.1)) !important;
  border: 1px solid rgba(16, 163, 127, 0.3) !important;
  border-radius: 4px !important;
  font-family: 'Georgia', serif !important;
  color: #047857 !important;
}

.news-panel.newspaper .stocks-tab:hover {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.2), rgba(5, 140, 100, 0.16)) !important;
  border-color: rgba(16, 163, 127, 0.45) !important;
}

.news-panel.newspaper .stocks-tab.active {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.26), rgba(5, 140, 100, 0.22)) !important;
  border-color: rgba(16, 163, 127, 0.5) !important;
  color: #065f46 !important;
  font-weight: 600 !important;
}

/* Pulse tab - vintage newspaper style */
.news-panel.newspaper .pulse-tab {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(168, 85, 247, 0.1)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
  border-radius: 4px !important;
  font-family: 'Georgia', serif !important;
  color: var(--accent-dark) !important;
}

.news-panel.newspaper .pulse-tab:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(168, 85, 247, 0.16)) !important;
  border-color: rgba(var(--accent-rgb), 0.45) !important;
}

.news-panel.newspaper .pulse-tab.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(168, 85, 247, 0.22)) !important;
  border-color: rgba(var(--accent-rgb), 0.5) !important;
  color: var(--accent-dark) !important;
  font-weight: 600 !important;
}

/* Future section header - vintage */
.news-panel.newspaper .future-section .section-header span:first-child {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #5c4033 !important;
  background-clip: unset !important;
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-style: italic !important;
}

/* Stocks section header - vintage */
.news-panel.newspaper .stocks-section .section-header span:first-child {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #5c4033 !important;
  background-clip: unset !important;
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-style: italic !important;
}

/* Future & Stocks content - vintage newspaper style */
.news-panel.newspaper .future-section,
.news-panel.newspaper .stocks-section {
  background: transparent !important;
  border: none !important;
}

.news-panel.newspaper .future-section .section-header,
.news-panel.newspaper .stocks-section .section-header {
  border-bottom: 2px double rgba(139, 105, 20, 0.3) !important;
  padding-bottom: 0.5em !important;
  margin-bottom: 1em !important;
}

.news-panel.newspaper .stocks-text,
.news-panel.newspaper .future-text {
  font-family: 'Georgia', serif !important;
  color: #3d2817 !important;
  line-height: 1.7 !important;
}

.news-panel.newspaper .stocks-text strong {
  color: #5c4033 !important;
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.news-panel.newspaper .stocks-text .briefing-bullet,
.news-panel.newspaper .future-text .briefing-bullet {
  background: transparent !important;
  border-left: 2px solid rgba(139, 105, 20, 0.4) !important;
  border-radius: 0 !important;
  padding: 0.5em 0 0.5em 1em !important;
  margin: 0.5em 0 !important;
}

.news-panel.newspaper .stocks-text .briefing-bullet::before,
.news-panel.newspaper .future-text .briefing-bullet::before {
  content: '•' !important;
  color: #8b6914 !important;
  font-size: 1em !important;
  margin-right: 0.5em !important;
}

/* Timestamp in vintage mode */
.news-panel.newspaper .future-section .fetch-timestamp,
.news-panel.newspaper .stocks-section .fetch-timestamp {
  font-family: 'Georgia', serif !important;
  font-style: italic !important;
  color: #8b7355 !important;
  font-size: 0.75em !important;
}

/* Action buttons in vintage mode */
.news-panel.newspaper .future-section button,
.news-panel.newspaper .stocks-section button {
  background: transparent !important;
  border: 1px solid rgba(139, 105, 20, 0.35) !important;
  color: #5c4033 !important;
  font-family: 'Georgia', serif !important;
  border-radius: 2px !important;
}

.news-panel.newspaper .future-section button:hover,
.news-panel.newspaper .stocks-section button:hover {
  background: rgba(139, 105, 20, 0.08) !important;
  border-color: rgba(139, 105, 20, 0.5) !important;
}

/* Section divider - vintage style */
.news-panel.newspaper .section-divider {
  color: rgba(139, 105, 20, 0.35) !important;
  font-weight: 400 !important;
  font-family: 'Georgia', serif !important;
}

/* Emojis in tabs - more subtle in vintage mode */
.news-panel.newspaper .future-tab,
.news-panel.newspaper .stocks-tab {
  font-size: 0.9em !important;
}

/* Loading/generating state in vintage */
.news-panel.newspaper .future-tab.generating,
.news-panel.newspaper .stocks-tab.generating {
  animation: newspaper-pulse 1.5s ease-in-out infinite !important;
}

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

/* Stock Market Outlook Section Styles */

/* Stock ticker styling - make them stand out */
.predictions-text strong {
  color: var(--accent-light);
  font-weight: 700;
  font-family: var(--font-mono, 'SF Mono', 'Monaco', monospace);
  letter-spacing: 0.3px;
}

body.light .predictions-text strong {
  color: var(--accent-dark);
}

/* Stock section bullet points */
.predictions-text .briefing-bullet {
  padding-left: 1.5em;
  position: relative;
  margin: 0.6em 0;
  line-height: 1.6;
  padding: 0.5em 0.8em;
  background: rgba(147, 51, 234, 0.05);
  border-radius: 6px;
  border-left: 3px solid rgba(147, 51, 234, 0.25);
}

body.light .predictions-text .briefing-bullet {
  background: rgba(147, 51, 234, 0.04);
  border-left-color: rgba(147, 51, 234, 0.35);
}

/* Sector and stock header styling */
.predictions-text .briefing-header {
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  color: #e0d4fc;
  border-bottom: 1px solid rgba(147, 51, 234, 0.2);
  padding-bottom: 0.3em;
  font-size: 1.05em;
}

body.light .predictions-text .briefing-header {
  color: var(--accent-dark);
  border-color: rgba(109, 40, 217, 0.15);
}

/* Markdown header levels */
.briefing-h1 {
  font-size: 1.4em;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  border-bottom-width: 2px;
}

.briefing-h2 {
  font-size: 1.2em;
  margin-top: 1em;
  margin-bottom: 0.4em;
}

.briefing-h3 {
  font-size: 1.1em;
  margin-top: 0.8em;
  margin-bottom: 0.3em;
}

/* Stock outlook emphasis and disclaimer */
.predictions-text em {
  color: #d8b4fe;
  font-style: italic;
}

body.light .predictions-text em {
  color: var(--accent-dark);
}

/* Dividers in predictions */
.predictions-text .briefing-divider {
  border-color: rgba(147, 51, 234, 0.15);
  margin: 1.5em 0;
}

body.light .predictions-text .briefing-divider {
  border-color: rgba(147, 51, 234, 0.1);
}

/* Takeaway styling in predictions */
.predictions-text .briefing-takeaway {
  background: rgba(147, 51, 234, 0.08);
  padding: 0.6em 1em;
  border-radius: 6px;
  margin: 0.8em 0;
}

body.light .predictions-text .briefing-takeaway {
  background: rgba(147, 51, 234, 0.06);
}

/* ============================================
   STOCK MARKET SECTION STYLES
   ============================================ */

/* Stocks Tab */
.stocks-tab {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.12), rgba(5, 140, 100, 0.1)) !important;
  border: 1px solid rgba(16, 163, 127, 0.25) !important;
  border-radius: 4px !important;
}

.stocks-tab:hover {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.2), rgba(5, 140, 100, 0.18)) !important;
  border-color: rgba(16, 163, 127, 0.4) !important;
}

.stocks-tab.active {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.25), rgba(5, 140, 100, 0.22)) !important;
  border-color: rgba(16, 163, 127, 0.5) !important;
  color: #7ee8c4 !important;
}

body.light .stocks-tab {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.08), rgba(5, 140, 100, 0.06)) !important;
  border-color: rgba(16, 163, 127, 0.18) !important;
}

body.light .stocks-tab:hover {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.14), rgba(5, 140, 100, 0.12)) !important;
}

body.light .stocks-tab.active {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.18), rgba(5, 140, 100, 0.16)) !important;
  color: #047857 !important;
}

/* Pulse Tab */
.pulse-tab {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(168, 85, 247, 0.1)) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.25) !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

.pulse-tab:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(168, 85, 247, 0.18)) !important;
  border-color: rgba(var(--accent-rgb), 0.4) !important;
}

.pulse-tab.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(168, 85, 247, 0.22)) !important;
  border-color: rgba(var(--accent-rgb), 0.5) !important;
  color: var(--accent-light) !important;
}

body.light .pulse-tab {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(168, 85, 247, 0.06)) !important;
  border-color: rgba(var(--accent-rgb), 0.18) !important;
}

body.light .pulse-tab:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(168, 85, 247, 0.12)) !important;
}

body.light .pulse-tab.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(168, 85, 247, 0.16)) !important;
  color: var(--accent-dark) !important;
}

/* Stocks Section Header */
.stocks-section .section-header span:first-child {
  background: linear-gradient(90deg, #6ee7b7, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light .stocks-section .section-header span:first-child {
  background: linear-gradient(90deg, #059669, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stocks Text Container */
.stocks-text strong {
  color: #6ee7b7;
  font-weight: 700;
  font-family: var(--font-mono, 'SF Mono', 'Monaco', monospace);
  letter-spacing: 0.3px;
}

body.light .stocks-text strong {
  color: #059669;
}

/* Stock ticker styling */
.stocks-text .briefing-bullet {
  padding-left: 1.5em;
  position: relative;
  margin: 0.6em 0;
  line-height: 1.6;
  padding: 0.5em 0.8em;
  background: rgba(16, 185, 129, 0.05);
  border-radius: 6px;
  border-left: 3px solid rgba(16, 185, 129, 0.25);
}

body.light .stocks-text .briefing-bullet {
  background: rgba(16, 185, 129, 0.04);
  border-left-color: rgba(16, 185, 129, 0.35);
}

/* Stock section headers */
.stocks-text .briefing-header {
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  color: #a7f3d0;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
  padding-bottom: 0.3em;
  font-size: 1.05em;
}

body.light .stocks-text .briefing-header {
  color: #047857;
  border-color: rgba(5, 150, 105, 0.15);
}

/* Emphasis text in stocks */
.stocks-text em {
  color: #d4a574;
  font-style: italic;
}

body.light .stocks-text em {
  color: #8b5a2b;
}

/* Dividers in stocks section */
.stocks-text .briefing-divider {
  border-color: rgba(16, 185, 129, 0.15);
  margin: 1.5em 0;
}

body.light .stocks-text .briefing-divider {
  border-color: rgba(16, 185, 129, 0.1);
}

/* Takeaway/Watch styling in stocks */
.stocks-text .briefing-takeaway {
  background: rgba(16, 185, 129, 0.08);
  padding: 0.6em 1em;
  border-radius: 6px;
  margin: 0.8em 0;
}

body.light .stocks-text .briefing-takeaway {
  background: rgba(16, 185, 129, 0.06);
}

/* Bullish/Bearish indicator colors */
.stocks-text .briefing-paragraph {
  line-height: 1.7;
}

/* Stock analysis paragraphs with tighter spacing */
.stocks-text .briefing-paragraph+.briefing-paragraph {
  margin-top: 0.4em;
}

/* Stocks empty state container */
.briefing-empty-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em 0;
}

/* Waiting state - shown when briefings are loading */
.briefing-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.briefing-waiting svg {
  color: rgba(var(--accent-rgb), 0.6);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.briefing-waiting p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.briefing-waiting-hint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

body.light .briefing-waiting {
  color: rgba(0, 0, 0, 0.5);
}

body.light .briefing-waiting svg {
  color: rgba(var(--accent-rgb), 0.6);
}

body.light .briefing-waiting p {
  color: rgba(0, 0, 0, 0.6);
}

body.light .briefing-waiting-hint {
  color: rgba(0, 0, 0, 0.35);
}

/* Stocks tip styling */
.stocks-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: 0.8em 1em;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.15);
  font-size: 0.85em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.stocks-tip svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #34d399;
}

.stocks-tip strong {
  color: #6ee7b7;
}

body.light .stocks-tip {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.2);
  color: rgba(0, 0, 0, 0.6);
}

body.light .stocks-tip svg {
  color: #059669;
}

body.light .stocks-tip strong {
  color: #047857;
}

/* Reddit sentiment highlight in stocks text */
.stocks-text .briefing-header:nth-of-type(n) {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* ============================================
   COLLECTION SOURCES - Vintage Newspaper Byline
   ============================================ */

/* Sources byline within newspaper panel */
.news-panel.newspaper .collection-sources-byline {
  margin-top: 1.25em;
  padding: 0.75em 0;
  border-top: 1px solid rgba(139, 105, 20, 0.2);
  border-bottom: 1px solid rgba(139, 105, 20, 0.2);
  background: linear-gradient(90deg, transparent, rgba(139, 105, 20, 0.03), transparent);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #5c4033;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.01em;
}

.news-panel.newspaper .collection-sources-byline .byline-label {
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  color: #8b6914;
  margin-right: 0.5em;
}

.news-panel.newspaper .collection-sources-byline .byline-sources {
  display: inline;
}

.news-panel.newspaper .collection-sources-byline .byline-source {
  cursor: default;
  color: #5c4033;
}

.news-panel.newspaper .collection-sources-byline .byline-source::after {
  content: ' · ';
  font-style: normal;
  color: rgba(139, 105, 20, 0.4);
}

.news-panel.newspaper .collection-sources-byline .byline-source:last-child::after {
  content: '';
}

.news-panel.newspaper .collection-sources-byline .byline-more {
  font-style: normal;
  color: rgba(92, 64, 51, 0.6);
  margin-left: 0.3em;
}

/* ============================================
   STOCKS/FUTURE SOURCES (Vintage Newspaper)
   ============================================ */

.news-panel.newspaper .stocks-sources {
  margin-top: 1.25em;
  padding: 0.75em 0;
  border-top: 1px solid rgba(139, 105, 20, 0.2);
  border-bottom: 1px solid rgba(139, 105, 20, 0.2);
  background: linear-gradient(90deg, transparent, rgba(139, 105, 20, 0.03), transparent);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #5c4033;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.01em;
}

.news-panel.newspaper .stocks-sources-header {
  display: inline;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  color: #8b6914;
  margin-right: 0.5em;
}

.news-panel.newspaper .stocks-sources-header svg {
  display: none;
}

.news-panel.newspaper .stocks-sources-list {
  display: inline;
}

.news-panel.newspaper .stock-source-tag {
  display: inline;
  cursor: default;
  background: none;
  border: none;
  padding: 0;
  color: #5c4033;
  font-size: inherit;
  font-family: inherit;
}

.news-panel.newspaper .stock-source-tag::after {
  content: ' · ';
  font-style: normal;
  color: rgba(139, 105, 20, 0.4);
}

.news-panel.newspaper .stock-source-tag:last-child::after {
  content: '';
}

/* Stage indicators for unified loading */
.newspaper-progress-stages {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  font-size: 0.85rem;
}

.stage-indicator {
  position: relative;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stage-indicator.active {
  background: rgba(139, 69, 19, 0.1);
  color: rgba(0, 0, 0, 0.7);
  border-color: rgba(139, 69, 19, 0.3);
}

.stage-indicator.completed {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}

.stage-indicator.completed::after {
  content: ' ✓';
  margin-left: 4px;
}

/* App view overlay styling - fixed to viewport center */
.newspaper-loading-overlay.app-view {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(8px);
  z-index: 10001 !important;
}

.news-panel.fullscreen .newspaper-loading-overlay.app-view {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
}


/* News Notification Toast */
.news-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: #fff;
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  min-width: 280px;
  max-width: 400px;
  will-change: transform, opacity;
}

.news-notification.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.news-notification.success {
  border-left: 4px solid #34c759;
}

.news-notification.info {
  border-left: 4px solid #0a84ff;
}

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34c759;
}

.news-notification.info .notification-icon {
  color: #0a84ff;
}

.notification-content {
  flex: 1;
}

.notification-message {
  font-size: 0.9rem;
  font-weight: 500;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

.notification-close {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.notification-close:hover {
  color: rgba(201, 162, 39, 0.9);
  background: rgba(201, 162, 39, 0.1);
  border-color: rgba(201, 162, 39, 0.2);
}

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

/* Specific styling for newspaper mode notifications */
.news-fullscreen-active .news-notification {
  background: rgba(245, 240, 230, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #1a1714;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.news-fullscreen-active .notification-message {
  color: #1a1714;
}

.news-fullscreen-active .notification-close {
  color: rgba(0, 0, 0, 0.35);
}

.news-fullscreen-active .notification-close:hover {
  color: rgba(139, 92, 42, 0.9);
  background: rgba(139, 92, 42, 0.1);
  border: 1px solid rgba(139, 92, 42, 0.2);
}

/* Briefing Completion Alert - Right Bottom Corner */
.briefing-completion-alert {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 10001;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  will-change: transform, opacity;
}

.briefing-completion-alert.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.briefing-alert-content {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(30, 30, 35, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  min-width: 280px;
  max-width: 320px;
  box-sizing: border-box;
}

.briefing-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.15), rgba(48, 209, 88, 0.1));
  color: #34c759;
  flex-shrink: 0;
  animation: gentle-pulse 2s ease-in-out infinite;
  will-change: transform;
}

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

.briefing-alert-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.briefing-alert-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.briefing-alert-subtitle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 400;
}

.briefing-alert-close {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 8px;
  box-sizing: border-box;
}

.briefing-alert-close:hover {
  color: rgba(201, 162, 39, 0.9);
  background: rgba(201, 162, 39, 0.1);
  border-color: rgba(201, 162, 39, 0.2);
}

.briefing-alert-close:active {
  transform: scale(0.95);
}

/* Light theme support */
body.light .briefing-alert-content {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

body.light .briefing-alert-icon {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.12), rgba(48, 209, 88, 0.08));
  color: #22c55e;
}

body.light .briefing-alert-title {
  color: rgba(26, 23, 20, 0.95);
}

body.light .briefing-alert-subtitle {
  color: rgba(26, 23, 20, 0.6);
}

/* Fullscreen newspaper mode */
.news-fullscreen-active .briefing-alert-content {
  background: rgba(245, 240, 230, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

.news-fullscreen-active .briefing-alert-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1));
  color: #16a34a;
}

.news-fullscreen-active .briefing-alert-title {
  color: rgba(26, 23, 20, 0.95);
}

.news-fullscreen-active .briefing-alert-subtitle {
  color: rgba(26, 23, 20, 0.65);
}

.news-fullscreen-active .briefing-alert-close {
  color: rgba(0, 0, 0, 0.35);
}

.news-fullscreen-active .briefing-alert-close:hover {
  color: rgba(139, 92, 42, 0.9);
  background: rgba(139, 92, 42, 0.1);
  border: 1px solid rgba(139, 92, 42, 0.2);
}

body.light .briefing-alert-close {
  color: rgba(26, 23, 20, 0.35);
}

body.light .briefing-alert-close:hover {
  color: rgba(139, 92, 42, 0.9);
  background: rgba(139, 92, 42, 0.1);
  border: 1px solid rgba(139, 92, 42, 0.2);
}
/* ===== NEWSPAPER RITUAL FEATURES ===== */

/* Reading Timer */
.reading-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(201, 162, 39, 0.15);
  border-radius: 12px;
  font-size: 11px;
  font-family: 'SF Mono', 'Monaco', monospace;
  color: #c9a227;
  margin-left: 12px;
}

.reading-timer svg {
  opacity: 0.8;
}

.reading-timer .timer-warning {
  color: #ef4444;
  animation: timer-pulse 1s ease-in-out infinite;
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.timer-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 4px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 50%;
  color: #22c55e;
  cursor: pointer;
  transition: all 0.2s ease;
}

.timer-close-btn:hover {
  background: rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.5);
  transform: scale(1.1);
}

/* View Mode Toggle */
.masthead-btn.view-mode-btn {
  position: relative;
}

.masthead-btn.view-mode-btn.active {
  background: rgba(201, 162, 39, 0.2);
  border-color: rgba(201, 162, 39, 0.4);
  color: #c9a227;
}

.masthead-btn.view-mode-btn.active:hover {
  background: rgba(201, 162, 39, 0.3);
}

/* Ensure panel contains the overlay */
.news-panel.newspaper {
  position: relative;
  overflow: hidden; /* Prevent overlay from escaping */
}

/* Session Closed Banner - Panel (non-fullscreen) */
.news-panel .session-closed-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(16, 185, 129, 0.06)) !important;
  border-top: 1px solid rgba(34, 197, 94, 0.15) !important;
  border-bottom: 1px solid rgba(34, 197, 94, 0.15) !important;
  animation: banner-fade-in 0.5s ease;
}

.news-panel .session-closed-banner svg {
  color: #22c55e !important;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.news-panel .session-closed-banner .session-text {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.news-panel .session-closed-banner .session-reset-btn {
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 8px !important;
}

.news-panel .session-closed-banner .session-reset-btn:hover {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}

/* Light mode - panel view */
body.light .news-panel .session-closed-banner {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.08)) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
}

body.light .news-panel .session-closed-banner svg {
  color: #16a34a !important;
}

body.light .news-panel .session-closed-banner .session-text {
  color: rgba(0, 0, 0, 0.75) !important;
}

body.light .news-panel .session-closed-banner .session-reset-btn {
  color: #16a34a !important;
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}

body.light .news-panel .session-closed-banner .session-reset-btn:hover {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}

@keyframes banner-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Collapsed state - more compact (panel view) */
.news-panel .session-closed-banner.collapsed {
  padding: 6px 14px !important;
  gap: 8px !important;
}

.news-panel .session-closed-banner.collapsed svg {
  width: 14px;
  height: 14px;
}

.news-panel .session-closed-banner.collapsed .session-text {
  font-size: 11px !important;
}

.news-panel .session-closed-banner.collapsed .session-reset-btn {
  padding: 3px 10px !important;
  font-size: 10px !important;
}

/* Fullscreen newspaper style - vintage background only here */
.news-panel.fullscreen .session-closed-banner {
  background: linear-gradient(135deg, #f8f4eb 0%, #f0ebe0 100%) !important;
  border-top: 1px solid rgba(139, 105, 20, 0.2) !important;
  border-bottom: 2px double rgba(139, 105, 20, 0.25) !important;
  padding: 14px 32px !important;
}

.news-panel.fullscreen .session-closed-banner svg {
  color: #6b4c1a !important;
  flex-shrink: 0;
}

.news-panel.fullscreen .session-closed-banner .session-text {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: #3d2817 !important;
  letter-spacing: 0.02em;
}

.news-panel.fullscreen .session-closed-banner .session-reset-btn {
  padding: 7px 18px !important;
  font-family: 'Georgia', serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #3d2817 !important;
  background: rgba(139, 105, 20, 0.08) !important;
  border: 1px solid rgba(139, 105, 20, 0.4) !important;
  border-radius: 2px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 12px !important;
}

.news-panel.fullscreen .session-closed-banner .session-reset-btn:hover {
  background: rgba(139, 105, 20, 0.15) !important;
  border-color: rgba(139, 105, 20, 0.6) !important;
  color: #2a1a0f !important;
}

/* Fullscreen collapsed state */
.news-panel.fullscreen .session-closed-banner.collapsed {
  padding: 10px 24px !important;
  gap: 10px !important;
}

.news-panel.fullscreen .session-closed-banner.collapsed .session-text {
  font-size: 13px !important;
}

.news-panel.fullscreen .session-closed-banner.collapsed .session-reset-btn {
  padding: 5px 14px !important;
  font-size: 10px !important;
}

/* Light mode timer overrides */
body.light .reading-timer {
  background: rgba(139, 92, 42, 0.1);
  color: #8b5c2a;
}

body.light .timer-close-btn {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.25);
}

/* Newspaper theme - Reading Timer */
.news-panel.newspaper .reading-timer {
  background: rgba(139, 105, 20, 0.15) !important;
  border: 1px solid rgba(139, 105, 20, 0.25) !important;
  color: #8b6914 !important;
  font-family: 'Georgia', serif !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 3px !important;
}

.news-panel.newspaper .reading-timer svg {
  color: #8b6914 !important;
}

.news-panel.newspaper .timer-close-btn {
  background: rgba(139, 105, 20, 0.1) !important;
  border: 1px solid rgba(139, 105, 20, 0.3) !important;
  color: #5c4033 !important;
}

.news-panel.newspaper .timer-close-btn:hover {
  background: rgba(139, 105, 20, 0.2) !important;
}

/* ============================================
   FREQUENCY INDICATORS - Elegant & Subtle
   ============================================ */

/* Weekly collections - small superscript */
.news-panel.newspaper .section-tab[data-frequency="weekly"]::after {
  content: "w";
  position: relative;
  top: -0.4em;
  margin-left: 1px;
  font-family: 'Georgia', serif;
  font-size: 0.6em;
  font-style: italic;
  color: inherit;
  opacity: 0.5;
}

/* On-demand collections - small dot */
.news-panel.newspaper .section-tab[data-frequency="on-demand"]::after {
  content: "°";
  position: relative;
  top: -0.3em;
  margin-left: 0;
  font-size: 0.8em;
  color: inherit;
  opacity: 0.4;
}

/* Daily collections - no indicator */
.news-panel.newspaper .section-tab[data-frequency="daily"]::after {
  content: "";
}

/* On-demand tab styling - slightly muted */
.news-panel.newspaper .section-tab.on-demand {
  opacity: 0.7;
}

.news-panel.newspaper .section-tab.on-demand:hover {
  opacity: 1;
}

/* ============================================
   RSS GROUP SOURCES PANEL
   ============================================ */

.rss-sources-section {
  padding: 16px;
  margin-top: 12px;
  border-radius: 6px;
}

.rss-sources-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.rss-sources-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
  transition: color 0.2s ease;
}

.rss-sources-header:hover {
  color: rgba(255, 255, 255, 0.7);
}

.rss-sources-header svg {
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
}

.rss-sources-content {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rss-group-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.rss-group-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.rss-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rss-group-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: capitalize;
}

.rss-group-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.rss-feeds-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rss-feed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.01);
  transition: background 0.2s ease;
}

.rss-feed-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.rss-feed-item svg:first-of-type {
  color: rgba(255, 165, 0, 0.7);
  flex-shrink: 0;
}

.rss-feed-title {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rss-feed-link {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.rss-feed-item:hover .rss-feed-link {
  opacity: 1;
}

.rss-feed-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.rss-feeds-loading {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  padding: 8px;
}

/* Light theme support */
body.light .rss-sources-section.newspaper-theme {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.015) 0%, rgba(0, 0, 0, 0.008) 100%);
  border-color: rgba(0, 0, 0, 0.05);
}

body.light .rss-sources-header {
  color: rgba(0, 0, 0, 0.45);
}

body.light .rss-sources-header:hover {
  color: rgba(0, 0, 0, 0.65);
}

body.light .rss-sources-header svg {
  color: rgba(0, 0, 0, 0.35);
}

body.light .rss-sources-content {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .rss-group-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.04);
}

body.light .rss-group-item:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .rss-group-header {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .rss-group-name {
  color: rgba(0, 0, 0, 0.7);
}

body.light .rss-group-count {
  color: rgba(0, 0, 0, 0.45);
}

body.light .rss-feed-item {
  background: rgba(0, 0, 0, 0.01);
}

body.light .rss-feed-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

body.light .rss-feed-item svg:first-of-type {
  color: rgba(255, 140, 0, 0.7);
}

body.light .rss-feed-title {
  color: rgba(0, 0, 0, 0.6);
}

body.light .rss-feed-link {
  color: rgba(0, 0, 0, 0.3);
}

body.light .rss-feed-link:hover {
  color: rgba(0, 0, 0, 0.6);
}

body.light .rss-feeds-loading {
  color: rgba(0, 0, 0, 0.4);
}

/* Fullscreen newspaper mode */
.news-panel.fullscreen .rss-sources-section {
  background:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px),
    linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.news-panel.fullscreen .rss-sources-header {
  color: rgba(0, 0, 0, 0.7) !important;
}

.news-panel.fullscreen .rss-sources-header:hover {
  color: rgba(0, 0, 0, 0.9) !important;
}

.news-panel.fullscreen .rss-group-item {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   PULSE SECTION - World Pulse Aggregation
   ============================================ */

/* Pulse body - multi-column newspaper layout */
.pulse-body {
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  padding: 1.5rem !important;
  border-radius: 0;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.03),
    0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.pulse-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* Section groups within pulse - newspaper column style */
.pulse-section-group {
  padding-right: 1.25rem;
  border-right: 1px solid rgba(139, 105, 20, 0.2);
}

.pulse-section-group:last-child {
  border-right: none;
  padding-right: 0;
}

.pulse-section-title {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #3d2817;
  margin: 0 0 0.85rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(139, 105, 20, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Pulse items list */
.pulse-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pulse-item {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.12);
}

.pulse-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.pulse-item-link {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #2d2a26;
  text-decoration: none;
  transition: color 0.15s ease;
}

.pulse-item-link:hover {
  color: #8b6914;
}

.pulse-item-meta {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-style: italic;
  color: #8b7355;
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cache info */
.pulse-cache-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Georgia', serif;
  font-size: 0.7rem;
  font-style: italic;
  color: #8b7355;
  padding: 0.75rem 0 0 0;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(139, 105, 20, 0.15);
}

/* Pulse Loading State */
.pulse-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  gap: 1.25rem;
}

.pulse-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(139, 105, 20, 0.2);
  border-top-color: #8b6914;
  border-radius: 50%;
  animation: pulse-spin 1s linear infinite;
}

@keyframes pulse-spin {
  to { transform: rotate(360deg); }
}

.pulse-loading-status {
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #3d2817;
  margin: 0;
  text-align: center;
  font-weight: 500;
}

/* Pulse section header in newspaper style */
.news-panel.newspaper .pulse-section .section-header,
.news-panel.fullscreen .pulse-section .section-header {
  border-bottom: 2px double rgba(139, 105, 20, 0.3) !important;
  padding-bottom: 0.5em !important;
  margin-bottom: 1em !important;
}

.news-panel.newspaper .pulse-section .section-header span:first-child,
.news-panel.fullscreen .pulse-section .section-header span:first-child {
  font-family: 'Playfair Display', 'Georgia', serif;
  color: #3d2817;
}

/* Fullscreen Pulse - take over full screen */
.news-panel.fullscreen .pulse-section.pulse-layout {
  position: fixed;
  top: 120px; /* Below masthead and tabs */
  left: 0;
  right: 0;
  bottom: 0;
  min-height: auto;
  height: auto;
  border-radius: 0;
  z-index: 100;
}

/* Hide headlines section when pulse is showing in fullscreen */
.news-panel.fullscreen .pulse-layout ~ .headlines-section,
.news-panel.fullscreen .content-grid:has(.pulse-layout) ~ .headlines-section {
  display: none !important;
}

/* ============================================
   PULSE LAYOUT - Sidebar + Content
   ============================================ */

.pulse-layout {
  display: grid !important;
  grid-template-columns: 200px 1fr;
  gap: 0;
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  border-radius: 8px;
  overflow: hidden;
  min-height: 500px;
  height: calc(100vh - 200px);
  max-height: calc(100vh - 200px);
}

/* Pulse layout without separate sidebar (nav is in CollectionSidebar) */
.pulse-layout.pulse-no-sidebar {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

/* Pulse content header (replaces pulse-sidebar-header when no sidebar) */
.pulse-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
  background: rgba(61, 40, 23, 0.04);
}

.pulse-content-title {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 700;
  font-size: 1rem;
  color: #3d2817;
}

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

.pulse-content-actions .action-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 105, 20, 0.1);
  border: 1px solid rgba(139, 105, 20, 0.2);
  border-radius: 4px;
  color: #8b6914;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pulse-content-actions .action-btn:hover {
  background: rgba(139, 105, 20, 0.2);
}

.pulse-content-actions .action-btn.spinning svg,
.pulse-content-actions .action-btn svg.spinning {
  animation: pulse-spin 1s linear infinite;
}

.pulse-cache-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Georgia', serif;
  font-size: 0.7rem;
  color: #8b7355;
}

/* Pulse Sidebar */
.pulse-sidebar {
  background: rgba(61, 40, 23, 0.06);
  border-right: 1px solid rgba(139, 105, 20, 0.2);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  height: 100%;
}

.pulse-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 700;
  font-size: 1rem;
  color: #3d2817;
}

.pulse-sidebar-actions .action-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 105, 20, 0.1);
  border: 1px solid rgba(139, 105, 20, 0.2);
  border-radius: 4px;
  color: #8b6914;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pulse-sidebar-actions .action-btn:hover {
  background: rgba(139, 105, 20, 0.2);
}

.pulse-sidebar-actions .action-btn.spinning svg {
  animation: pulse-spin 1s linear infinite;
}

/* Pulse Navigation */
.pulse-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.pulse-nav-divider {
  font-family: 'Georgia', serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b7355;
  padding: 0.75rem 1rem 0.35rem;
  margin-top: 0.25rem;
}

.pulse-nav-divider-linkedin {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pulse-linkedin-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pulse-linkedin-time {
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 400;
  color: #a08060;
  text-transform: none;
  letter-spacing: normal;
}

.pulse-linkedin-refresh-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #8b7355;
  opacity: 0.7;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-linkedin-refresh-btn:hover {
  opacity: 1;
}

.pulse-linkedin-refresh-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.pulse-linkedin-refresh-btn .spinning {
  animation: spin 1s linear infinite;
}

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

.pulse-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  text-align: left;
  font-family: 'Georgia', serif;
  font-size: 0.8rem;
  color: #4a3f35;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pulse-nav-item:hover {
  background: rgba(139, 105, 20, 0.08);
}

.pulse-nav-item.active {
  background: rgba(139, 105, 20, 0.15);
  color: #3d2817;
  font-weight: 600;
}

.pulse-nav-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.pulse-nav-item span:first-of-type {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pulse-nav-count {
  font-size: 0.7rem;
  color: #8b7355;
  background: rgba(139, 105, 20, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}

.pulse-nav-badge {
  font-size: 0.7rem;
  color: #22c55e;
}

.pulse-sidebar .pulse-cache-info {
  border-top: 1px solid rgba(139, 105, 20, 0.15);
  padding: 0.75rem 1rem;
  margin: 0;
}

/* Pulse Content Area */
.pulse-content {
  padding: 1.5rem;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pulse-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(139, 105, 20, 0.2);
}

.pulse-content-header h3 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3d2817;
  margin: 0;
}

.pulse-content-header .action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: rgba(139, 105, 20, 0.1);
  border: 1px solid rgba(139, 105, 20, 0.25);
  border-radius: 4px;
  font-family: 'Georgia', serif;
  font-size: 0.75rem;
  color: #8b6914;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pulse-content-header .action-btn:hover {
  background: rgba(139, 105, 20, 0.2);
}

.pulse-github-period-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(139, 105, 20, 0.08);
  border: 1px solid rgba(139, 105, 20, 0.18);
}

.pulse-period-btn {
  border: none;
  background: transparent;
  color: rgba(61, 40, 23, 0.75);
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pulse-period-btn:hover {
  background: rgba(139, 105, 20, 0.14);
  color: #3d2817;
}

.pulse-period-btn.active {
  background: rgba(139, 105, 20, 0.28);
  color: #3d2817;
}

/* Pulse Empty State */
.pulse-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1rem;
  color: #8b7355;
}

.pulse-empty svg {
  opacity: 0.4;
}

.pulse-empty p {
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  margin: 0;
}

/* AI Summary Section */
.pulse-summary-view {
  max-width: 700px;
}

.pulse-summary-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem;
  gap: 1rem;
}

.pulse-summary-loading p {
  font-family: 'Georgia', serif;
  font-size: 1rem;
  font-weight: 500;
  color: #4a3f35;
  margin: 0;
}

.loading-hint {
  font-family: 'Georgia', serif;
  font-size: 0.8rem;
  color: #8b8178;
  font-style: italic;
  text-align: center;
  max-width: 300px;
}

.pulse-summary-content {
  padding: 0;
}

.pulse-summary-text {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #2d2a26;
  margin: 0 0 1.5rem 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
}

.pulse-summary-empty {
  padding: 2rem;
  text-align: center;
  background: rgba(139, 105, 20, 0.05);
  border-radius: 6px;
}

.pulse-summary-empty p {
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  color: #8b7355;
  margin: 0;
}

/* Highlights Cards */
.pulse-highlights {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pulse-highlight {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  border-left: 4px solid #8b6914;
}

.pulse-highlight-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pulse-highlight-category {
  display: inline-block;
  font-family: 'Georgia', serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b6914;
  background: rgba(139, 105, 20, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}

.pulse-highlight-source {
  font-family: 'Georgia', serif;
  font-size: 0.65rem;
  color: #888;
  font-style: italic;
}

.pulse-highlight h4 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d2817;
  margin: 0 0 0.35rem 0;
}

.pulse-highlight p {
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4a3f35;
  margin: 0;
}

/* Category colors */
.pulse-highlight-ai { border-left-color: var(--accent); }
.pulse-highlight-ai .pulse-highlight-category { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }

.pulse-highlight-tools { border-left-color: #0ea5e9; }
.pulse-highlight-tools .pulse-highlight-category { color: #0ea5e9; background: rgba(14, 165, 233, 0.1); }

.pulse-highlight-github { border-left-color: #22c55e; }
.pulse-highlight-github .pulse-highlight-category { color: #22c55e; background: rgba(34, 197, 94, 0.1); }

.pulse-highlight-industry { border-left-color: #f59e0b; }
.pulse-highlight-industry .pulse-highlight-category { color: #b45309; background: rgba(245, 158, 11, 0.15); }

.pulse-highlight-opinion { border-left-color: #ec4899; }
.pulse-highlight-opinion .pulse-highlight-category { color: #ec4899; background: rgba(236, 72, 153, 0.1); }

/* Perspective View */
.pulse-perspective-view {
  max-width: 700px;
}

.pulse-perspective-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  gap: 1rem;
}

.pulse-perspective-loading p {
  font-family: 'Georgia', serif;
  font-size: 1rem;
  font-weight: 500;
  color: #4a3f35;
  margin: 0;
}

.pulse-perspective-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  gap: 1rem;
  text-align: center;
}

.pulse-perspective-empty svg {
  color: #d4a574;
  opacity: 0.5;
}

.pulse-perspective-empty p {
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #5c5652;
  max-width: 400px;
  line-height: 1.6;
}

.perspective-hint {
  font-size: 0.75rem;
  color: #8b8178;
  font-style: italic;
}

.pulse-perspective-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 0.5rem;
}

.perspective-section {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(139, 105, 20, 0.03);
  border-radius: 12px;
  border-left: 3px solid #d4a574;
}

.perspective-section svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.perspective-section h4 {
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #5c5652;
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.perspective-section p {
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #2d2a26;
  margin: 0;
}

/* Perspective section color variants */
.perspective-emotional {
  border-left-color: #ec4899;
  background: rgba(236, 72, 153, 0.04);
}
.perspective-emotional svg {
  color: #ec4899;
}
.perspective-emotional p {
  font-style: italic;
  color: #5c5652;
}

.perspective-grounded {
  border-left-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.04);
}
.perspective-grounded svg {
  color: #0ea5e9;
}
.perspective-grounded h4 {
  color: #0c7cd5;
}

.perspective-opportunity {
  border-left-color: #22c55e;
  background: rgba(34, 197, 94, 0.04);
}
.perspective-opportunity svg {
  color: #22c55e;
}
.perspective-opportunity h4 {
  color: #16a34a;
}

.perspective-action {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.04);
}
.perspective-action svg {
  color: #f59e0b;
}
.perspective-action h4 {
  color: #b45309;
}

.perspective-affirmation {
  border-left-color: var(--accent);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(236, 72, 153, 0.04));
  text-align: center;
  padding: 1.5rem;
}
.perspective-affirmation svg {
  color: var(--accent);
  margin: 0 auto;
}
.affirmation-text {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #5c4d7d;
  font-style: italic;
  margin: 0;
}

/* Section View Items List */
.pulse-section-view {
  max-width: 100%;
}

/* Grouped section (like HN with top/new/best tabs) */
.pulse-grouped-section {
  width: 100%;
}

/* Regular section without groups */
.pulse-regular-section {
  max-width: 900px;
}

/* Multi-column layout for grouped sections (HN Top/Best/New) */
.pulse-groups-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
}

.pulse-group-column {
  min-width: 0; /* Allow text truncation */
}

.pulse-column-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-family: 'Georgia', serif;
  font-weight: 600;
  color: rgba(60, 42, 33, 0.7);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
}

.pulse-column-title .column-icon {
  font-size: 0.9rem;
}

/* Compact list items for columns */
.pulse-list-item-compact {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

.pulse-list-item-compact .pulse-item-title {
  font-size: 0.8rem;
  line-height: 1.35;
}

.pulse-list-item-compact .pulse-item-meta {
  font-size: 0.7rem;
}

/* Legacy tabs - keep for backwards compat */
.pulse-groups-tabs {
  display: flex;
  gap: 0.25rem;
}

.pulse-group-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-family: 'Georgia', serif;
  font-weight: 500;
  color: rgba(60, 42, 33, 0.6);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pulse-group-tab:hover {
  color: rgba(60, 42, 33, 0.9);
  background: rgba(139, 105, 20, 0.08);
}

.pulse-group-tab.active {
  color: rgba(60, 42, 33, 1);
  background: rgba(139, 105, 20, 0.15);
}

.pulse-group-tab .tab-icon {
  font-size: 0.9rem;
}

.pulse-items-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pulse-list-item {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.12);
}

.pulse-list-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.pulse-list-item a {
  display: block;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pulse-list-item a:hover .pulse-item-title {
  color: #8b6914;
}

.pulse-item-title {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: #2d2a26;
}

.pulse-item-desc {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #5a4f44;
  margin-top: 0.25rem;
}

.pulse-list-item .pulse-item-meta {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-style: italic;
  color: #8b7355;
  margin-top: 0.25rem;
}

/* Repo type styling */
.pulse-list-item.repo .pulse-item-title {
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: 0.85rem;
}

/* ============================================
   TODAY VIEW (Two-Column: Inbox Left, Calendar Right)
   ============================================ */

.pulse-today-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pulse-today-header {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.pulse-today-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.pulse-today-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.pulse-today-header h3 svg {
  color: #f4b400;
}

.pulse-today-date {
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  font-style: italic;
  color: #8b7355;
}

/* Account Filter Buttons */
.pulse-today-filters {
  display: flex;
  gap: 0.5rem;
}

.pulse-filter-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(139, 105, 20, 0.2);
  border-radius: 15px;
  background: rgba(139, 105, 20, 0.05);
  font-family: -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #8b7355;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: capitalize;
}

.pulse-filter-btn:hover {
  background: rgba(139, 105, 20, 0.1);
  border-color: rgba(139, 105, 20, 0.3);
}

.pulse-filter-btn.active {
  background: rgba(139, 105, 20, 0.15);
  border-color: #8b6914;
  color: #5a4f44;
}

/* Two-Column Grid Layout */
.pulse-today-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.pulse-today-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(139, 105, 20, 0.03);
  border-radius: 8px;
  padding: 1rem;
}

.pulse-today-column .pulse-items-list {
  flex: 1;
  overflow-y: auto;
}

.pulse-today-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #5a4f44;
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(139, 105, 20, 0.15);
  flex-shrink: 0;
}

.pulse-today-section-title svg {
  opacity: 0.7;
}

.pulse-today-count {
  font-family: -apple-system, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: #8b6914;
  background: rgba(139, 105, 20, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
}

/* Account Tabs for Inbox */
.pulse-inbox-account-tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: rgba(139, 105, 20, 0.06);
  border-radius: 4px;
  padding: 2px;
}

.pulse-inbox-account-tabs .account-tab {
  padding: 0.2rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: 3px;
  font-family: -apple-system, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  color: #8b7355;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pulse-inbox-account-tabs .account-tab:hover {
  background: rgba(139, 105, 20, 0.1);
  color: #5a4f44;
}

.pulse-inbox-account-tabs .account-tab.active {
  background: rgba(139, 105, 20, 0.2);
  color: #5a4f44;
}

.pulse-inbox-account-tabs .account-tab.personal.active {
  background: rgba(22, 163, 74, 0.2);
  color: #15803d;
}

.pulse-inbox-account-tabs .account-tab.work.active {
  background: rgba(37, 99, 235, 0.2);
  color: #1d4ed8;
}

.pulse-inbox-account-tabs .tab-count {
  font-size: 0.6rem;
  font-weight: 600;
  opacity: 0.7;
  margin-left: 2px;
}

/* Open in Gmail/Calendar link */
.pulse-open-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: #8b7355;
  text-decoration: none;
  transition: all 0.15s ease;
  margin-left: 0.5rem;
}

.pulse-open-link:hover {
  background: rgba(139, 105, 20, 0.1);
  color: #5a4f44;
}

/* Scroll containers for inbox and calendar */
.pulse-inbox-scroll,
.pulse-calendar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Section empty state */
.pulse-today-section-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: #a89a85;
  text-align: center;
  flex: 1;
}

.pulse-today-section-empty svg {
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.pulse-today-section-empty p {
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
}

/* Full empty state (no data at all) */
.pulse-today-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #8b7355;
  text-align: center;
  grid-column: 1 / -1;
}

.pulse-today-empty svg {
  color: #6b8e23;
  margin-bottom: 1rem;
}

.pulse-today-empty p {
  font-family: 'Georgia', serif;
  font-size: 1rem;
  margin: 0;
}

/* Today nav button styling */
.pulse-nav-today {
  background: rgba(244, 180, 0, 0.1) !important;
  border: 1px solid rgba(244, 180, 0, 0.2) !important;
}

.pulse-nav-today.active {
  background: rgba(244, 180, 0, 0.2) !important;
  border-color: rgba(244, 180, 0, 0.4) !important;
}

.pulse-nav-today svg {
  color: #f4b400;
}

/* Responsive: Stack columns on narrow screens */
@media (max-width: 700px) {
  .pulse-today-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   CALENDAR & EMAIL SECTIONS (Google Integration)
   ============================================ */

/* Header meta text */
.pulse-header-meta {
  font-family: 'Georgia', serif;
  font-size: 0.75rem;
  font-style: italic;
  color: #8b7355;
  margin-left: auto;
}

/* Calendar List */
.pulse-calendar-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pulse-calendar-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(139, 105, 20, 0.04);
  border-radius: 6px;
  border-left: 3px solid #8b6914;
}

.pulse-list-item.event.all-day .pulse-calendar-item {
  border-left-color: #6b8e23;
}

.pulse-calendar-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  text-align: center;
}

.pulse-calendar-date {
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5a4f44;
}

.pulse-calendar-date.today {
  color: #16a34a;
  font-weight: 700;
}

.pulse-calendar-date.tomorrow {
  color: #c2410c;
  font-weight: 600;
}

.pulse-list-item.event.is-today .pulse-calendar-item {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, 0.06);
}

.pulse-list-item.event.is-tomorrow .pulse-calendar-item {
  border-left-color: #c2410c;
  background: rgba(194, 65, 12, 0.04);
}

.pulse-calendar-hour {
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: 0.7rem;
  color: #8b7355;
  margin-top: 0.2rem;
}

.pulse-calendar-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pulse-calendar-details .pulse-item-title {
  font-size: 0.88rem;
  line-height: 1.4;
}

.pulse-calendar-details .pulse-item-desc {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
}

.pulse-calendar-details .pulse-item-desc svg {
  opacity: 0.6;
}

.pulse-video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: #4285f4;
  color: white !important;
  border-radius: 4px;
  font-size: 0.68rem;
  font-family: -apple-system, sans-serif;
  text-decoration: none;
  transition: background 0.15s ease;
}

.pulse-video-link:hover {
  background: #3367d6;
}

.pulse-account-badge {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  background: rgba(139, 105, 20, 0.12);
  border-radius: 3px;
  font-family: -apple-system, sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  color: #8b6914;
  text-transform: capitalize;
}

/* Inbox View Mode Toggle */
.pulse-inbox-view-toggle {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: rgba(139, 105, 20, 0.08);
  border-radius: 4px;
  padding: 2px;
}

.pulse-inbox-view-toggle .view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  border: none;
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  color: #8b7355;
  transition: all 0.15s ease;
}

.pulse-inbox-view-toggle .view-btn:hover {
  background: rgba(139, 105, 20, 0.1);
  color: #5a4f44;
}

.pulse-inbox-view-toggle .view-btn.active {
  background: rgba(139, 105, 20, 0.2);
  color: #5a4f44;
}

/* Quick Links to Gmail/Calendar */
.pulse-quick-links {
  display: flex;
  gap: 3px;
  margin-left: 0.5rem;
}

.pulse-quick-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pulse-quick-link.personal {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.pulse-quick-link.personal:hover {
  background: rgba(22, 163, 74, 0.25);
  color: #166534;
}

.pulse-quick-link.work {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.pulse-quick-link.work:hover {
  background: rgba(37, 99, 235, 0.25);
  color: #1e40af;
}

/* Email List */
.pulse-email-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pulse-email-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  background: rgba(139, 105, 20, 0.04);
  border-radius: 4px;
  transition: background 0.15s ease;
  cursor: pointer;
}

.pulse-email-item:hover {
  background: rgba(139, 105, 20, 0.08);
}

.pulse-list-item.email.important .pulse-email-item {
  border-left: 2px solid #f4b400;
  background: rgba(244, 180, 0, 0.06);
}

.pulse-email-from {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pulse-email-sender {
  font-family: 'Georgia', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5a4f44;
}

.pulse-important-star {
  color: #f4b400;
  fill: #f4b400;
  width: 10px;
  height: 10px;
}

.pulse-email-item .pulse-item-title {
  font-size: 0.8rem;
  line-height: 1.35;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pulse-email-item .pulse-item-desc {
  font-size: 0.7rem;
  color: #8b7355;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pulse-email-item .pulse-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

/* COMPACT VIEW - Maximum density */
.pulse-email-list.view-compact {
  gap: 1px;
}

.pulse-email-list.view-compact .pulse-email-item {
  padding: 0.3rem 0.5rem;
  gap: 0.1rem;
  flex-direction: row;
  align-items: center;
  border-radius: 2px;
}

.pulse-email-list.view-compact .pulse-email-from {
  min-width: 100px;
  max-width: 100px;
}

.pulse-email-list.view-compact .pulse-email-sender {
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pulse-email-list.view-compact .pulse-item-title {
  font-size: 0.72rem;
  flex: 1;
  margin: 0;
}

.pulse-email-list.view-compact .pulse-item-meta {
  margin: 0;
  margin-left: auto;
}

.pulse-email-list.view-compact .pulse-important-star {
  width: 8px;
  height: 8px;
}

/* COMFORTABLE VIEW - Balanced */
.pulse-email-list.view-comfortable {
  gap: 0.35rem;
}

.pulse-email-list.view-comfortable .pulse-email-item {
  padding: 0.5rem 0.65rem;
}

.pulse-email-list.view-comfortable .pulse-item-desc {
  -webkit-line-clamp: 1;
}

/* EXPANDED VIEW - Full details */
.pulse-email-list.view-expanded {
  gap: 0.5rem;
}

.pulse-email-list.view-expanded .pulse-email-item {
  padding: 0.75rem;
  gap: 0.25rem;
}

.pulse-email-list.view-expanded .pulse-email-sender {
  font-size: 0.78rem;
}

.pulse-email-list.view-expanded .pulse-item-title {
  font-size: 0.85rem;
  -webkit-line-clamp: 2;
}

.pulse-email-list.view-expanded .pulse-item-desc {
  font-size: 0.75rem;
  -webkit-line-clamp: 2;
}

/* Email/Calendar clickable links */
.pulse-email-link,
.pulse-calendar-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pulse-email-link:hover .pulse-email-item,
.pulse-calendar-link:hover .pulse-calendar-item {
  background: rgba(139, 105, 20, 0.1);
}

/* Account-specific colors */
.pulse-account-badge.account-work {
  background: rgba(37, 99, 235, 0.15);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.pulse-account-badge.account-personal {
  background: rgba(22, 163, 74, 0.15);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

/* Calendar item account colors */
.pulse-list-item.event.account-work .pulse-calendar-item {
  border-left-color: #2563eb;
}

.pulse-list-item.event.account-personal .pulse-calendar-item {
  border-left-color: #16a34a;
}

/* Keep today/tomorrow colors for their items */
.pulse-list-item.event.is-today .pulse-calendar-item {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, 0.06);
}

.pulse-list-item.event.is-tomorrow .pulse-calendar-item {
  border-left-color: #c2410c;
  background: rgba(194, 65, 12, 0.04);
}

/* Email item account colors (subtle left border) */
.pulse-list-item.email.account-work .pulse-email-item {
  border-left: 2px solid rgba(37, 99, 235, 0.4);
}

.pulse-list-item.email.account-personal .pulse-email-item {
  border-left: 2px solid rgba(22, 163, 74, 0.4);
}

/* Important overrides account color */
.pulse-list-item.email.important .pulse-email-item {
  border-left-color: #f4b400;
}

/* Email Action Buttons */
.pulse-list-item.email {
  position: relative;
}

.pulse-email-actions {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}

.pulse-list-item.email:hover .pulse-email-actions {
  opacity: 1;
}

.pulse-email-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
  color: #5a4f44;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.pulse-email-action-btn:hover {
  background: rgba(139, 105, 20, 0.15);
  color: #3d3428;
}

.pulse-email-action-btn.delete:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

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

.pulse-list-item.email.processing {
  opacity: 0.5;
  pointer-events: none;
}

.pulse-list-item.email.processing .pulse-email-actions {
  opacity: 1;
}

/* Make email link take full width minus action area */
.pulse-email-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-right: 60px;
}

.pulse-list-item.email:hover .pulse-email-link {
  padding-right: 60px;
}

/* Compact view adjustments */
.pulse-email-list.view-compact .pulse-email-actions {
  right: 0.25rem;
}

.pulse-email-list.view-compact .pulse-email-action-btn {
  width: 20px;
  height: 20px;
}

.pulse-email-list.view-compact .pulse-email-link {
  padding-right: 50px;
}

/* Responsive - collapse sidebar on small screens */
@media (max-width: 600px) {
  .pulse-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .pulse-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(139, 105, 20, 0.2);
    max-height: 200px;
  }

  .pulse-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
  }

  .pulse-nav-divider {
    display: none;
  }

  .pulse-nav-item {
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    background: rgba(139, 105, 20, 0.08);
  }

  .pulse-nav-count {
    display: none;
  }
}

/* ============================================
   X COMBINED VIEW - Newspaper-style editorial layout
   ============================================ */

.pulse-x-combined-view {
  height: 100%;
  overflow-y: auto;
  padding: 0.5rem;
}

.x-combined-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: auto 1fr;
  gap: 1.25rem;
  min-height: 100%;
}

/* Section headers - compact editorial style */
.x-section-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #3d2817;
}

.x-section-header h4 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  color: #3d2817;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.x-section-header svg {
  color: #3d2817;
  width: 14px;
  height: 14px;
}

/* X logo for timeline */
.x-section-header .x-logo {
  font-size: 0.9rem;
  font-weight: 800;
  color: #3d2817;
}

/* News columns - left side, 2 columns */
.x-news-columns {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  min-width: 0;
}

.x-news-column {
  min-width: 0;
}

/* For You header icon color */
.x-news-column .x-section-header svg[class*="sparkles"],
.x-news-column .x-section-header .lucide-sparkles {
  color: #f59e0b;
}

/* News list items - compact newspaper style */
.x-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.x-news-item {
  border-bottom: 1px solid rgba(139, 105, 20, 0.1);
}

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

.x-news-item a {
  display: block;
  padding: 0.6rem 0;
  text-decoration: none;
  transition: all 0.15s ease;
}

.x-news-item a:hover {
  background: rgba(139, 105, 20, 0.04);
  margin: 0 -0.5rem;
  padding: 0.6rem 0.5rem;
}

.x-news-title {
  display: block;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #3d2817;
  font-weight: 600;
  font-family: Georgia, 'Times New Roman', serif;
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.x-news-meta {
  display: block;
  font-size: 0.65rem;
  color: #8b6914;
  opacity: 0.7;
  margin-top: 0.2rem;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Trending column - right sidebar */
.x-trending-column {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
  background: rgba(139, 105, 20, 0.03);
  border-radius: 8px;
  padding: 0.75rem;
  border: 1px solid rgba(139, 105, 20, 0.08);
}

.x-trending-column .x-section-header {
  border-bottom-color: #e25c5c;
}

.x-trending-column .x-section-header svg {
  color: #e25c5c;
}

.x-trending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: trending;
}

.x-trending-item {
  border-bottom: 1px solid rgba(139, 105, 20, 0.08);
}

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

.x-trending-item a {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0;
  text-decoration: none;
  transition: background 0.15s ease;
  counter-increment: trending;
}

.x-trending-item a::before {
  content: counter(trending);
  font-size: 0.7rem;
  font-weight: 700;
  color: #e25c5c;
  min-width: 1.2rem;
  opacity: 0.7;
}

.x-trending-item a:hover {
  background: rgba(139, 105, 20, 0.05);
  margin: 0 -0.5rem;
  padding: 0.5rem;
}

.x-trending-title {
  display: block;
  font-size: 0.8rem;
  line-height: 1.3;
  color: #3d2817;
  font-weight: 600;
}

.x-trending-meta {
  display: block;
  font-size: 0.65rem;
  color: #8b6914;
  opacity: 0.6;
  margin-top: 0.1rem;
}

/* Timeline section - bottom, full width of left column */
.x-timeline-section {
  grid-column: 1;
  grid-row: 2;
  border-top: 1px solid rgba(139, 105, 20, 0.15);
  padding-top: 0.75rem;
}

.x-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

.x-timeline-item a {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  background: rgba(139, 105, 20, 0.02);
  border-left: 3px solid rgba(29, 155, 240, 0.4);
  transition: all 0.15s ease;
  height: 100%;
}

.x-timeline-item a:hover {
  background: rgba(139, 105, 20, 0.06);
  border-left-color: rgba(29, 155, 240, 0.8);
}

.x-timeline-content {
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #3d2817;
  margin-bottom: 0.4rem;
  flex: 1;
  /* Clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.x-timeline-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.x-timeline-author {
  font-size: 0.68rem;
  color: #1d9bf0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

.x-timeline-engagement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.x-engagement-stat {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.65rem;
  color: #8b6914;
  opacity: 0.7;
}

.x-engagement-stat svg {
  width: 11px;
  height: 11px;
  opacity: 0.8;
}

.x-engagement-stat .lucide-heart {
  color: #e25c5c;
}

.x-engagement-stat .lucide-repeat-2 {
  color: #22c55e;
}

/* Hide top row container since we use grid areas now */
.x-top-row {
  display: contents;
}

/* Responsive - stack on smaller screens */
@media (max-width: 900px) {
  .x-combined-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .x-news-columns {
    grid-column: 1;
    grid-row: 1;
  }

  .x-trending-column {
    grid-column: 1;
    grid-row: 2;
  }

  .x-timeline-section {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 600px) {
  .x-news-columns {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   LINKEDIN COMBINED VIEW - News + Trending row, Feed full width
   ============================================ */

.pulse-linkedin-combined-view {
  height: 100%;
  overflow-y: auto;
}

.linkedin-combined-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Top row: News + Trending */
.linkedin-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.linkedin-news-column,
.linkedin-trending-column {
  min-width: 0;
}

.linkedin-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(10, 102, 194, 0.15);
}

.linkedin-section-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d2817;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.linkedin-section-header svg {
  color: #0a66c2;
}

/* News list items */
.linkedin-news-list,
.linkedin-trending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.linkedin-news-item a,
.linkedin-trending-item a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  background: rgba(10, 102, 194, 0.03);
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}

.linkedin-news-item a:hover,
.linkedin-trending-item a:hover {
  background: rgba(10, 102, 194, 0.08);
  border-left-color: #0a66c2;
}

.linkedin-news-title,
.linkedin-trending-title {
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #3d2817;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.linkedin-news-meta,
.linkedin-trending-meta {
  display: block;
  font-size: 0.7rem;
  color: #0a66c2;
  opacity: 0.7;
  margin-top: 0.25rem;
}

/* Trending column */
.linkedin-trending-column .linkedin-section-header svg {
  color: #e25c5c;
}

/* Feed section - full width */
.linkedin-feed-section {
  border-top: 1px solid rgba(10, 102, 194, 0.12);
  padding-top: 1rem;
}

.linkedin-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 0.75rem;
}

.linkedin-feed-item a {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  background: rgba(10, 102, 194, 0.03);
  border: 1px solid rgba(10, 102, 194, 0.08);
  transition: all 0.15s ease;
  height: 100%;
}

.linkedin-feed-item a:hover {
  background: rgba(10, 102, 194, 0.08);
  border-color: rgba(10, 102, 194, 0.15);
}

.linkedin-feed-content {
  display: block;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #3d2817;
  margin-bottom: 0.5rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.linkedin-feed-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
}

.linkedin-feed-author {
  font-size: 0.72rem;
  color: #0a66c2;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  font-weight: 500;
}

.linkedin-feed-engagement {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.linkedin-engagement-stat {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  color: #0a66c2;
  opacity: 0.75;
}

.linkedin-engagement-stat svg {
  opacity: 0.7;
}

.linkedin-engagement-stat .lucide-thumbs-up {
  color: #0a66c2;
}

.linkedin-engagement-stat .lucide-message-circle {
  color: #057642;
}

/* Responsive - stack on smaller screens */
@media (max-width: 900px) {
  .linkedin-top-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .linkedin-feed-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   News Loading Bar - Sticky at bottom of panel
   ============================================ */
.news-loading-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(245, 240, 230, 0.98);
  border-top: 1px solid rgba(100, 80, 60, 0.15);
  padding: 10px 16px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.news-loading-bar .loading-indicator-content {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.news-loading-bar .loading-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(100, 80, 60, 0.1);
  border-radius: 6px;
  flex-shrink: 0;
}

.news-loading-bar .loading-icon-wrapper svg {
  color: #8b6914;
}

.news-loading-bar .generating-spinner {
  animation: newsLoadingSpin 1s linear infinite;
}

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

.news-loading-bar .loading-indicator-info {
  flex: 1;
  min-width: 0;
}

.news-loading-bar .loading-status {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #3d2817;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-loading-bar .loading-mini-progress {
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.news-loading-bar .loading-mini-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b6914, #c9a227);
  border-radius: 2px;
  transition: width 0.3s ease-out;
}

.news-loading-bar .loading-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.4);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.news-loading-bar .loading-cancel-btn:hover {
  background: rgba(200, 50, 50, 0.15);
  color: #c44;
}

.news-subtle-loading .loading-cancel-btn:hover {
  background: rgba(255, 100, 100, 0.3);
  color: #ff6b6b;
}

.news-subtle-loading.on-paper .loading-cancel-btn:hover {
  background: rgba(200, 50, 50, 0.15);
  color: #c44;
}

/* ============================================
   Collection Sidebar - Cleaner Navigation
   ============================================ */

.news-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: width 0.2s ease, transform 0.2s ease;
}

.news-sidebar.collapsed {
  width: 48px;
}

.sidebar-header {
  display: none;
}

.sidebar-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: var(--os-icon-bg);
  border: 1px solid var(--os-glass-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--os-text-secondary);
  z-index: 51;
  transition: all 0.15s ease;
}

.news-sidebar.collapsed .sidebar-toggle {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.sidebar-toggle:hover {
  background: var(--os-icon-bg-hover);
  color: var(--os-text-primary);
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 42px 8px 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--os-scrollbar-thumb) transparent;
}

.sidebar-content::-webkit-scrollbar {
  width: 4px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* Sidebar groups - visual separation without heavy dividers */
.sidebar-group {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-group:first-child {
  padding-top: 4px;
}

.sidebar-group:last-child {
  border-bottom: none;
}

.sidebar-group-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
  padding: 4px 12px 6px;
}

/* Main nav items */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
  font-family: 'Georgia', serif;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.sidebar-nav-item:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.04);
}

.sidebar-nav-item.active {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(201, 162, 39, 0.12);
}

.sidebar-nav-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.sidebar-nav-item.active svg {
  opacity: 0.9;
}

.sidebar-nav-item > span:first-of-type {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}

/* Sub-items (collections without icons) */
.sidebar-nav-item-sub {
  padding-left: 36px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.sidebar-nav-item-sub:hover {
  color: rgba(255, 255, 255, 0.85);
}

.sidebar-nav-item-sub.active {
  color: rgba(255, 255, 255, 0.95);
}

/* Expandable nav item (Stories with chevron) */
.sidebar-nav-expandable {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  width: 100%;
  position: relative;
}

.sidebar-nav-expandable > .sidebar-nav-item {
  flex: 1;
  width: auto;
  min-width: 0;
}

.sidebar-nav-expandable > .sidebar-expand-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s, color 0.15s, background 0.15s, opacity 0.15s;
  border-radius: 4px;
  opacity: 0.4;
}

.sidebar-nav-expandable > .sidebar-expand-btn:hover {
  opacity: 0.8;
}

.sidebar-nav-expandable > .sidebar-expand-btn.expanded {
  transform: translateY(-50%) rotate(90deg);
}

/* Story agent children */
.sidebar-nav-children {
  margin-left: 4px;
  border-left: 1px solid var(--os-divider);
  padding-left: 4px;
}

.sidebar-story-agent {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Count badges - subtle, right-aligned */
.sidebar-nav-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  min-width: 20px;
  text-align: right;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.sidebar-nav-item.active .sidebar-nav-count {
  color: rgba(255, 255, 255, 0.5);
}

/* New video badges */
.sidebar-new-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: #e74c3c;
  padding: 1px 5px;
  border-radius: 8px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.video-new-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  background: #e74c3c;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.video-live-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  background: #e74c3c;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
  letter-spacing: 0.06em;
  animation: live-pulse 2s ease-in-out infinite;
}

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

/* ── Live TV Section ───────────────────────────── */

.livetv-section {
  padding: 0 1rem;
}

.livetv-player {
  margin-bottom: 12px;
}

.livetv-player-wrap {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.livetv-categories {
  display: flex;
  gap: 2px;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.livetv-categories::-webkit-scrollbar { display: none; }

.livetv-cat-btn {
  background: none;
  border: none;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}

.livetv-cat-btn:hover {
  background: rgba(255,255,255,0.06);
}

body.light .livetv-cat-btn:hover {
  background: rgba(0,0,0,0.05);
}

.livetv-cat-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent) !important;
  font-weight: 600;
}

.livetv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 4px 0 1rem;
}

.livetv-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.livetv-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
}

body.light .livetv-card {
  border-color: rgba(0,0,0,0.08);
}

body.light .livetv-card:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
}

.livetv-card.active {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.livetv-card-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.livetv-card-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

.livetv-card-name {
  font-size: 0.72rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Newspaper theme overrides for Live TV */
.daily-digest-app .livetv-card {
  border-color: rgba(0,0,0,0.08);
}

.daily-digest-app .livetv-card:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
}

.daily-digest-app .livetv-card-name {
  color: rgba(0,0,0,0.85);
}

.daily-digest-app .livetv-cat-btn {
  color: rgba(0,0,0,0.5);
}

.daily-digest-app .livetv-cat-btn:hover {
  background: rgba(0,0,0,0.05);
}

.daily-digest-app .livetv-cat-btn.active {
  color: var(--accent) !important;
}

/* Seen videos — dimmed thumbnail */
.video-card-netflix.seen .video-thumbnail-netflix {
  opacity: 0.45;
}

.video-card-netflix.seen .video-thumbnail-netflix::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

.video-card-netflix.seen .video-title-netflix {
  opacity: 0.5;
}

/* Refresh button - appears on hover */
.sidebar-refresh-btn {
  display: none;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.sidebar-nav-item:hover .sidebar-refresh-btn {
  display: flex;
}

.sidebar-nav-item:hover .sidebar-nav-count {
  display: none;
}

.sidebar-refresh-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
}

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

.sidebar-refresh-btn .spinning {
  animation: spin 1s linear infinite;
}

/* Legacy classes kept for backwards compat */
.sidebar-section {
  margin-bottom: 8px;
}

.sidebar-section-title {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  padding: 6px 10px 2px;
  margin-top: 2px;
}

.sidebar-collections {
  max-height: none;
  overflow-y: visible;
}

.sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 10px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 1px 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-family: 'Georgia', serif;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: capitalize;
  position: relative;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.sidebar-item.active {
  background: rgba(201, 162, 39, 0.15);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

/* Green dots and sidebar spinners removed - main content area shows loading state */

.sidebar-item-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* sidebar-item-spinner removed - main content area shows loading state */

/* ========================================
   Nested Sidebar Items (Pulse navigation)
   ======================================== */

/* Pulse section header - simplified, no expand/collapse */
.sidebar-section-pulse {
  margin-bottom: 4px;
}

.sidebar-pulse-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 0.15s ease;
}

.sidebar-pulse-header:hover {
  color: rgba(255, 255, 255, 0.8);
}

.sidebar-pulse-header.active {
  color: rgba(255, 255, 255, 0.7);
}

.sidebar-pulse-icon {
  font-size: 0.9rem;
}

.sidebar-pulse-label {
  flex: 1;
}

/* Pulse items container - always visible */
.sidebar-pulse-items {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Legacy nested container - kept for backwards compat */
.sidebar-nested {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease-out;
  margin-left: 12px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-nested.expanded {
  grid-template-rows: 1fr;
}

.sidebar-nested-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-nested-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-family: 'Georgia', serif;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.sidebar-nested-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

.sidebar-nested-item.active {
  background: rgba(201, 162, 39, 0.12);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.sidebar-nested-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.sidebar-nested-item > span:not(.sidebar-nested-count):not(.sidebar-nested-badge) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-nested-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-nested-badge {
  font-size: 0.6rem;
  color: rgba(74, 222, 128, 0.9);
  margin-left: auto;
}

.sidebar-nested-divider {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  padding: 8px 8px 3px 8px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-nested-divider-linkedin {
  gap: 6px;
}

.sidebar-linkedin-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar-linkedin-time {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Georgia', serif;
  text-transform: none;
  letter-spacing: 0;
}

.sidebar-linkedin-refresh-btn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.sidebar-linkedin-refresh-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

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

.sidebar-linkedin-refresh-btn .spinning {
  animation: spin 1s linear infinite;
}

/* Refresh button in nested items - appears on hover, replaces count */
.sidebar-nested-item .sidebar-item-refresh-btn {
  display: none;
  width: 28px;
  height: 16px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(60, 42, 33, 0.6);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.sidebar-nested-item:hover .sidebar-item-refresh-btn {
  display: flex;
}

.sidebar-nested-item .sidebar-item-refresh-btn:hover {
  color: rgba(60, 42, 33, 0.9);
}

.sidebar-nested-item .sidebar-item-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar-nested-item .sidebar-item-refresh-btn .spinning {
  animation: spin 1s linear infinite;
}

/* Hide count when item has refresh button and is hovered */
.sidebar-nested-item-with-actions:hover .sidebar-nested-count {
  display: none;
}

.sidebar-item-time {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'Georgia', serif;
}

.sidebar-item-refresh-btn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.sidebar-item-refresh-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

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

.sidebar-item-refresh-btn .spinning {
  animation: spin 1s linear infinite;
}

/* Light theme adjustments for pulse header */
/* Newspaper mode sidebar - vintage beige theme */
.news-panel.newspaper .news-sidebar {
  background: rgba(245, 240, 230, 0.98);
  border-right-color: rgba(139, 105, 20, 0.15);
}

.news-panel.newspaper .sidebar-toggle {
  background: rgba(245, 240, 230, 0.95);
  border-color: rgba(139, 105, 20, 0.2);
  color: rgba(60, 42, 33, 0.6);
}

.news-panel.newspaper .sidebar-toggle:hover {
  background: rgba(235, 230, 220, 1);
  color: rgba(60, 42, 33, 0.9);
}

.news-panel.newspaper .sidebar-group {
  border-bottom-color: rgba(139, 105, 20, 0.12);
}

.news-panel.newspaper .sidebar-group-label {
  color: rgba(60, 42, 33, 0.4);
}

.news-panel.newspaper .sidebar-nav-item {
  color: rgba(60, 42, 33, 0.75);
}

.news-panel.newspaper .sidebar-nav-item svg {
  color: rgba(60, 42, 33, 0.6);
}

.news-panel.newspaper .sidebar-nav-item:hover {
  color: rgba(60, 42, 33, 1);
  background: rgba(139, 105, 20, 0.08);
}

.news-panel.newspaper .sidebar-nav-item.active {
  color: rgba(60, 42, 33, 1);
  background: rgba(139, 105, 20, 0.15);
}

.news-panel.newspaper .sidebar-nav-item.active svg {
  color: rgba(60, 42, 33, 0.9);
}

.news-panel.newspaper .sidebar-nav-item-sub {
  color: rgba(60, 42, 33, 0.6);
}

.news-panel.newspaper .sidebar-nav-item-sub:hover {
  color: rgba(60, 42, 33, 0.9);
}

.news-panel.newspaper .sidebar-nav-item-sub.active {
  color: rgba(60, 42, 33, 1);
}

.news-panel.newspaper .sidebar-expand-btn {
  color: rgba(60, 42, 33, 0.4);
}

.news-panel.newspaper .sidebar-expand-btn:hover {
  color: rgba(60, 42, 33, 0.7);
}

.news-panel.newspaper .sidebar-nav-children {
  border-left-color: rgba(60, 42, 33, 0.1);
}

.news-panel.newspaper .sidebar-nav-count {
  color: rgba(60, 42, 33, 0.4);
}

.news-panel.newspaper .sidebar-refresh-btn {
  color: rgba(60, 42, 33, 0.45);
}

.news-panel.newspaper .sidebar-refresh-btn:hover {
  color: rgba(60, 42, 33, 0.85);
  background: rgba(139, 105, 20, 0.12);
}

/* Light theme - new sidebar nav */
body.light .sidebar-group {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .sidebar-nav-item {
  color: rgba(0, 0, 0, 0.6);
}

body.light .sidebar-nav-item:hover {
  color: rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.04);
}

body.light .sidebar-nav-item.active {
  color: rgba(0, 0, 0, 0.95);
  background: rgba(201, 162, 39, 0.15);
}

body.light .sidebar-nav-item-sub {
  color: rgba(0, 0, 0, 0.5);
}

body.light .sidebar-nav-item-sub:hover {
  color: rgba(0, 0, 0, 0.8);
}

body.light .sidebar-nav-count {
  color: rgba(0, 0, 0, 0.35);
}

body.light .sidebar-refresh-btn {
  color: rgba(0, 0, 0, 0.4);
}

body.light .sidebar-refresh-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.08);
}

/* Light theme - legacy styles */
body.light .sidebar-pulse-header {
  color: rgba(0, 0, 0, 0.5);
}

body.light .sidebar-pulse-header:hover {
  color: rgba(0, 0, 0, 0.8);
}

body.light .sidebar-pulse-header.active {
  color: rgba(0, 0, 0, 0.7);
}

body.light .sidebar-pulse-items {
  border-left-color: rgba(0, 0, 0, 0.1);
}

/* Light theme adjustments for nested sidebar */
body.light .sidebar-nested {
  border-left-color: rgba(0, 0, 0, 0.1);
}

body.light .sidebar-nested-item {
  color: rgba(0, 0, 0, 0.55);
}

body.light .sidebar-nested-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.85);
}

body.light .sidebar-nested-item.active {
  background: rgba(201, 162, 39, 0.12);
  color: rgba(0, 0, 0, 0.95);
}

body.light .sidebar-nested-count {
  color: rgba(0, 0, 0, 0.4);
}

body.light .sidebar-nested-divider {
  color: rgba(0, 0, 0, 0.35);
}

body.light .sidebar-linkedin-time,
body.light .sidebar-item-time {
  color: rgba(0, 0, 0, 0.3);
}

body.light .sidebar-linkedin-refresh-btn,
body.light .sidebar-item-refresh-btn {
  color: rgba(0, 0, 0, 0.4);
}

body.light .sidebar-linkedin-refresh-btn:hover:not(:disabled),
body.light .sidebar-item-refresh-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}

/* Fullscreen mode pulse header */
/* Fullscreen mode - new sidebar nav */
.news-panel.fullscreen .sidebar-group {
  border-bottom-color: rgba(60, 42, 33, 0.15);
}

.news-panel.fullscreen .sidebar-nav-item {
  color: rgba(60, 42, 33, 0.75);
}

.news-panel.fullscreen .sidebar-nav-item svg {
  opacity: 0.7;
}

.news-panel.fullscreen .sidebar-nav-item:hover {
  color: rgba(60, 42, 33, 1);
  background: rgba(139, 90, 43, 0.1);
}

.news-panel.fullscreen .sidebar-nav-item.active {
  color: rgba(60, 42, 33, 1);
  background: rgba(139, 90, 43, 0.18);
}

.news-panel.fullscreen .sidebar-nav-item.active svg {
  opacity: 1;
}

.news-panel.fullscreen .sidebar-nav-item-sub {
  color: rgba(60, 42, 33, 0.65);
}

.news-panel.fullscreen .sidebar-nav-item-sub:hover {
  color: rgba(60, 42, 33, 0.95);
}

.news-panel.fullscreen .sidebar-nav-item-sub.active {
  color: rgba(60, 42, 33, 1);
}

.news-panel.fullscreen .sidebar-nav-count {
  color: rgba(60, 42, 33, 0.5);
}

.news-panel.fullscreen .sidebar-refresh-btn {
  color: rgba(60, 42, 33, 0.5);
}

.news-panel.fullscreen .sidebar-refresh-btn:hover {
  color: rgba(60, 42, 33, 0.9);
  background: rgba(139, 90, 43, 0.15);
}

/* Fullscreen mode - legacy styles */
.news-panel.fullscreen .sidebar-pulse-header {
  color: rgba(60, 42, 33, 0.5);
}

.news-panel.fullscreen .sidebar-pulse-header:hover {
  color: rgba(60, 42, 33, 0.8);
}

.news-panel.fullscreen .sidebar-pulse-header.active {
  color: rgba(60, 42, 33, 0.7);
}

.news-panel.fullscreen .sidebar-pulse-items {
  border-left-color: rgba(139, 90, 43, 0.15);
}

/* Fullscreen mode nested sidebar */
.news-panel.fullscreen .sidebar-nested {
  border-left-color: rgba(139, 90, 43, 0.15);
}

.news-panel.fullscreen .sidebar-nested-item {
  color: rgba(60, 42, 33, 0.6);
}

.news-panel.fullscreen .sidebar-nested-item:hover {
  background: rgba(139, 90, 43, 0.08);
  color: rgba(60, 42, 33, 0.9);
}

.news-panel.fullscreen .sidebar-nested-item.active {
  background: rgba(139, 90, 43, 0.12);
  color: rgba(60, 42, 33, 1);
}

.news-panel.fullscreen .sidebar-nested-count {
  color: rgba(60, 42, 33, 0.5);
}

.news-panel.fullscreen .sidebar-nested-divider {
  color: rgba(60, 42, 33, 0.4);
}

.news-panel.fullscreen .sidebar-linkedin-time,
.news-panel.fullscreen .sidebar-item-time {
  color: rgba(60, 42, 33, 0.35);
}

.news-panel.fullscreen .sidebar-linkedin-refresh-btn,
.news-panel.fullscreen .sidebar-item-refresh-btn {
  color: rgba(60, 42, 33, 0.45);
}

.news-panel.fullscreen .sidebar-linkedin-refresh-btn:hover:not(:disabled),
.news-panel.fullscreen .sidebar-item-refresh-btn:hover:not(:disabled) {
  background: rgba(139, 90, 43, 0.1);
  color: rgba(60, 42, 33, 0.75);
}

/* Collapsed sidebar icons */
.sidebar-collapsed-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
}

.sidebar-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.sidebar-icon-btn.active {
  background: rgba(201, 162, 39, 0.2);
  color: rgba(255, 255, 255, 0.95);
}

.sidebar-icon-divider {
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

/* ============================================
   Reading Toolbar - Progress & Font Controls
   ============================================ */

.reading-toolbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.reading-progress-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
}

.reading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.8), rgba(201, 162, 39, 1));
  transition: width 0.1s ease-out;
  border-radius: 0 2px 2px 0;
}

.reading-toolbar-controls {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  gap: 12px;
}

.reading-section-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reading-section-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: capitalize;
}

.reading-section-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

.reading-pulse-cache {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.reading-pulse-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.15s ease;
}

.reading-pulse-refresh:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.reading-pulse-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.reading-pulse-refresh .spinning {
  animation: spin 1s linear infinite;
}

.reading-toolbar-spacer {
  flex: 1;
}

.reading-font-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 2px;
}

.reading-font-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.reading-font-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.reading-font-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.reading-font-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 4px;
  min-width: 20px;
  text-align: center;
}

.reading-toc-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.reading-toc-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.reading-toc-btn.active {
  background: rgba(201, 162, 39, 0.2);
  color: rgba(201, 162, 39, 1);
}

.reading-progress-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  min-width: 32px;
  text-align: right;
}

/* Fullscreen/paper mode styles */
.news-panel.fullscreen .news-sidebar {
  background: rgba(245, 240, 230, 0.95);
  border-right-color: rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 250; /* Above masthead */
}

.news-panel.fullscreen .sidebar-toggle {
  background: rgba(245, 240, 230, 0.95);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}

.news-panel.fullscreen .sidebar-toggle:hover {
  background: rgba(235, 230, 220, 1);
  color: rgba(0, 0, 0, 0.9);
}

.news-panel.fullscreen .sidebar-section-title {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.fullscreen .sidebar-divider {
  background: rgba(0, 0, 0, 0.1);
}

.news-panel.fullscreen .sidebar-item {
  color: rgba(0, 0, 0, 0.6);
}

.news-panel.fullscreen .sidebar-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.9);
}

.news-panel.fullscreen .sidebar-item.active {
  background: rgba(139, 90, 43, 0.12);
  color: rgba(0, 0, 0, 0.95);
}

.news-panel.fullscreen .sidebar-icon-btn {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.fullscreen .sidebar-icon-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

.news-panel.fullscreen .sidebar-icon-btn.active {
  background: rgba(139, 90, 43, 0.15);
  color: rgba(0, 0, 0, 0.95);
}

.news-panel.fullscreen .sidebar-icon-divider {
  background: rgba(0, 0, 0, 0.1);
}

/* Fullscreen nested sidebar items - dark text on beige */
.news-panel.fullscreen .sidebar-nested {
  border-left-color: rgba(139, 90, 43, 0.2);
}

.news-panel.fullscreen .sidebar-nested-item {
  color: rgba(60, 42, 33, 0.7);
}

.news-panel.fullscreen .sidebar-nested-item:hover {
  background: rgba(139, 90, 43, 0.08);
  color: rgba(60, 42, 33, 0.95);
}

.news-panel.fullscreen .sidebar-nested-item.active {
  background: rgba(139, 90, 43, 0.15);
  color: rgba(60, 42, 33, 1);
  font-weight: 600;
}

.news-panel.fullscreen .sidebar-nested-count {
  color: rgba(60, 42, 33, 0.5);
  background: rgba(139, 90, 43, 0.1);
}

.news-panel.fullscreen .sidebar-nested-badge {
  color: rgba(34, 139, 34, 0.9);
}

.news-panel.fullscreen .sidebar-nested-divider {
  color: rgba(60, 42, 33, 0.5);
}

.news-panel.fullscreen .sidebar-linkedin-time,
.news-panel.fullscreen .sidebar-item-time {
  color: rgba(60, 42, 33, 0.4);
}

.news-panel.fullscreen .sidebar-linkedin-refresh-btn,
.news-panel.fullscreen .sidebar-item-refresh-btn {
  color: rgba(60, 42, 33, 0.5);
}

.news-panel.fullscreen .sidebar-linkedin-refresh-btn:hover:not(:disabled),
.news-panel.fullscreen .sidebar-item-refresh-btn:hover:not(:disabled) {
  background: rgba(139, 90, 43, 0.12);
  color: rgba(60, 42, 33, 0.8);
}

.news-panel.fullscreen .sidebar-divider {
  background: rgba(139, 90, 43, 0.15);
}

.news-panel.fullscreen .reading-toolbar {
  background: rgba(245, 240, 230, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.news-panel.fullscreen .reading-progress-track {
  background: rgba(0, 0, 0, 0.08);
}

.news-panel.fullscreen .reading-progress-bar {
  background: linear-gradient(90deg, rgba(139, 90, 43, 0.7), rgba(139, 90, 43, 1));
}

.news-panel.fullscreen .reading-section-name {
  color: rgba(0, 0, 0, 0.8);
}

.news-panel.fullscreen .reading-section-count {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.fullscreen .reading-pulse-cache {
  color: rgba(0, 0, 0, 0.4);
  border-left-color: rgba(0, 0, 0, 0.15);
}

.news-panel.fullscreen .reading-pulse-refresh {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.fullscreen .reading-pulse-refresh:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}

.news-panel.fullscreen .reading-font-controls {
  background: rgba(0, 0, 0, 0.05);
}

.news-panel.fullscreen .reading-font-btn {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.fullscreen .reading-font-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

.news-panel.fullscreen .reading-font-label {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.fullscreen .reading-toc-btn {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.fullscreen .reading-toc-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

.news-panel.fullscreen .reading-toc-btn.active {
  background: rgba(139, 90, 43, 0.15);
  color: rgba(139, 90, 43, 1);
}

.news-panel.fullscreen .reading-progress-text {
  color: rgba(0, 0, 0, 0.4);
}

/* Layout adjustment when sidebar is present */
.news-panel.has-sidebar .newspaper-body {
  margin-left: 280px;
  transition: margin-left 0.2s ease;
}

.news-panel.has-sidebar.sidebar-collapsed .newspaper-body {
  margin-left: 48px;
}

/* Masthead also needs padding adjustment for sidebar (non-fullscreen windows) */
.news-panel.has-sidebar:not(.fullscreen) .newspaper-masthead,
.news-panel.has-sidebar:not(.fullscreen) .newspaper-masthead.nyt-style {
  padding-left: 300px !important;
  transition: padding-left 0.2s ease;
}

.news-panel.has-sidebar.sidebar-collapsed:not(.fullscreen) .newspaper-masthead,
.news-panel.has-sidebar.sidebar-collapsed:not(.fullscreen) .newspaper-masthead.nyt-style {
  padding-left: 60px !important;
}

/* Hide old collection tabs when sidebar is enabled */
.news-panel.has-sidebar .newspaper-sections {
  display: none;
}

/* =====================================================
   FOR YOU - Personalized Morning Briefing
   ===================================================== */

/* Featured sidebar item for For You */
.sidebar-nav-featured {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  margin-bottom: 4px;
}

.sidebar-nav-featured:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.2));
  border-color: rgba(var(--accent-rgb), 0.5);
}

.sidebar-nav-featured.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.3));
  border-color: rgba(var(--accent-rgb), 0.6);
}

.sidebar-nav-featured svg {
  color: var(--accent);
}

.sidebar-nav-featured.loading {
  opacity: 0.7;
}

.sidebar-nav-loading {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  animation: pulse 1.5s infinite;
}

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

/* For You Layout - Full morning briefing */
.for-you-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem;
}

/* Today Section - Calendar & Email */
.for-you-today {
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.1));
  padding-bottom: 1.5rem;
}

.for-you-today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.for-you-today-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--news-heading, #1a1a1a);
  margin: 0;
}

.for-you-date {
  font-size: 0.875rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.5));
}

.for-you-today-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 800px) {
  .for-you-today-grid {
    grid-template-columns: 1fr;
  }
}

/* Calendar Events */
.for-you-calendar,
.for-you-emails {
  min-width: 0;
}

.for-you-calendar h4,
.for-you-emails h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--news-muted, rgba(0, 0, 0, 0.5));
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.08));
}

.for-you-events {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.for-you-event {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.05));
}

.for-you-event:last-child {
  border-bottom: none;
}

.event-time {
  flex-shrink: 0;
  width: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--news-accent, #5c4033);
}

.event-title {
  flex: 1;
  font-size: 0.875rem;
  color: var(--news-text, #1a1a1a);
  line-height: 1.4;
}

.event-video {
  flex-shrink: 0;
  color: var(--news-accent, #5c4033);
  margin-left: 0.25rem;
}

/* For You - Pulse Section (Schedule & Inbox) */
.for-you-pulse {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.1));
}

.for-you-pulse .pulse-section {
  flex: 1;
  min-width: 0;
  background: var(--news-hover, rgba(0, 0, 0, 0.02));
  border-radius: 8px;
  padding: 1rem;
}

.for-you-pulse .pulse-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--news-text, #1a1a1a);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.08));
}

.for-you-pulse .calendar-events {
  display: flex;
  flex-direction: column;
}

.for-you-pulse .email-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.for-you-pulse .email-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.for-you-pulse .email-item:hover {
  background: var(--news-hover, rgba(0, 0, 0, 0.03));
}

.for-you-pulse .email-item.unread {
  background: var(--news-hover, rgba(0, 0, 0, 0.02));
}

.for-you-pulse .email-sender {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--news-text, #1a1a1a);
}

.for-you-pulse .email-subject {
  font-size: 0.8rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Calendar Day Labels */
.event-day-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--news-accent, #5c4033);
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.08));
}

.event-day-label:first-child {
  margin-top: 0;
}

.event-day-label.tomorrow,
.event-day-label.upcoming {
  color: var(--news-muted, rgba(0, 0, 0, 0.5));
}

/* Event Item in Grouped View */
.calendar-events .event-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

.calendar-events .event-time {
  flex-shrink: 0;
  min-width: 75px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--news-accent, #5c4033);
}

.calendar-events .event-title {
  flex: 1;
  font-size: 0.8rem;
  color: var(--news-text, #1a1a1a);
  line-height: 1.3;
}

/* Email List */
.for-you-email-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.for-you-email {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.for-you-email:hover {
  background: var(--news-hover, rgba(0, 0, 0, 0.03));
}

.for-you-email.unread {
  background: var(--news-hover, rgba(0, 0, 0, 0.02));
}

.email-from {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--news-text, #1a1a1a);
}

.email-subject {
  font-size: 0.8rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Important/Priority Email */
.email-item.important {
  background: var(--news-hover, rgba(0, 0, 0, 0.02));
  border-left: 2px solid var(--news-accent, #5c4033);
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}

.email-item.important .email-sender::before {
  content: '★ ';
  color: var(--news-accent, #5c4033);
}

/* News Briefing Section */
.for-you-news {
  flex: 1;
}

.for-you-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--news-accent, #5c4033);
}

.for-you-news-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--news-accent, #5c4033);
  margin: 0;
}

.for-you-news-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.for-you-news-actions .for-you-timestamp {
  font-size: 0.75rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.4));
  margin-right: 0.25rem;
}

.for-you-news-actions .for-you-timestamp.stale {
  color: var(--news-warning, #b45309);
  font-style: italic;
}

.for-you-news-actions .action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--news-hover, rgba(92, 64, 51, 0.1));
  border: 1px solid var(--news-border, rgba(92, 64, 51, 0.25));
  border-radius: 6px;
  color: var(--news-accent, #5c4033);
  cursor: pointer;
  transition: all 0.15s ease;
}

.for-you-news-actions .action-btn:hover {
  background: var(--news-accent, #5c4033);
  color: white;
  border-color: var(--news-accent, #5c4033);
}

.for-you-news-actions .action-btn.active {
  background: var(--news-accent, #5c4033);
  color: white;
  border-color: var(--news-accent, #5c4033);
}

.for-you-news-actions .action-btn.spinning svg {
  animation: spin 1s linear infinite;
}

.for-you-news-actions .action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.for-you-news-body {
  min-height: 200px;
}

/* For You briefing text */
.for-you-text {
  line-height: 1.7;
  color: var(--news-text, #1a1a1a);
}

.for-you-text h1,
.for-you-text h2 {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  color: var(--news-heading, #1a1a1a);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.for-you-text h1:first-child,
.for-you-text h2:first-child {
  margin-top: 0;
}

.for-you-text h2 {
  font-size: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--news-border, rgba(0, 0, 0, 0.1));
}

/* Empty state */
.for-you-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  gap: 0.5rem;
}

.for-you-empty p {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.1rem;
  color: var(--news-text, #1a1a1a);
  margin: 0;
}

.for-you-empty span {
  font-size: 0.875rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.4));
}

.generate-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--news-accent, #5c4033);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.generate-btn:hover {
  background: var(--news-accent-hover, #4a3328);
  transform: translateY(-1px);
}

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

/* Footer */
.for-you-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--news-border, rgba(0, 0, 0, 0.08));
  font-size: 0.75rem;
  color: var(--news-muted, rgba(0, 0, 0, 0.4));
  text-align: center;
}

/* Debug Panel - Dark glassmorphism style */
.for-you-debug {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.for-you-debug .debug-section {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.for-you-debug .debug-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.for-you-debug h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.for-you-debug h4 svg {
  opacity: 0.6;
}

.for-you-debug .debug-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.for-you-debug .debug-stats span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.for-you-debug .debug-context {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.for-you-debug details {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.for-you-debug details[open] {
  background: rgba(255, 255, 255, 0.03);
}

.for-you-debug summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  padding: 0.6rem 0.75rem;
  transition: background 0.15s ease;
}

.for-you-debug summary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.95);
}

.for-you-debug summary::marker {
  color: rgba(255, 255, 255, 0.4);
}

.for-you-debug pre {
  margin: 0;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.7rem;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.for-you-debug pre::-webkit-scrollbar {
  width: 6px;
}

.for-you-debug pre::-webkit-scrollbar-track {
  background: transparent;
}

.for-you-debug pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.for-you-debug .debug-prompt {
  max-height: 400px;
}

/* Category stats in Brave section */
.for-you-debug .debug-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.for-you-news-actions .action-btn.active {
  background: var(--news-accent, #8b6914);
  color: white;
}

/* Dark mode / newspaper theme adjustments */
.news-panel.newspaper .for-you-layout {
  --news-text: #1a1a1a;
  --news-heading: #1a1a1a;
  --news-muted: rgba(0, 0, 0, 0.5);
  --news-border: rgba(0, 0, 0, 0.1);
  --news-hover: rgba(0, 0, 0, 0.03);
  --news-accent: #5c4033;
  --news-accent-hover: #4a3328;
}

/* Fullscreen dark mode */
.news-panel.fullscreen .for-you-layout {
  --news-text: rgba(255, 255, 255, 0.9);
  --news-heading: rgba(255, 255, 255, 0.95);
  --news-muted: rgba(255, 255, 255, 0.5);
  --news-border: rgba(255, 255, 255, 0.1);
  --news-hover: rgba(255, 255, 255, 0.05);
  --news-accent: #c9a227;
  --news-accent-hover: #b8922a;
}

.news-panel.fullscreen .generate-btn {
  background: #c9a227;
}

.news-panel.fullscreen .generate-btn:hover {
  background: #b8922a;
}

/* @keyframes spin is already defined elsewhere */

/* ============================================
   Search Section Styles
   ============================================ */

.search-section .section-header span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-body {
  padding: 1rem;
}

.search-input-container {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.search-input:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

body.light .search-input {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
}

body.light .search-input:focus {
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.05);
}

body.light .search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.search-btn {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.3);
  border-color: rgba(56, 189, 248, 0.3);
}

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

.search-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.6);
}

body.light .search-loading {
  color: rgba(0, 0, 0, 0.6);
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.5rem;
}

.search-result-item {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.1s;
  border-radius: 4px;
}

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

.search-result-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

body.light .search-result-item {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .search-result-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

.search-result-title {
  display: inline;
  font-size: 0.82rem;
  font-weight: 500;
  color: #38bdf8;
  text-decoration: none;
  line-height: 1.3;
}

.search-result-title:hover {
  text-decoration: underline;
}

.search-result-snippet {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0.1rem 0 0 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.light .search-result-snippet {
  color: rgba(0, 0, 0, 0.45);
}

.search-result-url {
  display: none;
}

body.light .search-result-url {
  color: rgba(0, 0, 0, 0.3);
}

.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

body.light .search-empty {
  color: rgba(0, 0, 0, 0.4);
}

/* Search Agents Grid */
.search-agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.search-agent-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
}

.search-agent-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.search-agent-section-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.search-agent-section-emoji {
  font-size: 0.9rem;
}

.search-agent-section-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.search-agent-section-count {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 8px;
  margin-left: 0.25rem;
}

.search-agent-edit-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}

.search-agent-edit-btn:hover {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.search-agent-section-items {
  display: flex;
  flex-direction: column;
}

.search-compact-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.1s;
}

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

.search-compact-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.search-compact-title {
  font-size: 0.78rem;
  color: #7dd3fc;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search-compact-age {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Agent empty/loading states */
.search-agent-empty {
  padding: 0.5rem 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3);
}

.search-agent-loading {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.3rem 0;
}

.search-agent-loading .skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  animation: shimmer 1.5s infinite;
}

.search-agent-loading .skeleton-line.long { width: 90%; }
.search-agent-loading .skeleton-line.medium { width: 65%; }
.search-agent-loading .skeleton-line.short { width: 40%; }

@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

body.light .search-agent-empty {
  color: rgba(0, 0, 0, 0.35);
}

body.light .search-agent-loading .skeleton-line {
  background: rgba(0, 0, 0, 0.06);
}

.news-panel.newspaper .search-agent-empty {
  color: rgba(0, 0, 0, 0.35);
}

.news-panel.newspaper .search-agent-loading .skeleton-line {
  background: rgba(0, 0, 0, 0.05);
}

/* Add agent card */
.search-agent-add-section {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 80px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.78rem;
  font-family: inherit;
  transition: all 0.15s;
}

.search-agent-add-section:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.02);
}

/* Light theme */
body.light .search-agent-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .search-agent-section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .search-agent-section-name {
  color: rgba(0, 0, 0, 0.85);
}

body.light .search-agent-section-count {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.05);
}

body.light .search-agent-edit-btn {
  color: rgba(0, 0, 0, 0.25);
}

body.light .search-agent-edit-btn:hover {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.06);
}

body.light .search-compact-item {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

body.light .search-compact-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .search-compact-title {
  color: #0284c7;
}

body.light .search-compact-age {
  color: rgba(0, 0, 0, 0.35);
}

body.light .search-agent-add-section {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.3);
}

body.light .search-agent-add-section:hover {
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.02);
}

/* Newspaper theme */
.news-panel.newspaper .search-agent-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.news-panel.newspaper .search-agent-section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.news-panel.newspaper .search-agent-section-name {
  color: #1a1a1a;
}

.news-panel.newspaper .search-agent-section-count {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.04);
}

.news-panel.newspaper .search-agent-edit-btn {
  color: rgba(0, 0, 0, 0.25);
}

.news-panel.newspaper .search-agent-edit-btn:hover {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.05);
}

.news-panel.newspaper .search-compact-item {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

.news-panel.newspaper .search-compact-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

.news-panel.newspaper .search-compact-title {
  color: #0c4a6e;
}

.news-panel.newspaper .search-compact-age {
  color: rgba(0, 0, 0, 0.35);
}

.news-panel.newspaper .search-agent-add-section {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.3);
}

.news-panel.newspaper .search-agent-add-section:hover {
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.5);
}

/* Legacy curated search results — keep for search-result-age */
.search-result-age {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 0.5rem;
}

body.light .search-result-age {
  color: rgba(0, 0, 0, 0.35);
}

/* Search Agents */
.search-agents-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.search-agent-pill {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.search-agent-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.search-agent-pill.add {
  border-style: dashed;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.35rem 0.6rem;
}

.search-agent-pill.add:hover {
  color: rgba(255, 255, 255, 0.7);
}

.search-agent-pill-emoji {
  font-size: 0.85rem;
}

.search-agent-pill-name {
  font-weight: 500;
}

body.light .search-agent-pill {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}

body.light .search-agent-pill:hover {
  background: rgba(0, 0, 0, 0.08);
}

.news-panel.newspaper .search-agent-pill {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
  color: #333;
}

.news-panel.newspaper .search-agent-pill:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Agent editor */
.search-agent-editor {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.search-agent-editor h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.search-agent-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.search-agent-form-row {
  display: flex;
  gap: 0.5rem;
}

.search-agent-input,
.search-agent-textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-family: inherit;
}

.search-agent-input:focus,
.search-agent-textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.search-agent-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.search-agent-form-actions {
  display: flex;
  gap: 0.5rem;
}

.search-agent-btn {
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.search-agent-btn.save {
  background: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-light);
}

.search-agent-btn.save:hover {
  background: rgba(var(--accent-rgb), 0.5);
}

.search-agent-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

.search-agent-btn.delete {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  margin-left: auto;
}

.search-agent-btn.delete:hover {
  background: rgba(239, 68, 68, 0.4);
}

body.light .search-agent-editor {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .search-agent-editor h4 {
  color: rgba(0, 0, 0, 0.8);
}

body.light .search-agent-input,
body.light .search-agent-textarea {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.9);
}

.news-panel.newspaper .search-agent-editor {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}

.news-panel.newspaper .search-agent-editor h4 {
  color: #333;
}

.news-panel.newspaper .search-agent-input,
.news-panel.newspaper .search-agent-textarea {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #333;
}

/* ============================================
   Events Section Styles
   ============================================ */

.events-section .section-header span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.events-body {
  padding: 1rem;
}

.events-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.6);
}

body.light .events-loading {
  color: rgba(0, 0, 0, 0.6);
}

.events-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.events-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.events-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.light .events-group-title {
  color: rgba(0, 0, 0, 0.8);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.events-date-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.5rem;
}

.events-date-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.25rem;
}

body.light .events-date-label {
  color: rgba(0, 0, 0, 0.5);
}

.event-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background 0.2s;
}

.event-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.light .event-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.event-time {
  font-size: 0.8rem;
  font-weight: 500;
  color: #f97316;
  min-width: 60px;
  flex-shrink: 0;
}

.event-title {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}

body.light .event-title {
  color: rgba(0, 0, 0, 0.9);
}

.task-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background 0.2s;
}

.task-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.light .task-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.task-item svg {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.task-item svg.task-done {
  color: #4ade80;
}

body.light .task-item svg {
  color: rgba(0, 0, 0, 0.4);
}

.task-title {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}

.task-title.completed {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.4);
}

body.light .task-title {
  color: rgba(0, 0, 0, 0.9);
}

body.light .task-title.completed {
  color: rgba(0, 0, 0, 0.4);
}

.events-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

body.light .events-empty {
  color: rgba(0, 0, 0, 0.4);
}

/* Newspaper theme styles for Search and Events */
.news-panel.newspaper .search-section,
.news-panel.newspaper .events-section {
  background: rgba(255, 251, 240, 0.98);
}

.news-panel.newspaper .search-section .section-header,
.news-panel.newspaper .events-section .section-header {
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.news-panel.newspaper .search-input {
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.8);
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a;
  caret-color: #1a1a1a;
  outline: none;
}

.news-panel.newspaper .search-input:focus {
  border-color: rgba(0, 0, 0, 0.35) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  outline: none !important;
  box-shadow: none !important;
}

.news-panel.newspaper .search-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.news-panel.newspaper .search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .search-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.newspaper .search-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
}

.news-panel.newspaper .search-result-item {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.news-panel.newspaper .search-result-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

.news-panel.newspaper .search-result-title {
  color: #0c4a6e;
}

.news-panel.newspaper .search-result-snippet {
  color: rgba(0, 0, 0, 0.55);
}

.news-panel.newspaper .search-result-url {
  color: rgba(0, 0, 0, 0.35);
}

.news-panel.newspaper .events-group-title {
  color: #1a1a1a;
  border-bottom-color: rgba(0, 0, 0, 0.15);
}

.news-panel.newspaper .events-date-label {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.newspaper .event-title,
.news-panel.newspaper .task-title {
  color: #1a1a1a;
}

.news-panel.newspaper .task-title.completed {
  color: rgba(0, 0, 0, 0.4);
}

/* Fullscreen mode styles */
.news-panel.fullscreen .search-section,
.news-panel.fullscreen .events-section {
  background: transparent;
}

.news-panel.fullscreen .search-section .section-header span:first-child,
.news-panel.fullscreen .events-section .section-header span:first-child {
  font-size: 1.2rem;
}

/* ============================================
   STORY THREADS
   ============================================ */

.stories-section-noheader {
  padding-top: 0.5rem;
}

.stories-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 8px;
}

.stories-action-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.stories-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.stories-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stories-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.stories-body {
  padding: 0.75rem 1rem;
}

/* Three-column layout: agents sidebar (left) + feed (center) + discover sidebar (right) */
.stories-three-col {
  display: flex;
  gap: 0;
  align-items: flex-start;
  height: 100%;
}

/* Left agents sidebar */
.stories-agents-sidebar {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 8px 8px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: visible;
  max-height: 100%;
}

.agents-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}

.agents-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.agents-sidebar-add {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}

.agents-sidebar-add:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.agents-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
  width: 100%;
  text-align: left;
}

.agents-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.agents-sidebar-item.active {
  background: rgba(var(--accent-rgb), 0.12);
}

.agents-sidebar-item.active .agents-sidebar-name {
  color: var(--accent);
  font-weight: 600;
}

.agents-sidebar-item.active .agent-status-ring {
  border-color: var(--accent) !important;
}

.agents-sidebar-all {
  margin-bottom: 4px;
  opacity: 0.7;
}

.agents-sidebar-all:hover {
  opacity: 1;
}

.agents-sidebar-name {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.agents-sidebar-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.agents-sidebar-item-wrapper {
  position: relative;
}

.agents-sidebar-item.archived {
  opacity: 0.45;
}


/* Agent context menu */
.agents-sidebar-menu {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 4px;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  min-width: 120px;
}

.agents-sidebar-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}

.agents-sidebar-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}

.agents-menu-danger:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

.agents-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 2px 0;
}

.agents-menu-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px 2px;
}

.agents-menu-frequency {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 2px 6px 4px;
}

.agents-freq-option {
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  gap: 0 !important;
}

.agents-freq-option:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.agents-freq-option.active {
  color: var(--accent, #a78bfa) !important;
  background: rgba(var(--accent-rgb, 167, 139, 250), 0.12) !important;
  border-color: rgba(var(--accent-rgb, 167, 139, 250), 0.25) !important;
}

/* Feed scanning bar */
.feed-scanning-bar {
  position: relative;
  height: 28px;
  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feed-scanning-bar-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.15), transparent);
  animation: feed-scan-slide 1.5s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes feed-scan-slide {
  0% { left: -30%; }
  100% { left: 100%; }
}

.feed-scanning-bar-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: rgba(var(--accent-rgb), 0.8);
  z-index: 1;
}

/* Create agent dialog */
.create-agent-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(4px);
}

.create-agent-dialog {
  background: rgba(28, 28, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 20px 24px;
  width: 420px;
  max-width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.create-agent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

.create-agent-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 14px;
  line-height: 1.4;
}

.create-agent-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
}

.create-agent-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.create-agent-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.create-agent-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.create-agent-cancel {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  cursor: pointer;
}

.create-agent-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.create-agent-submit {
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.create-agent-submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
}

.create-agent-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.agents-sidebar-archived-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  margin-top: 4px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.agents-sidebar-archived-toggle:hover {
  color: rgba(255, 255, 255, 0.7);
}

.agents-sidebar-archived-count {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0.6;
}

.agents-sidebar-item.archived {
  opacity: 0.5;
}

.agents-sidebar-item.archived:hover {
  opacity: 0.75;
}

.stories-col-feed {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
}

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
  .stories-three-col {
    flex-direction: column;
  }
  .stories-agents-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    max-height: none;
    padding: 8px 0;
  }
}

/* Story list */
.stories-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.story-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  color: inherit;
  width: 100%;
  font: inherit;
}

.story-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.story-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.story-card-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.95);
}

.story-status-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
}

.story-status-badge.small {
  font-size: 0.6rem;
  padding: 1px 5px;
}

.story-card-meta {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  padding-left: 16px;
}

/* Agent avatars */
.agent-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
}

/* Agents bar — like Instagram stories / Twitter avatar row */
.stories-agents-bar {
  display: flex;
  gap: 12px;
  padding: 8px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.stories-agents-bar::-webkit-scrollbar {
  display: none;
}

.agent-follow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  min-width: 56px;
  color: inherit;
  font: inherit;
}

.agent-follow-item:hover .agent-name {
  color: rgba(255, 255, 255, 0.9);
}

.agent-follow-item.active {
  opacity: 1;
}

.agent-follow-item.active .agent-avatar-wrapper {
  transform: scale(1.1);
}

.agent-follow-item.active .agent-status-ring {
  border-width: 3px;
  border-color: var(--accent) !important;
}

.agent-follow-item.active .agent-name {
  color: var(--accent);
  font-weight: 600;
}

.agent-clear-filter {
  opacity: 0.5;
}

.agent-clear-filter:hover {
  opacity: 0.8;
}

.agent-avatar-wrapper {
  position: relative;
}

.agent-avatar-wrapper.scanning .agent-avatar {
  animation: agent-pulse 1.5s ease-in-out infinite;
}

.agent-avatar-wrapper.scanning .agent-status-ring {
  border-color: var(--accent) !important;
  animation: agent-ring-spin 1.2s linear infinite;
  border-top-color: transparent !important;
}

@keyframes agent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes agent-ring-spin {
  to { transform: rotate(360deg); }
}

.agent-status-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid;
}

.agent-name {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}

/* Story detail — fill parent chain so header can pin */
.newspaper-body:has(.stories-detail-view) {
  overflow: hidden !important;
}

.newspaper-flow:has(.stories-detail-view) {
  flex: 1;
  min-height: 0;
}

.content-grid:has(.stories-detail-view) {
  flex: 1;
  min-height: 0;
}

.stories-detail-view {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  flex-shrink: 1 !important;
  min-height: 0 !important;
}

.stories-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stories-back-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.stories-back-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}

.stories-detail-title {
  flex: 1;
  font-weight: 600;
}

.stories-detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Analyze dialog */
.analyze-dialog { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(var(--accent-rgb), 0.04); flex-shrink: 0; }
.analyze-dialog-header { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: rgba(var(--accent-rgb), 0.8); margin-bottom: 8px; }
.analyze-dialog-close { margin-left: auto; background: none; border: none; color: rgba(255, 255, 255, 0.4); cursor: pointer; padding: 2px; border-radius: 4px; display: flex; }
.analyze-dialog-close:hover { color: rgba(255, 255, 255, 0.7); }
.analyze-dialog-input { width: 100%; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: rgba(255, 255, 255, 0.85); padding: 8px 10px; font-size: 0.8rem; font-family: inherit; resize: none; outline: none; box-sizing: border-box; }
.analyze-dialog-input:focus { border-color: rgba(var(--accent-rgb), 0.3); }
.analyze-dialog-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.analyze-dialog-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.analyze-dialog-cancel { background: none; border: none; color: rgba(255, 255, 255, 0.4); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 0.75rem; }
.analyze-dialog-cancel:hover { color: rgba(255, 255, 255, 0.6); }
.analyze-dialog-submit { background: rgba(var(--accent-rgb), 0.15); border: 1px solid rgba(var(--accent-rgb), 0.3); color: rgba(var(--accent-rgb), 0.9); padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.analyze-dialog-submit:hover { background: rgba(var(--accent-rgb), 0.25); }

.scan-result-toast {
  padding: 6px 14px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  flex-shrink: 0;
}

.feed-scan-toast {
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
  background: rgba(var(--accent-rgb), 0.06);
  color: rgba(var(--accent-rgb), 0.8);
  margin-bottom: 8px;
  animation: toast-fade-in 0.3s ease;
}

@keyframes toast-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.news-panel.newspaper .scan-result-toast {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.news-panel.newspaper .feed-scan-toast {
  color: rgba(139, 87, 42, 0.7);
  background: rgba(139, 87, 42, 0.04);
  border-color: rgba(139, 87, 42, 0.12);
}

.news-panel.newspaper .feed-new-header {
  color: rgba(139, 87, 42, 0.75);
}

.news-panel.newspaper .feed-new-dot {
  background: #8B572A;
}

.news-panel.newspaper .feed-item.feed-item-new {
  border-left-color: rgba(139, 87, 42, 0.3);
}

.news-panel.newspaper .feed-old-divider span {
  color: rgba(60, 42, 33, 0.3);
}

.news-panel.newspaper .feed-old-divider::after {
  background: rgba(60, 42, 33, 0.08);
}

.stories-detail-body {
  padding: 1rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Two-column layout */
.stories-detail-columns {
  display: flex;
  gap: 1rem;
  height: 100%;
}

.stories-col-timeline {
  flex: 1;
  min-width: 0;
}

.stories-col-context {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Summary */
.story-summary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
}

.story-summary h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 8px;
}

.story-summary p {
  margin: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.story-updated {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
}

/* Background context */
.story-background {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
}

.story-background h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 8px;
}

.story-background p {
  margin: 0;
  font-size: inherit;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
}

/* Tags section */
.story-tags-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.story-tags-group h4 {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 6px;
}

/* Key actors & keywords */
.story-actors,
.story-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.story-actor-tag {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  color: rgba(96, 165, 250, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.2);
  font-weight: 500;
}

.story-keyword-tag {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.story-keyword-tag.ai-keyword {
  background: rgba(var(--accent-rgb), 0.08);
  color: rgba(var(--accent-rgb), 0.8);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.story-tags-group h4 svg { vertical-align: -1px; }

.keyword-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
}

.story-keyword-tag:hover .keyword-remove-btn {
  opacity: 0.6;
}

.keyword-remove-btn:hover {
  opacity: 1 !important;
  color: #ef4444;
}

.story-keyword-add {
  display: inline-flex;
}

.keyword-add-input,
.keyword-add-input:focus,
.keyword-add-input:focus-visible,
.keyword-add-input:active {
  outline: 0 none transparent !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  --input-focus-border: transparent;
}

.keyword-add-input {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  -webkit-appearance: none;
  width: 80px;
  font-family: inherit;
  transition: width 0.2s, border-color 0.15s, background 0.15s;
}

.keyword-add-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.65rem;
}

.keyword-add-input:focus {
  border-color: rgba(255, 255, 255, 0.25);
  border-style: solid;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  width: 120px;
}

/* Timeline */
.story-timeline {
  margin-top: 0;
}

.story-timeline h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 12px;
}

.story-timeline-empty {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 0;
}

.story-timeline-entries {
  display: flex;
  flex-direction: column;
}

.timeline-group {
  margin-bottom: 4px;
}

.timeline-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-left: 2px;
}

.timeline-group-time {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  font-weight: 500;
}

.timeline-group-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.story-timeline-entry {
  display: flex;
  gap: 12px;
  min-height: 60px;
}

.timeline-entry-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
  flex-shrink: 0;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  flex-shrink: 0;
}

.timeline-dot.scan {
  background: transparent;
}

.timeline-dot.analysis {
  background: rgba(var(--accent-rgb), 0.5);
  border-color: var(--accent);
  border-radius: 3px;
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
}

.timeline-line {
  flex: 1;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

.timeline-entry-content {
  flex: 1;
  padding-bottom: 16px;
}

.timeline-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.timeline-time {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

.timeline-significance {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.timeline-analysis-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.timeline-headline {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

.timeline-details {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.timeline-insight {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: rgba(var(--accent-rgb), 0.8);
  line-height: 1.5;
  font-style: italic;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.timeline-insight svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Analysis markdown content */
.timeline-analysis-content {
  margin: 4px 0 6px;
  font-size: inherit;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.timeline-analysis-content .analysis-heading {
  font-size: 1.05em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin: 12px 0 4px;
}

.timeline-analysis-content .analysis-heading:first-child {
  margin-top: 0;
}

.timeline-analysis-content .analysis-paragraph {
  margin: 0 0 8px;
}

.timeline-analysis-content .analysis-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 12px 0;
}

.news-panel.newspaper .timeline-analysis-content {
  color: rgba(0, 0, 0, 0.6);
}

.news-panel.newspaper .timeline-analysis-content .analysis-heading {
  color: rgba(0, 0, 0, 0.8);
}

.news-panel.newspaper .timeline-analysis-content .analysis-divider {
  border-top-color: rgba(0, 0, 0, 0.1);
}

.timeline-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.timeline-source-link {
  font-size: 0.7rem;
  color: rgba(56, 189, 248, 0.7);
  text-decoration: none;
}

.timeline-source-link:hover {
  color: #38bdf8;
  text-decoration: underline;
}

/* Create form */
.story-create-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.story-create-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
}

.story-create-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.story-create-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.story-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.story-create-cancel {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}

.story-create-cancel:hover {
  color: rgba(255, 255, 255, 0.7);
}

.story-create-submit {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.story-create-submit:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.95);
}

.story-create-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Tracking section header */
.stories-tracking-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin: 16px 0 8px;
}

/* Empty state */
.stories-empty {
  text-align: center;
  padding: 32px 16px;
  color: rgba(255, 255, 255, 0.4);
}

.stories-empty svg {
  opacity: 0.3;
  margin-bottom: 8px;
}

.stories-empty p {
  margin: 4px 0;
}

.stories-empty-hint {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
}

.stories-create-btn {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stories-create-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.95);
}

/* Quick Follow Topics */
.quick-follow-section {
  margin-bottom: 16px;
}

.quick-follow-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-follow-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-follow-chip:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(255, 255, 255, 0.9);
}

.quick-follow-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.quick-follow-chip svg {
  opacity: 0.5;
}

.quick-follow-chip:hover svg {
  opacity: 1;
}

/* Loading */
.stories-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  color: rgba(255, 255, 255, 0.4);
  gap: 12px;
}

.stories-loading p {
  margin: 0;
  font-size: 0.85rem;
}

.news-panel.newspaper .stories-loading {
  color: rgba(0, 0, 0, 0.4);
}

/* Stories Feed */
/* Feed — social-style posts */
.stories-feed {
  margin-top: 0;
}

.stories-feed-list {
  display: flex;
  flex-direction: column;
}

/* "N new updates since last visit" header */
.feed-new-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.85);
}

.feed-new-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* New item left accent */
.feed-item.feed-item-new {
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
}

/* "Earlier" divider between new and old */
.feed-old-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin: 4px 0;
}

.feed-old-divider span {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.feed-old-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* Each feed item is a post with avatar */
.feed-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.feed-item-avatar {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.feed-item-avatar-line {
  align-items: stretch;
  padding-top: 0;
}

.feed-thread-line {
  width: 2px;
  height: 100%;
  min-height: 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
}

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

.feed-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.feed-headline-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.feed-agent-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-agent-name:hover {
  color: rgba(255, 255, 255, 0.9);
}

.feed-item-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

.feed-headline {
  margin: 0;
  font-size: 1.05em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.35;
}

.feed-analysis-header {
  margin: 2px 0 4px;
}

.feed-details {
  margin: 3px 0 0;
  font-size: 0.92em;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

.feed-sources {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.feed-source-link {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.25);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.feed-source-link:hover {
  color: rgba(255, 255, 255, 0.6);
}

.feed-analysis-preview {
  font-size: 0.92em;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  line-height: 1.5;
  margin-top: 4px;
}

.feed-analysis-text {
  line-height: 1.65;
  white-space: pre-wrap;
}

.feed-analysis-text strong {
  color: rgba(255, 255, 255, 0.95);
}

/* Continuation posts — reduce visual gap when same agent */
.feed-item.feed-item-continuation {
  border-top: none;
  padding-top: 4px;
  margin-top: -4px;
}

/* Expandable feed items */
.feed-item.expandable {
  cursor: pointer;
}

.feed-item.expandable:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.feed-expand-hint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 8px;
  display: inline-block;
}

.feed-item.expandable:hover .feed-expand-hint {
  color: rgba(var(--accent-rgb), 0.7);
}

.feed-collapse-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: rgba(var(--accent-rgb), 0.6);
}

.feed-collapse-btn:hover {
  color: rgba(var(--accent-rgb), 0.9);
}

.feed-expanded-content {
  white-space: normal;
}

/* Post overlay dialog */
.feed-post-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.feed-post-dialog {
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  max-width: 680px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.feed-post-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.feed-post-dialog-agent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feed-post-dialog-agent .feed-agent-name {
  font-size: 0.9rem;
  display: block;
}

.feed-post-dialog-agent .feed-item-time {
  font-size: 0.75rem;
  display: block;
  margin-top: 2px;
}

.feed-post-dialog-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
}

.feed-post-dialog-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.feed-post-dialog-headline {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.feed-post-dialog-body {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.7;
}

.feed-post-dialog-body p {
  margin: 0 0 12px 0;
}

.feed-post-dialog-body strong {
  color: rgba(255, 255, 255, 0.95);
}

.feed-post-dialog-body h3 {
  color: rgba(255, 255, 255, 0.95);
  margin: 24px 0 12px 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

.feed-post-dialog-body h4 {
  color: rgba(255, 255, 255, 0.9);
  margin: 20px 0 8px 0;
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.feed-post-dialog-body h5 {
  color: rgba(255, 255, 255, 0.85);
  margin: 16px 0 6px 0;
  font-size: 0.88rem;
}

.feed-post-dialog-body ul,
.feed-post-dialog-body ol {
  margin: 8px 0 12px 0;
  padding-left: 20px;
}

.feed-post-dialog-body li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.feed-post-dialog-body hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 20px 0;
}

.analysis-list {
  margin: 8px 0 12px 0;
  padding-left: 20px;
}

.analysis-list li {
  margin-bottom: 4px;
  line-height: 1.6;
}

.analysis-subheading {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 16px 0 6px 0;
}

.feed-post-dialog-sources {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.feed-post-dialog-sources h4 {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px 0;
}

.feed-post-dialog-sources .feed-source-link {
  display: block;
  margin-bottom: 6px;
  max-width: none;
}

/* Spinning icon */
.spinning {
  animation: spin 1s linear infinite;
}

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

/* Newspaper theme overrides for stories */
.news-panel.newspaper .story-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

.news-panel.newspaper .story-card:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}

.news-panel.newspaper .story-card-title {
  color: #1a1a1a;
}

.news-panel.newspaper .story-card-meta {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .story-summary {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

.news-panel.newspaper .story-summary p {
  color: #1a1a1a;
}

.news-panel.newspaper .story-summary h4,
.news-panel.newspaper .story-timeline h4 {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.newspaper .timeline-headline {
  color: #1a1a1a;
}

.news-panel.newspaper .timeline-details {
  color: rgba(0, 0, 0, 0.6);
}

.news-panel.newspaper .timeline-time {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .story-create-input {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
}

.news-panel.newspaper .stories-empty {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .stories-empty-hint {
  color: rgba(0, 0, 0, 0.3);
}

/* Newspaper Feed */
.news-panel.newspaper .feed-item {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  padding: 18px 0;
}

.news-panel.newspaper .feed-thread-line {
  background: rgba(0, 0, 0, 0.08);
}

.news-panel.newspaper .feed-agent-name {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.newspaper .feed-agent-name:hover {
  color: rgba(0, 0, 0, 0.8);
}

.news-panel.newspaper .feed-item-time {
  color: rgba(0, 0, 0, 0.3);
}

.news-panel.newspaper .feed-headline {
  color: rgba(0, 0, 0, 0.85);
  font-family: 'Lora', 'Georgia', serif;
}

.news-panel.newspaper .feed-details {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.newspaper .feed-source-link {
  color: rgba(0, 0, 0, 0.25);
}

.news-panel.newspaper .feed-source-link:hover {
  color: rgba(0, 0, 0, 0.55);
}

.news-panel.newspaper .feed-analysis-preview {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.newspaper .feed-analysis-text strong {
  color: #1a1a1a;
}

.news-panel.newspaper .feed-item.expandable:hover {
  background: rgba(0, 0, 0, 0.03);
}

.news-panel.newspaper .feed-expand-hint {
  color: rgba(0, 0, 0, 0.25);
}

.news-panel.newspaper .feed-item.expandable:hover .feed-expand-hint {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.newspaper .feed-collapse-btn {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .feed-collapse-btn:hover {
  color: rgba(0, 0, 0, 0.7);
}

.news-panel.newspaper .feed-item.feed-item-continuation {
  border-top: none;
}

.news-panel.newspaper .feed-post-dialog {
  background: #f5f0e8;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
}

.news-panel.newspaper .feed-post-dialog-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .feed-post-dialog-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}

.news-panel.newspaper .feed-post-dialog-headline {
  color: #1a1a1a;
}

.news-panel.newspaper .feed-post-dialog-body {
  color: rgba(0, 0, 0, 0.75);
}

.news-panel.newspaper .feed-post-dialog-body strong {
  color: #1a1a1a;
}

.news-panel.newspaper .feed-post-dialog-body h3,
.news-panel.newspaper .feed-post-dialog-body h4,
.news-panel.newspaper .feed-post-dialog-body h5 {
  color: #1a1a1a;
}

.news-panel.newspaper .feed-post-dialog-body hr {
  border-top-color: rgba(0, 0, 0, 0.1);
}

.news-panel.newspaper .analysis-subheading {
  color: rgba(0, 0, 0, 0.8);
}

.news-panel.newspaper .feed-post-dialog-sources {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.news-panel.newspaper .feed-post-dialog-sources h4 {
  color: rgba(0, 0, 0, 0.35);
}

.news-panel.newspaper .feed-post-overlay {
  background: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .agent-name {
  color: rgba(0, 0, 0, 0.45);
}

.news-panel.newspaper .agent-follow-item:hover .agent-name {
  color: rgba(0, 0, 0, 0.8);
}

.news-panel.newspaper .agent-follow-item.active .agent-name {
  color: #8B572A;
}

.news-panel.newspaper .agent-follow-item.active .agent-status-ring {
  border-color: #8B572A !important;
}

/* Newspaper theme — agents sidebar */
.news-panel.newspaper .stories-agents-sidebar {
  border-right-color: rgba(60, 42, 33, 0.1);
}

.news-panel.newspaper .agents-sidebar-header {
  color: rgba(60, 42, 33, 0.4);
}

.news-panel.newspaper .agents-sidebar-add {
  color: rgba(60, 42, 33, 0.4);
  border-color: rgba(60, 42, 33, 0.15);
}

.news-panel.newspaper .agents-sidebar-add:hover {
  color: rgba(60, 42, 33, 0.8);
  background: rgba(60, 42, 33, 0.06);
  border-color: rgba(60, 42, 33, 0.3);
}

.news-panel.newspaper .agents-sidebar-item:hover {
  background: rgba(60, 42, 33, 0.06);
}

.news-panel.newspaper .agents-sidebar-item.active {
  background: rgba(139, 87, 42, 0.08);
}

.news-panel.newspaper .agents-sidebar-item.active .agents-sidebar-name {
  color: #8B572A;
}

.news-panel.newspaper .agents-sidebar-item.active .agent-status-ring {
  border-color: #8B572A !important;
}

.news-panel.newspaper .agents-sidebar-name {
  color: rgba(60, 42, 33, 0.7);
}

.news-panel.newspaper .agents-sidebar-count {
  color: rgba(60, 42, 33, 0.35);
}

.news-panel.newspaper .agents-sidebar-menu {
  background: rgba(255, 252, 245, 0.97);
  border-color: rgba(60, 42, 33, 0.15);
}

.news-panel.newspaper .agents-sidebar-menu button {
  color: rgba(60, 42, 33, 0.75);
}

.news-panel.newspaper .agents-sidebar-menu button:hover {
  background: rgba(60, 42, 33, 0.06);
  color: rgba(60, 42, 33, 0.95);
}

.news-panel.newspaper .agents-menu-danger:hover {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.06) !important;
}

.news-panel.newspaper .agents-menu-divider {
  background: rgba(60, 42, 33, 0.1);
}

.news-panel.newspaper .agents-menu-label {
  color: rgba(60, 42, 33, 0.4);
}

.news-panel.newspaper .agents-freq-option {
  color: rgba(60, 42, 33, 0.5) !important;
  background: rgba(60, 42, 33, 0.04) !important;
  border-color: rgba(60, 42, 33, 0.08) !important;
}

.news-panel.newspaper .agents-freq-option:hover {
  color: rgba(60, 42, 33, 0.85) !important;
  background: rgba(60, 42, 33, 0.08) !important;
}

.news-panel.newspaper .agents-freq-option.active {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
}

.news-panel.newspaper .feed-scanning-bar {
  background: rgba(139, 87, 42, 0.04);
}

.news-panel.newspaper .feed-scanning-bar-progress {
  background: linear-gradient(90deg, transparent, rgba(139, 87, 42, 0.08), transparent);
}

.news-panel.newspaper .feed-scanning-bar-text {
  color: rgba(139, 87, 42, 0.6);
}

.news-panel.newspaper .create-agent-overlay {
  background: rgba(245, 240, 230, 0.6);
}

.news-panel.newspaper .create-agent-dialog {
  background: rgba(250, 247, 240, 0.99);
  border-color: rgba(60, 42, 33, 0.15);
  box-shadow: 0 8px 32px rgba(60, 42, 33, 0.15);
}

.news-panel.newspaper .create-agent-header {
  color: rgba(60, 42, 33, 0.9);
}

.news-panel.newspaper .create-agent-desc {
  color: rgba(60, 42, 33, 0.45);
}

.news-panel.newspaper .create-agent-input {
  background: rgba(60, 42, 33, 0.03);
  border-color: rgba(60, 42, 33, 0.12);
  color: rgba(60, 42, 33, 0.9);
}

.news-panel.newspaper .create-agent-input:focus {
  border-color: rgba(139, 87, 42, 0.4);
}

.news-panel.newspaper .create-agent-input::placeholder {
  color: rgba(60, 42, 33, 0.25);
}

.news-panel.newspaper .create-agent-cancel {
  border-color: rgba(60, 42, 33, 0.12);
  color: rgba(60, 42, 33, 0.5);
}

.news-panel.newspaper .create-agent-cancel:hover {
  background: rgba(60, 42, 33, 0.04);
  color: rgba(60, 42, 33, 0.7);
}

.news-panel.newspaper .create-agent-submit {
  background: rgba(139, 87, 42, 0.1);
  color: #8B572A;
}

.news-panel.newspaper .create-agent-submit:hover:not(:disabled) {
  background: rgba(139, 87, 42, 0.18);
}

.news-panel.newspaper .agents-sidebar-archived-toggle {
  color: rgba(60, 42, 33, 0.4);
  border-top-color: rgba(60, 42, 33, 0.1);
}

.news-panel.newspaper .agents-sidebar-archived-toggle:hover {
  color: rgba(60, 42, 33, 0.7);
}


.news-panel.newspaper .story-keyword-tag {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.news-panel.newspaper .story-create-form {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

.news-panel.newspaper .story-create-cancel {
  color: rgba(0, 0, 0, 0.35);
}

.news-panel.newspaper .story-create-cancel:hover {
  color: rgba(0, 0, 0, 0.6);
}

.news-panel.newspaper .stories-create-btn,
.news-panel.newspaper .story-create-submit {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}

.news-panel.newspaper .stories-create-btn:hover,
.news-panel.newspaper .story-create-submit:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}

.news-panel.newspaper .stories-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .stories-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}

.news-panel.newspaper .timeline-dot {
  border-color: rgba(0, 0, 0, 0.25);
}

.news-panel.newspaper .timeline-line {
  background: rgba(0, 0, 0, 0.1);
}

.news-panel.newspaper .stories-tracking-header {
  color: rgba(0, 0, 0, 0.35);
}


.news-panel.newspaper .quick-follow-chip {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.55);
}

.news-panel.newspaper .quick-follow-chip:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.85);
}


/* Story detail - newspaper overrides */
.news-panel.newspaper .stories-detail-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.news-panel.newspaper .stories-back-btn {
  color: rgba(0, 0, 0, 0.5);
}

.news-panel.newspaper .stories-back-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.06);
}

.news-panel.newspaper .stories-detail-title {
  color: #1a1a1a;
}

.news-panel.newspaper .story-summary {
  background: none;
  border: none;
  border-left: 3px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  padding: 8px 16px;
  margin: 0;
}

.news-panel.newspaper .story-summary h4 {
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.news-panel.newspaper .story-summary p {
  color: rgba(0, 0, 0, 0.7);
  font-family: 'Lora', 'Georgia', serif;
  font-size: 0.88rem;
  line-height: 1.7;
  font-style: italic;
}

.news-panel.newspaper .story-updated {
  color: rgba(0, 0, 0, 0.3);
  font-style: normal;
  font-size: 0.65rem;
}

.news-panel.newspaper .story-background {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.news-panel.newspaper .story-background h4 {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .story-background p {
  color: rgba(0, 0, 0, 0.55);
}

.news-panel.newspaper .story-tags-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.news-panel.newspaper .story-tags-group h4 {
  color: rgba(0, 0, 0, 0.35);
}

.news-panel.newspaper .story-actor-tag {
  background: rgba(37, 99, 235, 0.08);
  color: rgba(37, 99, 235, 0.75);
  border-color: rgba(37, 99, 235, 0.15);
}

.news-panel.newspaper .story-keyword-tag {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.12);
}

.news-panel.newspaper .story-keyword-tag.ai-keyword {
  background: rgba(139, 87, 42, 0.08);
  color: rgba(139, 87, 42, 0.75);
  border-color: rgba(139, 87, 42, 0.2);
}

.news-panel.newspaper .keyword-add-input {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.45) !important;
  caret-color: rgba(0, 0, 0, 0.5) !important;
  border: 1px dashed rgba(0, 0, 0, 0.12) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.45) !important;
  -webkit-box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.news-panel.newspaper .keyword-add-input::placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.3) !important;
}

.news-panel.newspaper .keyword-add-input:focus,
.news-panel.newspaper .keyword-add-input:focus-visible,
.news-panel.newspaper .keyword-add-input:active {
  background: rgba(0, 0, 0, 0.04) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  border-style: solid !important;
  color: rgba(0, 0, 0, 0.6) !important;
  caret-color: rgba(0, 0, 0, 0.5) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.6) !important;
  -webkit-box-shadow: none !important;
}

.news-panel.newspaper .keyword-add-input:-webkit-autofill,
.news-panel.newspaper .keyword-add-input:-webkit-autofill:hover,
.news-panel.newspaper .keyword-add-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #eee4d2 inset !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.45) !important;
}

.news-panel.newspaper .timeline-group-time {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .timeline-group-line {
  background: rgba(0, 0, 0, 0.08);
}

.news-panel.newspaper .story-timeline h4 {
  color: rgba(0, 0, 0, 0.45);
}

.news-panel.newspaper .story-timeline-empty {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .timeline-headline {
  color: rgba(0, 0, 0, 0.85);
}

.news-panel.newspaper .timeline-details {
  color: rgba(0, 0, 0, 0.6);
}

.news-panel.newspaper .timeline-insight {
  color: rgba(139, 87, 42, 0.7);
}

.news-panel.newspaper .timeline-source-link {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .timeline-source-link:hover {
  color: rgba(0, 0, 0, 0.7);
}

.news-panel.newspaper .story-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

.news-panel.newspaper .story-card:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}

.news-panel.newspaper .story-card-title {
  color: #1a1a1a;
}

.news-panel.newspaper .story-card-meta {
  color: rgba(0, 0, 0, 0.4);
}

.news-panel.newspaper .analyze-dialog { background: rgba(139, 87, 42, 0.04); border-bottom-color: rgba(0, 0, 0, 0.06); }
.news-panel.newspaper .analyze-dialog-header { color: rgba(139, 87, 42, 0.7); }
.news-panel.newspaper .analyze-dialog-close { color: rgba(0, 0, 0, 0.3); }
.news-panel.newspaper .analyze-dialog-close:hover { color: rgba(0, 0, 0, 0.6); }
.news-panel.newspaper .analyze-dialog-input { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.8); }
.news-panel.newspaper .analyze-dialog-input:focus { border-color: rgba(139, 87, 42, 0.3); }
.news-panel.newspaper .analyze-dialog-input::placeholder { color: rgba(0, 0, 0, 0.3); }
.news-panel.newspaper .analyze-dialog-cancel { color: rgba(0, 0, 0, 0.4); }
.news-panel.newspaper .analyze-dialog-cancel:hover { color: rgba(0, 0, 0, 0.6); }
.news-panel.newspaper .analyze-dialog-submit { background: rgba(139, 87, 42, 0.08); border-color: rgba(139, 87, 42, 0.2); color: rgba(139, 87, 42, 0.8); }
.news-panel.newspaper .analyze-dialog-submit:hover { background: rgba(139, 87, 42, 0.15); }

/* ============================================
   YOUTUBE VIDEOS — Netflix-style rows
   ============================================ */

.videos-section {
  overflow: visible !important;
}

.videos-netflix {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 16px 0;
  overflow: visible;
}

.video-row {
  overflow: visible;
}

/* Scroll container with arrow buttons */
.video-row-container {
  position: relative;
}

.video-scroll-btn {
  position: absolute;
  top: 0;
  bottom: 40px; /* stop above the text info area */
  width: 28px;
  border: none;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.video-row-container:hover .video-scroll-btn {
  opacity: 1;
}

.video-scroll-btn.left {
  left: 0;
  background: linear-gradient(to right, rgba(245, 240, 230, 0.85) 40%, transparent);
  border-radius: 4px 0 0 4px;
}

.video-scroll-btn.right {
  right: 0;
  background: linear-gradient(to left, rgba(245, 240, 230, 0.85) 40%, transparent);
  border-radius: 0 4px 4px 0;
}

.video-scroll-btn:hover {
  color: rgba(0, 0, 0, 0.9);
}

/* Category grid layout (when viewing a single category) */
.videos-category-grid {
  padding: 16px 0;
}

.video-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 0 4px;
}

.video-grid-wrap .video-card-netflix {
  width: auto;
}

/* Time filter pills */
.video-time-filters {
  display: flex;
  gap: 6px;
  padding: 0 4px 12px;
}

.video-time-btn {
  padding: 4px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.video-time-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}

.video-time-btn.active {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
}

.news-panel:not(.newspaper) .video-time-btn { border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.45); }
.news-panel:not(.newspaper) .video-time-btn:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); }
.news-panel:not(.newspaper) .video-time-btn.active { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.85); }

/* Dark theme scroll buttons */
.news-panel:not(.newspaper) .video-scroll-btn { color: rgba(255, 255, 255, 0.7); }
.news-panel:not(.newspaper) .video-scroll-btn.left { background: linear-gradient(to right, rgba(30, 30, 40, 0.95) 60%, transparent); }
.news-panel:not(.newspaper) .video-scroll-btn.right { background: linear-gradient(to left, rgba(30, 30, 40, 0.95) 60%, transparent); }
.news-panel:not(.newspaper) .video-scroll-btn:hover { color: rgba(255, 255, 255, 0.95); }

/* Category row */
.video-row-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px 8px;
}

.video-row-title {
  font-family: 'Georgia', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.8);
}

.video-row-count {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.35);
  font-family: -apple-system, sans-serif;
}

.video-row-title-link:hover {
  text-decoration: underline;
}

.video-row-arrow {
  opacity: 0;
  color: rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s ease;
}

.video-row-header:hover .video-row-arrow {
  opacity: 1;
}

.news-panel:not(.newspaper) .video-row-arrow { color: rgba(255, 255, 255, 0.3); }

.video-cat-refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.35);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
  margin-left: auto;
}

.video-cat-refresh-btn:hover {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.05);
}

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

.news-panel:not(.newspaper) .video-cat-refresh-btn {
  color: rgba(255, 255, 255, 0.35);
}

.news-panel:not(.newspaper) .video-cat-refresh-btn:hover {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

/* Horizontal scrolling row */
.video-row-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.video-row-scroll::-webkit-scrollbar {
  height: 4px;
}

.video-row-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.video-row-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.video-row-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.news-panel:not(.newspaper) .video-row-scroll {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.news-panel:not(.newspaper) .video-row-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}
.news-panel:not(.newspaper) .video-row-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Individual card */
.video-card-netflix {
  flex-shrink: 0;
  width: 220px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.video-card-netflix:hover {
  transform: scale(1.03);
}

.video-thumbnail-netflix {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.video-thumbnail-netflix img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.15s ease;
  color: white;
}

.video-card-netflix:hover .video-play-overlay {
  opacity: 1;
}

.video-info-netflix {
  padding: 6px 2px 0;
}

.video-title-netflix {
  font-family: -apple-system, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-meta-netflix {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Full-width player (when a video is selected) */
.video-player-fullwidth {
  padding: 8px 0;
}

.video-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  margin-bottom: 12px;
  transition: all 0.15s ease;
}

.video-back-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}

.video-player-centered {
  max-width: 800px;
  margin: 0 auto;
}

.video-player-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.video-player-wrapper iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

.video-player-loading {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-player-loading-icon {
  position: relative;
  z-index: 1;
  color: rgba(0, 0, 0, 0.2);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.news-panel:not(.newspaper) .video-player-wrapper { background: rgba(255, 255, 255, 0.05); }
.news-panel:not(.newspaper) .video-player-loading-icon { color: rgba(255, 255, 255, 0.15); }

.video-player-details {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
}

.video-player-title {
  font-family: 'Georgia', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.3;
}

.video-player-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  gap: 12px;
}

.video-player-meta {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.45);
}

.video-player-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.video-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 5px;
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.video-action-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.7);
}

.video-player-desc {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 8px;
  line-height: 1.5;
}

/* Related videos below player */
.video-related {
  margin-top: 8px;
}

.video-related-title {
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 12px;
}

.video-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.video-related-grid .video-card-netflix {
  width: auto;
}

.video-close-player {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  white-space: nowrap;
}

.video-close-player:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

/* Newspaper-style loading indicator */
.videos-loading-newspaper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 4rem 2rem;
}

.videos-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.videos-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.videos-loading-text {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 0.02em;
}

.videos-loading-sub {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.35);
  font-style: italic;
}

.news-panel:not(.newspaper) .videos-loading-spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.4);
}

.news-panel:not(.newspaper) .videos-loading-text {
  color: rgba(255, 255, 255, 0.8);
}

.news-panel:not(.newspaper) .videos-loading-sub {
  color: rgba(255, 255, 255, 0.35);
}

/* Skeleton loading placeholders (legacy) */
.videos-skeleton .skeleton-card {
  pointer-events: none;
}

.skeleton-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.08);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-info {
  padding: 6px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skeleton-text {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.news-panel:not(.newspaper) .skeleton-thumb { background: rgba(255, 255, 255, 0.08); }
.news-panel:not(.newspaper) .skeleton-text { background: rgba(255, 255, 255, 0.06); }

/* Dark theme overrides */
.news-panel:not(.newspaper) .video-row-title { color: rgba(255, 255, 255, 0.9); }
.news-panel:not(.newspaper) .video-row-count { color: rgba(255, 255, 255, 0.35); }
.news-panel:not(.newspaper) .video-title-netflix { color: rgba(255, 255, 255, 0.9); }
.news-panel:not(.newspaper) .video-meta-netflix { color: rgba(255, 255, 255, 0.4); }
.news-panel:not(.newspaper) .video-thumbnail-netflix { background: rgba(255, 255, 255, 0.05); }
.news-panel:not(.newspaper) .video-player-title { color: rgba(255, 255, 255, 0.9); }
.news-panel:not(.newspaper) .video-player-meta { color: rgba(255, 255, 255, 0.4); }
.news-panel:not(.newspaper) .video-close-player { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); }
.news-panel:not(.newspaper) .video-close-player:hover { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); }
.news-panel:not(.newspaper) .video-back-btn { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.news-panel:not(.newspaper) .video-back-btn:hover { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); }
.news-panel:not(.newspaper) .video-player-title { color: rgba(255, 255, 255, 0.9); }
.news-panel:not(.newspaper) .video-player-meta { color: rgba(255, 255, 255, 0.4); }
.news-panel:not(.newspaper) .video-player-desc { color: rgba(255, 255, 255, 0.45); }
.news-panel:not(.newspaper) .video-player-details { border-bottom-color: rgba(255, 255, 255, 0.08); }
.news-panel:not(.newspaper) .video-related-title { color: rgba(255, 255, 255, 0.7); }
.news-panel:not(.newspaper) .video-action-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); }
.news-panel:not(.newspaper) .video-action-btn:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }
/* Daily Journal Page Styles */

/* Navigation styles for daily journal */
.daily-journal-nav {
  gap: 0;
}

.daily-journal-month {
  display: flex;
  flex-direction: column;
}

.daily-journal-month-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.8;
  border-radius: 8px;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.daily-journal-month-header:hover {
  background: rgba(255, 255, 255, 0.05);
  opacity: 1;
}

.daily-journal-month-header.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  opacity: 1;
}

body.light .daily-journal-month-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .daily-journal-month-header.active {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-dark);
}

.daily-journal-count {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.5;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
}

body.light .daily-journal-count {
  background: rgba(0, 0, 0, 0.06);
}

/* Day list */
.daily-journal-days {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 12px;
  margin: 4px 0 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}

body.light .daily-journal-days {
  border-left-color: rgba(0, 0, 0, 0.08);
}

.daily-journal-day {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  border-radius: 6px;
  text-align: left;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}

.daily-journal-day:hover {
  background: rgba(255, 255, 255, 0.05);
  opacity: 1;
}

.daily-journal-day.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  opacity: 1;
}

body.light .daily-journal-day:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .daily-journal-day.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}

.daily-journal-day-num {
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}

.daily-journal-day-name {
  opacity: 0.6;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.daily-journal-day-icons {
  display: flex;
  gap: 4px;
  opacity: 0.5;
  margin-left: auto;
}

.daily-journal-day-icons svg {
  width: 10px;
  height: 10px;
}

.daily-journal-focus {
  font-size: 0.7rem;
  opacity: 0.6;
  white-space: nowrap;
}

/* Content area - flat, no extra padding (handled by body-content) */
.daily-journal-content {
  /* No padding here - body-content handles it */
}

.daily-journal-consolidated {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Block sections (Mind Journal, Activity Log) */
.daily-journal-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.daily-journal-block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

body.light .daily-journal-block-header {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

.daily-journal-block-header svg {
  opacity: 0.7;
}

.daily-journal-block-header .content-actions {
  margin-left: auto;
}

.daily-journal-block-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Mind journal entries - very subtle cards */
.daily-journal-mind-entry {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

body.light .daily-journal-mind-entry {
  background: rgba(0, 0, 0, 0.015);
  border-color: rgba(0, 0, 0, 0.03);
}

.daily-journal-source {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 8px;
  padding: 2px 8px;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  color: var(--accent);
}

body.light .daily-journal-source {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}

/* Activity log sections - very subtle cards */
.daily-journal-section {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.015);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.025);
}

body.light .daily-journal-section {
  background: rgba(0, 0, 0, 0.01);
  border-color: rgba(0, 0, 0, 0.025);
}

.daily-journal-section-title {
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
  color: #fb923c;
}

.daily-journal-section-content {
  padding-left: 4px;
}

.daily-journal-section-content ul {
  margin: 0;
  padding-left: 20px;
}

.daily-journal-section-content li {
  padding: 4px 0;
  opacity: 0.85;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
  .body-layout {
    flex-direction: column;
  }
  
  .body-nav {
    width: 100%;
    max-height: 300px;
    position: static;
  }
  
  .daily-journal-days {
    max-height: 200px;
    overflow-y: auto;
  }
}

/* Rhythm Panel (Daily Briefing) Styles */
/* Uses shared collapsible-panel styles from CommandCenterPanels.css */

/* Briefing body content */
.briefing-body {
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

body.light .briefing-body {
  color: rgba(0, 0, 0, 0.9);
}

.briefing-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 2rem;
}

body.light .briefing-loading {
  color: rgba(0, 0, 0, 0.7);
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

body.light .loading-spinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: var(--accent);
}

.briefing-fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, transparent, rgba(15, 15, 20, 0.95));
  pointer-events: none;
}

.briefing-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.6rem;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

body.light .briefing-expand-btn {
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}

.briefing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.light .briefing-footer {
  border-color: rgba(0, 0, 0, 0.06);
}

.briefing-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

body.light .briefing-meta {
  color: rgba(0, 0, 0, 0.7);
}

.progress-focus { color: #38bdf8; }
.progress-done { color: #4ade80; }
.progress-pending { color: #facc15; }

/* Refresh Button - matches shared icon button pattern */
.briefing-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.briefing-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.briefing-refresh-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.briefing-refresh-btn:disabled:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

/* Briefing Actions (header buttons) */
.briefing-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

body.light .briefing-header,
body.light .briefing-footer {
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .briefing-header h2 {
  color: rgba(0, 0, 0, 0.85);
}

body.light .briefing-fade-overlay {
  background: linear-gradient(to bottom, transparent, #FFFFFF);
}

body.light .briefing-refresh-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

body.light .briefing-refresh-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.8);
}

body.zen .briefing-refresh-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
}

body.zen .briefing-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}

body.batman .briefing-refresh-btn {
  background: rgba(0, 100, 200, 0.1);
  border-color: rgba(0, 100, 200, 0.2);
  color: rgba(255, 255, 255, 0.5);
}

body.batman .briefing-refresh-btn:hover {
  background: rgba(0, 100, 200, 0.2);
  border-color: rgba(0, 100, 200, 0.3);
  color: rgba(255, 255, 255, 0.9);
}


/* Soul Synthesis Page Styles */

/* Page container */
.soul-synthesis-page {
  width: 100%;
}

/* Content area */
.soul-synthesis-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Panels container */
.soul-synthesis-panels {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Navigation label - shared with body-nav */
.body-nav-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.body-nav-label > span:first-child {
  font-weight: 500;
}

/* Synthesis meta in nav */
.synthesis-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  opacity: 0.6;
}

.entry-count {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Header panel */
.synthesis-header-panel {
  /* Uses content-card default padding */
}

.synthesis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1rem;
}

.synthesis-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.synthesis-title h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

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

/* Primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.15));
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 12px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.15);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.25));
  border-color: rgba(var(--accent-rgb), 0.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
}

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

.btn-primary.loading svg {
  animation: spin 1s linear infinite;
}

body.light .btn-primary {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.08));
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent-dark);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.1);
}

body.light .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.15));
  border-color: rgba(var(--accent-rgb), 0.5);
}

/* Stats row */
.synthesis-stats-row {
  display: flex;
  gap: 24px;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.light .synthesis-stats-row {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.synthesis-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent, var(--accent));
}

/* AI Panel */
.synthesis-ai-panel {
  /* Uses content-card default padding */
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.light .panel-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

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

/* Synthesis sections */
.synthesis-section {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

body.light .synthesis-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}

.synthesis-section:last-child {
  margin-bottom: 0;
}

.synthesis-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

/* Section color accents */
.mirroring-section {
  border-left: 3px solid #60a5fa;
}

.mirroring-section h4 {
  color: #60a5fa;
}

.introspection-section {
  border-left: 3px solid var(--accent);
}

.introspection-section h4 {
  color: var(--accent);
}

.parts-analysis-section {
  border-left: 3px solid #fb923c;
}

.parts-analysis-section h4 {
  color: #fb923c;
}

.weather-arc-section {
  border-left: 3px solid #38bdf8;
}

.weather-arc-section h4 {
  color: #38bdf8;
}

.guidance-section {
  border-left: 3px solid #4ade80;
}

.guidance-section h4 {
  color: #4ade80;
}

.image-section {
  border-left: 3px solid #f472b6;
}

.image-section h4 {
  color: #f472b6;
}

/* Image container */
.synthesis-image-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.synthesis-image {
  margin-top: 1rem;
}

.synthesis-image img {
  width: 100%;
  max-width: 600px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light .synthesis-image img {
  border-color: rgba(0, 0, 0, 0.1);
}

/* Parts/Tags panel */
.synthesis-parts-panel {
  /* Uses content-card default padding */
}

.parts-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 1rem 0;
}

.part-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 100px;
  color: var(--accent);
  font-weight: 500;
  transition: all 0.2s ease;
}

.part-tag:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-1px);
}

body.light .part-tag {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-dark);
}

body.light .part-tag:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.part-count {
  font-size: 0.75rem;
  opacity: 0.6;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
}

body.light .part-count {
  background: rgba(0, 0, 0, 0.08);
}

/* Entries panel */
.synthesis-entries-panel {
  /* Uses content-card default padding */
}

.synthesis-entries-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual entry */
.synthesis-entry {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
}

body.light .synthesis-entry {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.synthesis-entry:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

body.light .synthesis-entry:hover {
  border-color: rgba(0, 0, 0, 0.1);
}

.synthesis-entry.expanded {
  border-color: rgba(var(--accent-rgb), 0.25);
}

body.light .synthesis-entry.expanded {
  border-color: rgba(var(--accent-rgb), 0.2);
}

/* Entry header (clickable) */
.synthesis-entry-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.synthesis-entry-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

body.light .synthesis-entry-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Date column */
.entry-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  padding: 8px 12px;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 12px;
}

body.light .entry-date {
  background: rgba(var(--accent-rgb), 0.08);
}

.entry-day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

body.light .entry-day {
  color: var(--accent-dark);
}

.entry-weekday {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  margin-top: 4px;
}

/* Entry info */
.entry-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entry-title {
  font-weight: 500;
  font-size: 0.95rem;
}

.entry-location {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.85rem;
}

/* Entry meta (mood, tags) */
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light .meta-badge {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.mood-badge {
  background: rgba(255, 255, 255, 0.04);
  border-width: 1.5px;
}

.tag-badge {
  opacity: 0.7;
}

/* Entry content (expandable) */
.synthesis-entry-content {
  padding: 0 16px 16px 82px;
  animation: slideUpFade 0.2s ease;
}

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

/* Responsive */
@media (max-width: 900px) {
  .synthesis-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .synthesis-stats-row {
    flex-wrap: wrap;
  }
  
  .synthesis-entry-content {
    padding-left: 16px;
  }
}

/* App Preview Panel - Browser-like inline app preview */

.app-preview-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  outline: none;
}

/* Empty state */
.app-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.3);
}

.app-preview-empty svg {
  opacity: 0.5;
}

.app-preview-empty p {
  font-size: 0.9rem;
  margin: 0;
}

/* Navigation Bar */
.app-preview-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* Back/Forward buttons */
.app-preview-nav-buttons {
  display: flex;
  gap: 2px;
}

.app-preview-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.app-preview-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.app-preview-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.app-preview-nav-btn.close:hover {
  background: rgba(255, 95, 87, 0.2);
  color: #ff5f57;
}

/* Breadcrumbs */
.app-preview-breadcrumbs {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 4px;
  overflow: hidden;
  padding: 0 8px;
}

.breadcrumb-separator {
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.app-preview-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.app-preview-breadcrumb:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.app-preview-breadcrumb.current {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

.app-preview-breadcrumb svg {
  flex-shrink: 0;
}

/* Actions */
.app-preview-nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Content Area */
.app-preview-content {
  flex: 1;
  overflow: auto;
  min-height: 0;
  position: relative;
}

/* Make app content fill the preview */
.app-preview-content > * {
  height: 100%;
}

/* Light theme */
body.light .app-preview-empty {
  color: rgba(0, 0, 0, 0.3);
}

body.light .app-preview-nav {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0.01) 100%
  );
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .app-preview-nav-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}

body.light .app-preview-nav-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

body.light .app-preview-nav-btn.close:hover {
  background: rgba(255, 95, 87, 0.15);
  color: #e53935;
}

body.light .breadcrumb-separator {
  color: rgba(0, 0, 0, 0.2);
}

body.light .app-preview-breadcrumb {
  color: rgba(0, 0, 0, 0.5);
}

body.light .app-preview-breadcrumb:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}

body.light .app-preview-breadcrumb.current {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.95);
}
/* AI Assistant - Floating button and side panel */

/* Floating Button - Glassmorphism */
.ai-assistant-button {
  position: fixed;
  bottom: 10px;
  right: 16px;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  border: 1px solid var(--os-glass-border);
  background: var(--os-glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--os-glass-shadow);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10001;
  /* Prevent flicker during wallpaper transitions */
  will-change: transform;
  isolation: isolate;
}

.ai-assistant-button svg {
  width: 26px;
  height: 26px;
}

.ai-assistant-button:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: white;
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

.ai-assistant-button.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
  box-shadow: var(--os-glass-shadow);
}

/* Backdrop */
.ai-assistant-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10005;
  animation: aiBackdropFadeIn 0.2s ease-out;
}

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

/* Side Panel - Premium Glassmorphism */
.ai-assistant-panel {
  position: fixed;
  top: 28px;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100vw;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 30%,
    rgba(255, 255, 255, 0.02) 100%
  );
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    -8px 0 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  display: flex;
  flex-direction: column;
  z-index: 10006;
  animation: aiPanelSlideIn 0.25s ease-out;
}

.ai-assistant-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 100%
  );
  pointer-events: none;
}

@keyframes aiPanelSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Header */
.ai-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: transparent;
}

.ai-assistant-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.ai-assistant-title svg {
  color: var(--accent);
}

.ai-assistant-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-assistant-close:hover {
  background: rgba(255, 100, 100, 0.2);
  color: #ff6b6b;
}

/* Messages */
.ai-assistant-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Empty state */
.ai-assistant-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  gap: 12px;
}

.ai-assistant-empty p {
  font-size: 15px;
  margin: 0;
}

.ai-assistant-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
  max-width: 280px;
}

.ai-assistant-suggestions button {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.ai-assistant-suggestions button:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(255, 255, 255, 0.95);
}

/* Message */
.ai-assistant-message {
  display: flex;
  gap: 10px;
  animation: aiMessageFadeIn 0.2s ease-out;
}

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

.ai-assistant-message.user {
  justify-content: flex-end;
}

.ai-assistant-message-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.ai-assistant-message-content {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.ai-assistant-message.user .ai-assistant-message-content {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: white;
  border-bottom-right-radius: 4px;
}

.ai-assistant-message.assistant .ai-assistant-message-content {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border-bottom-left-radius: 4px;
}

.ai-assistant-message.error .ai-assistant-message-content {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.9);
}

/* Typing indicator */
.ai-assistant-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}

.ai-assistant-typing span {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: aiTypingBounce 1.4s infinite ease-in-out both;
}

.ai-assistant-typing span:nth-child(1) {
  animation-delay: -0.32s;
}

.ai-assistant-typing span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes aiTypingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Input form */
.ai-assistant-input-form {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.ai-assistant-input-form input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.ai-assistant-input-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.ai-assistant-input-form input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.ai-assistant-input-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-radius: 12px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-assistant-input-form button:hover:not(:disabled) {
  transform: scale(1.05);
}

.ai-assistant-input-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Collection Picker */
.collection-picker {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
  max-height: 400px;
}

.collection-picker-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.5);
}

.collection-picker-loading svg {
  animation: spin 1s linear infinite;
}

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

.collection-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

.collection-picker-empty p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.collection-picker-empty span {
  font-size: 0.75rem;
}

.collection-picker-empty svg {
  opacity: 0.4;
  margin-bottom: 0.25rem;
}

/* Filter bar */
.collection-picker-filter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0 0.75rem;
  flex-shrink: 0;
}

.collection-picker-boards {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.collection-picker-board-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.collection-picker-board-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.collection-picker-board-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.collection-picker-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.collection-picker-search svg {
  opacity: 0.4;
  flex-shrink: 0;
}

.collection-picker-search input {
  flex: 1;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  outline: none;
}

.collection-picker-search input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Cards grid */
.collection-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
  overflow-y: auto;
  padding-right: 0.25rem;
  flex: 1;
}

.collection-picker-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s ease;
  text-align: left;
  padding: 0;
}

.collection-picker-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--accent-rgb), 0.3);
  transform: translateY(-1px);
}

.collection-picker-card-thumb {
  width: 100%;
  height: 90px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.collection-picker-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-picker-card-favicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: rgba(0, 0, 0, 0.2);
}

.collection-picker-card-favicon img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.collection-picker-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.3);
}

.collection-picker-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem;
}

.collection-picker-card-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-picker-card-desc {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.collection-picker-card-url {
  font-size: 0.6rem;
  color: rgba(var(--accent-rgb), 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scrollbar */
.collection-picker-grid::-webkit-scrollbar {
  width: 4px;
}

.collection-picker-grid::-webkit-scrollbar-track {
  background: transparent;
}

.collection-picker-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.collection-picker-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* Desktop Selection Rectangle */
.desktop-selection-rect {
  position: fixed;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  pointer-events: none;
  z-index: 99999;
  backdrop-filter: blur(2px);
}

/* Selection indicator for any selected item */
.desktop-item-selected {
  outline: 2px dashed rgba(255, 255, 255, 0.6) !important;
  outline-offset: 6px;
}

/* Multi-drag state */
.desktop-item-multi-dragging {
  cursor: grabbing !important;
  transform: scale(1.03);
  outline: 2px dashed rgba(255, 255, 255, 0.8) !important;
  outline-offset: 6px;
  box-shadow: 6px 10px 25px rgba(0, 0, 0, 0.3) !important;
  z-index: 100 !important;
  transition: none !important;
}
/* ============================================
   Desktop Sticky Notes
   Same styling as screensaver sticky notes
   ============================================ */

/* Sticky Notes Container - positioned behind windows */
.desktop-sticky-notes {
  position: fixed;
  inset: 28px 0 70px 0; /* Leave space for menu bar and dock */
  pointer-events: none; /* Allow clicks to pass through to desktop */
  z-index: 1; /* Behind windows (windows start at z-index 10003+) */
}

/* When a pin is maximized, bring the entire container to the front */
.desktop-sticky-notes.has-maximized {
  z-index: 100000; /* Above everything including windows and widgets */
}

/* Prevent text selection globally during drag/resize/rotate */
.desktop-sticky-notes.is-dragging {
  user-select: none;
}

.desktop-sticky-notes.is-dragging * {
  user-select: none !important;
}

/* During drag operations, disable pointer events on all notes except the ones being dragged */
.desktop-sticky-notes.is-dragging .desktop-sticky-note {
  pointer-events: none !important;
}

.desktop-sticky-notes.is-dragging .desktop-sticky-note.dragging,
.desktop-sticky-notes.is-dragging .desktop-sticky-note.resizing,
.desktop-sticky-notes.is-dragging .desktop-sticky-note.rotating,
.desktop-sticky-notes.is-dragging .desktop-sticky-note.multi-dragging {
  pointer-events: auto !important;
  z-index: 1000 !important;
}

/* Sticky Note */
.desktop-sticky-note {
  position: absolute;
  width: 220px;
  min-width: 180px;
  max-width: 400px;
  min-height: 60px;
  padding: 0.8rem 1rem;
  background: var(--sticky-bg);
  border: 1px solid var(--sticky-border);
  border-radius: 2px;
  color: var(--sticky-text);
  font-size: 0.85rem;
  line-height: 1.4;
  transform: rotate(var(--sticky-rotation, 0deg));
  box-shadow:
    2px 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: grab;
  overflow: visible; /* Allow rotate handle to be visible and clickable above the note */
}

.desktop-sticky-note:hover {
  transform: rotate(var(--sticky-rotation, 0deg)) scale(1.02);
  box-shadow:
    3px 5px 15px rgba(0, 0, 0, 0.2),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
}

.desktop-sticky-note.dragging {
  cursor: grabbing;
  transform: rotate(var(--sticky-rotation, 0deg)) scale(1.05);
  box-shadow:
    8px 12px 30px rgba(0, 0, 0, 0.35),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
  z-index: 100 !important;
  transition: none;
  user-select: none;
}

.desktop-sticky-note.selected {
  outline: 2px dashed rgba(255, 255, 255, 0.6);
  outline-offset: 6px;
  box-shadow:
    2px 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
}

.desktop-sticky-note.selected:hover {
  outline: 2px dashed rgba(255, 255, 255, 0.8);
  outline-offset: 6px;
  box-shadow:
    3px 5px 15px rgba(0, 0, 0, 0.2),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
}

.desktop-sticky-note.multi-dragging {
  cursor: grabbing;
  transform: rotate(var(--sticky-rotation, 0deg)) scale(1.03);
  outline: 2px dashed rgba(255, 255, 255, 0.8);
  outline-offset: 6px;
  box-shadow:
    6px 10px 25px rgba(0, 0, 0, 0.3),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.05);
  z-index: 100 !important;
  transition: none;
}

/* Top shadow effect */
.desktop-sticky-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 12px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent);
  border-radius: 2px 2px 0 0;
}

/* Image Note Styles */
.desktop-sticky-note.image-note {
  padding: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.4);
  overflow: visible; /* Allow rotate handle to show above */
  min-height: 80px;
  min-width: 80px;
  width: 150px;
  height: 150px;
  border-radius: 8px;
}

/* PNG and GIF Note Styles - no background, no border */
.desktop-sticky-note.png-note,
.desktop-sticky-note.gif-note {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
}

.desktop-sticky-note.png-note::before,
.desktop-sticky-note.gif-note::before {
  display: none;
}

.desktop-sticky-note.png-note:hover,
.desktop-sticky-note.gif-note:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.desktop-sticky-note.png-note.selected,
.desktop-sticky-note.gif-note.selected {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: 2px dashed rgba(255, 255, 255, 0.6);
  outline-offset: 6px;
}

.desktop-sticky-note.png-note .desktop-sticky-image,
.desktop-sticky-note.gif-note .desktop-sticky-image {
  background: transparent;
}

.desktop-sticky-note.png-note .desktop-sticky-image img,
.desktop-sticky-note.gif-note .desktop-sticky-image img {
  object-fit: contain;
  border-radius: 0;
}

.desktop-sticky-note.png-note .desktop-sticky-delete,
.desktop-sticky-note.gif-note .desktop-sticky-delete {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.desktop-sticky-note.png-note .desktop-sticky-resize,
.desktop-sticky-note.gif-note .desktop-sticky-resize {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.desktop-sticky-note.png-note .desktop-sticky-resize::before,
.desktop-sticky-note.gif-note .desktop-sticky-resize::before {
  border-color: rgba(255, 255, 255, 0.7);
}

.desktop-sticky-note.image-note:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.desktop-sticky-note.image-note.selected {
  border-color: transparent;
  outline: 2px dashed rgba(255, 255, 255, 0.6);
  outline-offset: 6px;
}

.desktop-sticky-note.image-note::before {
  display: none;
}

.desktop-sticky-note.image-note .desktop-sticky-delete {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  opacity: 0;
  z-index: 10;
  top: 6px;
  right: 6px;
  pointer-events: auto;
}

.desktop-sticky-note.image-note:hover .desktop-sticky-delete {
  opacity: 0.9;
}

.desktop-sticky-note.image-note .desktop-sticky-delete:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.9);
}

.desktop-sticky-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none; /* Allow mouse events to pass through to parent for dragging */
  border-radius: 6px; /* Match parent border radius */
}

.desktop-sticky-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  pointer-events: none;
  user-select: none;
}

.desktop-sticky-note.image-note .desktop-sticky-resize {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0 0 6px 0;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.desktop-sticky-note.image-note .desktop-sticky-resize::before {
  border-color: rgba(255, 255, 255, 0.7);
  width: 10px;
  height: 10px;
}

.desktop-sticky-note.image-note:hover .desktop-sticky-resize {
  opacity: 1;
}

/* Delete button */
.desktop-sticky-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--sticky-text);
  opacity: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-note:hover .desktop-sticky-delete {
  opacity: 0.6;
}

.desktop-sticky-delete:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.3);
  color: #b91c1c;
}

/* Content */
.desktop-sticky-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  cursor: pointer;
}

.desktop-sticky-content .markdown-block {
  font-size: 0.85rem;
  line-height: 1.5;
}

.desktop-sticky-content .markdown-block p {
  margin: 0 0 0.5em 0;
}

.desktop-sticky-content .markdown-block p:last-child {
  margin-bottom: 0;
}

.desktop-sticky-content .markdown-block ul,
.desktop-sticky-content .markdown-block ol {
  margin: 0.25em 0;
  padding-left: 1.25em;
}

.desktop-sticky-content .markdown-block li {
  margin: 0.15em 0;
}

.desktop-sticky-content .markdown-block code {
  background: rgba(0, 0, 0, 0.15);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-size: 0.85em;
}

.desktop-sticky-content .markdown-block pre {
  background: rgba(0, 0, 0, 0.15);
  padding: 0.5em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.5em 0;
}

.desktop-sticky-content .markdown-block strong {
  font-weight: 600;
}

.desktop-sticky-content .markdown-block a,
.desktop-sticky-content .markdown-block a:visited {
  color: var(--sticky-text) !important;
  text-decoration: underline !important;
  text-decoration-style: wavy !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.desktop-sticky-content .markdown-block a:hover {
  opacity: 1;
}

.desktop-sticky-content .markdown-block blockquote {
  border-left: 2px solid currentColor;
  margin: 0.5em 0;
  padding-left: 0.75em;
  opacity: 0.85;
}

/* Date */
.desktop-sticky-date {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 0.65rem;
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* CLI Source indicator */
.desktop-sticky-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  padding: 2px 3px;
  opacity: 0.8;
}

/* Resize Handle */
.desktop-sticky-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.desktop-sticky-resize::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.4;
}

.desktop-sticky-note:hover .desktop-sticky-resize {
  opacity: 1;
}

.desktop-sticky-note.resizing {
  cursor: se-resize;
  user-select: none;
}

.desktop-sticky-note.resizing .desktop-sticky-resize {
  opacity: 1;
}

/* Rotate Handle */
.desktop-sticky-rotate {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  pointer-events: auto !important;
}

.desktop-sticky-rotate:hover {
  transform: translateX(-50%) scale(1.1);
  color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.desktop-sticky-rotate:active {
  cursor: grabbing;
}

.desktop-sticky-note:hover .desktop-sticky-rotate {
  opacity: 1;
}

.desktop-sticky-note.rotating {
  cursor: grabbing;
  transition: none;
  user-select: none;
}

.desktop-sticky-note.rotating .desktop-sticky-rotate {
  opacity: 1;
  background: rgba(59, 130, 246, 0.9);
  color: white;
  border-color: rgba(59, 130, 246, 0.5);
}

/* Style rotate handle for images and videos with dark theme */
.desktop-sticky-note.image-note .desktop-sticky-rotate,
.desktop-sticky-note.video-note .desktop-sticky-rotate {
  top: -28px;
  background: rgba(30, 30, 30, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

.desktop-sticky-note.image-note .desktop-sticky-rotate:hover,
.desktop-sticky-note.video-note .desktop-sticky-rotate:hover {
  color: white;
}

/* Note Modal Overlay */
.desktop-note-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100003;
}

.desktop-note-modal {
  width: 90%;
  max-width: 700px;
  height: 80vh;
  max-height: 80vh;
  background: rgba(25, 25, 30, 0.98);
  border: 2px solid var(--modal-accent-color, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--modal-accent-bg, rgba(255, 255, 255, 0.05));
  animation: desktopModalAppear 0.25s ease-out;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.desktop-note-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
  flex-shrink: 0;
}

.desktop-note-modal-header svg {
  opacity: 0.6;
}

.desktop-note-modal-close {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.desktop-note-modal-close:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
}

.desktop-note-modal-close svg {
  opacity: 1;
}

/* Type Selector */
.desktop-note-type-selector {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.desktop-note-type-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.desktop-note-type-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.desktop-note-type-btn.active {
  background: var(--modal-accent-bg, rgba(var(--accent-rgb), 0.2));
  border-color: var(--modal-accent-color, rgba(var(--accent-rgb), 0.5));
  color: rgba(255, 255, 255, 0.95);
}

.desktop-note-type-btn svg {
  opacity: 0.7;
}

.desktop-note-type-btn.active svg {
  opacity: 1;
}

/* Image Input Mode */
.desktop-note-modal.image-mode,
.desktop-note-modal.video-mode {
  max-height: 80vh;
  height: auto;
}

.desktop-note-image-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Sticker Tabs */
.desktop-note-sticker-tabs {
  display: flex;
  gap: 6px;
  padding: 0 0 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.desktop-note-sticker-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  justify-content: center;
}

.desktop-note-sticker-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.desktop-note-sticker-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(255, 255, 255, 0.95);
}

.desktop-note-sticker-tab svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.desktop-note-sticker-tab.active svg {
  opacity: 1;
}

.desktop-note-sticker-tab .tab-count {
  font-size: 0.7rem;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  opacity: 0.7;
}

.desktop-note-sticker-tab.active .tab-count {
  background: rgba(var(--accent-rgb), 0.3);
  opacity: 1;
}

/* Stickers Scroll Container */
.desktop-note-stickers-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
  margin: 0 -0.5rem;
  padding: 1rem 0.5rem;
}

/* Custom Scrollbar */
.desktop-note-stickers-scroll::-webkit-scrollbar {
  width: 8px;
}

.desktop-note-stickers-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.desktop-note-stickers-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.desktop-note-stickers-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  background-clip: padding-box;
}

.desktop-note-stickers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
}

.desktop-note-sticker-btn {
  width: 90px;
  height: 90px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.desktop-note-sticker-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}

.desktop-note-sticker-btn.selected {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.6);
}

.desktop-note-sticker-btn img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* Custom URL Panel */
.desktop-note-custom-url-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}

.desktop-note-url-row {
  display: flex;
  gap: 8px;
}

.desktop-note-url-row .desktop-note-image-url-input {
  flex: 1;
}

.desktop-note-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.desktop-note-upload-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: white;
}

.desktop-note-image-preview.dragover {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.1);
}

.desktop-note-image-preview.dragover .desktop-note-image-placeholder {
  color: rgba(var(--accent-rgb), 0.8);
}

.desktop-note-image-preview {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
}

.desktop-note-image-preview img {
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.desktop-note-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-image-placeholder svg {
  opacity: 0.5;
}

.desktop-note-image-placeholder span {
  font-size: 0.9rem;
}

.desktop-note-image-url-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  outline: none;
  transition: border-color 0.15s ease;
}

.desktop-note-image-url-input:focus {
  border-color: var(--modal-accent-color, rgba(var(--accent-rgb), 0.5));
}

.desktop-note-image-url-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-image-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.desktop-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.desktop-note-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.desktop-note-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}

.desktop-note-btn.save {
  background: rgba(var(--accent-rgb), 0.9);
  color: white;
}

.desktop-note-btn.save:hover {
  background: rgba(var(--accent-rgb), 1);
}

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

/* Make note editor fill the modal */
.desktop-note-modal .note-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.desktop-note-modal .note-editor-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.desktop-note-modal .note-editor-input {
  flex: 1;
  min-height: 200px;
  height: 100%;
  resize: none;
}

.desktop-note-modal .note-editor-footer {
  flex-shrink: 0;
}

.desktop-note-modal .note-editor-color-picker {
  flex-shrink: 0;
}

/* ============================================
   Video Note Styles
   ============================================ */

/* Video Note on Desktop */
.desktop-sticky-note.video-note {
  padding: 0;
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.5);
  overflow: visible; /* Allow rotate handle to show above */
  min-height: 150px;
  min-width: 200px;
  width: 320px;
  height: 208px; /* 180 video + 28 titlebar */
  border-radius: 8px;
  user-select: none;
  -webkit-user-select: none;
}

.desktop-sticky-note.video-note::before {
  display: none;
}

.desktop-sticky-note.video-note:hover {
  border-color: rgba(255, 0, 0, 0.4);
}

.desktop-sticky-note.video-note.selected {
  border-color: transparent;
  outline: 2px dashed rgba(255, 255, 255, 0.6);
  outline-offset: 6px;
  box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.5);
}

.desktop-sticky-note.video-note.selected:hover {
  outline: 2px dashed rgba(255, 255, 255, 0.8);
  outline-offset: 6px;
  box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.5);
}

/* Hide the default delete button for video notes - we have one in the titlebar */
.desktop-sticky-note.video-note .desktop-sticky-delete {
  display: none;
}

.desktop-sticky-video {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px; /* Match parent border radius */
  user-select: none;
  -webkit-user-select: none;
}

/* Titlebar for video notes - contains drag handle and close button */
.desktop-sticky-video-titlebar {
  height: 28px;
  min-height: 28px;
  background: rgba(30, 30, 30, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 5;
  opacity: 0.3;
  transition: opacity 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.desktop-sticky-note.video-note:hover .desktop-sticky-video-titlebar {
  opacity: 1;
}

/* Drag handle in center of titlebar */
.desktop-sticky-video-drag-handle {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.desktop-sticky-video-drag-handle svg {
  color: rgba(255, 255, 255, 0.4);
}

.desktop-sticky-note.video-note:hover .desktop-sticky-video-drag-handle svg {
  color: rgba(255, 255, 255, 0.6);
}

.desktop-sticky-note.video-note.dragging .desktop-sticky-video-drag-handle {
  cursor: grabbing;
}

/* Maximize button in titlebar */
.desktop-sticky-video-maximize {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-video-maximize:hover {
  background: rgba(34, 197, 94, 0.8);
  color: white;
}

/* Close button in titlebar */
.desktop-sticky-video-close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-video-close:hover {
  background: rgba(239, 68, 68, 0.8);
  color: white;
}

.desktop-sticky-video iframe {
  width: 100%;
  flex: 1;
  border: none;
}

/* Overlay to capture events when not hovering - prevents click-through to elements behind */
.desktop-sticky-video::after {
  content: '';
  position: absolute;
  top: 28px; /* Below titlebar */
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 2;
  cursor: grab;
}

/* Remove overlay on hover so user can interact with video */
.desktop-sticky-note.video-note:hover .desktop-sticky-video::after {
  pointer-events: none;
}

/* Keep overlay during drag/resize/rotate to prevent iframe from capturing events */
.desktop-sticky-note.video-note.dragging .desktop-sticky-video::after,
.desktop-sticky-note.video-note.resizing .desktop-sticky-video::after,
.desktop-sticky-note.video-note.rotating .desktop-sticky-video::after {
  pointer-events: auto;
  cursor: grabbing;
}

.desktop-sticky-note.video-note .desktop-sticky-resize {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0 0 6px 0;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.desktop-sticky-note.video-note .desktop-sticky-resize::before {
  border-color: rgba(255, 255, 255, 0.7);
  width: 10px;
  height: 10px;
}

.desktop-sticky-note.video-note:hover .desktop-sticky-resize {
  opacity: 1;
}

/* ============================================
   Video Input Modal Styles
   ============================================ */

.desktop-note-video-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
}

.desktop-note-video-preview {
  flex: 1;
  min-height: 200px;
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(255, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.desktop-note-video-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
}

.desktop-note-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-video-placeholder svg {
  opacity: 0.5;
  color: rgba(255, 0, 0, 0.5);
}

.desktop-note-video-placeholder span {
  font-size: 0.9rem;
}

.desktop-note-video-url-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  outline: none;
  transition: border-color 0.15s ease;
}

.desktop-note-video-url-input:focus {
  border-color: rgba(255, 0, 0, 0.5);
}

.desktop-note-video-url-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-video-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Video Tab Navigation */
.desktop-note-video-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.desktop-note-video-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.desktop-note-video-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.desktop-note-video-tab.active {
  background: rgba(255, 0, 0, 0.15);
  border-color: rgba(255, 0, 0, 0.3);
  color: #ff6b6b;
}

/* Search Input */
.desktop-note-video-search-input {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

.desktop-note-video-search-input:focus-within {
  border-color: rgba(255, 0, 0, 0.5);
}

.desktop-note-video-search-input svg {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.desktop-note-video-search-input input {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  outline: none;
}

.desktop-note-video-search-input input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-video-search-loading svg {
  animation: spin 1s linear infinite;
  color: rgba(255, 0, 0, 0.6);
}

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

/* Search Results */
.desktop-note-video-search-results {
  flex: 1;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.desktop-note-video-search-result {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  overflow: hidden;
}

.desktop-note-video-search-result:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.desktop-note-video-search-result.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3);
}

.desktop-note-video-search-result.selected:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.7);
}

.search-result-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.search-result-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

.search-result-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  font-size: 0.7rem;
  color: white;
  font-weight: 500;
}

.search-result-playlist-count {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 3px;
  font-size: 0.7rem;
  color: white;
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-result-info {
  padding: 0.5rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.search-result-title {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-channel {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.search-result-views {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Empty States */
.desktop-note-video-no-results,
.desktop-note-video-search-prompt {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-video-no-results svg,
.desktop-note-video-search-prompt svg {
  opacity: 0.5;
  color: rgba(255, 0, 0, 0.4);
}

.desktop-note-video-no-results span,
.desktop-note-video-search-prompt span {
  font-size: 0.9rem;
}

/* ============================================
   Website Pin Styles
   ============================================ */

/* Website Note on Desktop */
.desktop-sticky-note.website-note {
  padding: 0;
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(56, 189, 248, 0.25);
  box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.5);
  overflow: visible;
  min-height: 200px;
  min-width: 280px;
  width: 400px;
  height: 328px; /* 300 content + 28 titlebar */
  border-radius: 8px;
  user-select: none;
  -webkit-user-select: none;
}

.desktop-sticky-note.website-note::before {
  display: none;
}

.desktop-sticky-note.website-note:hover {
  border-color: rgba(56, 189, 248, 0.5);
}

.desktop-sticky-note.website-note.selected {
  border-color: transparent;
  outline: 2px dashed rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}

.desktop-sticky-note.website-note .desktop-sticky-delete {
  display: none;
}

.desktop-sticky-website {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  user-select: none;
  -webkit-user-select: none;
}

.desktop-sticky-website-titlebar {
  height: 28px;
  min-height: 28px;
  background: rgba(30, 30, 30, 1);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 5;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.desktop-sticky-note.website-note:hover .desktop-sticky-website-titlebar {
  opacity: 1;
}

.desktop-sticky-website-drag-handle {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
}

.desktop-sticky-website-drag-handle svg {
  color: rgba(255, 255, 255, 0.4);
}

.desktop-sticky-note.website-note:hover .desktop-sticky-website-drag-handle svg {
  color: rgba(255, 255, 255, 0.6);
}

.desktop-sticky-website-url {
  flex: 1;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 52px; /* Space for maximize and close buttons */
}

.desktop-sticky-website-maximize {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-website-maximize:hover {
  background: rgba(34, 197, 94, 0.8);
  color: white;
}

.desktop-sticky-website-close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-website-close:hover {
  background: rgba(239, 68, 68, 0.8);
  color: white;
}

.desktop-sticky-website iframe {
  width: 100%;
  flex: 1;
  border: none;
  background: white;
}

/* Overlay to capture events when not hovering */
.desktop-sticky-website::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 2;
  cursor: grab;
}

.desktop-sticky-note.website-note:hover .desktop-sticky-website::after {
  pointer-events: none;
}

.desktop-sticky-note.website-note.dragging .desktop-sticky-website::after,
.desktop-sticky-note.website-note.resizing .desktop-sticky-website::after,
.desktop-sticky-note.website-note.rotating .desktop-sticky-website::after {
  pointer-events: auto;
  cursor: grabbing;
}

.desktop-sticky-note.website-note .desktop-sticky-resize {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0 0 6px 0;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.desktop-sticky-note.website-note .desktop-sticky-resize::before {
  border-color: rgba(255, 255, 255, 0.7);
  width: 10px;
  height: 10px;
}

.desktop-sticky-note.website-note:hover .desktop-sticky-resize {
  opacity: 1;
}

.desktop-sticky-note.website-note .desktop-sticky-rotate,
.desktop-sticky-note.timeline-note .desktop-sticky-rotate {
  top: -28px;
  background: rgba(30, 30, 30, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

.desktop-sticky-note.website-note .desktop-sticky-rotate:hover,
.desktop-sticky-note.timeline-note .desktop-sticky-rotate:hover {
  color: white;
}

/* ============================================
   Spotify Pin Styles
   ============================================ */

.desktop-sticky-note.spotify-note {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  min-height: 80px;
  min-width: 200px;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 12px;
}

.desktop-sticky-note.spotify-note.selected {
  outline: 2px dashed rgba(30, 215, 96, 0.7);
  outline-offset: 6px;
}

.desktop-sticky-note.spotify-note .desktop-sticky-delete {
  display: none;
}

.desktop-sticky-spotify {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
}

.desktop-sticky-spotify-titlebar {
  height: 28px;
  min-height: 28px;
  background: rgba(18, 18, 18, 1);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 5;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.desktop-sticky-note.spotify-note:hover .desktop-sticky-spotify-titlebar {
  opacity: 1;
}

.desktop-sticky-spotify-drag-handle {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
}

.desktop-sticky-spotify-drag-handle svg {
  color: rgba(30, 215, 96, 0.6);
}

.desktop-sticky-note.spotify-note:hover .desktop-sticky-spotify-drag-handle svg {
  color: rgba(30, 215, 96, 1);
}

.desktop-sticky-spotify-type {
  flex: 1;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 52px;
}

.desktop-sticky-spotify-maximize {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-spotify-maximize:hover {
  background: rgba(30, 215, 96, 0.8);
  color: white;
}

.desktop-sticky-spotify-close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-spotify-close:hover {
  background: rgba(239, 68, 68, 0.8);
  color: white;
}

.desktop-sticky-spotify iframe {
  width: 100%;
  flex: 1;
  border: none;
  border-radius: 0 0 10px 10px;
  background: transparent;
  display: block; /* Remove inline spacing gap */
}

/* Overlay to capture events when not hovering */
.desktop-sticky-spotify::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 2;
  cursor: grab;
}

.desktop-sticky-note.spotify-note:hover .desktop-sticky-spotify::after {
  pointer-events: none;
}

.desktop-sticky-note.spotify-note.dragging .desktop-sticky-spotify::after,
.desktop-sticky-note.spotify-note.resizing .desktop-sticky-spotify::after,
.desktop-sticky-note.spotify-note.rotating .desktop-sticky-spotify::after {
  pointer-events: auto;
  cursor: grabbing;
}

.desktop-sticky-note.spotify-note .desktop-sticky-resize {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.desktop-sticky-note.spotify-note .desktop-sticky-resize::before {
  border-color: rgba(30, 215, 96, 0.7);
  width: 10px;
  height: 10px;
}

.desktop-sticky-note.spotify-note:hover .desktop-sticky-resize {
  opacity: 1;
}

.desktop-sticky-note.spotify-note .desktop-sticky-rotate {
  top: -28px;
  background: rgba(18, 18, 18, 0.9);
  border-color: rgba(30, 215, 96, 0.3);
  color: rgba(30, 215, 96, 0.7);
}

.desktop-sticky-note.spotify-note .desktop-sticky-rotate:hover {
  color: rgba(30, 215, 96, 1);
}

/* ============================================
   Game Pin Styles
   ============================================ */

.desktop-sticky-note.game-note {
  padding: 0;
  background: transparent;
  border: 2px solid rgba(168, 85, 247, 0.4);
  box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.5);
  overflow: visible; /* Allow rotate handle to show above */
  min-height: 200px;
  min-width: 320px;
  user-select: none;
  -webkit-user-select: none;
}

.desktop-sticky-note.game-note.selected {
  outline: 2px dashed rgba(168, 85, 247, 0.7);
  outline-offset: 6px;
}

.desktop-sticky-note.game-note .desktop-sticky-delete {
  display: none;
}

.desktop-sticky-game {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  user-select: none;
  -webkit-user-select: none;
}

.desktop-sticky-game-titlebar {
  height: 32px;
  min-height: 32px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(var(--accent-rgb), 0.9));
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 5;
  user-select: none;
  -webkit-user-select: none;
}

.desktop-sticky-game-drag-handle {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.7);
}

.desktop-sticky-note.game-note:hover .desktop-sticky-game-drag-handle {
  color: rgba(255, 255, 255, 0.9);
}

.desktop-sticky-game-name {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 56px; /* Space for maximize and close buttons */
}

.desktop-sticky-game-maximize {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-game-maximize:hover {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.desktop-sticky-game-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-game-close:hover {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}

.desktop-sticky-game iframe {
  width: 100%;
  flex: 1;
  border: none;
  background: #000;
}

/* Overlay to capture events when not hovering */
.desktop-sticky-game::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 2;
  cursor: grab;
}

.desktop-sticky-note.game-note:hover .desktop-sticky-game::after {
  pointer-events: none;
}

.desktop-sticky-note.game-note.dragging .desktop-sticky-game::after,
.desktop-sticky-note.game-note.resizing .desktop-sticky-game::after,
.desktop-sticky-note.game-note.rotating .desktop-sticky-game::after {
  pointer-events: auto;
  cursor: grabbing;
}

.desktop-sticky-note.game-note .desktop-sticky-resize {
  background: rgba(168, 85, 247, 0.6);
  border-radius: 0 0 6px 0;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.desktop-sticky-note.game-note:hover .desktop-sticky-resize {
  opacity: 1;
}

.desktop-sticky-note.game-note .desktop-sticky-resize::before {
  border-color: rgba(255, 255, 255, 0.7);
}

.desktop-sticky-note.game-note .desktop-sticky-rotate {
  top: -28px;
  background: rgba(168, 85, 247, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.desktop-sticky-note.game-note .desktop-sticky-rotate:hover {
  color: white;
}

/* ============================================
   Embed Note Styling (Generic Embeds)
   ============================================ */

.desktop-sticky-note.embed-note {
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  min-width: 200px;
  min-height: 150px;
}

.desktop-sticky-note.embed-note:hover {
  transform: rotate(var(--sticky-rotation, 0deg));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.desktop-sticky-note.embed-note .desktop-sticky-delete {
  display: none;
}

.desktop-sticky-embed {
  width: 100%;
  height: 100%;
  min-height: 0; /* Allow flex child to shrink */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Clip iframe content inside */
  border-radius: 12px;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
}

.desktop-sticky-embed-titlebar {
  height: 28px;
  min-height: 28px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.9), rgba(234, 88, 12, 0.9));
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 5;
  user-select: none;
  -webkit-user-select: none;
}

/* When titlebar is also the drag handle - entire bar is draggable */
.desktop-sticky-embed-titlebar.desktop-sticky-embed-drag-handle {
  cursor: grab;
  pointer-events: auto;
}

.desktop-sticky-embed-titlebar .embed-titlebar-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.7);
}

.desktop-sticky-note.embed-note:hover .desktop-sticky-embed-titlebar .embed-titlebar-icon {
  color: rgba(255, 255, 255, 0.95);
}

.desktop-sticky-embed-name {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 56px; /* Space for maximize and close buttons */
}

.desktop-sticky-embed-maximize {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-embed-maximize:hover {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.desktop-sticky-embed-info-toggle {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-embed-info-toggle:hover {
  background: rgba(251, 146, 60, 0.9);
  color: white;
}

.desktop-sticky-embed-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  z-index: 10;
}

.desktop-sticky-embed-close:hover {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}

.desktop-sticky-embed iframe {
  width: 100%;
  flex: 1;
  min-height: 0; /* Allow flex child to shrink */
  border: none;
  border-radius: 0 0 12px 12px;
  background: transparent;
  display: block; /* Remove inline spacing gap */
}

/* Iframely HTML content */
.desktop-sticky-embed-content {
  width: 100%;
  flex: 1;
  min-height: 0; /* Allow flex child to shrink */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.desktop-sticky-embed-content iframe {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0; /* Allow flex child to shrink */
  border: none;
  border-radius: 0 0 12px 12px;
  background: transparent;
  display: block;
}

.desktop-sticky-embed-content > div {
  width: 100%;
  height: 100%;
  min-height: 0; /* Allow flex child to shrink */
  display: flex;
  flex-direction: column;
}

/* Embed card for sites that don't allow iframe (Twitter, etc.) */
.desktop-sticky-embed-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
}

.desktop-sticky-embed-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.embed-card-thumbnail {
  width: 100%;
  flex: 1;
  object-fit: cover;
  min-height: 100px;
}

.embed-card-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(var(--accent-rgb), 0.1));
  color: rgba(255, 255, 255, 0.4);
}

.embed-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.4);
}

.embed-card-site {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(251, 146, 60, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.embed-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.embed-card-desc {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.embed-card-action {
  font-size: 0.65rem;
  color: rgba(var(--accent-rgb), 0.8);
  margin-top: 4px;
}

.desktop-sticky-embed-card:hover .embed-card-action {
  color: rgba(var(--accent-rgb), 1);
}

/* When info is hidden, thumbnail fills the space */
.desktop-sticky-embed-card.hide-info .embed-card-thumbnail {
  height: 100%;
  min-height: unset;
}

.desktop-sticky-embed-card.hide-info .embed-card-placeholder {
  height: 100%;
  min-height: unset;
}

/* Overlay to capture events when not hovering - matches video/website pins */
.desktop-sticky-embed::after {
  content: '';
  position: absolute;
  top: 28px; /* Below titlebar */
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 2;
  cursor: grab;
}

/* Remove overlay on hover so user can interact with embed */
.desktop-sticky-note.embed-note:hover .desktop-sticky-embed::after {
  pointer-events: none;
}

/* Keep overlay during drag/resize/rotate to prevent iframe from capturing events */
.desktop-sticky-note.embed-note.dragging .desktop-sticky-embed::after,
.desktop-sticky-note.embed-note.resizing .desktop-sticky-embed::after,
.desktop-sticky-note.embed-note.rotating .desktop-sticky-embed::after {
  pointer-events: auto;
  cursor: grabbing;
}

.desktop-sticky-note.embed-note .desktop-sticky-resize {
  background: rgba(251, 146, 60, 0.6);
  border-radius: 0 0 6px 0;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.desktop-sticky-note.embed-note:hover .desktop-sticky-resize {
  opacity: 1;
}

.desktop-sticky-note.embed-note .desktop-sticky-resize::before {
  border-color: rgba(255, 255, 255, 0.7);
}

.desktop-sticky-note.embed-note .desktop-sticky-rotate {
  top: -28px;
  background: rgba(251, 146, 60, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.desktop-sticky-note.embed-note .desktop-sticky-rotate:hover {
  color: white;
}

/* ============================================
   Maximized Pin States (video, website, game, embed)
   ============================================ */

/* Parent note when maximized */
.desktop-sticky-note.maximized {
  position: fixed !important;
  top: 28px !important; /* Below menu bar */
  left: 0 !important;
  right: 0 !important;
  bottom: 80px !important; /* Above dock */
  width: auto !important;
  height: auto !important;
  z-index: 9999 !important; /* High within container (container gets z-index boost) */
  border-radius: 0 !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hide controls when maximized */
.desktop-sticky-note.maximized .desktop-sticky-delete,
.desktop-sticky-note.maximized .desktop-sticky-resize,
.desktop-sticky-note.maximized .desktop-sticky-rotate {
  display: none !important;
}

/* Inner container fills the space when maximized */
.desktop-sticky-note.maximized .desktop-sticky-video,
.desktop-sticky-note.maximized .desktop-sticky-website,
.desktop-sticky-note.maximized .desktop-sticky-spotify,
.desktop-sticky-note.maximized .desktop-sticky-game,
.desktop-sticky-note.maximized .desktop-sticky-embed {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

/* Disable overlay capture when maximized - allow full interaction */
.desktop-sticky-note.maximized .desktop-sticky-video::after,
.desktop-sticky-note.maximized .desktop-sticky-website::after,
.desktop-sticky-note.maximized .desktop-sticky-spotify::after,
.desktop-sticky-note.maximized .desktop-sticky-game::after,
.desktop-sticky-note.maximized .desktop-sticky-embed::after {
  display: none !important;
}

/* Titlebar styling when maximized */
.desktop-sticky-note.maximized .desktop-sticky-video-titlebar,
.desktop-sticky-note.maximized .desktop-sticky-website-titlebar,
.desktop-sticky-note.maximized .desktop-sticky-spotify-titlebar,
.desktop-sticky-note.maximized .desktop-sticky-game-titlebar,
.desktop-sticky-note.maximized .desktop-sticky-embed-titlebar {
  border-radius: 0;
}

/* Game Input Modal */
.desktop-note-game-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
}

.desktop-note-game-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.desktop-note-modal.game-mode {
  width: 600px;
  max-width: 90vw;
}

/* Website Input Modal */
.desktop-note-website-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
}

.desktop-note-website-preview {
  flex: 1;
  min-height: 200px;
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  overflow: hidden;
}

.desktop-note-website-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
  background: white;
}

.desktop-note-website-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-website-placeholder svg {
  opacity: 0.5;
  color: rgba(56, 189, 248, 0.5);
}

.desktop-note-website-placeholder span {
  font-size: 0.9rem;
}

.desktop-note-website-url-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  outline: none;
  transition: border-color 0.15s ease;
}

.desktop-note-website-url-input:focus {
  border-color: rgba(56, 189, 248, 0.5);
}

.desktop-note-website-url-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-website-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.desktop-note-website-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Embed Input Modal */
.desktop-note-embed-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
}

.desktop-note-embed-preview {
  flex: 1;
  min-height: 200px;
  max-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(251, 146, 60, 0.3);
  border-radius: 12px;
  overflow: hidden;
}

.desktop-note-embed-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
}

.desktop-note-embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  padding: 1rem;
}

.desktop-note-embed-placeholder svg {
  opacity: 0.5;
  color: rgba(251, 146, 60, 0.5);
}

.desktop-note-embed-placeholder span {
  font-size: 0.9rem;
}

.desktop-note-embed-placeholder .embed-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 0.25rem;
}

.desktop-note-embed-code-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  outline: none;
  transition: border-color 0.15s ease;
  resize: vertical;
  min-height: 80px;
}

.desktop-note-embed-code-input:focus {
  border-color: rgba(251, 146, 60, 0.5);
}

.desktop-note-embed-code-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-embed-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.desktop-note-embed-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Embed URL input (single line) */
.desktop-note-embed-url-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease;
}

.desktop-note-embed-url-input:focus {
  border-color: rgba(251, 146, 60, 0.5);
}

.desktop-note-embed-url-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Iframely loading state */
.desktop-note-embed-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 2rem;
}

.desktop-note-embed-loading svg {
  color: rgba(251, 146, 60, 0.7);
}

.desktop-note-embed-loading .spin {
  animation: spin 1s linear infinite;
}

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

/* Iframely preview container */
.desktop-note-embed-iframely {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Iframely preview card (for modal) */
.iframely-preview-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  overflow: hidden;
}

.iframely-preview-thumbnail {
  width: 100%;
  flex: 1;
  object-fit: cover;
  min-height: 150px;
}

.iframely-preview-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(var(--accent-rgb), 0.1));
}

.iframely-preview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
}

.iframely-preview-site {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(251, 146, 60, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.iframely-preview-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3;
}

.iframely-preview-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

.iframely-powered {
  color: rgba(251, 146, 60, 0.8);
}

.iframely-ready {
  font-size: 0.7rem;
  color: rgba(34, 197, 94, 0.8);
  margin-left: auto;
}

.iframely-preview-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.iframely-preview-container iframe,
.iframely-preview-iframe {
  width: 100%;
  height: 100%;
  flex: 1;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
}

.iframely-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0 0 8px 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.iframely-site {
  background: rgba(251, 146, 60, 0.2);
  color: rgba(251, 146, 60, 0.9);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.iframely-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.7);
}

/* Iframely error state */
.desktop-note-embed-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(239, 68, 68, 0.7);
  text-align: center;
  padding: 2rem;
}

.desktop-note-embed-error svg {
  opacity: 0.7;
}

.desktop-note-embed-error .embed-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.5rem;
}

/* Embed description */
.desktop-note-embed-description {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.4;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.desktop-note-modal.embed-mode {
  width: 550px;
  max-width: 90vw;
}

/* Website Tabs */
.desktop-note-website-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.desktop-note-website-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.desktop-note-website-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.desktop-note-website-tab.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: rgba(56, 189, 248, 1);
}

/* Games Browser */
.desktop-note-games-filters {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.desktop-note-games-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

.desktop-note-games-search svg {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.desktop-note-games-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  outline: none;
}

.desktop-note-games-search input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-games-category {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  min-width: 140px;
}

.desktop-note-games-category option {
  background: #1a1a1a;
  color: white;
}

.desktop-note-games-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  overflow-y: auto;
  padding: 0.25rem;
  min-height: 200px;
  max-height: 350px;
}

.desktop-note-game-item {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  min-height: 120px;
}

.desktop-note-game-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.desktop-note-game-item.selected {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.3);
}

.game-thumbnail {
  width: 100%;
  min-height: 70px;
  aspect-ratio: 16/9;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  flex-shrink: 0;
}

.game-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.2);
}

.game-info {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.game-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-category {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
}

.desktop-note-games-loading,
.desktop-note-games-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-games-loading svg,
.desktop-note-games-empty svg {
  color: rgba(56, 189, 248, 0.4);
}

/* ============================================
   Timeline (Twitter) Pin Styles
   ============================================ */

/* Timeline Note on Desktop */
.desktop-sticky-note.timeline-note {
  padding: 0;
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(29, 161, 242, 0.25);
  box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.5);
  overflow: visible;
  min-height: 300px;
  min-width: 280px;
  width: 350px;
  height: 478px; /* 450 content + 28 titlebar */
  border-radius: 8px;
}

.desktop-sticky-note.timeline-note::before {
  display: none;
}

.desktop-sticky-note.timeline-note:hover {
  border-color: rgba(29, 161, 242, 0.5);
}

.desktop-sticky-note.timeline-note.selected {
  border-color: transparent;
  outline: 2px dashed rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}

.desktop-sticky-note.timeline-note .desktop-sticky-delete {
  display: none;
}

.desktop-sticky-timeline {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
}

.desktop-sticky-timeline-titlebar {
  height: 28px;
  min-height: 28px;
  background: rgba(30, 30, 30, 1);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.desktop-sticky-note.timeline-note:hover .desktop-sticky-timeline-titlebar {
  opacity: 1;
}

.desktop-sticky-timeline-drag-handle {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
}

.desktop-sticky-timeline-drag-handle svg {
  color: rgba(255, 255, 255, 0.4);
}

.desktop-sticky-note.timeline-note:hover .desktop-sticky-timeline-drag-handle svg {
  color: rgba(255, 255, 255, 0.6);
}

.desktop-sticky-timeline-username {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: rgba(29, 161, 242, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 30px;
}

.desktop-sticky-timeline-username svg {
  flex-shrink: 0;
}

.desktop-sticky-timeline-close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.desktop-sticky-timeline-close:hover {
  background: rgba(239, 68, 68, 0.8);
  color: white;
}

.desktop-sticky-timeline iframe {
  width: 100%;
  flex: 1;
  border: none;
  background: #15202b; /* Twitter dark background */
}

/* Overlay to capture events when not hovering */
.desktop-sticky-timeline::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 2;
  cursor: grab;
}

.desktop-sticky-note.timeline-note:hover .desktop-sticky-timeline::after {
  pointer-events: none;
}

.desktop-sticky-note.timeline-note.dragging .desktop-sticky-timeline::after,
.desktop-sticky-note.timeline-note.resizing .desktop-sticky-timeline::after,
.desktop-sticky-note.timeline-note.rotating .desktop-sticky-timeline::after {
  pointer-events: auto;
  cursor: grabbing;
}

.desktop-sticky-note.timeline-note .desktop-sticky-resize {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0 0 6px 0;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.desktop-sticky-note.timeline-note .desktop-sticky-resize::before {
  border-color: rgba(255, 255, 255, 0.7);
  width: 10px;
  height: 10px;
}

.desktop-sticky-note.timeline-note:hover .desktop-sticky-resize {
  opacity: 1;
}

/* Timeline Input Modal */
.desktop-note-timeline-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
}

.desktop-note-timeline-preview {
  flex: 1;
  min-height: 200px;
  max-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 32, 43, 0.5);
  border: 2px dashed rgba(29, 161, 242, 0.3);
  border-radius: 12px;
  overflow: hidden;
}

.desktop-note-timeline-preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(29, 161, 242, 0.9);
}

.desktop-note-timeline-preview-content svg {
  color: rgba(29, 161, 242, 0.8);
}

.desktop-note-timeline-preview-content span {
  font-size: 1.1rem;
  font-weight: 600;
}

.desktop-note-timeline-preview-content p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.desktop-note-timeline-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-timeline-placeholder svg {
  opacity: 0.5;
  color: rgba(29, 161, 242, 0.5);
}

.desktop-note-timeline-placeholder span {
  font-size: 0.9rem;
}

.desktop-note-timeline-url-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  outline: none;
  transition: border-color 0.15s ease;
}

.desktop-note-timeline-url-input:focus {
  border-color: rgba(29, 161, 242, 0.5);
}

.desktop-note-timeline-url-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.desktop-note-timeline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Unified scrollbar styling for all modal scrollable areas */
.desktop-note-modal *::-webkit-scrollbar {
  width: 6px;
}

.desktop-note-modal *::-webkit-scrollbar-track {
  background: transparent;
}

.desktop-note-modal *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.desktop-note-modal *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* SpacesSwitcherPopup - Full-screen desktop switcher overlay */

/* Import SpacesSwitcher for shared preview styles */

/* SpacesSwitcher - Menu bar spaces indicator and switcher */

.spaces-switcher {
  position: relative;
  display: flex;
  align-items: center;
}

/* Mission Control button inside dots pill */

.space-dot.mission-control {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.space-dot.mission-control:hover {
  color: rgba(255, 255, 255, 1);
}

.space-dot:focus-visible {
  outline: none;
}

/* Dot Indicators */

.spaces-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 22px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.spaces-dots:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
}

.spaces-dots.transitioning {
  pointer-events: none;
}

.space-dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.space-dot-inner {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: all 0.2s ease;
}

.space-dot:hover .space-dot-inner {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.space-dot.active .space-dot-inner {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* Desktop menu button */

.space-dot.menu-btn {
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.space-dot.menu-btn:hover {
  color: rgba(255, 255, 255, 1);
}

/* Custom tooltip for dots */

.space-dot-tooltip {
  position: fixed;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 400;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 300000;
  animation: tooltipIn 0.1s ease-out;
}

@keyframes tooltipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-2px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.space-dot.add-space {
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.2s ease;
}

.space-dot.add-space:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

.space-dot.add-space svg {
  color: rgba(255, 255, 255, 0.7);
}

/* Dropdown Panel */

.spaces-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
  z-index: 10100;
  animation: spaces-panel-in 0.15s ease-out;
}

@keyframes spaces-panel-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.spaces-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spaces-panel-add {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.spaces-panel-add:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
}

/* Spaces List */

.spaces-list {
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
}

.space-item {
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.space-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.space-item.active {
  background: rgba(255, 255, 255, 0.1);
}

.space-item-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.space-item-name:hover {
  color: white;
}

.space-item-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.space-item.active .space-item-index {
  background: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 1);
}

.space-item-label {
  flex: 1;
}

/* Drag handle */

.space-item-grip {
  color: rgba(255, 255, 255, 0.15);
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 0 2px;
  transition: color 0.15s ease;
}

.space-item:hover .space-item-grip {
  color: rgba(255, 255, 255, 0.35);
}

.space-item.dragging {
  opacity: 0.3;
}

.space-item.drop-above {
  box-shadow: 0 -2px 0 0 rgba(var(--accent-rgb), 0.6);
}

.space-item.drop-below {
  box-shadow: 0 2px 0 0 rgba(var(--accent-rgb), 0.6);
}

/* Ghost preview during drag */

.space-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-family: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0.85;
  transform: translate(-50%, -50%);
}

/* Edit hint on active desktop */

.space-item-edit-hint {
  color: rgba(255, 255, 255, 0.2);
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.space-item.active:hover .space-item-edit-hint {
  opacity: 1;
}

/* Action buttons (pin, delete) */

.space-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.space-item:hover .space-item-actions {
  opacity: 1;
}

/* Always show pin icon if pinned */

.space-item-actions:has(.pinned) {
  opacity: 1;
}

.space-action-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.space-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.space-action-btn.pinned {
  color: rgba(var(--accent-rgb), 0.8);
}

.space-action-btn.pinned:hover {
  color: rgba(var(--accent-rgb), 1);
}

.space-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.9);
}

/* Name Input */

.space-name-input {
  flex: 1;
  margin: 4px 6px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 13px;
  outline: none;
}

.space-name-input:focus {
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

/* Panel Footer */

.spaces-panel-footer {
  padding: 6px 12px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.spaces-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

/* ============================================
   Mini Desktop Preview
   ============================================ */

.space-preview {
  position: fixed;
  transform: translateX(-50%);
  background: rgba(20, 20, 25, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
  z-index: 10200;
  animation: space-preview-in 0.15s ease-out;
  pointer-events: auto;
}

@keyframes space-preview-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.space-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.space-preview-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.space-preview-count {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
}

/* Viewport clips the scaled content */

.space-preview-viewport {
  width: 240px;
  height: 150px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(30, 30, 40, 1) 0%, rgba(20, 20, 30, 1) 100%);
}

/* Full-size desktop scaled down */

.space-preview-desktop-scaled {
  position: absolute;
  width: 1920px;
  height: 1080px;
  transform: scale(0.125);
  transform-origin: top left;
  pointer-events: none;
}

/* Full-size dock representation */

.space-preview-dock-full {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 64px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Individual note in preview */

.space-preview-note {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.space-preview-note.video,
.space-preview-note.website,
.space-preview-note.game {
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

.space-preview-note.image {
  background: transparent !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Text note content */

.preview-note-text {
  padding: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  height: 100%;
}

/* Image note */

.preview-note-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video note with thumbnail */

.preview-note-video {
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
}

.preview-note-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-note-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 0, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* Website note */

.preview-note-website {
  width: 100%;
  height: 100%;
  background: rgba(30, 30, 35, 0.95);
  display: flex;
  flex-direction: column;
}

.preview-note-website-bar {
  height: 28px;
  background: rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Game note */

.preview-note-game {
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 25, 0.95);
  display: flex;
  flex-direction: column;
}

.preview-note-game-bar {
  height: 32px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(var(--accent-rgb), 0.9));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  font-weight: 600;
}

.preview-note-game img {
  flex: 1;
  width: 100%;
  object-fit: cover;
}

/* Embed preview */

.space-preview-note.embed {
  background: rgba(30, 30, 40, 0.9);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.preview-note-embed {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.preview-note-embed-bar {
  height: 32px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.9), rgba(234, 88, 12, 0.9));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  font-weight: 600;
}

/* Empty state */

.space-preview-empty-full {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 24px;
}

/* Delete confirmation dialog */

.space-delete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spaceDeleteFadeIn 0.15s ease;
}

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

.space-delete-dialog {
  background: rgba(30, 30, 40, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px 28px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  animation: spaceDeleteSlideIn 0.2s ease;
}

@keyframes spaceDeleteSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.space-delete-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.1);
  color: rgba(239, 68, 68, 0.8);
}

.space-delete-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 6px;
}

.space-delete-message {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin-bottom: 18px;
}

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

.space-delete-btn {
  flex: 1;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s ease;
}

.space-delete-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.space-delete-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.space-delete-btn.confirm {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.9);
}

.space-delete-btn.confirm:hover {
  background: rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 1);
}

/* Overlay backdrop */

.spaces-popup-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(15, 15, 20, 0.85) 0%,
    rgba(0, 0, 0, 0.92) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100003;
  animation: spaces-popup-overlay-in 0.25s ease-out;
}

@keyframes spaces-popup-overlay-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
}

/* Main popup container */

.spaces-popup {
  background: linear-gradient(
    145deg,
    rgba(40, 40, 50, 0.9) 0%,
    rgba(25, 25, 32, 0.95) 50%,
    rgba(20, 20, 28, 0.98) 100%
  );
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset;
  min-width: 400px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  animation: spaces-popup-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spaces-popup-in {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Header */

.spaces-popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 100%
  );
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.spaces-popup-header svg {
  color: rgba(var(--accent-rgb), 0.9);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.4));
}

.spaces-popup-hint {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 10px;
  border-radius: 20px;
}

/* Grid of desktops */

.spaces-popup-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px;
  justify-content: center;
  max-height: calc(80vh - 140px);
  overflow-y: auto;
}

/* Individual desktop item */

.spaces-popup-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.spaces-popup-item:hover {
  transform: translateY(-4px);
}

.spaces-popup-item:hover .spaces-popup-preview,
.spaces-popup-item.selected .spaces-popup-preview {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow:
    0 0 0 2px rgba(var(--accent-rgb), 0.25),
    0 8px 32px rgba(var(--accent-rgb), 0.2),
    0 4px 16px rgba(0, 0, 0, 0.3);
}

.spaces-popup-item.current .spaces-popup-preview {
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.2);
}

.spaces-popup-item.selected.current .spaces-popup-preview {
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.3),
    0 8px 32px rgba(34, 197, 94, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Preview container */

.spaces-popup-preview {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(0, 0, 0, 0.2);
}

/* Use larger viewport for popup preview */

.spaces-popup-preview .space-preview-viewport.popup-viewport {
  width: 280px;
  height: 175px;
}

/* Number indicator badge */

.spaces-popup-number {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease;
}

.spaces-popup-item.selected .spaces-popup-number {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.9));
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.4);
}

.spaces-popup-item.current .spaces-popup-number {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9));
  border-color: rgba(34, 197, 94, 0.8);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

/* Label below preview */

.spaces-popup-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.spaces-popup-item:hover .spaces-popup-label,
.spaces-popup-item.selected .spaces-popup-label {
  color: rgba(255, 255, 255, 0.95);
}

.spaces-popup-check {
  color: rgba(34, 197, 94, 0.9);
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
}

/* Footer with hints */

.spaces-popup-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 100%
  );
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.spaces-popup-footer kbd {
  display: inline-block;
  padding: 3px 7px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Close button on each desktop */

.spaces-popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
  z-index: 10;
  color: rgba(255, 255, 255, 0.6);
}

.spaces-popup-close:hover {
  background: rgba(239, 68, 68, 0.8);
  border-color: rgba(239, 68, 68, 0.6);
  color: white;
}

.spaces-popup-item {
  position: relative;
}

.spaces-popup-item:hover .spaces-popup-close {
  opacity: 1;
}

/* Add new desktop button */

.spaces-popup-add {
  border: none;
  background: none;
  cursor: pointer;
}

.spaces-popup-add-preview {
  width: 280px;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
}

.spaces-popup-add:hover .spaces-popup-add-preview {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.1);
  color: rgba(var(--accent-rgb), 0.8);
}

/* Drag and drop states */

.spaces-popup-item {
  cursor: grab;
}

.spaces-popup-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.spaces-popup-item.drag-over .spaces-popup-preview {
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.3),
    0 8px 32px rgba(var(--accent-rgb), 0.3);
  transform: scale(1.02);
}

/* Don't allow dragging the add button */

.spaces-popup-add {
  cursor: pointer;
}

/* Rename input */

.spaces-popup-rename-input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  width: 120px;
  outline: none;
}

.spaces-popup-rename-input:focus {
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}
/* ── Server Down (default) ─────────────────────────────────────── */

.backend-connection-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bcOverlayFadeIn 0.4s ease;
}

.backend-connection-overlay.origin-mode {
  background: #0a0a0e;
}

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

.backend-connection-modal {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 2.5rem 2.5rem 2rem;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  animation: bcModalSlideIn 0.3s ease;
}

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

.backend-connection-icon {
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1rem;
}

.backend-connection-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.5rem;
}

.backend-connection-message {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.backend-connection-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1.25rem;
}

.backend-connection-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  animation: bcPulse 1.5s ease-in-out infinite;
}

@keyframes bcPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.backend-connection-retry {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.backend-connection-retry:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

.backend-connection-retry:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ── Origin Unreachable — calm, minimal full-screen ───────────── */

.bc-origin-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: bcOriginFadeIn 0.8s ease;
}

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

/* Subtle radial glow behind the orb */
.bc-origin-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: bcGlowPulse 4s ease-in-out infinite;
}

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

.bc-origin-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Animated concentric rings */
.bc-origin-orb {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 2rem;
}

.bc-origin-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.2);
  animation: bcRingSpin 8s linear infinite;
}

.bc-origin-orb-ring::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.6);
  transform: translateX(-50%);
}

.bc-origin-orb-ring-2 {
  inset: 12px;
  border-color: rgba(167, 139, 250, 0.15);
  animation-duration: 5s;
  animation-direction: reverse;
}

.bc-origin-orb-ring-2::after {
  background: rgba(167, 139, 250, 0.4);
  width: 3px;
  height: 3px;
}

.bc-origin-orb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a78bfa;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px 6px rgba(167, 139, 250, 0.3);
  animation: bcCorePulse 2s ease-in-out infinite;
}

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

@keyframes bcCorePulse {
  0%, 100% { opacity: 0.6; box-shadow: 0 0 12px 4px rgba(167, 139, 250, 0.2); }
  50% { opacity: 1; box-shadow: 0 0 24px 8px rgba(167, 139, 250, 0.35); }
}

/* Text */
.bc-origin-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.03em;
  margin: 0 0 0.35rem;
  min-width: 140px;
  text-align: center;
}

.bc-origin-hint {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.25);
  margin: 0 0 0.75rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 0.02em;
}

.bc-origin-diag {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.bc-origin-diag-item {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.2);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.bc-origin-last-check {
  font-size: 0.65rem;
  color: rgba(255, 185, 100, 0.5);
  margin: 0 0 0.75rem;
  max-width: 260px;
  text-align: center;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.bc-origin-hints {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.15);
  margin-bottom: 1.25rem;
}

.bc-origin-safe {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 1.5rem;
}

.bc-origin-safe svg {
  opacity: 0.5;
}

.bc-origin-retry {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  padding: 0.4rem 1.25rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bc-origin-retry:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
}

.bc-origin-retry:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Disable text selection on OS chrome — keep it on content areas */
.os-desktop {
  -webkit-user-select: none;
  user-select: none;
}

/* Re-enable selection only for actual text content — not whole window body */
.os-desktop textarea,
.os-desktop input,
.os-desktop [contenteditable],
.os-desktop .cm-editor,
.os-desktop .markdown-content,
.os-desktop .ai-chat-messages,
.os-desktop .council-message-content,
.os-desktop .editor-content,
.os-desktop .reading-content,
.os-desktop pre,
.os-desktop code {
  -webkit-user-select: text;
  user-select: text;
}

/* Hide sidebar and app shell elements in OS desktop mode */
body.os-desktop-mode .sidebar {
  display: none !important;
}

body.os-desktop-mode .app-content {
  margin-left: 0 !important;
  padding: 0 !important;
}

body.os-desktop-mode .app-grid {
  padding: 0 !important;
  max-width: none !important;
}

body.os-desktop-mode .fullscreen-toggle-btn {
  display: none !important;
}

body.os-desktop-mode .focus-controls-wrapper {
  display: none !important;
}

/* OS-Style Desktop */
.os-desktop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: var(--bg-color);
  user-select: none;
  -webkit-user-select: none;
}

/* Zen writing mode: keep only the document surface */
.os-desktop.os-writing-zen .window {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.os-desktop.os-writing-zen .window-titlebar,
.os-desktop.os-writing-zen .window-resize-handle,
.os-desktop.os-writing-zen .window-context-menu,
.os-desktop.os-writing-zen .snap-divider,
.os-desktop.os-writing-zen .snap-divider-horizontal,
.os-desktop.os-writing-zen .ai-bond-separator {
  display: none !important;
}

/* Space name OSD — always in DOM, animated via class */
.space-name-osd {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: 100;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.7);
  padding: 20px 48px;
  border-radius: 16px;
  pointer-events: none;
  z-index: 9999999;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.25s ease-out;
}

.space-name-osd.visible {
  opacity: 1;
  transition: opacity 0.05s ease;
}

/* Space transition animations — GPU-accelerated crossfade */
/* Only animate visible content, not hidden windows from other spaces */
.os-desktop.space-transitioning .desktop-sticky-notes,
.os-desktop.space-transitioning .os-desktop-shortcuts-layer,
.os-desktop.space-transitioning .desktop-widgets-layer,
.os-desktop.space-transitioning .os-window:not([style*="display: none"]) {
  animation-fill-mode: both;
  will-change: opacity, transform;
}

/* Phase 1: Exit */
.os-desktop.space-transitioning.left .desktop-sticky-notes,
.os-desktop.space-transitioning.left .os-desktop-shortcuts-layer,
.os-desktop.space-transitioning.left .desktop-widgets-layer,
.os-desktop.space-transitioning.left .os-window:not([style*="display: none"]),
.os-desktop.space-transitioning.right .desktop-sticky-notes,
.os-desktop.space-transitioning.right .os-desktop-shortcuts-layer,
.os-desktop.space-transitioning.right .desktop-widgets-layer,
.os-desktop.space-transitioning.right .os-window:not([style*="display: none"]) {
  animation: space-dissolve-out 0.08s ease-out both;
}

/* Phase 2: Enter */
.os-desktop.space-transitioning.enter-left .desktop-sticky-notes,
.os-desktop.space-transitioning.enter-left .os-desktop-shortcuts-layer,
.os-desktop.space-transitioning.enter-left .desktop-widgets-layer,
.os-desktop.space-transitioning.enter-left .os-window:not([style*="display: none"]),
.os-desktop.space-transitioning.enter-right .desktop-sticky-notes,
.os-desktop.space-transitioning.enter-right .os-desktop-shortcuts-layer,
.os-desktop.space-transitioning.enter-right .desktop-widgets-layer,
.os-desktop.space-transitioning.enter-right .os-window:not([style*="display: none"]) {
  animation: space-dissolve-in 0.12s ease-out both;
}

@keyframes space-dissolve-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.98); }
}

@keyframes space-dissolve-in {
  from { opacity: 0; transform: scale(1.01); }
  to   { opacity: 1; transform: scale(1); }
}

/* Wallpaper — no animation, stays still */
.os-desktop.space-transitioning.left .os-desktop-wallpaper,
.os-desktop.space-transitioning.enter-left .os-desktop-wallpaper,
.os-desktop.space-transitioning.right .os-desktop-wallpaper,
.os-desktop.space-transitioning.enter-right .os-desktop-wallpaper {
  /* no animation — wallpaper is static during switch */
}

/* Legacy keyframes kept for compatibility */
@keyframes space-wallpaper-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes space-wallpaper-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

/* Wallpaper image layer */
.os-desktop-wallpaper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  cursor: default;
  /* Ensure it can receive pointer events */
  pointer-events: auto;
}

/* Overlay for better contrast */
.os-desktop-wallpaper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--os-wallpaper-overlay);
  pointer-events: none;
}


/* Hidden music player - just for state management */
.os-music-player-hidden {
  position: fixed;
  bottom: -9999px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}


/* Windows container */
.os-windows-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 80px; /* Leave space for dock */
  overflow: hidden;
}

/* AI Bond Separator - draggable divider between bonded window and AI panel */
.ai-bond-separator {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 20px;
  margin-left: -10px;
  cursor: col-resize;
  z-index: 10003; /* Same level as AI panel overlay */
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-bond-separator::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  width: 2px;
  background: rgba(var(--accent-rgb), 0.2);
  transition: background 0.2s ease;
}

.ai-bond-separator:hover::before,
.ai-bond-separator.dragging::before {
  background: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}

.ai-bond-separator-handle {
  position: relative;
  width: 16px;
  height: 48px;
  background: rgba(30, 30, 40, 0.85);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 8px;
  transition: all 0.15s ease;
  z-index: 2;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  /* Three grip lines via box-shadow on a pseudo-element */
}

.ai-bond-separator-handle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 14px;
  /* Three horizontal lines using box-shadow */
  background: transparent;
  box-shadow:
    0 -4px 0 0 rgba(var(--accent-rgb), 0.6),
    0  0   0 0 rgba(var(--accent-rgb), 0.6),
    0  4px 0 0 rgba(var(--accent-rgb), 0.6);
  /* Each "shadow" is a 8px × 1px line */
}

.ai-bond-separator:hover .ai-bond-separator-handle,
.ai-bond-separator.dragging .ai-bond-separator-handle {
  background: rgba(30, 30, 40, 0.95);
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}

.ai-bond-separator:hover .ai-bond-separator-handle::before,
.ai-bond-separator.dragging .ai-bond-separator-handle::before {
  box-shadow:
    0 -4px 0 0 rgba(var(--accent-rgb), 0.9),
    0  0   0 0 rgba(var(--accent-rgb), 0.9),
    0  4px 0 0 rgba(var(--accent-rgb), 0.9);
}

.ai-bond-separator.dragging {
  background: rgba(var(--accent-rgb), 0.1);
}

/* Light theme: neutral separator instead of accent green */
body.light .ai-bond-separator::before {
  background: rgba(0, 0, 0, 0.1);
}
body.light .ai-bond-separator:hover::before,
body.light .ai-bond-separator.dragging::before {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
body.light .ai-bond-separator-handle {
  background: rgba(245, 245, 250, 0.95);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
body.light .ai-bond-separator-handle::before {
  box-shadow:
    0 -4px 0 0 rgba(0, 0, 0, 0.25),
    0  0   0 0 rgba(0, 0, 0, 0.25),
    0  4px 0 0 rgba(0, 0, 0, 0.25);
}
body.light .ai-bond-separator:hover .ai-bond-separator-handle,
body.light .ai-bond-separator.dragging .ai-bond-separator-handle {
  background: rgba(245, 245, 250, 1);
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
body.light .ai-bond-separator.dragging {
  background: rgba(0, 0, 0, 0.04);
}

/* Prevent text selection and iframe capture while dragging separator */
body.dragging-separator {
  user-select: none !important;
  cursor: col-resize !important;
}

body.dragging-separator iframe {
  pointer-events: none !important;
}

/* AI panel overlay tracks CSS variable during drag */
body.dragging-separator .ai-chat-overlay {
  width: var(--ai-panel-width) !important;
  transition: none !important;
}

/* Snap Divider - draggable divider between left/right snapped windows */
.snap-divider {
  position: fixed;
  width: 1px;
  cursor: col-resize;
  background: rgba(255, 255, 255, 0.08);
}

/* Wider invisible hit area for easy grabbing */
.snap-divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 9px;
  background: transparent;
  transition: background 0.15s ease;
}

.snap-divider:hover::before,
.snap-divider.dragging::before {
  background: rgba(var(--accent-rgb), 0.3);
}

.snap-divider-handle {
  width: 4px;
  height: 48px;
  background: rgba(var(--accent-rgb), 0.4);
  border-radius: 2px;
  transition: all 0.2s ease;
  opacity: 0;
}

.snap-divider:hover .snap-divider-handle,
.snap-divider.dragging .snap-divider-handle {
  opacity: 1;
  background: rgba(var(--accent-rgb), 0.7);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}

.snap-divider.dragging {
  z-index: 2147483640 !important;
}

/* Prevent text selection and iframe mouse capture while dragging snap divider */
body.dragging-snap-divider {
  user-select: none !important;
  cursor: col-resize !important;
}

body.dragging-snap-divider iframe {
  pointer-events: none !important;
}

/* Horizontal Snap Divider - between top/bottom snapped windows */
.snap-divider-horizontal {
  position: fixed;
  height: 8px;
  margin-top: -4px;
  cursor: row-resize;
  /* z-index set inline to match snapped windows */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}

.snap-divider-horizontal::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  height: 6px;
  border-radius: 3px;
  background: transparent;
  transition: background 0.2s ease;
}

.snap-divider-horizontal:hover::before,
.snap-divider-horizontal.dragging::before {
  background: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

.snap-divider-horizontal .snap-divider-handle {
  width: 48px;
  height: 4px;
  background: rgba(var(--accent-rgb), 0.4);
  border-radius: 2px;
  transition: all 0.2s ease;
  opacity: 0;
}

.snap-divider-horizontal:hover .snap-divider-handle,
.snap-divider-horizontal.dragging .snap-divider-handle {
  opacity: 1;
  background: rgba(var(--accent-rgb), 0.7);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}

.snap-divider-horizontal.dragging {
  z-index: 2147483640 !important;
}

/* Prevent text selection while dragging horizontal snap divider */
body.dragging-snap-divider-h {
  user-select: none !important;
  cursor: row-resize !important;
}

body.dragging-snap-divider-h iframe {
  pointer-events: none !important;
}

/* Desktop Context Menu */
.os-desktop-context-menu {
  position: fixed;
  min-width: 200px;
  padding: 6px;
  background: var(--os-context-bg, rgba(30, 30, 35, 0.95));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 12px;
  border: 1px solid var(--os-glass-border, rgba(255, 255, 255, 0.1));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 99999999; /* Above dock (9999998) and dock trigger (9999999) */
  animation: desktopContextMenuIn 0.12s ease-out;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto !important;
}

@keyframes desktopContextMenuIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.os-desktop-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--os-text-primary, rgba(255, 255, 255, 0.95));
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.1s ease;
  pointer-events: auto;
}

.os-desktop-context-item:hover {
  background: var(--os-hover-bg, rgba(255, 255, 255, 0.1));
}

.os-desktop-context-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.os-desktop-context-shortcut {
  margin-left: auto;
  color: var(--os-text-muted);
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.os-desktop-context-divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--os-divider, rgba(255, 255, 255, 0.1));
}

/* Context menu header for multi-selection */
.os-desktop-context-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 8px;
  color: var(--os-text-secondary, rgba(255, 255, 255, 0.6));
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.os-desktop-context-header svg {
  opacity: 0.6;
  flex-shrink: 0;
}

/* Context menu submenu */
.os-desktop-context-submenu-container {
  position: relative;
  pointer-events: auto;
}

.os-desktop-context-item.has-submenu {
  justify-content: space-between;
}

.os-desktop-context-item.has-submenu .submenu-arrow {
  opacity: 0.5;
  margin-left: auto;
}

.os-desktop-context-submenu {
  position: absolute;
  left: 100%;
  top: -6px;
  min-width: 140px;
  padding: 6px;
  background: var(--os-context-bg, rgba(30, 30, 35, 0.95));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 12px;
  border: 1px solid var(--os-glass-border, rgba(255, 255, 255, 0.1));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 100001;
  animation: desktopContextMenuIn 0.12s ease-out;
}

/* Flip submenu to left when near right edge */
.os-desktop-context-submenu.flip-left {
  left: auto;
  right: 100%;
}

/* Invisible bridge to connect parent item to submenu */
.os-desktop-context-submenu::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  width: 12px;
  height: 100%;
}

/* Bridge on right side when flipped left */
.os-desktop-context-submenu.flip-left::before {
  left: auto;
  right: -12px;
}

.os-desktop-context-item.has-submenu.active {
  background: var(--os-hover-bg, rgba(255, 255, 255, 0.1));
}

.os-desktop-context-item.danger {
  color: rgba(239, 68, 68, 0.9);
}

.os-desktop-context-item.danger:hover {
  background: rgba(239, 68, 68, 0.15);
}

.os-desktop-context-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.os-desktop-context-item:disabled:hover {
  background: transparent;
}

/* Wider desktops submenu */
.os-desktop-context-submenu.desktops-submenu {
  min-width: 180px;
}

/* Wallpaper submenu */
.os-desktop-context-submenu.wallpaper-submenu {
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
}

.os-desktop-context-item.wallpaper-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
}

.wallpaper-thumbnail {
  width: 48px;
  height: 28px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.os-desktop-context-item.wallpaper-item.active .wallpaper-thumbnail {
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3);
}

.wallpaper-check {
  margin-left: auto;
  color: rgba(34, 197, 94, 0.9);
}

/* ============================================
   Desktop Shortcuts
   ============================================ */

.os-desktop-shortcuts {
  position: fixed;
  inset: 28px 0 80px 0;
  pointer-events: none;
  z-index: 5;
}

.os-desktop-shortcut {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.os-desktop-shortcut:hover {
  background: rgba(255, 255, 255, 0.1);
}

.os-desktop-shortcut:active,
.os-desktop-shortcut.dragging {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.15);
}

.os-desktop-shortcut.dragging {
  cursor: grabbing;
  z-index: 100;
}

.os-desktop-shortcut.selected {
  outline: 2px dashed rgba(255, 255, 255, 0.6);
  outline-offset: 6px;
  border-radius: 10px;
}

.os-desktop-shortcut.selected:hover {
  outline: 2px dashed rgba(255, 255, 255, 0.8);
}

.os-desktop-shortcut-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary, rgba(255, 255, 255, 0.9));
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.os-desktop-shortcut:hover .os-desktop-shortcut-icon {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.os-desktop-shortcut-name {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--os-text-primary, rgba(255, 255, 255, 0.92));
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: 0.01em;
}

/* Alias arrow — small curved arrow in bottom-left corner */
.shortcut-alias-arrow {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 11px;
  height: 11px;
  color: rgba(255, 255, 255, 0.45);
}

/* Non-app shortcut styles (threads, projects, tasks, files, folders) */
.os-desktop-shortcut.non-app .os-desktop-shortcut-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--shortcut-accent, rgba(255, 255, 255, 0.9));
}

.os-desktop-shortcut.non-app:hover .os-desktop-shortcut-icon {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Light Theme Desktop Shortcuts ── */
body.light .os-desktop-shortcut:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .os-desktop-shortcut:active,
body.light .os-desktop-shortcut.dragging {
  background: rgba(0, 0, 0, 0.06);
}

body.light .os-desktop-shortcut.selected {
  outline-color: rgba(var(--accent-rgb), 0.5);
}

body.light .os-desktop-shortcut.selected:hover {
  outline-color: rgba(var(--accent-rgb), 0.7);
}

body.light .os-desktop-shortcut-icon {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.05);
  color: rgba(30, 30, 40, 0.8);
}

body.light .os-desktop-shortcut:hover .os-desktop-shortcut-icon {
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.06);
}

body.light .os-desktop-shortcut-name {
  color: rgba(20, 20, 30, 0.85);
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.7),
    0 0 6px rgba(255, 255, 255, 0.4);
}

body.light .os-desktop-shortcut.non-app .os-desktop-shortcut-icon {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

body.light .shortcut-alias-arrow {
  color: rgba(0, 0, 0, 0.3);
}

/* ============================================
   App Picker Modal
   ============================================ */

.os-desktop-app-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
  animation: appPickerFadeIn 0.15s ease-out;
}

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

.os-desktop-app-picker {
  width: 90%;
  max-width: 500px;
  max-height: 70vh;
  background: var(--os-context-bg, rgba(30, 30, 35, 0.95));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  border: 1px solid var(--os-glass-border, rgba(255, 255, 255, 0.1));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: appPickerSlideIn 0.2s ease-out;
}

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

.os-desktop-app-picker-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--os-divider, rgba(255, 255, 255, 0.1));
  color: var(--os-text-primary, rgba(255, 255, 255, 0.95));
  font-size: 14px;
  font-weight: 600;
}

.os-desktop-app-picker-header svg {
  opacity: 0.7;
}

.os-desktop-app-picker-close {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary, rgba(255, 255, 255, 0.6));
  cursor: pointer;
  transition: all 0.15s ease;
}

.os-desktop-app-picker-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--os-text-primary, rgba(255, 255, 255, 0.95));
}

.os-desktop-app-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  padding: 16px;
  max-height: calc(70vh - 60px);
  overflow-y: auto;
}

/* Custom scrollbar for app picker */
.os-desktop-app-picker-grid::-webkit-scrollbar {
  width: 8px;
}

.os-desktop-app-picker-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.os-desktop-app-picker-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.os-desktop-app-picker-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.os-desktop-app-picker-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 8px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--os-text-primary, rgba(255, 255, 255, 0.95));
  transition: background 0.15s ease;
}

.os-desktop-app-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.os-desktop-app-picker-item.on-desktop {
  background: rgba(255, 255, 255, 0.08);
}

.os-desktop-app-picker-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.os-desktop-app-picker-icon-btn:focus {
  outline: none;
}

.os-desktop-app-picker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--os-icon-bg, rgba(255, 255, 255, 0.15));
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  color: var(--os-text-primary, rgba(255, 255, 255, 0.95));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.os-desktop-app-picker-icon-btn:hover .os-desktop-app-picker-icon {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.os-desktop-app-picker-check {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.9);
  border-radius: 50%;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.os-desktop-app-picker-item span {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-desktop-app-picker-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--os-text-secondary, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
}

.os-desktop-app-picker-pin:focus {
  outline: none;
}

.os-desktop-app-picker-pin:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--os-text-primary, rgba(255, 255, 255, 0.95));
}

.os-desktop-app-picker-pin.pinned {
  background: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-light);
}

.os-desktop-app-picker-pin.pinned:hover {
  background: rgba(var(--accent-rgb), 0.4);
}

.os-desktop-app-picker-empty {
  padding: 32px;
  text-align: center;
  color: var(--os-text-secondary, rgba(255, 255, 255, 0.5));
  font-size: 13px;
}

/* ============================================
   Widget Selection Wrapper
   ============================================ */

.widget-selection-wrapper {
  display: contents;
}


/* ============================================
   Keyboard Shortcuts Overlay
   ============================================ */

/* ── Keyboard shortcuts overlay ── */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999999;
  animation: shortcutsIn 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shortcutsIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.shortcuts-panel {
  background: var(--os-glass-bg-solid);
  border: 1px solid var(--os-glass-border);
  border-radius: 20px;
  padding: 1.75rem 2rem 2rem;
  max-width: 680px;
  width: 92%;
  box-shadow:
    var(--os-glass-shadow),
    0 0 80px rgba(var(--accent-rgb), 0.06);
}

.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--os-divider);
}

.shortcuts-header h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--os-text-primary);
  letter-spacing: 0.01em;
}

.shortcuts-hint {
  font-size: 0.68rem;
  color: var(--os-text-hint);
  font-weight: 400;
}

.shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2.5rem;
}

.shortcuts-section-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0;
}

.shortcut-row .shortcut-keys {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 70px;
}

.shortcut-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  background: var(--os-btn-bg);
  border: 1px solid var(--os-btn-border);
  border-radius: 5px;
  font-size: 0.72rem;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--os-text-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.shortcut-row .shortcut-label {
  margin-left: 0.4rem;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-weight: 400;
}
/* Desktop Widget - Premium Glassmorphism */
.desktop-widget {
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
  color: white;
  overflow: visible; /* Allow rotate handle to show above */
  user-select: none;
  min-width: 180px;
  /* Use will-change for GPU acceleration */
  will-change: transform;
  /* Transition for hover effects only, not position */
  transition:
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.desktop-widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: 20px 20px 0 0;
}

.desktop-widget:hover {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 0 60px rgba(255, 255, 255, 0.03);
}

/* Selection state for multi-select */
.desktop-widget.selected {
  outline: 2px dashed rgba(255, 255, 255, 0.7);
  outline-offset: 8px;
}

.desktop-widget.selected:hover {
  outline: 2px dashed rgba(255, 255, 255, 0.9);
}

.desktop-widget.dragging {
  cursor: grabbing;
  opacity: 0.92;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 80px rgba(255, 255, 255, 0.05);
}

/* Widget Header - Minimal */
.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: grab;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
}

.widget-header:active {
  cursor: grabbing;
}

.widget-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}

.widget-title svg {
  opacity: 0.5;
}

.widget-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
}

.desktop-widget:hover .widget-close-btn {
  opacity: 1;
}

.widget-close-btn:hover {
  background: rgba(255, 100, 100, 0.3);
  color: #ff6b6b;
}

/* Widget Body */
.widget-body {
  padding: 16px 18px 20px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}

/* ===================== */
/* Timer Widget - iPod Style */
/* ===================== */
.desktop-widget.timer-widget {
  width: 210px;
  overflow: visible;
}

.desktop-widget.timer-widget .widget-body {
  overflow: visible;
  padding: 16px 20px 16px;
}

.timer-widget-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}

/* Circular progress container */
.timer-widget-circle-container {
  position: relative;
  width: 140px;
  height: 140px;
  overflow: visible;
}

.timer-widget-progress-ring {
  transform: rotate(-90deg);
  overflow: visible;
}

.timer-widget-progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
}

.timer-widget-progress-bar {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}

/* Center content inside circle */
.timer-widget-circle-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.timer-widget-activity-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.timer-widget-activity-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.timer-widget-activity-icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.timer-widget-time {
  font-size: 1.6rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.02em;
  transition: all 0.3s ease;
}

.timer-widget-time.running {
  color: var(--activity-color, #4ade80);
  text-shadow: 0 0 20px color-mix(in srgb, var(--activity-color, #4ade80) 50%, transparent);
}

.timer-widget-preset-label {
  background: none;
  border: none;
  padding: 2px 8px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.timer-widget-preset-label:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

/* Controls */
.timer-widget-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.timer-widget-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 10;
}

.timer-widget-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  transform: scale(1.1);
}

.timer-widget-btn:active {
  transform: scale(0.95);
}

.timer-widget-btn.play {
  width: 42px;
  height: 42px;
  background: var(--activity-color, #4ade80);
  color: rgba(0, 0, 0, 0.85);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 20px color-mix(in srgb, var(--activity-color, #4ade80) 30%, transparent);
}

.timer-widget-btn.play:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.timer-widget-btn.play:active {
  transform: scale(0.98);
}

/* Daily total */
.timer-widget-daily {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  letter-spacing: 0.02em;
}

.timer-widget-daily strong {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

/* Timer dropdowns */
.timer-widget-dropdown {
  position: absolute;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.timer-widget-categories-dropdown {
  width: 200px;
}

.timer-widget-presets-dropdown {
  width: 130px;
}

.timer-widget-reset-dropdown {
  top: auto;
  bottom: 100%;
  margin-bottom: 8px;
  width: 140px;
  left: 0;
  transform: none;
}

/* Category search */
.timer-widget-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.timer-widget-search svg {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.timer-widget-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 0.8rem;
  padding: 0;
}

.timer-widget-search input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.timer-widget-categories-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}

.timer-widget-categories-list::-webkit-scrollbar {
  width: 4px;
}

.timer-widget-categories-list::-webkit-scrollbar-track {
  background: transparent;
}

.timer-widget-categories-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.timer-widget-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.timer-widget-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.timer-widget-dropdown-item.active {
  color: var(--cat-color, #4ade80);
  background: rgba(255, 255, 255, 0.05);
}

.timer-widget-dropdown-item.active svg {
  color: var(--cat-color, #4ade80);
}

.timer-widget-dropdown-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.timer-widget-no-results {
  padding: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
}

/* Reset wrapper */
.timer-widget-reset-wrapper {
  position: relative;
}

/* Presets dropdown items */
.timer-widget-presets-dropdown {
  padding: 4px 0;
}

/* ===================== */
/* Music Widget */
/* ===================== */
.music-widget {
  width: 300px;
  overflow: visible;
}

.music-widget .widget-body {
  overflow: visible;
}

.music-widget-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.music-widget-now-playing {
  display: flex;
  align-items: center;
  gap: 14px;
}

.music-widget-art {
  width: 52px;
  height: 52px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.music-widget-art svg {
  color: rgba(255, 255, 255, 0.3);
}

.music-widget-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.music-widget-art-fallback {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.music-widget-art.clickable {
  cursor: pointer;
  position: relative;
}

.music-widget-art-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.15s ease;
  color: white;
}

.music-widget-art.clickable:hover .music-widget-art-overlay {
  opacity: 1;
}

.music-widget-title.clickable {
  cursor: pointer;
  transition: color 0.15s ease;
}

.music-widget-title.clickable:hover {
  color: white;
}

.music-widget-title.copied {
  color: #4ade80 !important;
}

.music-widget-dropdown.playlist-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
}

.music-widget-dropdown-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 4px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.music-widget-dropdown-item.add-playlist {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2px;
  color: rgba(var(--accent-rgb), 0.9);
}

.music-widget-dropdown-item.add-playlist:hover {
  color: white;
}

.music-widget-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.music-widget-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.music-widget-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.music-widget-status {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.music-widget-playlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.6rem;
  cursor: pointer;
  transition: color 0.15s ease;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
}

.music-widget-playlist-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-widget-playlist-btn:hover {
  color: rgba(255, 255, 255, 0.7);
}

.music-widget-playlist-btn.active {
  color: rgba(255, 255, 255, 0.6);
}

.music-widget-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.music-widget-status.buffering::before {
  background: #f59e0b;
  animation: pulse-glow 0.8s ease-in-out infinite;
}

.music-widget-status.buffering {
  color: #f59e0b;
}

/* Loader animation */
.music-widget-loader {
  animation: spin 1s linear infinite;
}

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

.music-widget-btn.buffering {
  opacity: 0.7;
  cursor: wait;
}

.music-widget-content:has(.music-widget-btn.play:not(:hover)) .music-widget-status::before {
  background: rgba(255, 255, 255, 0.3);
}

/* Playing indicator animation */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.music-widget-status.playing::before {
  background: #4ade80;
  animation: pulse-glow 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.music-widget-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.music-widget-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 10;
}

.music-widget-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  transform: scale(1.08);
}

.music-widget-btn:active {
  transform: scale(0.95);
}

.music-widget-btn.play {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.95);
  color: rgba(0, 0, 0, 0.85);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 255, 255, 0.1);
}

.music-widget-btn.play:hover {
  transform: scale(1.08);
  background: white;
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(255, 255, 255, 0.15);
}

.music-widget-btn.play:active {
  transform: scale(0.98);
}

.music-widget-btn.star {
  color: rgba(255, 255, 255, 0.4);
}

.music-widget-btn.star:hover {
  color: #fbbf24;
}

.music-widget-btn.star.active {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
}

.music-widget-btn.star.active svg {
  fill: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

/* Volume slider */
.music-widget-volume {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  margin-top: 4px;
}

.music-widget-volume svg {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.music-widget-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.music-widget-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.music-widget-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.music-widget-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.music-widget-volume-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Empty state */
.music-widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  padding: 12px 0;
}

.music-widget-empty svg {
  opacity: 0.4;
}

.music-widget-empty p {
  font-size: 0.75rem;
  margin: 0;
}

.music-widget-add-playlist-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-top: 4px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.music-widget-add-playlist-btn:hover {
  background: rgba(var(--accent-rgb), 0.35);
  color: white;
}

.music-widget-add-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.music-widget-add-input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
  outline: none;
  transition: all 0.15s ease;
}

.music-widget-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}

.music-widget-add-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.music-widget-add-input:disabled {
  opacity: 0.6;
}

.music-widget-add-error {
  font-size: 0.65rem;
  color: #ef4444;
  text-align: left;
}

.music-widget-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.music-widget-add-btn {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.music-widget-add-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.music-widget-add-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.music-widget-add-btn.primary {
  background: rgba(var(--accent-rgb), 0.7);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  color: white;
}

.music-widget-add-btn.primary:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.9);
}

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

/* Playlist selector */
.music-widget-playlist-selector {
  position: relative;
  margin-bottom: 10px;
}


.music-widget-playlist-name {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-widget-dropdown {
  position: absolute;
  top: 100%;
  left: -18px;
  right: -18px;
  margin-top: 4px;
  padding: 4px 0;
  background: rgba(25, 25, 28, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  overflow-y: auto;
  max-height: 240px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.music-widget-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  border-radius: 6px;
  margin: 1px 4px;
  width: calc(100% - 8px);
}

.music-widget-dropdown-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.music-widget-dropdown-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  font-weight: 500;
}

.music-widget-dropdown-item-meta {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

.music-widget-dropdown-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

/* Playlist button thumbnail */
.music-widget-playlist-thumb {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Dropdown item thumbnails */
.music-widget-dropdown-thumb {
  width: 44px;
  height: 32px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}

.music-widget-dropdown-thumb-placeholder {
  width: 44px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.3);
}

.music-widget-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.music-widget-dropdown-item.active {
  background: rgba(74, 222, 128, 0.08);
}

.music-widget-dropdown-item.active .music-widget-dropdown-item-name {
  color: rgba(255, 255, 255, 0.95);
}

.music-widget-dropdown-item.active:hover {
  background: rgba(74, 222, 128, 0.12);
}

/* Track list */
.music-widget-tracks {
  position: absolute;
  top: 100%;
  left: -18px;
  right: -18px;
  margin-top: 8px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 10px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.music-widget-tracks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding: 0 4px;
}

.music-widget-playlist-switcher {
  padding: 0 4px 8px;
}

.music-widget-playlist-select {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.65rem;
  padding: 4px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.music-widget-playlist-select:hover {
  background: rgba(255, 255, 255, 0.12);
}

.music-widget-playlist-select:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.4);
}

.music-widget-tracks-loading {
  padding: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.65rem;
}

.music-widget-tracks-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.music-widget-tracks-list::-webkit-scrollbar {
  width: 4px;
}

.music-widget-tracks-list::-webkit-scrollbar-track {
  background: transparent;
}

.music-widget-tracks-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.music-widget-track-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.music-widget-track-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.music-widget-track-item.active {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.music-widget-track-index {
  width: 20px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.65rem;
  text-align: right;
}

.music-widget-track-item.active .music-widget-track-index {
  color: rgba(74, 222, 128, 0.6);
}

.music-widget-track-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-widget-track-playing {
  flex-shrink: 0;
  color: #4ade80;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

/* Active state for list button */
.music-widget-btn.active {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.music-widget-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Favorites dropdown */
.music-widget-favorites .music-widget-tracks-header span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.music-widget-favorites .music-widget-tracks-header svg {
  color: #f472b6;
}

.music-widget-favorites .music-widget-track-index {
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-widget-favorites .music-widget-track-index svg {
  color: #fbbf24;
}

.music-widget-favorites .music-widget-track-item.active .music-widget-track-index svg {
  color: #4ade80;
}

.music-widget-track-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===================== */
/* Resize Handle */
/* ===================== */
.widget-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.widget-resize-handle::before {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 0 3px 0;
}

.desktop-widget:hover .widget-resize-handle {
  opacity: 1;
}

.widget-resize-handle:hover::before {
  border-color: rgba(255, 255, 255, 0.6);
}

.desktop-widget.resizing {
  cursor: nwse-resize;
}

.desktop-widget.resizing .widget-resize-handle {
  opacity: 1;
}

.desktop-widget.resizing .widget-resize-handle::before {
  border-color: rgba(255, 255, 255, 0.8);
}

/* ===================== */
/* Rotate Handle */
/* ===================== */
.widget-rotate-handle {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.5);
  z-index: 10;
}

.widget-rotate-handle:hover {
  transform: translateX(-50%) scale(1.1);
  color: white;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.widget-rotate-handle:active {
  cursor: grabbing;
}

.desktop-widget:hover .widget-rotate-handle {
  opacity: 1;
}

.desktop-widget.rotating {
  cursor: grabbing;
  user-select: none;
}

.desktop-widget.rotating .widget-rotate-handle {
  opacity: 1;
  background: rgba(59, 130, 246, 0.9);
  color: white;
  border-color: rgba(59, 130, 246, 0.5);
}
/* Events Widget */
.events-widget .widget-close-btn {
  opacity: 1;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

.events-widget .widget-close-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
}

.events-widget-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}

.events-widget-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.events-widget-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.events-widget-item.past {
  opacity: 0.4;
}

.events-widget-item.now {
  background: rgba(var(--accent-rgb), 0.08);
  border-left: 2px solid var(--accent);
  padding-left: 6px;
}

.events-widget-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--os-text-muted);
  white-space: nowrap;
  min-width: 70px;
  flex-shrink: 0;
}

.events-widget-item.now .events-widget-time {
  color: var(--accent);
}

.events-widget-now-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: events-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes events-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.events-widget-name {
  font-size: 0.725rem;
  color: var(--os-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.events-widget-item.now .events-widget-name {
  color: var(--os-text-primary);
  font-weight: 500;
}

.events-widget-meet {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.12);
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.events-widget-meet:hover {
  background: rgba(var(--accent-rgb), 0.2);
}

/* Approaching event */
.events-widget-item.approaching {
  background: rgba(251, 191, 36, 0.08);
  border-left: 2px solid rgba(251, 191, 36, 0.7);
  padding-left: 6px;
}

.events-widget-item.approaching .events-widget-time {
  color: #fbbf24;
}

.events-widget-item.approaching .events-widget-name {
  color: var(--os-text-primary);
  font-weight: 500;
}

.events-widget-item.approaching .events-widget-now-dot {
  background: #fbbf24;
}

/* Reminder mode — subtle accent border to draw attention */
.events-widget-reminder {
  border-color: rgba(251, 191, 36, 0.3) !important;
}

/* Light theme */
body.light .events-widget-item.now {
  background: rgba(var(--accent-rgb), 0.06);
}

body.light .events-widget-item.approaching {
  background: rgba(251, 191, 36, 0.06);
}
.login-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 2.5rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 360px;
}

.login-logo {
  margin-bottom: 1.5rem;
}

.login-logo-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #a78bfa, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
}

.login-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.25rem;
  letter-spacing: -0.02em;
}

.login-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.login-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 1.75rem 0;
}

.login-google-btn {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-loading {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  margin: 0;
}

.login-error {
  color: #f87171;
  font-size: 0.8rem;
  margin: 1rem 0 0;
  text-align: center;
  max-width: 280px;
}

.login-footer {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
  margin: 1.5rem 0 0;
}
/* Body Layout & Navigation Styles */

/* 
 * FLAT PANEL SYSTEM
 * Only 2 visual levels: container → content
 * No nested glass panels or redundant borders
 */

.body-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  min-height: 600px;
}

/* Navigation sidebar - subtle, no heavy glass effect */
.body-nav {
  width: 260px;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  padding: 1rem 0.75rem;
  position: sticky;
  top: 2rem;
  /* Subtle separator instead of full panel */
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.body-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.body-nav-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin: 0;
}

.body-nav-actions {
  display: flex;
  gap: 4px;
}

.body-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
  padding-right: 0.5rem;
}

.body-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  width: 100%;
  background: transparent;
  color: inherit;
  opacity: 0.65;
  border-radius: 10px;
  text-align: left;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.body-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  opacity: 0.9;
}

.body-nav-item.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  opacity: 1;
}

/* Content area - no nested panels! */
.body-content {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 1rem;
}

/* When glass-panel is inside body-content, make it transparent/flat */
.body-content .glass-panel {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Caret for nested nav */
.caret {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.caret::before {
  content: '▸';
  font-size: 10px;
}

.caret.open {
  transform: rotate(90deg);
}

.caret.placeholder {
  visibility: hidden;
}

/* Scrollbars for nav */
.body-nav-list::-webkit-scrollbar {
  width: 4px;
}

.body-nav-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

/* Light theme */
body.light .body-nav {
  border-right-color: rgba(0, 0, 0, 0.06);
}

body.light .body-nav-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .body-nav-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .body-nav-item.active {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-dark);
}

body.light .body-nav-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
}

/* Zen theme */
body.zen .body-nav {
  border-right-color: rgba(255, 255, 255, 0.08);
}

body.zen .body-nav-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.zen .body-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.zen .body-nav-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-light);
}

/* Batman theme */
body.batman .body-nav {
  border-right-color: rgba(0, 100, 200, 0.15);
}

body.batman .body-nav-header {
  border-bottom-color: rgba(0, 100, 200, 0.15);
}

body.batman .body-nav-item:hover {
  background: rgba(0, 100, 200, 0.08);
}

body.batman .body-nav-item.active {
  background: rgba(0, 150, 255, 0.15);
  color: #60a5fa;
}


/* Roadmap Page Styles */

.roadmap-phase-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.roadmap-phase-card {
  padding: 24px;
}

.roadmap-phase-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.roadmap-phase-number {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1.4rem;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.08);
}

body.light .roadmap-phase-number {
  border-color: rgba(0, 0, 0, 0.1);
}

.roadmap-phase-heading {
  flex: 1;
  position: relative;
}

.roadmap-phase-heading h3 {
  margin: 4px 0 0;
  font-size: 1.5rem;
}

.phase-id-display {
  font-weight: 600;
  font-size: 1.2rem;
}

.roadmap-phase-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}

.phase-meta-item span {
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  opacity: 0.5;
}

.phase-meta-item p {
  margin: 6px 0 0;
  opacity: 0.95;
  line-height: 1.5;
}

.roadmap-objectives h4,
.roadmap-nonneg h4 {
  margin-bottom: 12px;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.roadmap-nonneg ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0.9;
  list-style: none;
}

.roadmap-nonneg li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.phase-visualization {
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
}

body.light .phase-visualization {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.phase-visualization img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Daily War */
.daily-war-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.daily-war-card {
  padding: 16px;
  display: flex;
  gap: 16px;
}

.daily-war-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
}

body.light .daily-war-icon {
  background: rgba(0, 0, 0, 0.04);
}

.daily-war-body {
  flex: 1;
}

.daily-war-label {
  margin: 0;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
}

.daily-war-question {
  margin-top: 6px;
  opacity: 0.95;
  line-height: 1.6;
}

.daily-war-fix {
  margin: 12px 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.daily-war-fix span {
  font-weight: 600;
  margin-right: 6px;
}

/* Visualizer Button */
.visualize-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: inherit;
}

.visualize-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.visualize-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.phase-actions {
  margin-top: 12px;
}

.phase-actions .visualize-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.roadmap-section-header {
  position: relative;
}

.roadmap-section-header .visualize-btn {
  position: absolute;
  top: 0;
  right: 0;
}
/* ===========================================
   WEEKLY PLAN PAGE
   Uses shared .page-panel styles from AppLayout.css
   =========================================== */

.weekly-plan-page,
.weekly-objectives-page {
  /* Base styles - zen glassmorphism handled by .page-panel class */
}

.weekly-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.light .weekly-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.week-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.week-nav-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.week-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

body.light .week-nav-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

body.light .week-nav-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.8);
}

.week-title {
  text-align: center;
}

.week-title h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
}

.week-dates {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

body.light .week-dates {
  color: rgba(0, 0, 0, 0.5);
}

.week-today-btn {
  padding: 0.4rem 0.8rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.week-today-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

/* Overall Progress Ring */
.overall-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-ring {
  position: relative;
  width: 60px;
  height: 60px;
}

.progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 3;
}

body.light .progress-ring-bg {
  stroke: rgba(0, 0, 0, 0.08);
}

.progress-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.progress-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  font-weight: 600;
}

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

.progress-count {
  font-size: 1rem;
  font-weight: 600;
}

.progress-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

body.light .progress-text {
  color: rgba(0, 0, 0, 0.5);
}

/* No Habits Message */
.no-habits-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

body.light .no-habits-message {
  color: rgba(0, 0, 0, 0.5);
}

.no-habits-message h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.no-habits-message p {
  margin: 0;
  font-size: 0.9rem;
}

.configure-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  color: white;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.configure-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

/* Weekly Categories */
.weekly-categories {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.weekly-category {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

body.light .weekly-category {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.zen .weekly-category {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.category-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background 0.15s ease;
}

.category-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}

body.light .category-toggle:hover {
  background: rgba(0, 0, 0, 0.02);
}

.category-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.category-icon {
  font-size: 1.25rem;
}

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

.category-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.category-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

body.light .category-desc {
  color: rgba(0, 0, 0, 0.45);
}

.category-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mini-progress-bar {
  width: 80px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

body.light .mini-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}

.mini-progress-fill {
  height: 100%;
  background: var(--cat-color);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.category-percentage {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cat-color);
  min-width: 40px;
}

/* Category Habits Grid */
.category-habits {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.75rem;
}

body.light .category-habits {
  border-top-color: rgba(0, 0, 0, 0.06);
}

.habits-grid-header {
  display: grid;
  grid-template-columns: 1fr repeat(7, 44px) 100px;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
}

.habit-info-col {
  /* Empty header for habit info column */
}

.day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

body.light .day-header {
  color: rgba(0, 0, 0, 0.5);
}

.day-header.today {
  color: var(--accent);
}

.day-name {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.day-date {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

body.light .day-date {
  color: rgba(0, 0, 0, 0.7);
}

.day-header.today .day-date {
  color: var(--accent);
}

.progress-col {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

body.light .progress-col {
  color: rgba(0, 0, 0, 0.5);
}

/* Habit Row */
.habit-row {
  display: grid;
  grid-template-columns: 1fr repeat(7, 44px) 100px;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  align-items: center;
  transition: background 0.15s ease;
}

.habit-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

body.light .habit-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.habit-row.complete {
  background: rgba(34, 197, 94, 0.05);
}

.habit-row .habit-info-col {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.habit-row .habit-icon {
  font-size: 1rem;
}

.habit-row .habit-name {
  font-size: 0.85rem;
  font-weight: 500;
}

.habit-target-small {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

body.light .habit-target-small {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.04);
}

/* Day Cell */
.day-cell {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.day-cell:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

body.light .day-cell {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .day-cell:hover {
  background: rgba(0, 0, 0, 0.05);
}

.day-cell.today {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}

.day-cell.checked {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.day-cell.missed {
  background: rgba(239, 68, 68, 0.05);
  border-style: dashed;
}

.empty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

body.light .empty-dot {
  background: rgba(0, 0, 0, 0.1);
}

/* Habit Progress Bar */
.habit-row .progress-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.habit-progress-bar {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

body.light .habit-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}

.habit-progress-fill {
  height: 100%;
  background: var(--cat-color);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.habit-progress-text {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

body.light .habit-progress-text {
  color: rgba(0, 0, 0, 0.5);
}

/* Weekly Stats */
.weekly-stats {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-width: 100px;
}

body.light .stat-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.zen .stat-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.stat-icon {
  font-size: 1.5rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cat-color);
}

.stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body.light .stat-label {
  color: rgba(0, 0, 0, 0.5);
}

/* ===========================================
   WEEKLY FOCUS SECTION
   =========================================== */

.weekly-focus-section {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

body.light .weekly-focus-section {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.zen .weekly-focus-section {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

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

.focus-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}

body.light .focus-title {
  color: rgba(0, 0, 0, 0.5);
}

/* Focus Editor Wrapper - uses EditableMarkdownBlock */
.focus-editor-wrapper {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

body.light .focus-editor-wrapper {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
}

body.zen .focus-editor-wrapper {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.08);
}

.focus-editor-wrapper .editable-markdown-edit-mode {
  min-height: 200px;
}

.focus-editor-wrapper .editable-markdown-editor {
  min-height: 200px !important;
}

.focus-editor-wrapper .editable-markdown-editor-wrapper {
  min-height: 200px;
}

.focus-editor-wrapper .markdown-view {
  min-height: 100px;
  padding: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.focus-editor-wrapper .markdown-view:hover {
  background: rgba(255, 255, 255, 0.02);
}

body.light .focus-editor-wrapper .markdown-view:hover {
  background: rgba(0, 0, 0, 0.02);
}

.focus-editor-wrapper .markdown-empty-placeholder,
.focus-editor-wrapper .muted {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  padding: 1rem;
  cursor: pointer;
  white-space: pre-line;
  line-height: 1.8;
  font-size: 0.9rem;
}

body.light .focus-editor-wrapper .markdown-empty-placeholder,
body.light .focus-editor-wrapper .muted {
  color: rgba(0, 0, 0, 0.35);
}

body.zen .focus-editor-wrapper .muted {
  color: rgba(255, 255, 255, 0.4);
}

/* Focus Tree View */
.focus-tree-view {
  padding: 0.75rem;
  min-height: 100px;
  cursor: pointer;
}

.focus-tree-view ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.focus-tree-view .todo-item-content {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0;
  line-height: 1.5;
}

.focus-tree-view .todo-expand-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: color 0.15s ease;
}

.focus-tree-view .todo-expand-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}

body.light .focus-tree-view .todo-expand-btn {
  color: rgba(0, 0, 0, 0.4);
}

body.light .focus-tree-view .todo-expand-btn:hover {
  color: rgba(0, 0, 0, 0.8);
}

.focus-tree-view .todo-expand-placeholder {
  width: 18px;
  flex-shrink: 0;
}

.focus-tree-view .bullet {
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 1px;
}

.focus-tree-view .todo-text {
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
}

body.light .focus-tree-view .todo-text {
  color: rgba(0, 0, 0, 0.8);
}

.focus-tree-view .todo-nested-list {
  margin-left: 0.5rem;
}

.focus-tree-view li.checked .todo-text {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Weekly Habits Section */
.weekly-habits-section {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

body.light .weekly-habits-section {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.zen .weekly-habits-section {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.habits-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1rem;
}

body.light .habits-section-header {
  color: rgba(0, 0, 0, 0.5);
}

.habits-compact-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.habits-compact-grid .habits-grid-header {
  display: grid;
  grid-template-columns: 1fr repeat(7, 36px) 60px;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.25rem;
}

.habits-compact-grid .habit-row {
  display: grid;
  grid-template-columns: 1fr repeat(7, 36px) 60px;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  align-items: center;
  transition: background 0.15s ease;
}

.habits-compact-grid .habit-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

body.light .habits-compact-grid .habit-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.habits-compact-grid .habit-row.complete {
  background: rgba(34, 197, 94, 0.05);
}

.habits-compact-grid .habit-info-col {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}

.habits-compact-grid .habit-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.habits-compact-grid .habit-name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.habit-target-badge {
  font-size: 0.7rem;
  color: var(--cat-color);
  background: color-mix(in srgb, var(--cat-color) 15%, transparent);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.habits-compact-grid .day-cell {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.habits-compact-grid .day-cell:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

body.light .habits-compact-grid .day-cell {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .habits-compact-grid .day-cell:hover {
  background: rgba(0, 0, 0, 0.05);
}

.habits-compact-grid .day-cell.today {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}

.habits-compact-grid .day-cell.checked {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.habits-compact-grid .day-cell.missed {
  background: rgba(239, 68, 68, 0.05);
  border-style: dashed;
}

.habits-compact-grid .progress-col {
  display: flex;
  align-items: center;
}

.habits-compact-grid .habit-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

body.light .habits-compact-grid .habit-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}

.habits-compact-grid .habit-progress-fill {
  height: 100%;
  background: var(--cat-color);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Category Summary */
.category-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.category-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  flex: 1;
  min-width: 150px;
}

body.light .category-stat {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.zen .category-stat {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.category-stat .stat-icon {
  font-size: 1.25rem;
}

.category-stat .stat-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.category-stat .stat-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

body.light .category-stat .stat-name {
  color: rgba(0, 0, 0, 0.6);
}

.category-stat .stat-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

body.light .category-stat .stat-bar {
  background: rgba(0, 0, 0, 0.08);
}

.category-stat .stat-bar-fill {
  height: 100%;
  background: var(--cat-color);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.category-stat .stat-percentage {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cat-color);
}

/* Loading State */
.habits-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.5);
}

body.light .habits-loading {
  color: rgba(0, 0, 0, 0.5);
}

/* Responsive */
@media (max-width: 900px) {
  .weekly-header {
    flex-direction: column;
    gap: 1rem;
  }

  .habits-grid-header,
  .habit-row {
    grid-template-columns: 1fr repeat(7, 36px) 70px;
  }

  .day-cell {
    width: 32px;
    height: 32px;
  }

  .habits-compact-grid .habits-grid-header,
  .habits-compact-grid .habit-row {
    grid-template-columns: 1fr repeat(7, 32px) 50px;
  }

  .habits-compact-grid .day-cell {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 700px) {
  .habit-row .habit-info-col {
    flex-wrap: wrap;
  }

  .habit-target-small {
    display: none;
  }

  .habits-grid-header,
  .habit-row {
    grid-template-columns: 1fr repeat(7, 32px) 60px;
  }

  .day-cell {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .day-header .day-name {
    font-size: 0.6rem;
  }

  .day-header .day-date {
    font-size: 0.75rem;
  }
}

@media (max-width: 600px) {
  .habits-compact-grid .habit-info-col {
    flex-wrap: wrap;
  }

  .habit-target-badge {
    display: none;
  }

  .habits-compact-grid .habits-grid-header,
  .habits-compact-grid .habit-row {
    grid-template-columns: 1fr repeat(7, 28px) 40px;
  }

  .habits-compact-grid .day-cell {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }

  .category-summary {
    flex-direction: column;
  }

  .category-stat {
    min-width: auto;
  }
}




/* Standalone App Page - fullscreen app container */
.standalone-app-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--os-bg, #0d0d0d);
}

/* Not found state */
.standalone-app-page.standalone-app-not-found {
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: var(--os-text-primary, rgba(255, 255, 255, 0.9));
  text-align: center;
}

.standalone-app-page.standalone-app-not-found h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.standalone-app-page.standalone-app-not-found p {
  color: var(--os-text-muted, rgba(255, 255, 255, 0.5));
  margin: 0;
}

.standalone-app-page.standalone-app-not-found a {
  color: var(--os-accent, #6366f1);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--os-accent, #6366f1);
  margin-top: 1rem;
  transition: all 0.15s ease;
}

.standalone-app-page.standalone-app-not-found a:hover {
  background: var(--os-accent, #6366f1);
  color: white;
}


/* ─── BASE ─── */

.landing-page {
  /* Day theme (default) */
  --lp-bg: #fff;
  --lp-bg-alt: #f5f5f7;
  --lp-text: #1d1d1f;
  --lp-text-2: #6e6e73;
  --lp-text-3: #86868b;
  --lp-glass: rgba(255, 255, 255, 0.75);
  --lp-card-bg: #fbfbfd;
  --lp-card-border: rgba(0, 0, 0, 0.06);
  --lp-tile-bg: #fff;
  --lp-tile-border: rgba(0, 0, 0, 0.05);
  --lp-controls-bg: rgba(255, 255, 255, 0.5);
  --lp-controls-border: rgba(0, 0, 0, 0.08);
  --lp-controls-text: #6e6e73;
  --lp-controls-hover-bg: rgba(255, 255, 255, 0.9);
  --lp-controls-hover-border: rgba(0, 0, 0, 0.12);
  --lp-scrollbar: rgba(0, 0, 0, 0.12);
  --lp-scrollbar-hover: rgba(0, 0, 0, 0.2);
  --lp-cta-bg: #1d1d1f;
  --lp-cta-text: #fff;
  --lp-cta-hover: #333;
  --lp-showcase-bar: #f5f5f7;
  --lp-showcase-border: rgba(0, 0, 0, 0.06);
  --lp-showcase-overlay: linear-gradient(135deg, rgba(30, 30, 46, 0.55), rgba(30, 30, 46, 0.3));
  --lp-shadow: rgba(0, 0, 0, 0.06);
  --lp-shadow-lg: rgba(0, 0, 0, 0.12);
  --lp-ribbon-bg: rgba(255, 255, 255, 0.6);
  --lp-ribbon-text: #555;
  --lp-slider-bg: rgba(255, 255, 255, 0.85);
  --lp-slider-track: rgba(0, 0, 0, 0.12);
  --lp-slider-thumb: #6e6e73;
  --lp-slider-thumb-hover: #1d1d1f;
  --lp-garden-opacity: 0.65;
  --lp-feature-icon-brain-bg: #f0edff;
  --lp-feature-icon-megaphone-bg: #f0f9ff;
  --lp-feature-icon-bookmark-bg: #f0fdf4;
  --lp-feature-icon-globe-bg: #fffbeb;
  --lp-feature-icon-scale-bg: #eef2ff;
  --lp-feature-icon-notebook-bg: #fdf2f8;
  --lp-future-languages-bg: #f0edff;
  --lp-future-health-bg: #fef2f2;
  --lp-future-gym-bg: #fff7ed;
  --lp-future-book-bg: #f0f9ff;
  --lp-future-plane-bg: #ecfeff;
  --lp-future-grad-bg: #eef2ff;
  --lp-future-wallet-bg: #f0fdf4;
  --lp-future-music-bg: #fdf2f8;
  --lp-future-notebook-bg: #f5f3ff;
  --lp-future-calendar-bg: #fffbeb;

  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  color: var(--lp-text);
  background: var(--lp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: var(--lp-scrollbar) transparent;
}

/* Night theme (class-based for manual toggle) */

.landing-page.lp-dark {
  --lp-bg: #0c0f14;
  --lp-bg-alt: #14171d;
  --lp-text: rgba(255, 255, 255, 0.92);
  --lp-text-2: rgba(255, 255, 255, 0.6);
  --lp-text-3: rgba(255, 255, 255, 0.4);
  --lp-glass: rgba(10, 12, 18, 0.75);
  --lp-card-bg: rgba(255, 255, 255, 0.05);
  --lp-card-border: rgba(255, 255, 255, 0.08);
  --lp-tile-bg: rgba(255, 255, 255, 0.06);
  --lp-tile-border: rgba(255, 255, 255, 0.06);
  --lp-controls-bg: rgba(255, 255, 255, 0.1);
  --lp-controls-border: rgba(255, 255, 255, 0.1);
  --lp-controls-text: rgba(255, 255, 255, 0.7);
  --lp-controls-hover-bg: rgba(255, 255, 255, 0.18);
  --lp-controls-hover-border: rgba(255, 255, 255, 0.15);
  --lp-scrollbar: rgba(255, 255, 255, 0.15);
  --lp-scrollbar-hover: rgba(255, 255, 255, 0.25);
  --lp-cta-bg: #e8e8e8;
  --lp-cta-text: #0c0f14;
  --lp-cta-hover: #fff;
  --lp-showcase-bar: #1a1d24;
  --lp-showcase-border: rgba(255, 255, 255, 0.08);
  --lp-showcase-overlay: linear-gradient(135deg, rgba(10, 10, 20, 0.7), rgba(10, 10, 20, 0.45));
  --lp-shadow: rgba(0, 0, 0, 0.2);
  --lp-shadow-lg: rgba(0, 0, 0, 0.4);
  --lp-ribbon-bg: rgba(255, 255, 255, 0.08);
  --lp-ribbon-text: rgba(255, 255, 255, 0.6);
  --lp-slider-bg: rgba(30, 34, 42, 0.9);
  --lp-slider-track: rgba(255, 255, 255, 0.15);
  --lp-slider-thumb: rgba(255, 255, 255, 0.6);
  --lp-slider-thumb-hover: rgba(255, 255, 255, 0.9);
  --lp-garden-opacity: 0.75;
  --lp-feature-icon-brain-bg: rgba(139, 92, 246, 0.15);
  --lp-feature-icon-megaphone-bg: rgba(14, 165, 233, 0.15);
  --lp-feature-icon-bookmark-bg: rgba(34, 197, 94, 0.15);
  --lp-feature-icon-globe-bg: rgba(245, 158, 11, 0.15);
  --lp-feature-icon-scale-bg: rgba(99, 102, 241, 0.15);
  --lp-feature-icon-notebook-bg: rgba(236, 72, 153, 0.15);
  --lp-future-languages-bg: rgba(139, 92, 246, 0.15);
  --lp-future-health-bg: rgba(239, 68, 68, 0.15);
  --lp-future-gym-bg: rgba(249, 115, 22, 0.15);
  --lp-future-book-bg: rgba(14, 165, 233, 0.15);
  --lp-future-plane-bg: rgba(6, 182, 212, 0.15);
  --lp-future-grad-bg: rgba(99, 102, 241, 0.15);
  --lp-future-wallet-bg: rgba(34, 197, 94, 0.15);
  --lp-future-music-bg: rgba(236, 72, 153, 0.15);
  --lp-future-notebook-bg: rgba(167, 139, 250, 0.15);
  --lp-future-calendar-bg: rgba(245, 158, 11, 0.15);
}

.landing-page::-webkit-scrollbar { width: 6px; }

.landing-page::-webkit-scrollbar-track { background: transparent; }

.landing-page::-webkit-scrollbar-thumb { background: var(--lp-scrollbar); border-radius: 3px; }

.landing-page::-webkit-scrollbar-thumb:hover { background: var(--lp-scrollbar-hover); }

/* ─── AMBIENT: vivid orbs behind frosted glass ─── */

/* Layer 1: the colorful orbs (behind) */

.landing-ambient-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Layer 2: frosted glass (on top of orbs, behind content) */

.landing-ambient-glass {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: var(--lp-glass);
  backdrop-filter: blur(100px) saturate(1.4);
  -webkit-backdrop-filter: blur(100px) saturate(1.4);
}

.landing-ambient-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: orbFade 1.5s ease-out forwards;
}

/* warm peach */

.landing-ambient-orb:nth-child(1) {
  width: 300px; height: 300px;
  background: rgba(240, 160, 120, 0.6);
  top: 5%; left: 8%;
  animation: orbFloat1 18s ease-in-out infinite alternate, orbFade 1.5s ease-out forwards;
}

/* soft sage */

.landing-ambient-orb:nth-child(2) {
  width: 260px; height: 260px;
  background: rgba(150, 200, 130, 0.55);
  top: 20%; right: 5%;
  animation: orbFloat2 22s ease-in-out infinite alternate, orbFade 1.5s ease-out 0.2s forwards;
}

/* sky blue */

.landing-ambient-orb:nth-child(3) {
  width: 280px; height: 280px;
  background: rgba(130, 180, 230, 0.55);
  bottom: 12%; left: 15%;
  animation: orbFloat3 16s ease-in-out infinite alternate, orbFade 1.5s ease-out 0.4s forwards;
}

/* soft gold */

.landing-ambient-orb:nth-child(4) {
  width: 240px; height: 240px;
  background: rgba(240, 210, 100, 0.5);
  top: 50%; left: 55%;
  animation: orbFloat4 20s ease-in-out infinite alternate, orbFade 1.5s ease-out 0.3s forwards;
}

/* mint */

.landing-ambient-orb:nth-child(5) {
  width: 220px; height: 220px;
  background: rgba(100, 210, 190, 0.5);
  top: 35%; left: 30%;
  animation: orbFloat5 15s ease-in-out infinite alternate, orbFade 1.5s ease-out 0.5s forwards;
}

/* Night: shift orbs to deeper, cooler tones */

.lp-dark .landing-ambient-orb:nth-child(1) {
  background: rgba(80, 50, 120, 0.5);
}

.lp-dark .landing-ambient-orb:nth-child(2) {
  background: rgba(30, 80, 100, 0.45);
}

.lp-dark .landing-ambient-orb:nth-child(3) {
  background: rgba(40, 60, 130, 0.45);
}

.lp-dark .landing-ambient-orb:nth-child(4) {
  background: rgba(60, 40, 100, 0.4);
}

.lp-dark .landing-ambient-orb:nth-child(5) {
  background: rgba(20, 80, 80, 0.4);
}

@keyframes orbFade {
  to { opacity: 1; }
}

@keyframes orbFloat1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(120px, 80px) scale(1.1); }
  66%  { transform: translate(-60px, 140px) scale(0.95); }
  100% { transform: translate(80px, -40px) scale(1.05); }
}

@keyframes orbFloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-100px, 60px) scale(1.08); }
  66%  { transform: translate(80px, -80px) scale(0.92); }
  100% { transform: translate(-140px, 100px) scale(1.04); }
}

@keyframes orbFloat3 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(90px, -120px) scale(1.12); }
  66%  { transform: translate(-70px, 60px) scale(0.96); }
  100% { transform: translate(110px, -70px) scale(1.06); }
}

@keyframes orbFloat4 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-80px, -100px) scale(1.06); }
  66%  { transform: translate(100px, 50px) scale(0.94); }
  100% { transform: translate(-50px, -130px) scale(1.1); }
}

@keyframes orbFloat5 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(70px, 90px) scale(1.08); }
  66%  { transform: translate(-110px, -40px) scale(0.97); }
  100% { transform: translate(60px, 70px) scale(1.03); }
}

.landing-page > *:not(.landing-ambient-orbs):not(.landing-ambient-glass) {
  position: relative;
  z-index: 2;
}

/* ─── BOTANICAL GARDEN ─── */

.landing-garden {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: var(--lp-garden-opacity);
}

/* Allow hover on plants */

.landing-garden-side svg {
  pointer-events: auto;
}

.landing-garden-side svg g[data-plant] {
  cursor: default;
  transition: filter 0.3s ease;
}

.landing-garden-side svg g[data-plant] > rect.hit-area {
  fill: transparent;
  pointer-events: all;
}

.landing-garden-side svg g[data-plant]:hover {
  filter: brightness(1.3) saturate(1.2);
}

.landing-garden-side {
  position: absolute;
  bottom: 0;
  width: 38vw;
  min-width: 280px;
  max-width: 600px;
  height: 85vh;
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%);
}

/* Grass strip spans the full bottom */

.landing-garden-grass {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
  will-change: transform, opacity;
  animation: layerGrow 14s cubic-bezier(0.12, 0.8, 0.2, 1) 0s forwards;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.landing-grass-svg {
  transform-origin: bottom center;
  animation: grassWind 8s ease-in-out infinite;
  pointer-events: auto;
}

.landing-garden-grass:hover .landing-grass-svg {
  animation: grassWindStrong 3s ease-in-out infinite;
}

@keyframes grassWind {
  0%   { transform: skewX(0deg); }
  25%  { transform: skewX(1.5deg); }
  50%  { transform: skewX(-0.8deg); }
  75%  { transform: skewX(1deg); }
  100% { transform: skewX(0deg); }
}

@keyframes grassWindStrong {
  0%   { transform: skewX(0deg); }
  25%  { transform: skewX(3deg); }
  50%  { transform: skewX(-2deg); }
  75%  { transform: skewX(2.5deg); }
  100% { transform: skewX(0deg); }
}

.landing-garden-left {
  left: 0;
}

.landing-garden-right {
  right: 0;
  transform: scaleX(-1);
}

/* Each botanical layer fades + scales in from the ground like organic growth */

.landing-garden-layer {
  position: absolute;
  inset: 0;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
  will-change: transform, opacity;
  animation: layerGrow 14s cubic-bezier(0.12, 0.8, 0.2, 1) var(--grow-delay, 0s) forwards;
}

@keyframes layerGrow {
  0%   { transform: scaleY(0); opacity: 0; }
  15%  { opacity: 0.6; }
  40%  { opacity: 0.9; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Word rain — words falling like gentle raindrops */

.landing-word-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.landing-word-drop {
  position: absolute;
  top: 10%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  cursor: default;
  padding: 0.5rem 0.75rem;
  margin: -0.5rem -0.75rem;
  animation: wordFall var(--drop-duration, 18s) linear var(--drop-delay, 5s) infinite;
}

.landing-word-drop:hover {
  animation-play-state: paused;
  opacity: 1 !important;
  filter: brightness(1.3);
  text-shadow: 0 0 12px currentColor;
}

@keyframes wordFall {
  0%   { transform: translateY(0); opacity: 0; pointer-events: none; }
  4%   { opacity: 0; pointer-events: none; }
  5%   { opacity: 0.4; pointer-events: auto; }
  80%  { opacity: 0.3; pointer-events: auto; }
  81%  { opacity: 0; pointer-events: none; }
  100% { transform: translateY(80vh); opacity: 0; pointer-events: none; }
}

/* ─── BIRD FLOCK ─── */

.landing-birds-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ─── SKY ELEMENTS (Sun / Moon) ─── */

.landing-sun {
  position: absolute;
  top: 8%;
  left: 8%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 225, 130, 0.95) 0%, rgba(255, 200, 80, 0.6) 55%, transparent 80%);
  box-shadow:
    0 0 12px 4px rgba(255, 210, 90, 0.35),
    0 0 30px 10px rgba(255, 190, 70, 0.18),
    0 0 50px 18px rgba(255, 180, 60, 0.08);
  z-index: 1;
  animation: sunPulse 6s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Soft outer glow ring */

.landing-sun::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 90, 0.12) 0%, rgba(255, 190, 70, 0.04) 60%, transparent 100%);
}

/* Subtle rays */

.landing-sun::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg, rgba(255, 200, 80, 0.08) 8deg, transparent 16deg,
      transparent 30deg, rgba(255, 200, 80, 0.07) 38deg, transparent 46deg,
      transparent 60deg, rgba(255, 200, 80, 0.08) 68deg, transparent 76deg,
      transparent 90deg, rgba(255, 200, 80, 0.07) 98deg, transparent 106deg,
      transparent 120deg, rgba(255, 200, 80, 0.08) 128deg, transparent 136deg,
      transparent 150deg, rgba(255, 200, 80, 0.07) 158deg, transparent 166deg,
      transparent 180deg, rgba(255, 200, 80, 0.08) 188deg, transparent 196deg,
      transparent 210deg, rgba(255, 200, 80, 0.07) 218deg, transparent 226deg,
      transparent 240deg, rgba(255, 200, 80, 0.08) 248deg, transparent 256deg,
      transparent 270deg, rgba(255, 200, 80, 0.07) 278deg, transparent 286deg,
      transparent 300deg, rgba(255, 200, 80, 0.08) 308deg, transparent 316deg,
      transparent 330deg, rgba(255, 200, 80, 0.07) 338deg, transparent 346deg,
      transparent 360deg
    );
  animation: sunRaysSpin 40s linear infinite;
}

@keyframes sunPulse {
  0%   { transform: scale(1); box-shadow: 0 0 12px 4px rgba(255, 210, 90, 0.35), 0 0 30px 10px rgba(255, 190, 70, 0.18), 0 0 50px 18px rgba(255, 180, 60, 0.08); }
  100% { transform: scale(1.05); box-shadow: 0 0 16px 6px rgba(255, 210, 90, 0.4), 0 0 36px 14px rgba(255, 190, 70, 0.22), 0 0 56px 22px rgba(255, 180, 60, 0.1); }
}

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

.landing-moon {
  position: absolute;
  top: 8%;
  left: 8%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.landing-moon-surface {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #eeeef4 0%, #d0d0e0 40%, #b0b0c8 100%);
  box-shadow:
    0 0 10px 3px rgba(180, 195, 240, 0.4),
    0 0 25px 8px rgba(160, 175, 230, 0.2),
    0 0 45px 16px rgba(140, 160, 220, 0.1);
  position: relative;
  overflow: hidden;
}

/* Subtle craters */

.landing-moon-surface::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  top: 30%;
  left: 20%;
  box-shadow:
    12px 5px 0 2px rgba(0, 0, 0, 0.04),
    -3px 12px 0 1px rgba(0, 0, 0, 0.05),
    7px -3px 0 3px rgba(0, 0, 0, 0.03);
}

.landing-moon-glow {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 195, 240, 0.25) 0%, rgba(160, 175, 230, 0.1) 45%, transparent 75%);
  animation: moonGlow 8s ease-in-out infinite alternate;
}

@keyframes moonGlow {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.12); }
}

/* ─── STARS ─── */

.landing-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.landing-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: starTwinkle var(--star-duration, 3s) ease-in-out var(--star-delay, 0s) infinite alternate;
}

.landing-star.bright {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.9);
}

@keyframes starTwinkle {
  0%   { opacity: 0.2; transform: scale(1); }
  50%  { opacity: 0.9; transform: scale(1.3); }
  100% { opacity: 0.3; transform: scale(0.9); }
}

/* ─── FIREFLIES ─── */

.landing-fireflies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.landing-firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 220, 100, 0.8);
  box-shadow: 0 0 6px 2px rgba(255, 220, 100, 0.4), 0 0 12px 4px rgba(255, 220, 100, 0.15);
  animation:
    fireflyFloat var(--ff-duration, 12s) ease-in-out var(--ff-delay, 0s) infinite alternate,
    fireflyGlow var(--ff-glow, 4s) ease-in-out var(--ff-delay, 0s) infinite alternate;
}

@keyframes fireflyFloat {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(var(--ff-dx1, 30px), var(--ff-dy1, -20px)); }
  50%  { transform: translate(var(--ff-dx2, -15px), var(--ff-dy2, 25px)); }
  75%  { transform: translate(var(--ff-dx3, 20px), var(--ff-dy3, -10px)); }
  100% { transform: translate(var(--ff-dx4, -10px), var(--ff-dy4, 15px)); }
}

@keyframes fireflyGlow {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.4; }
}

/* ─── TOP CONTROLS (language + music) ─── */

.landing-top-controls {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

[dir="rtl"] .landing-top-controls {
  right: auto;
  left: 1.5rem;
}

.landing-ambient-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--lp-controls-border);
  background: var(--lp-controls-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--lp-controls-text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.landing-ambient-toggle:hover {
  background: var(--lp-controls-hover-bg);
  border-color: var(--lp-controls-hover-border);
  color: var(--lp-text);
}

/* Theme toggle button */

.landing-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--lp-controls-border);
  background: var(--lp-controls-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--lp-controls-text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.landing-theme-toggle:hover {
  background: var(--lp-controls-hover-bg);
  border-color: var(--lp-controls-hover-border);
  color: var(--lp-text);
}

.landing-ambient-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.landing-ambient-slider {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--lp-slider-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--lp-controls-border);
  border-radius: 8px;
  padding: 6px 10px;
  animation: sliderFadeIn 0.2s ease-out;
}

@keyframes sliderFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.landing-ambient-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--lp-slider-track);
  outline: none;
  cursor: pointer;
}

.landing-ambient-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lp-slider-thumb);
  border: 2px solid var(--lp-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.15s;
}

.landing-ambient-slider input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--lp-slider-thumb-hover);
}

/* ─── VALUE RIBBON ─── */

.landing-ribbon {
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 0.65rem 2.5rem;
  flex-wrap: wrap;
  z-index: 3;
  background: var(--lp-ribbon-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 20px;
  max-width: fit-content;
  margin: 0 auto;
}

.landing-ribbon-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lp-ribbon-text);
}

.landing-ribbon-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.landing-ribbon-dot.dot-0 { background: #eb6428; }

.landing-ribbon-dot.dot-1 { background: #6dbe3c; }

.landing-ribbon-dot.dot-2 { background: #4696dc; }

.landing-ribbon-dot.dot-3 { background: #f5c814; }

.landing-ribbon-dot.dot-4 { background: #14c3aa; }

.landing-lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--lp-controls-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--lp-controls-border);
  border-radius: 8px;
  padding: 0.4rem 2rem 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--lp-controls-text);
  cursor: pointer;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
  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='%236e6e73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

.lp-dark .landing-lang-select {
  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='rgba(255,255,255,0.6)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.lp-dark .landing-lang-select option {
  background: #1a1d24;
  color: rgba(255, 255, 255, 0.9);
}

[dir="rtl"] .landing-lang-select {
  padding: 0.4rem 0.75rem 0.4rem 2rem;
  background-position: left 0.5rem center;
}

.landing-lang-select:hover {
  background-color: var(--lp-controls-hover-bg);
  border-color: var(--lp-controls-hover-border);
}

/* ─── HERO ─── */

.landing-hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  overflow: hidden;
}

.landing-hero-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  will-change: transform, opacity;
}

.landing-hero-logo-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 2rem;
  animation: logoEntry 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-hero-logo {
  width: 90px;
  height: 90px;
}

@keyframes logoEntry {
  0% { opacity: 0; transform: scale(0.85) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.landing-hero-name {
  font-size: clamp(5rem, 12vw, 9rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--lp-text);
  margin: 0 0 1rem;
  line-height: 1;
  animation: heroTextIn 0.8s ease-out 0.15s both;
}

.landing-hero-subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  color: #eb6428;
  margin: 0 0 2rem;
  letter-spacing: 0.02em;
  animation: heroTextIn 0.8s ease-out 0.3s both;
}

.landing-hero-tagline {
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  font-weight: 400;
  color: var(--lp-text-2);
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  max-width: 44ch;
  animation: heroTextIn 0.8s ease-out 0.45s both;
}

.landing-hero-cta {
  display: inline-block;
  padding: 0.9rem 2.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--lp-cta-text);
  background: var(--lp-cta-bg);
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
  animation: heroTextIn 0.8s ease-out 0.6s both;
}

.landing-hero-cta:hover {
  transform: translateY(-1px);
  background: var(--lp-cta-hover);
}

@keyframes heroTextIn {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── BANDS (Apple-style alternating sections) ─── */

.landing-band {
  padding: 5rem 0;
  background: var(--lp-bg);
}

.landing-band-gray {
  background: var(--lp-bg-alt);
}

.landing-band-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ─── SECTION HEADERS ─── */

.landing-section-header {
  margin-bottom: 3.5rem;
}

.landing-section-header-left {
  text-align: left;
}

.landing-section-header-center {
  text-align: center;
}

.landing-section-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #eb6428;
  margin-bottom: 0.6rem;
}

.landing-section-title-lg {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--lp-text);
  margin: 0 0 1rem;
}

.landing-section-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--lp-text-3);
  max-width: 52ch;
  margin: 0;
}

.landing-section-header-center .landing-section-desc {
  margin: 0 auto;
}

/* ─── THREE INTELLIGENCES ─── */

.landing-intelligences {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.landing-intel-card {
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-card-border);
  border-top: 3px solid transparent;
  border-radius: 16px;
  padding: 2.25rem 1.75rem;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.landing-band-gray .landing-intel-card {
  background: var(--lp-tile-bg);
}

.landing-intel-card.partner { border-top-color: #d4a843; }

.landing-intel-card.companion { border-top-color: #6b7fe8; }

.landing-intel-card.assistant { border-top-color: #22c55e; }

.landing-intel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px var(--lp-shadow);
}

.landing-intel-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.landing-intel-card.partner .landing-intel-icon-wrap {
  background: rgba(212, 168, 67, 0.1);
  color: #eb6428;
}

.landing-intel-card.companion .landing-intel-icon-wrap {
  background: rgba(107, 127, 232, 0.1);
  color: #6b7fe8;
}

.landing-intel-card.assistant .landing-intel-icon-wrap {
  background: rgba(74, 222, 128, 0.1);
  color: #22c55e;
}

.landing-intel-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.15rem;
  color: var(--lp-text);
}

.landing-intel-role {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.landing-intel-card.partner .landing-intel-role { color: #d4a843; }

.landing-intel-card.companion .landing-intel-role { color: #6b7fe8; }

.landing-intel-card.assistant .landing-intel-role { color: #22c55e; }

.landing-intel-desc {
  font-size: 0.85rem;
  color: var(--lp-text-3);
  margin: 0;
  line-height: 1.6;
}

/* ─── APPS / FEATURES GRID ─── */

.landing-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem 3rem;
}

.landing-app-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.landing-app-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.landing-app-feature-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--lp-text-2);
  margin: 0;
}

.landing-app-feature-desc strong {
  color: var(--lp-text);
  font-weight: 700;
}

/* ─── SHOWCASE (Browser Mockup) ─── */

.landing-showcase-browser {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px var(--lp-shadow-lg), 0 4px 16px var(--lp-shadow);
  border: 1px solid var(--lp-showcase-border);
}

.landing-showcase-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--lp-showcase-bar);
  border-bottom: 1px solid var(--lp-showcase-border);
}

.landing-showcase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.landing-showcase-dot.red { background: #ff5f57; }

.landing-showcase-dot.yellow { background: #febc2e; }

.landing-showcase-dot.green { background: #28c840; }

.landing-showcase-screen {
  position: relative;
}

.landing-showcase-img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
}

.landing-showcase-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-showcase-overlay);
}

.landing-showcase-text {
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}

/* ─── APP STORE VISION (Tile Grid) ─── */

.landing-app-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  max-width: 640px;
  margin: 0 auto;
}

.landing-app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.5rem;
  border-radius: 14px;
  background: var(--lp-tile-bg);
  border: 1px solid var(--lp-tile-border);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.landing-app-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--lp-shadow);
}

.landing-app-tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-app-tile-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--lp-text-2);
}

/* ─── FOOTER ─── */

.landing-footer {
  position: relative;
  min-height: 80vh;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

.landing-footer-content {
  position: relative;
  z-index: 1;
  padding: 28rem 2rem 4rem;
}

.landing-footer-logo {
  width: 48px;
  height: 48px;
  margin-bottom: 0.75rem;
}

.landing-footer-name {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--lp-text);
  margin: 0 0 0.75rem;
}

.landing-footer-tagline {
  font-size: 0.95rem;
  color: var(--lp-text-2);
  margin: 0 0 0.5rem;
  font-weight: 500;
}

.landing-footer-sub {
  font-size: 0.75rem;
  color: var(--lp-text-3);
  margin: 0;
  letter-spacing: 0.03em;
}

/* ─── PARALLAX ─── */

.landing-parallax {
  will-change: transform;
}

/* ─── SCROLL REVEAL ─── */

.landing-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.landing-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.landing-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }

.landing-stagger.is-visible > *:nth-child(2) { transition-delay: 50ms; }

.landing-stagger.is-visible > *:nth-child(3) { transition-delay: 100ms; }

.landing-stagger.is-visible > *:nth-child(4) { transition-delay: 150ms; }

.landing-stagger.is-visible > *:nth-child(5) { transition-delay: 200ms; }

.landing-stagger.is-visible > *:nth-child(6) { transition-delay: 250ms; }

.landing-stagger.is-visible > *:nth-child(7) { transition-delay: 300ms; }

.landing-stagger.is-visible > *:nth-child(8) { transition-delay: 350ms; }

.landing-stagger.is-visible > *:nth-child(9) { transition-delay: 400ms; }

.landing-stagger.is-visible > *:nth-child(10) { transition-delay: 450ms; }

/* ─── RTL (Arabic) ─── */

[dir="rtl"].landing-page {
  font-size: 110%;
  line-height: 1.8;
}

[dir="rtl"] .landing-hero-tagline,
[dir="rtl"] .landing-section-desc,
[dir="rtl"] .landing-intel-desc,
[dir="rtl"] .landing-app-feature-desc {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .landing-section-header-left {
  text-align: right;
}

[dir="rtl"] .landing-hero-content,
[dir="rtl"] .landing-section-header-center,
[dir="rtl"] .landing-intel-card,
[dir="rtl"] .landing-footer {
  direction: rtl;
  text-align: center;
}

[dir="rtl"] .landing-app-feature {
  align-items: flex-end;
}

[dir="rtl"] .landing-app-feature-icon {
  align-self: flex-end;
}

[dir="rtl"] .landing-app-feature-desc {
  text-align: right;
}

/* ─── RESPONSIVE ─── */

@media (max-width: 800px) {
  .landing-band {
    padding: 3.5rem 0;
  }

  .landing-intelligences {
    grid-template-columns: 1fr;
  }

  .landing-apps-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .landing-app-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .landing-ribbon {
    gap: 1.25rem;
  }

  .landing-section-title-lg {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
  }
}
/* Organize Dialog — reusable AI before/after comparison */

.organize-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.organize-dialog {
  width: 1000px;
  max-width: 92vw;
  height: 75vh;
  max-height: 80vh;
  background: rgba(20, 20, 28, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.organize-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.organize-dialog-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.9);
}

.organize-dialog-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.organize-dialog-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

.organize-dialog-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.06);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.organize-dialog-col {
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 28, 0.98);
  min-height: 0;
}

.organize-dialog-col-label {
  padding: 0.5rem 1rem;
  font-size: 0.675rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.organize-dialog-col-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  font-size: 0.8rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}

/* Scrollbar styling */
.organize-dialog-col-content::-webkit-scrollbar,
.organize-dialog-col-editor::-webkit-scrollbar {
  width: 6px;
}

.organize-dialog-col-content::-webkit-scrollbar-track,
.organize-dialog-col-editor::-webkit-scrollbar-track {
  background: transparent;
}

.organize-dialog-col-content::-webkit-scrollbar-thumb,
.organize-dialog-col-editor::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.organize-dialog-col-content::-webkit-scrollbar-thumb:hover,
.organize-dialog-col-editor::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Markdown rendering in before column */
.organize-dialog-col-content p,
.organize-dialog-col-content li {
  font-size: 0.8rem;
  line-height: 1.7;
  margin-bottom: 0.25rem;
}

.organize-dialog-col-content ul,
.organize-dialog-col-content ol {
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}

.organize-dialog-col-content h2,
.organize-dialog-col-content h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.75rem 0 0.25rem;
}

.organize-dialog-col-content a {
  color: rgba(var(--accent-rgb), 0.7);
  text-decoration: none;
}

.organize-dialog-col-content a:hover {
  color: rgba(var(--accent-rgb), 0.9);
  text-decoration: underline;
}

.organize-dialog-col-editor {
  flex: 1;
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.7;
  resize: none;
  outline: none;
  overflow-y: auto;
}

.organize-dialog-col-editor:focus {
  background: rgba(var(--accent-rgb), 0.02);
}

.organize-dialog-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.organize-dialog-cancel {
  padding: 0.45rem 1rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.organize-dialog-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.organize-dialog-apply {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.organize-dialog-apply:hover {
  background: rgba(74, 222, 128, 0.25);
  border-color: rgba(74, 222, 128, 0.5);
}

.organize-dialog-apply:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.organize-dialog-apply .spinning {
  animation: spin 1s linear infinite;
}
.ops-navigator {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--os-glass-bg-solid);
  color: var(--os-text-primary);
  overflow: hidden;
  container-type: inline-size;
  container-name: daily;
}

/* Header */
.ops-nav-header {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 0.75rem;
}

.ops-nav-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.ops-nav-title h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.day-counter {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.day-counter:hover {
  color: rgba(var(--accent-rgb), 1);
  background: rgba(var(--accent-rgb), 0.2);
}

/* Tabs — unified single row */
.ops-nav-tabs {
  display: flex;
  gap: 0.125rem;
  padding: 0.2rem;
  border-radius: 9px;
  border: 1px solid var(--os-glass-border);
  background: var(--os-input-bg);
  backdrop-filter: blur(6px);
  margin-left: auto;
}

.ops-nav-tabs .tab {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--os-text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ops-nav-tabs .tab:hover {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.ops-nav-tabs .tab.active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}

.edit-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.edit-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

/* Temporal View */
.temporal-view {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.temporal-section {
  background: none;
  border: none;
  border-radius: 12px;
  /* Don't clip content - let sections expand to fit all tasks */
}

.temporal-section .section-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  background: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.temporal-section .section-header h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  flex: 1;
}

.section-header .task-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Tomorrow section - highlighted */
.temporal-section.tomorrow {
  border-color: rgba(56, 189, 248, 0.2);
}

.temporal-section.tomorrow .section-header {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.15);
}

.temporal-section.tomorrow .section-header h3 {
  color: #38bdf8;
}

/* Today section */
.temporal-section.today .section-header h3 {
  color: var(--os-text-primary);
}

/* Week section */
.temporal-section.week .section-header h3 {
  color: var(--os-text-secondary);
}

/* Backlog section - domain next items */
.temporal-section.backlog {
  border-color: rgba(var(--accent-rgb), 0.2);
}

.temporal-section.backlog .section-header {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.15);
}

.temporal-section.backlog .section-header h3 {
  color: var(--accent);
}

.temporal-section.backlog .task-count {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

/* Task List - Rows with domain chips */
.task-list {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: none;
  border-radius: 8px;
  transition: all 0.15s ease;
  cursor: default;
}

.task-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.domain-chip {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 52px;
  text-align: center;
}

.domain-chip.blue { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.domain-chip.green { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.domain-chip.purple { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
.domain-chip.orange { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.domain-chip.gray { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }
.domain-chip.pink { background: rgba(244, 114, 182, 0.2); color: #f472b6; }
.domain-chip.teal { background: rgba(45, 212, 191, 0.2); color: #2dd4bf; }

.task-text {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
  /* Allow text to wrap instead of truncating */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.task-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.task-row:hover .task-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.task-action-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.task-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}

.task-action-btn.done:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.empty-message {
  padding: 1rem;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.875rem;
  font-style: italic;
}

/* Week Content */
.week-content {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.week-theme,
.week-focus,
.week-priorities {
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

.week-theme strong,
.week-focus strong,
.week-priorities strong {
  color: var(--os-text-primary);
  margin-right: 0.375rem;
}

.week-priorities ol {
  margin: 0.375rem 0 0 1.25rem;
  padding: 0;
}

.week-priorities li {
  margin-bottom: 0.25rem;
}


/* Loading and error states */
.ops-nav-loading,
.ops-nav-error {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--os-text-secondary);
}

.ops-nav-error button {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ops-nav-error button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Spinning animation */
.spinning {
  animation: spin 1s linear infinite;
}

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

/* Scrollbar styling */
.temporal-view::-webkit-scrollbar {
  width: 8px;
}

.temporal-view::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.temporal-view::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.temporal-view::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ==================== */
/* Planning View        */
/* ==================== */

.planning-view {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Split layout with tree on left */
.planning-view-split {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Tree Navigation */
.planning-tree {
  position: relative;
  width: 160px;
  flex-shrink: 0;
  min-height: 0;
  padding: 0.75rem 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow-y: auto;
}

/* Consistent sidebar item sizing */
.planning-tree .tree-item {
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem 0.35rem 1.25rem;
  gap: 0.4rem;
}

.planning-tree.collapsed {
  width: 36px !important;
  min-width: 36px;
  padding: 0.5rem 0.25rem;
  align-items: center;
  overflow: hidden;
}

.tree-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--os-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 0.25rem;
  transition: all 0.15s ease;
}

.tree-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.planning-tree.collapsed .tree-collapse-btn {
  margin-bottom: 0;
}

/* Resize handle between tree and content */
.planning-resize-handle {
  width: 12px;
  margin: 0 -4px;
  flex-shrink: 0;
  align-self: stretch;
  cursor: col-resize;
  position: relative;
  z-index: 10;
}

.planning-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: transparent;
  transition: background 0.15s ease;
}

.planning-resize-handle:hover::after,
.planning-resize-handle:active::after {
  background: rgba(var(--accent-rgb), 0.4);
}

.tree-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
}

.tree-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
}

.tree-item.active {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.tree-item-label {
  flex: 1;
}

.tree-item-subtitle {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  font-weight: 400;
  white-space: nowrap;
}

.tree-item-count {
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
}

.tree-item.active .tree-item-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

/* Tree group (expandable) */
.tree-group {
  display: flex;
  flex-direction: column;
}

.tree-group .tree-item.parent {
  margin-bottom: 0;
}

.tree-children {
  display: flex;
  flex-direction: column;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.tree-item.child {
  padding: 0.3rem 0.625rem;
  font-size: 0.75rem;
}

.tree-item.child .tree-item-count {
  font-size: 0.625rem;
  padding: 0.0625rem 0.3125rem;
}

/* Suggested child item - purple accent */
.tree-item.child.suggested.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.tree-item.child.suggested.active .tree-item-count {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

/* Domain groups in tree */
.tree-domain-group {
  display: flex;
  flex-direction: column;
}

.tree-item.child.domain {
  gap: 0.375rem;
}

.tree-expand-icon {
  flex-shrink: 0;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.tree-expand-icon:hover {
  opacity: 1;
}

/* Domain color accents */
.tree-item.child.domain.blue { color: rgba(56, 189, 248, 0.9); }
.tree-item.child.domain.green { color: rgba(74, 222, 128, 0.9); }
.tree-item.child.domain.purple { color: rgba(var(--accent-rgb), 0.9); }
.tree-item.child.domain.orange { color: rgba(251, 146, 60, 0.9); }
.tree-item.child.domain.gray { color: rgba(156, 163, 175, 0.9); }
.tree-item.child.domain.pink { color: rgba(244, 114, 182, 0.9); }
.tree-item.child.domain.teal { color: rgba(45, 212, 191, 0.9); }

.tree-item.child.domain.active.blue { background: rgba(56, 189, 248, 0.15); }
.tree-item.child.domain.active.green { background: rgba(74, 222, 128, 0.15); }
.tree-item.child.domain.active.purple { background: rgba(var(--accent-rgb), 0.15); }
.tree-item.child.domain.active.orange { background: rgba(251, 146, 60, 0.15); }
.tree-item.child.domain.active.gray { background: rgba(156, 163, 175, 0.15); }
.tree-item.child.domain.active.pink { background: rgba(244, 114, 182, 0.15); }
.tree-item.child.domain.active.teal { background: rgba(45, 212, 191, 0.15); }

/* Areas under domain */
.tree-areas {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.tree-item.child.area {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  color: var(--os-text-secondary);
}

.tree-item.child.area:hover {
  color: var(--os-text-primary);
}

.tree-item.child.area.active {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.tree-item.child.area .tree-item-count {
  font-size: 0.5625rem;
  padding: 0 0.25rem;
}

/* Content area */
.planning-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  overscroll-behavior: contain;
}

.planning-content .planning-section {
  display: flex;
  flex-direction: column;
}

.planning-content .focus-section + .horizon-section {
  margin-top: 1.5rem;
}

.planning-content .task-list,
.planning-content .next-queue-tree,
.planning-content .suggestion-list {
  flex: 1;
  /* Don't add nested scroll - parent .planning-content handles scrolling */
}

/* Scrollbar for tree */
.planning-tree::-webkit-scrollbar {
  width: 6px;
}

.planning-tree::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.planning-tree::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

/* Scrollbar for planning content */
.planning-content::-webkit-scrollbar {
  width: 8px;
}

.planning-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.planning-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.planning-section {
  background: none;
  border: none;
  border-radius: 12px;
}

.planning-section .section-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.5rem;
  background: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.planning-section .section-header h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  flex: 1;
}

.planning-section .section-header .task-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.section-header-clickable {
  cursor: pointer;
  user-select: none;
}

.section-header-clickable:hover {
  background: rgba(255, 255, 255, 0.03);
}

.section-collapse-chevron {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.horizon-collapsed .section-header {
  border-bottom: none;
}

/* Section add button */
.section-add-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}

.section-add-btn:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

/* Section add form */
.section-add-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.section-add-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.15s ease;
}

.section-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.section-add-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  outline: none;
  cursor: pointer;
}

.section-add-select:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.section-add-submit {
  padding: 0.5rem 1rem;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 6px;
  color: #4ade80;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.section-add-submit:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.25);
}

.section-add-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.section-add-cancel {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.section-add-cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Today section - default white */
.planning-section.today .section-header h3 {
  color: var(--os-text-primary);
}

/* Tomorrow section - sunrise accent */
.planning-section.tomorrow {
  border-color: rgba(251, 191, 36, 0.2);
}

.planning-section.tomorrow .section-header {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.15);
}

.planning-section.tomorrow .section-header h3 {
  color: #fbbf24;
}

.planning-section.tomorrow .task-count {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* Week section */
.planning-section.week {
  border-color: rgba(156, 163, 175, 0.15);
}

.planning-section.week .section-header {
  background: rgba(156, 163, 175, 0.06);
}

.planning-section.week .section-header h3 {
  color: var(--os-text-secondary);
}

/* Next section - blue accent */
.planning-section.next {
  border-color: rgba(56, 189, 248, 0.2);
}

.planning-section.next .section-header {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.15);
}

.planning-section.next .section-header h3 {
  color: #38bdf8;
}

.planning-section.next .task-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

/* Suggested section - purple/violet accent */
.planning-section.suggested {
  border-color: rgba(var(--accent-rgb), 0.2);
}

.planning-section.suggested .section-header {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.15);
}

.planning-section.suggested .section-header h3 {
  color: var(--accent);
}

.planning-section.suggested .task-count {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

/* Focus section inner — replaces the old planning-section wrapper */
.focus-section-inner {
  padding-left: 1.5rem;
  overflow: auto;
  min-height: 0;
}

/* Focus section - orange/amber accent (legacy) */
.planning-section.focus-section {
}

.planning-section.focus-section .section-header {
  border-bottom: none;
}

.planning-section.focus-section .section-header h3 {
  color: #fbbf24;
}

.planning-section.focus-section .task-count {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* Focus horizon context block */
.focus-horizon-context {
  margin: 0.5rem 0;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  overflow: hidden;
}

.focus-horizon-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--os-text-muted);
  transition: color 0.15s;
}

.focus-horizon-header:hover {
  color: var(--os-text-secondary);
}

.focus-horizon-header.expanded {
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}

.focus-horizon-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}

.focus-horizon-preview {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.focus-horizon-chevron {
  flex-shrink: 0;
  opacity: 0.4;
}

.focus-horizon-body {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.focus-horizon-section-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--accent-rgb), 0.5);
  margin-bottom: 0.25rem;
}

.focus-horizon-section .markdown-block {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--os-text-secondary);
}

.focus-horizon-section .markdown-block p {
  margin: 0.15rem 0;
}

.focus-horizon-section .markdown-block ul,
.focus-horizon-section .markdown-block ol {
  margin: 0.15rem 0;
  padding-left: 1.25rem;
}

.focus-horizon-section .markdown-block li {
  margin: 0.1rem 0;
}

.focus-horizon-section .markdown-block strong {
  color: var(--os-text-primary);
}

/* Focus subsections */
.focus-subsection {
  margin-top: 0.625rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.125rem 0;
  overflow: hidden;
}

.focus-subsection:first-of-type {
  margin-top: 0;
}

.focus-subsection-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0;
  background: none;
  border-radius: 0;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.focus-subsection-header .subsection-count {
  padding: 0.125rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Today subsection - sun yellow tint */
.focus-subsection.today .focus-subsection-header {
  background: none;
  color: rgba(250, 204, 21, 0.9);
}

.focus-subsection.today .subsection-count {
  background: rgba(250, 204, 21, 0.15);
  color: rgba(250, 204, 21, 0.9);
}

/* Obligations subsection - warm amber tint */
.focus-subsection.obligations .focus-subsection-header {
  background: none;
  color: rgba(251, 146, 60, 0.9);
}

.focus-subsection.obligations .subsection-count {
  background: rgba(251, 146, 60, 0.15);
  color: rgba(251, 146, 60, 0.9);
}

/* Craft subsection - purple tint */
.focus-subsection.craft .focus-subsection-header {
  background: none;
  color: rgba(var(--accent-rgb), 0.9);
}

.focus-subsection.craft .subsection-count {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.9);
}

/* Obligation surfaces (calendar, email) */
.obligation-surface {
  margin-bottom: 0;
  padding: 0.15rem 0.75rem;
}

/* Calendar day groups */
.calendar-day-group + .calendar-day-group {
  margin-top: 0.5rem;
}

.calendar-day-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-hint);
  margin-bottom: 0.2rem;
  margin-top: 0.15rem;
  padding-left: 1.25rem;
}

/* Calendar events */
.calendar-event-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.75rem;
  font-size: 0.8125rem;
}

.calendar-event-icon {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(251, 146, 60, 0.5);
}

.calendar-event-title {
  flex: 1;
  color: var(--os-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.calendar-event-time-inline {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--os-text-hint);
}

.calendar-event-date {
  color: var(--os-text-hint);
}

.calendar-event-meet {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.1);
  color: rgba(56, 189, 248, 0.7);
}

.calendar-event-meet:hover {
  background: rgba(56, 189, 248, 0.2);
  color: rgba(56, 189, 248, 1);
}

/* Calendar header actions */
.calendar-header-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}

/* Calendar config dropdown */
.calendar-config-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
}

.calendar-config-dropdown {
  position: fixed;
  min-width: 200px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 0.5rem 0;
  z-index: 20001;
}

.calendar-config-title {
  padding: 0.375rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calendar-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease;
}

.calendar-config-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.calendar-config-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  padding: 2px 6px;
  cursor: pointer;
}

.calendar-config-select option {
  background: #1e1e23;
  color: #e2e8f0;
}

/* Calendar events in Upcoming section */
.next-calendar-events {
  padding-bottom: 0.15rem;
  margin-bottom: 0;
}

.next-calendar-events .next-calendar-item {
  padding: 0.1rem 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  gap: 0.35rem;
}

.next-calendar-events .next-calendar-item .task-checkbox {
  color: rgba(251, 146, 60, 0.3);
}

.next-calendar-events .next-calendar-item .task-text {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.next-calendar-events .next-calendar-item .task-due-tag {
  font-size: 0.65rem;
  opacity: 0.6;
}

.next-calendar-events .next-calendar-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.next-calendar-events .next-calendar-item:hover .task-text {
  color: var(--os-text-muted);
}

/* Subsection header link button (e.g. "Backlog >") */
.subsection-link-btn {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: var(--os-text-hint);
  font-size: 0.6875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
  padding: 0;
}

.subsection-link-btn:hover,
.subsection-link-btn.active {
  color: var(--os-text-muted);
}

/* Upcoming divider inside cards */
.upcoming-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem 0.15rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-hint);
}

.upcoming-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* Backlog subsection */
.backlog-subsection {
  margin-top: 0.25rem;
}

.focus-backlog-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  margin: 0.35rem 0.5rem 0.25rem;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.focus-backlog-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.focus-backlog-btn .subsection-count {
  font-size: 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* Active Threads */

.threads-list {
  padding: 0.15rem 0.25rem;
}

.focus-thread-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem 0.4rem 1rem;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.focus-thread-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.focus-thread-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.focus-thread-pin {
  color: rgba(var(--accent-rgb), 0.6);
  flex-shrink: 0;
}

.focus-thread-name {
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-thread-task-badge {
  color: rgba(74, 222, 128, 0.6);
  flex-shrink: 0;
  display: flex;
}

.focus-thread-area {
  font-size: 0.65rem;
  color: rgba(var(--accent-rgb), 0.7);
  padding: 0.1rem 0.4rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* Workbench Focus Cards */
.workbench-focus-list {
  padding: 0.25rem 0.4rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.workbench-focus-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.workbench-focus-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.workbench-focus-card-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}

.workbench-focus-card-icon.project {
  background: rgba(56, 189, 248, 0.1);
  color: rgba(56, 189, 248, 0.7);
}

.workbench-focus-card-icon.thread {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
}

.workbench-focus-card-icon.thread.active {
  background: rgba(251, 146, 60, 0.1);
  color: rgba(251, 146, 60, 0.7);
}

.workbench-focus-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.workbench-focus-card-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.workbench-focus-pin {
  color: rgba(var(--accent-rgb), 0.5);
  flex-shrink: 0;
}

.workbench-focus-card-desc {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.workbench-focus-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  color: var(--os-text-hint);
}

.workbench-focus-area-tag {
  color: rgba(var(--accent-rgb), 0.65);
}

.workbench-focus-status-active {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: rgba(251, 146, 60, 0.7);
}

.workbench-focus-card.active {
  background: rgba(251, 146, 60, 0.04);
}

.workbench-focus-card.active:hover {
  background: rgba(251, 146, 60, 0.08);
}

.workbench-focus-card.active .workbench-focus-card-name {
  color: var(--os-text-primary);
}

.workbench-focus-stop-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.workbench-focus-stop-btn:hover {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: rgba(251, 146, 60, 0.9);
}

.workbench-focus-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.25rem 0.75rem;
}

/* Workbench picker dropdown */
.workbench-add-wrapper {
  position: relative;
}

.workbench-picker-dropdown {
  position: fixed;
  z-index: 10000;
  min-width: 260px;
  max-height: 360px;
  overflow-y: auto;
  background: #1e1e2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 0.35rem 0;
  transform: translateX(-100%);
}

.workbench-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.workbench-picker-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.workbench-picker-item:disabled {
  opacity: 0.5;
  cursor: default;
}

.workbench-picker-item.active {
  color: rgba(251, 146, 60, 0.8);
}

.workbench-picker-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-picker-project {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.workbench-picker-badge {
  font-size: 0.62rem;
  color: rgba(251, 146, 60, 0.7);
  background: rgba(251, 146, 60, 0.1);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.workbench-picker-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.25rem 0.5rem;
}

.workbench-picker-new {
  color: var(--os-text-muted);
}

.workbench-picker-new:hover {
  color: var(--os-text-secondary);
}

.workbench-picker-group-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.25rem;
}

.workbench-picker-item.indented {
  padding-left: 1.5rem;
}

.workbench-picker-empty {
  padding: 0.75rem;
  text-align: center;
  color: var(--os-text-hint);
  font-size: 0.75rem;
}

.workbench-active-count {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: rgba(251, 146, 60, 0.7);
  margin-left: 0.25rem;
}

.focus-project-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem 0.4rem 1rem;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.focus-project-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.focus-project-icon {
  color: rgba(56, 189, 248, 0.5);
  flex-shrink: 0;
}

.focus-project-threads-count {
  font-size: 0.6rem;
  color: var(--os-text-muted);
  padding: 0.05rem 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  flex-shrink: 0;
}

/* Active Work section */
.active-work-subsection {
  border: 1px solid rgba(251, 146, 60, 0.15);
  background: rgba(251, 146, 60, 0.04);
}

.active-work-subsection .focus-subsection-header {
  color: rgba(251, 146, 60, 0.8);
}

.active-work-list {
  padding: 0.25rem 0.5rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.active-work-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s;
}

.active-work-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

.active-work-card-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}

.active-work-card-icon-wrap {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(251, 146, 60, 0.1);
  color: rgba(251, 146, 60, 0.7);
}

.active-work-card-icon-wrap.task {
  background: rgba(74, 222, 128, 0.1);
  color: rgba(74, 222, 128, 0.7);
}

.active-work-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.active-work-card-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-work-card-context {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: var(--os-text-hint);
}

.active-work-card-context svg {
  opacity: 0.6;
}

.active-work-stop-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}

.active-work-stop-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  color: rgba(239, 68, 68, 0.85);
}

/* Thread active badge in workbench list */
.focus-thread-active-badge {
  color: rgba(251, 146, 60, 0.6);
  flex-shrink: 0;
}

/* Backlog dialog */
.backlog-dialog-overlay {
  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;
  display: flex;
  align-items: center;
  justify-content: center;
}

.backlog-dialog {
  width: 560px;
  max-height: 70vh;
  background: rgba(20, 20, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.backlog-dialog-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.backlog-dialog-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0;
}
.backlog-dialog-header svg {
  color: rgba(var(--accent-rgb), 0.7);
}

.backlog-dialog-count {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  font-weight: 500;
}

.backlog-dialog-add-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 6px;
  color: rgba(var(--accent-rgb), 0.9);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.backlog-dialog-add-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.backlog-dialog-close {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.backlog-dialog-close:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

.backlog-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.calendar-nl-dialog {
  width: 520px;
  max-width: min(92vw, 520px);
  background: rgba(18, 18, 24, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.calendar-nl-dialog-hint {
  font-size: 0.74rem;
  color: var(--os-text-muted);
}

.calendar-review-dialog {
  width: 520px;
  max-width: min(92vw, 520px);
  background: rgba(18, 18, 24, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.calendar-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.calendar-review-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.calendar-review-title svg {
  color: rgba(251, 146, 60, 0.92);
}

.calendar-review-title h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.calendar-review-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem 0.7rem;
}

.calendar-review-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.calendar-review-field > span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.calendar-review-field .task-edit-input,
.calendar-review-field .task-edit-select {
  font-family: inherit;
  font-size: 0.9rem;
}

.calendar-review-who-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.calendar-review-who-row .task-edit-input {
  flex: 1;
}

.calendar-review-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0.45rem 0.68rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar-review-link-btn:hover {
  background: rgba(255, 255, 255, 0.11);
}

.calendar-review-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--os-text-secondary);
  user-select: none;
  cursor: pointer;
}

.calendar-review-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  border-radius: 4px;
  border: 1px solid rgba(251, 146, 60, 0.48);
  background: rgba(255, 255, 255, 0.04);
  display: inline-grid;
  place-content: center;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.calendar-review-checkbox input::before {
  content: '';
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform 0.12s ease;
  clip-path: polygon(14% 44%, 0 58%, 46% 100%, 100% 24%, 84% 8%, 44% 64%);
  background: rgba(18, 18, 24, 0.98);
}

.calendar-review-checkbox input:hover {
  border-color: rgba(251, 146, 60, 0.72);
}

.calendar-review-checkbox input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.22);
}

.calendar-review-checkbox input:checked {
  border-color: rgba(251, 146, 60, 0.9);
  background: rgba(251, 146, 60, 0.95);
}

.calendar-review-checkbox input:checked::before {
  transform: scale(1);
}

.calendar-review-datetime-wrap {
  position: relative;
}

.calendar-review-datetime-wrap .task-edit-input[type="date"],
.calendar-review-datetime-wrap .task-edit-input[type="datetime-local"],
.calendar-review-datetime-wrap .task-edit-input[type="time"] {
  color-scheme: dark;
  padding-right: 2.15rem;
}

.calendar-review-datetime-icon {
  position: absolute;
  right: 0.68rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--os-text-secondary);
  pointer-events: none;
}

.calendar-review-datetime-wrap .task-edit-input[type="date"]::-webkit-calendar-picker-indicator,
.calendar-review-datetime-wrap .task-edit-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.calendar-review-datetime-wrap .task-edit-input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  top: 0;
  width: 2.2rem;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.calendar-review-datetime-wrap .task-edit-input[type="date"]::-webkit-inner-spin-button,
.calendar-review-datetime-wrap .task-edit-input[type="datetime-local"]::-webkit-inner-spin-button,
.calendar-review-datetime-wrap .task-edit-input[type="time"]::-webkit-inner-spin-button {
  display: none;
}

.calendar-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.calendar-review-error {
  color: rgba(248, 113, 113, 0.95);
  font-size: 0.73rem;
}

.calendar-review-auth-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.2rem;
}

.calendar-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.72rem 0.9rem 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.calendar-review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.45rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar-review-btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}

.calendar-review-btn.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.11);
}

.calendar-review-btn.primary {
  background: rgba(251, 146, 60, 0.18);
  border-color: rgba(251, 146, 60, 0.36);
  color: rgba(251, 146, 60, 0.95);
}

.calendar-review-btn.primary:hover:not(:disabled) {
  background: rgba(251, 146, 60, 0.28);
}

.calendar-review-btn:disabled {
  opacity: 0.56;
  cursor: default;
}

/* Textarea for natural language input */
.calendar-nl-textarea {
  resize: vertical;
  min-height: 60px;
  max-height: 160px;
  line-height: 1.45;
  font-family: inherit;
}

/* Multi-event review dialog */
.calendar-multi-review-dialog {
  width: 560px;
  max-width: min(92vw, 560px);
  background: rgba(18, 18, 24, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.calendar-multi-review-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 380px;
  overflow-y: auto;
  padding: 0.5rem 0.65rem;
}

.calendar-multi-review-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: opacity 0.15s ease, background 0.15s ease;
}

.calendar-multi-review-item.removed {
  opacity: 0.35;
  background: rgba(255, 255, 255, 0.02);
}

.calendar-multi-review-item.removed .calendar-multi-review-item-title {
  text-decoration: line-through;
}

.calendar-multi-review-item.errored {
  border-color: rgba(248, 113, 113, 0.4);
}

.calendar-multi-review-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.calendar-multi-review-item-info {
  flex: 1;
  min-width: 0;
}

.calendar-multi-review-item-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--os-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-multi-review-item-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--os-text-muted);
  margin-top: 0.15rem;
}

.calendar-multi-review-who {
  color: var(--os-text-muted);
}

.calendar-multi-review-item-account {
  font-size: 0.68rem;
  color: rgba(251, 146, 60, 0.7);
  margin-top: 0.1rem;
}

.calendar-multi-review-item-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.calendar-multi-review-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar-multi-review-action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.calendar-multi-review-action-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.backlog-dialog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--os-text-hint);
}
.backlog-dialog-empty p {
  margin: 0;
  font-size: 0.85rem;
}

/* Email surface */
.email-surface-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  margin-bottom: 0.25rem;
}

.email-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  overflow: hidden;
}

.email-item + .email-item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.email-from {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--os-text-secondary);
  white-space: nowrap;
}

.email-subject {
  color: var(--os-text-muted);
}

.email-mark-all-read {
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.15s;
}

.email-mark-all-read:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}
.email-mark-all-read.loading {
  opacity: 0.7;
  cursor: wait;
}
.email-mark-all-read:disabled {
  pointer-events: none;
}
.email-mark-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: email-spin 0.6s linear infinite;
}
@keyframes email-spin {
  to { transform: rotate(360deg); }
}

.email-skip-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 0.5);
  cursor: pointer;
  transition: all 0.15s;
}

.email-skip-btn:hover {
  color: rgba(74, 222, 128, 0.9);
  background: rgba(74, 222, 128, 0.15);
}

.email-skip-btn.skipped {
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.25);
  color: rgba(251, 146, 60, 0.8);
}

.email-skip-btn.skipped:hover {
  background: rgba(251, 146, 60, 0.2);
}

.email-item.email-skipped {
  opacity: 0.45;
}

.email-item.email-skipped .email-from,
.email-item.email-skipped .email-subject {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.15);
}

.email-track-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--os-text-hint);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
  margin-left: auto;
}

.email-item:hover .email-track-btn {
  opacity: 1;
}

.email-track-btn:hover {
  color: rgba(251, 146, 60, 0.9);
  background: rgba(251, 146, 60, 0.1);
  border-color: rgba(251, 146, 60, 0.2);
}

.email-surface.email-empty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
}

.email-more {
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  padding-top: 0.25rem;
  text-align: center;
}

/* Next subsection - blue tint */
.focus-subsection.next .focus-subsection-header {
  background: none;
  color: rgba(56, 189, 248, 0.9);
}

.focus-subsection.next .subsection-count {
  background: rgba(56, 189, 248, 0.15);
  color: rgba(56, 189, 248, 0.9);
}

/* Calendar subsection - amber tint */
.focus-subsection.calendar-subsection .focus-subsection-header {
  background: none;
  color: rgba(251, 146, 60, 0.9);
}

.focus-subsection.calendar-subsection .subsection-count {
  background: rgba(251, 146, 60, 0.15);
  color: rgba(251, 146, 60, 0.9);
}

/* Google disconnected banner */
.google-disconnected-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(251, 146, 60, 0.85);
  background: rgba(251, 146, 60, 0.06);
  border-radius: 8px;
  border: 1px solid rgba(251, 146, 60, 0.15);
}

.google-disconnected-banner span {
  flex: 1;
  word-break: break-word;
}

.google-dismiss-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.google-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.google-expired-accounts {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.google-expired-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  background: rgba(251, 146, 60, 0.03);
  border-radius: 6px;
}

.google-expired-account-name {
  color: var(--os-text-secondary);
  text-transform: capitalize;
}

.google-reconnect-btn {
  margin-left: auto;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 5px;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.2);
  color: rgba(251, 146, 60, 0.85);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.google-reconnect-btn:hover {
  background: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.35);
}

/* Account badge — personal/work indicator on calendar events and emails */
.account-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
}

.account-badge.account-personal {
  background: rgba(56, 189, 248, 0.15);
  color: rgba(56, 189, 248, 0.7);
}

.account-badge.account-work {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.7);
}

/* Email subsection - green tint, collapsible */
.focus-subsection.email-subsection .focus-subsection-header {
  background: none;
  color: rgba(74, 222, 128, 0.9);
}

.email-toggle-header {
  cursor: pointer;
}

.email-collapse-chevron {
  margin-left: auto;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.15s;
  transform: rotate(-90deg);
}

.email-collapse-chevron.expanded {
  transform: rotate(0deg);
}

.email-toggle-header:hover .email-collapse-chevron {
  opacity: 0.8;
}

/* Upcoming subsection - muted blue tint */
.focus-subsection.upcoming-subsection .focus-subsection-header {
  background: none;
  color: rgba(148, 163, 184, 0.9);
}

.focus-subsection.upcoming-subsection .subsection-count {
  background: rgba(148, 163, 184, 0.12);
  color: rgba(148, 163, 184, 0.9);
}

/* Section loading skeletons */
.section-skeleton {
  padding: 0.25rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-line-long {
  flex: 1;
}

.skeleton-line-medium {
  width: 80px;
}

.skeleton-line-short {
  width: 50px;
}

.skeleton-line-icon {
  width: 16px;
  height: 10px;
  border-radius: 50%;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* Subsection collapse chevron */
.subsection-chevron {
  margin-left: auto;
  opacity: 0.4;
  transition: opacity 0.15s;
}

/* When mark-all-read button is present, chevron doesn't need auto margin */
.email-mark-all-read + .subsection-chevron,
.email-mark-all-read + .email-collapse-chevron {
  margin-left: 0.35rem;
}

.focus-subsection-header:hover .subsection-chevron {
  opacity: 0.7;
}

/* This Week subsection - gray/muted tint */
.focus-subsection.this-week .focus-subsection-header {
  background: none;
  color: rgba(156, 163, 175, 0.9);
}

.this-week-content {
  padding: 0 0.75rem 0.75rem;
}

.this-week-content .markdown-block {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}

.this-week-content .markdown-block strong {
  color: var(--os-text-primary);
}

.this-week-content .markdown-block ul,
.this-week-content .markdown-block ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.this-week-content .markdown-block li {
  margin: 0.25rem 0;
}

.this-week-content .markdown-block p {
  margin: 0.5rem 0;
}

.this-week-content .markdown-block p:first-child {
  margin-top: 0;
}

.this-week-content .markdown-block em {
  color: var(--os-text-muted);
  font-style: italic;
}

/* This Week edit button */
.subsection-edit-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0;
}

.focus-subsection-header:hover .subsection-edit-btn {
  opacity: 1;
}

.subsection-edit-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.subsection-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.subsection-add-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-secondary);
}

.subsection-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0;
}

.focus-subsection-header:hover .subsection-open-btn {
  opacity: 1;
}

.subsection-open-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
}

/* ===== Today Layout ===== */

/* ===== Today Layout — flex with sidebar ===== */
.today-grid {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-height: 0;
}

.today-main {
  flex: 1 1 0;
  min-width: 250px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.today-main-tabs-row {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  min-height: 32px;
  margin-top: 0.625rem;
}

.today-main-tabs-row.hidden {
  display: none;
}

.today-main-tabs-row-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tabs-row-today-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 7px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.1);
  color: rgba(56, 189, 248, 0.9);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tabs-row-today-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  color: rgba(56, 189, 248, 1);
  border-color: rgba(56, 189, 248, 0.5);
}

.tabs-row-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 16, 30, 0.82);
  backdrop-filter: blur(6px);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.tabs-row-refresh-btn:hover:not(:disabled) {
  color: var(--os-text-secondary);
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
}
.tabs-row-refresh-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.tabs-row-refresh-btn.refreshing svg {
  animation: spin 0.8s linear infinite;
}

/* (today-main-tab styles removed — tabs now in header .ops-nav-tabs) */

.today-log-panel {
  min-height: 0;
  border: none;
  border-radius: 0;
  background: none;
  overflow: hidden;
}

.planning-content.today-scroll-layout .today-log-panel .log-view,
.planning-content.today-scroll-layout .today-log-panel .log-days-container {
  overflow: visible;
}

.today-sidebar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 200px;
  max-width: 500px;
  position: relative;
  overflow-y: visible;
  overflow-x: hidden;
  align-self: flex-start;
}

/* Today view: keep right pane fixed, scroll center column only */
.planning-content.today-scroll-layout {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding-top: 0;
}

.planning-content.today-scroll-layout .today-grid {
  flex: 1;
  min-height: 0;
  height: 100%;
  align-items: stretch;
  overflow: hidden;
}

.planning-content.today-scroll-layout .today-main {
  flex: 1 1 auto;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 0.35rem;
  padding-bottom: 1rem;
  min-height: 0;
  min-width: 0;
  max-height: none;
}

.planning-content.today-scroll-layout .planning-section {
  flex: 0 0 auto;
  min-height: auto;
}

/* Constrain sidebar within scroll layout so it doesn't overflow */
.planning-content.today-scroll-layout .today-sidebar {
  max-height: 100%;
  overflow-y: auto;
  align-self: stretch;
}

.planning-content.today-scroll-layout .today-main::-webkit-scrollbar {
  width: 8px;
}

.planning-content.today-scroll-layout .today-main::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.planning-content.today-scroll-layout .today-main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.sidebar-resize-handle {
  width: 8px;
  flex-shrink: 0;
  align-self: stretch;
  cursor: col-resize;
  position: relative;
  z-index: 20;
}

.sidebar-resize-handle::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
}

.sidebar-resize-handle:hover::after,
.sidebar-resize-handle:active::after {
  background: rgba(56, 189, 248, 0.5);
}

.today-sidebar.collapsed {
  width: auto;
  min-width: 0;
}

.tabs-row-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 16, 30, 0.82);
  backdrop-filter: blur(6px);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.tabs-row-collapse-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.today-sidebar .mini-cal {
  width: 100%;
  margin-top: 0.75rem;
  padding-top: 0.2rem;
}

.today-sidebar .mini-cal-header {
  margin-bottom: 0.5rem;
}

/* Compact horizon (day plan in sidebar) */
.horizon-compact {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.horizon-compact .section-header {
  padding: 0.35rem 0.65rem;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
}

.horizon-compact.horizon-collapsed .section-header {
  border-bottom: none;
}

.horizon-compact .section-header h3 {
  font-size: 0.7rem;
  color: rgba(56, 189, 248, 0.7);
}

.horizon-compact .horizon-header-actions {
  gap: 0.2rem;
}

.horizon-compact .horizon-action-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

.horizon-compact .horizon-content {
  padding: 0;
}

.horizon-compact .editable-markdown-block {
  font-size: 0.8rem;
}

.horizon-compact .editable-markdown-edit-mode {
  padding: 0.25rem 0.5rem;
}

.horizon-compact .editable-markdown-editor-wrapper {
  border: none !important;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.horizon-compact .horizon-content .editable-markdown-block {
  min-height: 150px;
}

/* Journal/Log panel */
.planning-section.journal-section .section-header h3 {
  color: rgba(var(--accent-rgb), 0.75);
}

.planning-section.log-section .section-header h3 {
  color: rgba(45, 212, 191, 0.82);
}

.section-date-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(56, 189, 248, 0.7);
  background: rgba(56, 189, 248, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.today-journal-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.today-journal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.15rem;
}

/* Process button (visible in toolbar) */
.journal-toolbar-process-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 28px;
  padding: 0 0.6rem;
  border-radius: 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.08);
  color: rgba(var(--accent-rgb), 0.8);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.journal-toolbar-process-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: rgba(var(--accent-rgb), 1);
}

.journal-toolbar-process-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.journal-toolbar-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 16, 30, 0.82);
  backdrop-filter: blur(6px);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.journal-toolbar-menu-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Journal options popover (portal) */
.journal-options-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.journal-options-popover {
  position: fixed;
  transform: translateX(-100%);
  min-width: 170px;
  background: rgba(16, 20, 32, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.journal-options-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--os-text-secondary);
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}

.journal-options-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.journal-options-item:disabled {
  opacity: 0.35;
  cursor: default;
}

.journal-options-item .spinning {
  animation: spin 1s linear infinite;
}

.journal-options-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 3px 8px;
}

.today-journal-action-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(10, 14, 24, 0.35);
}

.today-journal-action-group--mode {
  padding: 0.12rem;
  background: rgba(255, 255, 255, 0.05);
}

.today-journal-action-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 28px;
  padding: 0 0.58rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.15s ease;
}

.today-journal-action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.today-journal-action-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.today-journal-action-btn.organize-btn {
  color: rgba(196, 181, 253, 0.9);
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.12);
}

.today-journal-action-btn.organize-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(237, 233, 254, 0.98);
  border-color: rgba(var(--accent-rgb), 0.42);
}

.today-journal-action-btn.organize-btn .spinning {
  animation: spin 1s linear infinite;
}

.today-journal-actions .notebook-mode-toggle {
  background: transparent;
  border: none;
  border-radius: 8px;
  overflow: visible;
}

.today-journal-actions .notebook-mode-btn {
  width: 30px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.today-journal-actions .notebook-mode-btn:hover {
  color: var(--os-text-primary);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.today-journal-actions .notebook-mode-btn.active {
  color: rgba(221, 214, 254, 0.95);
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.18);
}

/* Today section shells */
.planning-content .planning-section.focus-section,
.planning-content .planning-section.journal-section,
.planning-content .planning-section.log-section {
  display: grid;
  grid-template-rows: auto 1fr;
}

.focus-section .section-collapsible,
.journal-section .section-collapsible,
.log-section .section-collapsible {
  overflow: hidden;
  min-height: 0;
  padding-left: 1.5rem;
}

.planning-content.today-scroll-layout .planning-section.focus-section,
.planning-content.today-scroll-layout .planning-section.journal-section,
.planning-content.today-scroll-layout .planning-section.log-section {
  grid-template-rows: auto auto;
}

.planning-content.today-scroll-layout .planning-section .section-collapsible {
  overflow: visible;
}

.today-journal-editor {
  padding: 0;
}

.today-journal-editor .editable-markdown-edit-mode {
  padding: 0;
}

.today-journal-editor .editable-markdown-editor-wrapper {
  border-radius: 8px;
  background: none;
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.journal-stream {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.journal-feed {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}


.journal-day-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.25rem 0;
  margin-top: 0.2rem;
}

.journal-day-section.history {
  background: rgba(255, 255, 255, 0.015);
}

.journal-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.journal-day-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.journal-day-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--os-text-primary);
}

.journal-day-sub {
  font-size: 0.67rem;
  color: var(--os-text-muted);
}

.journal-day-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.journal-day-count {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
  color: rgba(221, 214, 254, 0.9);
  font-size: 0.64rem;
  font-weight: 600;
}

/* Empty journal state */
.journal-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem 8rem;
  text-align: center;
  opacity: 0;
  animation: journalEmptyFadeIn 1s ease 0.15s forwards;
}

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

.journal-empty-icon {
  color: rgba(var(--accent-rgb), 0.2);
  margin-bottom: 1rem;
}

.journal-empty-text {
  color: var(--os-text-hint);
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  letter-spacing: 0.02em;
}

.journal-empty-hint {
  color: var(--os-text-hint);
  font-size: 0.72rem;
  margin: 0;
}

.journal-open-day-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-secondary);
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
}

.journal-open-day-btn:hover {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.journal-processed-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(74, 222, 128, 0.26);
  border-radius: 6px;
  background: rgba(74, 222, 128, 0.08);
  color: rgba(74, 222, 128, 0.86);
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.14rem 0.38rem;
  cursor: pointer;
}

.journal-processed-chip:hover {
  background: rgba(74, 222, 128, 0.16);
  color: rgba(134, 239, 172, 0.96);
}

.journal-processed-chip.active {
  background: rgba(74, 222, 128, 0.22);
  border-color: rgba(74, 222, 128, 0.45);
  color: rgba(187, 247, 208, 0.97);
}

.journal-day-processed-note,
.journal-day-empty-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  padding: 0.3rem 0.42rem;
  border-radius: 7px;
}

.journal-day-processed-note {
  color: rgba(134, 239, 172, 0.92);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.journal-day-empty-note {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.14);
}

.journal-composer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  position: relative;
  transition: all 0.15s ease;
}

.journal-composer.expanded {
  flex-direction: column;
  align-items: stretch;
}

.journal-composer-editor {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.journal-composer-editor .editable-markdown-edit-mode {
  padding: 0;
  gap: 0;
}

.journal-composer-editor .editable-markdown-editor-wrapper {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  outline: none !important;
}

.journal-composer-editor .editable-markdown-editor-wrapper:focus-within {
  border-color: rgba(var(--accent-rgb), 0.3) !important;
  background: rgba(var(--accent-rgb), 0.06);
}

/* Collapsed: single-line pill input feel */
.journal-composer.collapsed .journal-composer-editor .editable-markdown-editor-wrapper {
  border-radius: 20px;
  padding: 0.35rem 2.4rem 0.35rem 0.75rem !important;
}

.journal-composer.collapsed .journal-composer-editor .cm-content {
  min-height: 20px !important;
}

.journal-composer.collapsed .journal-composer-editor .cm-editor {
  outline: none !important;
  box-shadow: none !important;
}

.journal-composer.collapsed .journal-composer-editor .cm-scroller {
  display: flex;
  align-items: center;
}

.journal-composer.collapsed .journal-composer-editor .cm-focused {
  outline: none !important;
  box-shadow: none !important;
}

.journal-composer.collapsed .journal-composer-submit {
  border-radius: 50%;
  min-width: auto;
  width: 26px;
  height: 26px;
  padding: 0;
}

.journal-composer.collapsed .journal-composer-submit-inside {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
  z-index: 2;
  min-width: auto;
  flex-shrink: 0;
  background: rgba(var(--accent-rgb), 0.2);
  border: none;
  pointer-events: auto;
}

.journal-composer.collapsed .journal-composer-submit span {
  display: none;
}

/* Expanded: full editor */
.journal-composer.expanded .journal-composer-editor .cm-content {
  min-height: 96px !important;
}

.journal-composer-input {
  flex: 1;
  min-height: 56px;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--os-text-primary);
  font-size: 0.8rem;
  line-height: 1.4;
  resize: vertical;
}

.journal-composer-input::placeholder {
  color: var(--os-text-hint);
}

.journal-composer-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}

.journal-composer-submit {
  flex-shrink: 0;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.22);
  color: rgba(221, 214, 254, 0.95);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 70px;
}

.journal-composer-submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.28);
  border-color: rgba(var(--accent-rgb), 0.55);
}

.journal-composer-submit:disabled {
  opacity: 0.45;
  cursor: default;
}

.journal-stream-empty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  color: var(--os-text-hint);
  font-size: 0.78rem;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

.journal-stream-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.journal-stream-more:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.journal-stream-more.collapse {
  align-self: flex-end;
}

.journal-load-more-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 7px;
  background: rgba(56, 189, 248, 0.11);
  color: rgba(125, 211, 252, 0.95);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
}

.journal-load-more-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.2);
}

.journal-load-more-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.journal-history-status {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
}

.journal-history-status.done {
  color: rgba(74, 222, 128, 0.88);
  background: rgba(74, 222, 128, 0.1);
}

.journal-history-status.error {
  color: rgba(248, 113, 113, 0.92);
  background: rgba(248, 113, 113, 0.1);
}

.journal-infinite-toggle {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--os-text-muted);
  font-size: 0.68rem;
}

.journal-infinite-toggle input {
  accent-color: rgba(56, 189, 248, 0.9);
}

.journal-feed-sentinel {
  width: 100%;
  height: 2px;
}

.journal-entry-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.journal-time-group {
  padding: 0;
}

.journal-time-group-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(var(--accent-rgb), 0.82);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.15rem 0.15rem;
}

.journal-time-group-label {
  letter-spacing: 0.01em;
}

.journal-time-group-count {
  margin-left: auto;
  color: var(--os-text-secondary);
  font-size: 0.66rem;
  padding: 0.08rem 0.36rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.12);
}

.journal-time-group-entries {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.journal-time-group-entries .journal-entry-card {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.journal-time-group-entries .journal-entry-card:last-child {
  border-bottom: none;
}

.journal-time-group-entries .journal-entry-meta {
  justify-content: flex-end;
  margin-bottom: 0.15rem;
}

.journal-entry-card {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.journal-entry-card:last-child {
  border-bottom: none;
}

.journal-entry-card.same-time {
  padding-top: 0.3rem;
}

.journal-entry-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(var(--accent-rgb), 0.78);
  font-size: 0.65rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.journal-entry-time-continued {
  color: rgba(var(--accent-rgb), 0.42);
  font-weight: 500;
  font-style: italic;
}

.journal-entry-kind-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.36rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.journal-entry-kind-badge.log {
  color: rgba(56, 189, 248, 0.88);
  border-color: rgba(56, 189, 248, 0.28);
  background: rgba(56, 189, 248, 0.12);
}

.journal-entry-kind-badge.events {
  color: rgba(245, 158, 11, 0.9);
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.12);
}

.journal-entry-kind-badge.completed {
  color: rgba(16, 185, 129, 0.9);
  border-color: rgba(16, 185, 129, 0.34);
  background: rgba(16, 185, 129, 0.13);
}

.journal-entry-body {
  color: var(--os-text-secondary);
  font-size: 0.74rem;
  line-height: 1.4;
  user-select: none;
  -webkit-user-select: none;
}

.journal-entry-body p,
.journal-entry-body div,
.journal-entry-body span,
.journal-entry-body .markdown-text {
  margin: 0;
  font-size: 0.74rem !important;
  line-height: 1.4 !important;
  color: var(--os-text-secondary);
}

.journal-entry-body ol,
.journal-entry-body ul {
  margin: 0.3rem 0;
  padding-left: 1.5rem;
}

.journal-entry-body li {
  margin: 0.15rem 0;
}

.journal-entry-body li p {
  margin: 0;
}

.journal-entry-body blockquote {
  margin: 0.3rem 0;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  color: var(--os-text-secondary);
}

.journal-entry-body h1,
.journal-entry-body h2,
.journal-entry-body h3 {
  margin: 0.4rem 0 0.2rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.journal-entry-body pre {
  margin: 0.3rem 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  overflow-x: auto;
}

.journal-entry-body code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9em;
}


.journal-entry-edit-btn {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.12s ease;
}

.journal-entry-card:hover .journal-entry-edit-btn {
  display: flex;
}

.journal-entry-edit-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

.journal-entry-body-clickable {
  cursor: text;
  border-radius: 4px;
  transition: background 0.12s ease;
}

.journal-entry-body-clickable:hover {
  background: rgba(255, 255, 255, 0.03);
}

.journal-entry-body-static {
  cursor: default;
}

.journal-entry-card.commit .journal-entry-meta {
  color: var(--accent);
}

.journal-entry-card.commit {
  padding: 0.35rem 0.75rem;
}

.journal-commit-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.journal-commit-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  line-height: 1.35;
}

.journal-commit-area {
  flex-shrink: 0;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 4.5em;
}

.journal-commit-msg {
  font-size: 0.66rem;
  color: var(--os-text-secondary);
}

.journal-entry-card.commit .journal-entry-body,
.journal-entry-card.commit .journal-entry-body p,
.journal-entry-card.commit .journal-entry-body div,
.journal-entry-card.commit .journal-entry-body span,
.journal-entry-card.commit .journal-entry-body .markdown-text {
  color: var(--os-text-secondary);
}

.journal-entry-card.commit .journal-commit-group,
.journal-entry-card.commit .journal-entry-body {
  font-size: 0.65rem;
  line-height: 1.35;
}

.journal-filter-bar {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem 0.25rem;
}

.journal-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--os-text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.journal-filter-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}

.journal-filter-pill.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
}

.journal-filter-count {
  opacity: 0.55;
  font-size: 0.6rem;
}

/* Log entry context menu */
.log-context-menu {
  position: fixed;
  z-index: 9999;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.log-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}
.log-context-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.log-context-menu button.destructive {
  color: #f87171;
}
.log-context-menu button.destructive:hover {
  background: rgba(248, 113, 113, 0.15);
}

/* Hide composer cursor when editing an entry */
.journal-stream.editing-entry .journal-composer .cm-editor .cm-cursorLayer {
  opacity: 0 !important;
}
.journal-stream.editing-entry .journal-composer .cm-editor .cm-selectionLayer {
  opacity: 0 !important;
}

.journal-entry-edit-area {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Compact EditableMarkdownBlock for inline journal entry editing */
.journal-entry-editor-compact .editable-markdown-edit-mode {
  padding: 0 !important;
  gap: 0.15rem !important;
}

.journal-entry-editor-compact .editable-markdown-editor-wrapper {
  border-radius: 6px !important;
  border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
  background: rgba(var(--accent-rgb), 0.06) !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.journal-entry-editor-compact .editable-markdown-editor-wrapper:focus-within {
  border-color: rgba(var(--accent-rgb), 0.5) !important;
}

.journal-entry-editor-compact .cm-editor {
  min-height: 0 !important;
  max-height: none;
}

.journal-entry-editor-compact .cm-editor .cm-scroller {
  min-height: 0 !important;
  font-family: inherit !important;
}

.journal-entry-editor-compact .cm-editor .cm-content {
  padding: 0.5rem 0.6rem !important;
  min-height: 0 !important;
  font-family: inherit !important;
}

.journal-entry-editor-compact .cm-editor .cm-line {
  font-family: inherit !important;
}

.journal-entry-editor-compact .editable-markdown-actions {
  justify-content: flex-end;
  gap: 0.3rem;
  padding: 0;
}

.journal-entry-editor-compact .editable-markdown-actions button {
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
}

.journal-entry-editor-compact .editable-markdown-hint {
  display: none !important;
}

.journal-entry-edit-input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--os-text-primary);
  font-size: 0.8rem;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  overflow: hidden;
}

.journal-entry-edit-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.journal-entry-edit-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

.journal-entry-edit-actions button {
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-secondary);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.journal-entry-edit-actions button:first-child {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(196, 181, 253, 0.95);
}

.journal-entry-edit-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.journal-entry-processed-badge {
  color: rgba(74, 222, 128, 0.6);
  margin-left: auto;
  display: flex;
  align-items: center;
}

.journal-processed-content.history {
  max-height: 180px;
  overflow-y: auto;
}

/* Activity Log — merged into Journal tab */
.journal-activity-log {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.5rem;
}

.journal-activity-log-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.25rem;
  cursor: pointer;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.journal-activity-log-header:hover {
  color: var(--os-text-secondary);
}

.journal-activity-log-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  font-size: 0.6rem;
  padding: 0.05rem 0.4rem;
  border-radius: 8px;
  font-weight: 700;
}

.journal-activity-log-chevron {
  margin-left: auto;
  opacity: 0.5;
}

.journal-activity-log-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.25rem;
}

.journal-activity-log-body .log-composer {
  opacity: 0.85;
}

.journal-activity-log-body .log-composer .journal-composer-editor {
  font-size: 0.75rem;
}

.journal-activity-log-body .log-entry-list {
  gap: 0.2rem;
}

.journal-activity-log-body .log-entry-list .journal-entry-card {
  padding: 0.3rem 0.4rem;
}

.journal-activity-log-body .log-entry-list .journal-entry-meta {
  gap: 0.3rem;
}

@media (max-width: 980px) {
  .today-journal-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}

/* This Week display - clickable */
.this-week-display {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.this-week-display:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* This Week editor */
.this-week-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.this-week-textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.6;
  resize: vertical;
}

.this-week-textarea:focus {
  outline: none;
  border-color: rgba(156, 163, 175, 0.5);
}

.this-week-textarea::placeholder {
  color: var(--os-text-hint);
}

.this-week-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.this-week-hint {
  flex: 1;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.this-week-cancel,
.this-week-save {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.this-week-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--os-text-muted);
}

.this-week-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
}

.this-week-save {
  background: rgba(156, 163, 175, 0.2);
  border: 1px solid rgba(156, 163, 175, 0.3);
  color: var(--os-text-primary);
}

.this-week-save:hover {
  background: rgba(156, 163, 175, 0.3);
}

/* ==================== */
/* Horizon Views        */
/* ==================== */

.horizon-section .section-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.horizon-section .section-header h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Period navigation arrows */
.horizon-period-nav {
  display: flex;
  gap: 0.25rem;
}

.horizon-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Period navigation — grouped pill */
.horizon-period-nav {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.horizon-period-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--os-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
}

.horizon-period-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.horizon-period-btn.horizon-period-today {
  width: auto;
  padding: 0 0.55rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(250, 204, 21, 0.75);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.horizon-period-btn.horizon-period-today:hover {
  color: rgba(250, 204, 21, 1);
  background: rgba(250, 204, 21, 0.1);
}

.horizon-period-btn.horizon-period-today.current {
  color: var(--os-text-hint);
  cursor: default;
}

.horizon-period-btn.horizon-period-today.current:hover {
  background: transparent;
  color: var(--os-text-hint);
}

/* Action icon buttons */
.horizon-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
}

.horizon-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.12);
}

.horizon-action-btn:disabled,
.horizon-action-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.horizon-action-btn.horizon-context-toggle.active {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.25);
}

/* Legacy — keep for compat but unused */
.horizon-rollover-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 26px;
  padding: 0 0.55rem;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.12);
  color: rgba(125, 211, 252, 0.95);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.horizon-rollover-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.45);
  color: rgba(186, 230, 253, 1);
}

.horizon-rollover-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.horizon-rollover-btn.compact {
  width: 26px;
  padding: 0;
  justify-content: center;
}

.horizon-day-today-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  padding: 0 0.55rem;
  color: rgba(250, 204, 21, 0.95);
}

.horizon-day-today-btn:hover {
  color: rgba(250, 204, 21, 1);
  background: rgba(250, 204, 21, 0.12);
}

.horizon-day-today-btn.current {
  color: var(--os-text-hint);
}

.horizon-day-today-btn.current:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-hint);
}

.horizon-day-today-btn.compact {
  width: 26px;
  padding: 0;
  justify-content: center;
}


/* Quarter accent - amber */
.horizon-quarter .section-header {
  background: rgba(251, 191, 36, 0.06);
}
.horizon-quarter .section-header h3 { color: rgba(251, 191, 36, 0.9); }
/* Month accent - blue */
.horizon-month .section-header {
  background: rgba(56, 189, 248, 0.06);
}
.horizon-month .section-header h3 { color: rgba(56, 189, 248, 0.9); }

/* Week accent - gray */
.horizon-week .section-header {
  background: rgba(156, 163, 175, 0.06);
}
.horizon-week .section-header h3 { color: rgba(156, 163, 175, 0.9); }

/* Strategy Context */
.strategy-context-section .section-header {
  background: rgba(250, 204, 21, 0.06);
}
.strategy-context-section .section-header h3 {
  color: rgba(250, 204, 21, 0.9);
}
.strategy-context-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.strategy-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 1rem;
}
.strategy-block h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.strategy-block .markdown-block {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}
.strategy-block .markdown-block p {
  margin: 0.25rem 0;
}
.strategy-block .markdown-block ul,
.strategy-block .markdown-block ol {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}
.strategy-block .markdown-block li {
  margin: 0.2rem 0;
}
.strategy-context-with-toc {
  display: flex;
  gap: 0;
  min-height: 0;
}
.strategy-context-with-toc .strategy-context-body {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}
.strategy-toc {
  width: 200px;
  min-width: 200px;
  padding: 1rem 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  overflow-y: auto;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 200px);
}
.strategy-toc-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--os-text-hint);
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}
.strategy-toc-list,
.strategy-toc-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.strategy-toc-children {
  padding-left: 0.125rem;
  margin-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.strategy-toc-item {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--os-text-muted);
  padding: 0.2rem 0.25rem 0.2rem 0.25rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.strategy-toc-item:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}
.strategy-toc-item.level-0 {
  font-weight: 600;
  color: var(--os-text-muted);
}
.strategy-toc-item.level-1,
.strategy-toc-item.level-2,
.strategy-toc-item.level-3 {
  font-size: 0.6875rem;
}
.strategy-toc-text {
  flex: 1;
  min-width: 0;
}
.strategy-toc-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--os-text-hint);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  justify-content: center;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.strategy-toc-toggle:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.strategy-context-empty {
  padding: 2rem;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.875rem;
}

.horizon-content {
  padding: 0.75rem 1rem;
}

.horizon-content .markdown-block {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}

.horizon-content .markdown-block strong {
  color: var(--os-text-primary);
}

.horizon-content .markdown-block ul,
.horizon-content .markdown-block ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.horizon-content .markdown-block li {
  margin: 0.25rem 0;
}

.horizon-content .markdown-block p {
  margin: 0.5rem 0;
}

.horizon-content .markdown-block p:first-child {
  margin-top: 0;
}

.horizon-content .markdown-block em {
  color: var(--os-text-muted);
  font-style: italic;
}

/* Horizon content uses EditableMarkdownBlock — minimal overrides */
.horizon-content .editable-markdown-block {
  min-height: 700px;
}

/* Make horizon body fill available space */
.horizon-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.horizon-body {
  flex: 1;
}

.horizon-content .editable-markdown-edit-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.horizon-content .editable-markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.horizon-content .editable-markdown-editor-wrapper .cm-editor {
  flex: 1;
  min-height: 0;
}

.horizon-content .editable-markdown-editor-wrapper .cm-scroller {
  overflow: auto;
}

/* Horizon attached files */
.horizon-files {
  margin-top: 0.25rem;
  padding: 0 0.25rem;
}

.horizon-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.25rem;
}

.horizon-files-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.horizon-files-toggle:hover {
  color: var(--os-text-secondary);
}

.horizon-files-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  font-size: 0.625rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 8px;
  min-width: 1.125rem;
  text-align: center;
}

.horizon-files-actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.horizon-files-action-btn {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 5px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}

.horizon-files-action-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

.horizon-files-list {
  padding: 0 0.25rem 0.25rem;
}

.horizon-files-empty {
  padding: 0.5rem 0.625rem;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  font-style: italic;
}

.rollover-dialog {
  width: min(680px, 92vw);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: rgba(18, 18, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.rollover-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rollover-dialog-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rollover-dialog-title h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.rollover-dialog-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rollover-dialog-body {
  flex: 1;
  min-height: 160px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 0.7rem 0.9rem;
}

.rollover-dialog-empty {
  height: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--os-text-muted);
  font-size: 0.82rem;
}

.rollover-dialog-error {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.75rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: rgba(254, 202, 202, 0.95);
  font-size: 0.8rem;
}

.rollover-dialog-toolbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.rollover-toolbar-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-secondary);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.rollover-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.rollover-toolbar-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--os-text-muted);
}

.rollover-item-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rollover-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rollover-item input[type="checkbox"] {
  margin: 0;
  accent-color: #38bdf8;
}

.rollover-item-text {
  flex: 1;
  font-size: 0.8rem;
  color: var(--os-text-primary);
  line-height: 1.4;
}

.rollover-item-badge {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(148, 163, 184, 0.9);
  background: rgba(148, 163, 184, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
}
.rollover-item-group-tag {
  font-size: 0.64rem;
  color: rgba(var(--accent-rgb), 0.85);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  margin-left: auto;
}

.rollover-item.already-in-target {
  opacity: 0.7;
}

/* Grouped hierarchy */
.rollover-group {
  display: flex;
  flex-direction: column;
}

.rollover-group.has-children {
  gap: 0;
}

.rollover-group.has-children .rollover-item-parent {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rollover-group.has-children .rollover-item-child {
  padding-left: 2rem;
  border-top: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.015);
  font-size: 0.78rem;
  color: var(--os-text-secondary);
}

.rollover-group.has-children .rollover-item-child:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.rollover-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: 0.8rem;
}

.rollover-group-header input[type="checkbox"] {
  margin: 0;
  accent-color: #38bdf8;
}

.rollover-group-name {
  flex: 1;
  color: var(--os-text-primary);
}

.rollover-item-type {
  font-size: 0.72rem;
  flex-shrink: 0;
}

.rollover-group-count {
  font-size: 0.62rem;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-weight: 500;
}

.rollover-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 0.95rem 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.horizon-file-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 6px;
  transition: background 0.15s;
}

.horizon-file-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.horizon-file-item.active {
  background: rgba(var(--accent-rgb), 0.1);
}

.horizon-file-item.creating {
  padding: 0.25rem 0.5rem;
  gap: 0.375rem;
  color: var(--os-text-muted);
}

.horizon-file-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  text-align: left;
}

.horizon-file-item.active .horizon-file-name {
  color: var(--accent);
}

.horizon-file-delete {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s;
  margin-right: 0.25rem;
}

.horizon-file-item:hover .horizon-file-delete {
  opacity: 1;
}

.horizon-file-delete:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

.horizon-file-inline-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  outline: none;
}

.horizon-file-inline-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.horizon-file-editor {
  margin-top: 0.375rem;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 8px;
  overflow: hidden;
}

.horizon-file-editor-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.horizon-file-editor-header span {
  flex: 1;
}

.horizon-file-close {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.horizon-file-close:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

.horizon-file-editor .editable-markdown-block {
  min-height: 200px;
}

/* Next subsection with tabs */
.focus-subsection-header.with-tabs {
  padding: 0;
  background: transparent;
}

.next-tabs {
  display: flex;
  gap: 0.125rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.25rem;
  border-radius: 8px;
  width: 100%;
}

.next-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  justify-content: center;
}

.next-tab:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.next-tab.active {
  background: rgba(56, 189, 248, 0.1);
  color: rgba(56, 189, 248, 0.95);
}

/* Suggested tab - purple accent when active */
.next-tab:last-child.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: rgba(var(--accent-rgb), 0.95);
}

.next-tab .tab-count {
  padding: 0.125rem 0.375rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 0.625rem;
  font-weight: 700;
}

.next-tab.active .tab-count {
  background: rgba(255, 255, 255, 0.15);
}

/* Suggested content within Focus view */
.suggested-content {
  padding: 0.5rem 0;
}

.suggested-content .capacity-note {
  margin-bottom: 0.75rem;
}

.suggested-content .rest-option {
  margin-top: 0.75rem;
}

.suggested-content .generated-at {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  text-align: right;
}

/* ==================== */
/* Task List Flat       */
/* ==================== */

.task-list-flat {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.task-row-flat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.75rem;
  background: none;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.task-row-flat:hover {
  background: rgba(255, 255, 255, 0.04);
}

.task-row-flat .task-checkbox {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.task-row-flat .task-checkbox:hover {
  color: #4ade80;
}

.task-row-flat .task-text {
  flex: 1;
  font-size: 0.875rem;
  color: var(--os-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-row-flat .task-text-group {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.task-row-flat .task-text-group:hover .task-text {
  color: var(--os-text-primary);
}

.task-row-flat .task-description-preview {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.task-row-flat .task-due-tag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0.1rem 0.4rem;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 4px;
  font-size: 0.6875rem;
  color: rgba(56, 189, 248, 0.7);
  margin-left: auto;
}

.task-row-flat .task-due-tag.due-today {
  background: rgba(251, 191, 36, 0.15);
  color: rgba(251, 191, 36, 0.85);
}

.task-row-flat .task-due-tag.due-soon {
  background: rgba(251, 146, 60, 0.12);
  color: rgba(251, 146, 60, 0.8);
}

.task-row-flat .task-due-tag.overdue {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.8);
}

.task-row-flat .task-text.done {
  text-decoration: line-through;
  color: var(--os-text-muted);
}

/* Completed task row styling */
.task-row-flat.completed {
  opacity: 0.5;
}

.task-row-flat.completed .task-checkbox {
  color: #4ade80;
  cursor: default;
}

.task-row-flat.completed .task-checkbox:hover {
  color: #4ade80;
}

/* Drag and drop styles */
.task-row-flat .drag-handle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-hint);
  cursor: grab;
  margin-left: -0.25rem;
  transition: color 0.15s ease;
}

.task-row-flat:hover .drag-handle {
  color: var(--os-text-muted);
}

.task-row-flat .drag-handle:active {
  cursor: grabbing;
}

.task-row-flat.dragging {
  opacity: 0.5;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
}

.task-row-flat.drag-over {
  background: rgba(var(--accent-rgb), 0.15);
  border-top: 2px solid rgba(var(--accent-rgb), 0.5);
}

.task-row-flat .task-subtasks-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 0.125rem 0.375rem;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 4px;
  color: rgba(var(--accent-rgb), 0.7);
}

.task-row-flat .task-subtasks-indicator svg {
  flex-shrink: 0;
}

.task-row-flat .task-subtasks-count {
  font-size: 0.6875rem;
  font-weight: 500;
}

.task-row-flat .task-domain-tag {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.task-row-flat .task-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.task-row-flat:hover .task-actions,
.task-row-flat.dropdown-open .task-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.task-row-flat .task-action-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.task-row-flat .task-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}

.task-row-flat .task-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.task-row-flat .task-action-btn.promote:hover {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.task-row-flat .task-action-btn.demote:hover {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* Edit form in flat list */
.task-row-flat .task-edit-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.task-row-flat .task-edit-input {
  flex: 1;
  padding: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--os-text-primary);
  font-size: 0.875rem;
}

.task-row-flat .task-edit-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.task-row-flat .task-edit-actions {
  display: flex;
  gap: 0.25rem;
}

.task-row-flat .task-edit-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.task-row-flat .task-edit-btn.save {
  color: #4ade80;
}

.task-row-flat .task-edit-btn.cancel {
  color: var(--os-text-muted);
}

/* ==================== */
/* Next Queue Tree      */
/* ==================== */

.next-queue-tree {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.next-queue-filters {
  display: flex;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.filter-chip {
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

.filter-chip.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

/* Domain list - vertical stack */
.next-queue-domains-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Domain section - contains header + areas grid */
.next-domain-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}

.next-domain-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.next-domain-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.next-domain-header .domain-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next-domain-header .domain-icon.blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.next-domain-header .domain-icon.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.next-domain-header .domain-icon.purple { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.next-domain-header .domain-icon.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.next-domain-header .domain-icon.gray { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }
.next-domain-header .domain-icon.pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.next-domain-header .domain-icon.teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }

.next-domain-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.domain-task-count {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Areas grid - 2 columns */
.next-areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0.75rem;
}

@media (max-width: 600px) {
  .next-areas-grid {
    grid-template-columns: 1fr;
  }
}

/* Area card */
.next-area-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}

.next-area-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.next-area-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.area-task-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
  font-size: 0.625rem;
  font-weight: 600;
}

.next-area-tasks {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Task row */
.next-task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  transition: background 0.15s ease;
}

.next-task-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.next-task-row:hover .task-actions {
  opacity: 1;
}

.next-task-text {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.4;
}

.next-task-text.done {
  text-decoration: line-through;
  color: var(--os-text-muted);
}

.next-task-row.completed {
  opacity: 0.5;
}

.next-task-row.completed .task-action-btn.completed {
  color: #4ade80;
}

/* ==================== */
/* Suggestion List      */
/* ==================== */

.suggestion-list {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.suggestion-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.suggestion-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.suggestion-main {
  flex: 1;
  min-width: 0;
}

.suggestion-task {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.suggestion-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.suggestion-domain {
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

.suggestion-source {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  font-style: italic;
}

.suggestion-reasoning {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin-top: 0.375rem;
  line-height: 1.4;
}

.suggestion-flags {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.suggestion-flag {
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
}

.suggestion-flag.wellbeing {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.suggestion-flag.neglected_domain {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.suggestion-flag.roadmap_aligned {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.suggestion-actions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex-shrink: 0;
}

.suggestion-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.suggestion-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}

.suggestion-action-btn.approve:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.suggestion-action-btn.dismiss:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* ==================== */
/* Capacity & Rest      */
/* ==================== */

.capacity-note {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.capacity-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.capacity-indicator.green {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.capacity-indicator.yellow {
  background: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.4);
}

.capacity-indicator.red {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.capacity-text {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  flex: 1;
}

.rest-option {
  padding: 0.75rem 1rem;
  background: rgba(74, 222, 128, 0.06);
  border-top: 1px solid rgba(74, 222, 128, 0.1);
}

.rest-option-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4ade80;
  margin-bottom: 0.25rem;
}

.rest-option-text {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.4;
}

.generated-at {
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ==================== */
/* Log View             */
/* ==================== */

.log-view {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.log-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}

.log-date-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.log-date-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.log-date-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.log-synthesize-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  margin-left: auto;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 6px;
  color: rgba(56, 189, 248, 0.8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.log-synthesize-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.log-synthesize-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.log-synthesize-btn .spinning {
  animation: spin 1s linear infinite;
}

.log-organize-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  color: rgba(var(--accent-rgb), 0.8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.log-organize-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}

.log-organize-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.log-organize-btn .spinning {
  animation: spin 1s linear infinite;
}

.log-current-date {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
  min-width: 140px;
  text-align: center;
}

.log-sections {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.log-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.log-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.log-section-header h4 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.log-section-header .item-count {
  padding: 0.125rem 0.375rem;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
}

.log-section-add-btn {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.log-section-add-btn:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

/* Log add form */
.log-add-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  position: relative;
  background: none;
  border-bottom: none;
}

.log-add-time {
  width: 60px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  padding: 0.375rem 0.5rem;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  outline: none;
}

.log-add-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 0.4rem 4rem 0.4rem 0.75rem;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
  height: 34px;
}

.log-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.06);
}

.log-add-time:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.log-add-submit {
  position: absolute;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.2);
  border: none;
  border-radius: 50%;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.log-add-cancel {
  position: absolute;
  right: 3.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 50%;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.log-add-submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.35);
  color: #fff;
}

.log-add-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.log-add-cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.log-add-time-display {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.8);
  min-width: 42px;
}

.log-empty-hint {
  padding: 1rem;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}

/* Manual log section styling */
.log-section.log-manual {
  border-color: rgba(var(--accent-rgb), 0.2);
}

.log-section.log-manual .log-section-header {
  border-bottom-color: rgba(var(--accent-rgb), 0.1);
}

.log-section.log-manual .log-section-header svg {
  color: rgba(var(--accent-rgb), 0.7);
}

.log-items {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.log-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.log-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.log-item-time {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  min-width: 48px;
}

.log-item-text {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Log item actions */
.log-item-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  margin-left: 0.5rem;
}

.log-item:hover .log-item-actions {
  opacity: 1;
}

.log-item-action {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
}

.log-item-action.edit:hover {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.log-item-action.delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Log item edit form */
.log-item.editing {
  background: rgba(255, 255, 255, 0.04);
}

.log-item-edit-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.log-item-edit-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  padding: 0.25rem 0.5rem;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
}

.log-item-edit-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.log-item-edit-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.log-item-edit-btn.save:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.log-item-edit-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Empty log section */
.log-section.empty {
  opacity: 0.7;
}

.log-section.empty .log-section-header {
  border-bottom: none;
}

/* Log section color accents */
.log-section.completed .log-section-header {
  background: rgba(74, 222, 128, 0.06);
}

.log-section.completed .log-section-header h4 {
  color: #4ade80;
}

.log-section.completed .item-count {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.log-section.events .log-section-header {
  background: rgba(56, 189, 248, 0.06);
}

.log-section.events .log-section-header h4 {
  color: #38bdf8;
}

.log-section.events .item-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.log-section.code .log-section-header {
  background: rgba(var(--accent-rgb), 0.06);
}

.log-section.code .log-section-header h4 {
  color: var(--accent);
}

.log-section.code .item-count {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

.log-section.focus .log-section-header {
  background: rgba(251, 146, 60, 0.06);
}

.log-section.focus .log-section-header h4 {
  color: #fb923c;
}

.log-section.focus .item-count {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.log-section.notes .log-section-header {
  background: rgba(156, 163, 175, 0.06);
}

/* Log empty state */
.log-empty {
  text-align: center;
  padding: 2rem;
  color: var(--os-text-muted);
  font-size: 0.875rem;
}

/* ==================== */
/* Scrollbar for views  */
/* ==================== */

.planning-view::-webkit-scrollbar,
.log-view::-webkit-scrollbar {
  width: 8px;
}

.planning-view::-webkit-scrollbar-track,
.log-view::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.planning-view::-webkit-scrollbar-thumb,
.log-view::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.planning-view::-webkit-scrollbar-thumb:hover,
.log-view::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ==================== */
/* Multi-day Log View   */
/* ==================== */

.log-view-multiday {
  padding: 0;
  gap: 0;
}

.log-view-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  color: var(--os-text-muted);
  font-size: 0.875rem;
}

.log-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.log-toolbar-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.log-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.log-add-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 6px;
  color: rgba(74, 222, 128, 0.8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.log-add-btn:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
}

.log-view-multiday .log-add-form {
  padding: 0.75rem 1rem;
  background: none;
  border-bottom: none;
}

.log-add-time-display {
  padding: 0.375rem 0.625rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-family: monospace;
}

.log-days-container {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.log-empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  color: var(--os-text-muted);
}

.log-empty-hint span {
  font-size: 0.875rem;
}

.log-empty-sub {
  font-size: 0.75rem !important;
  color: var(--os-text-hint) !important;
}

/* Day Group */
.log-day-group {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.log-day-group:last-child {
  border-bottom: none;
}

.log-day-group.is-today {
  background: rgba(56, 189, 248, 0.03);
}

.log-day-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.log-day-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.log-day-group.is-today .log-day-title {
  color: #38bdf8;
}

.log-day-count {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.log-day-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.log-day-content .log-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.log-day-content .log-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 0.8125rem;
}

.log-day-content .log-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.log-day-content .log-item-time {
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-family: monospace;
  flex-shrink: 0;
  min-width: 45px;
}

.log-day-content .log-item-text {
  flex: 1;
  color: var(--os-text-secondary);
  line-height: 1.4;
}

.log-day-content .log-item-actions {
  display: none;
  gap: 0.25rem;
}

.log-day-content .log-item:hover .log-item-actions {
  display: flex;
}

/* Compact section styles for multi-day view */
.log-section-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.log-section-compact.focus {
  color: rgba(251, 191, 36, 0.7);
}

.log-section-compact.code {
  color: rgba(var(--accent-rgb), 0.7);
}

.log-compact-label {
  font-weight: 500;
}

.log-compact-value {
  color: var(--os-text-muted);
}

.log-compact-areas {
  color: var(--os-text-hint);
  font-size: 0.6875rem;
}

.log-section-compact.clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.log-section-compact.clickable:hover {
  background: rgba(255, 255, 255, 0.05);
}

.log-compact-chevron {
  margin-left: auto;
  opacity: 0.4;
}

.log-section-compact.clickable:hover .log-compact-chevron {
  opacity: 0.7;
}

.log-section-header.clickable {
  cursor: pointer;
}

.log-section-header.clickable:hover {
  background: rgba(255, 255, 255, 0.05);
}

.log-section-chevron {
  margin-left: auto;
  opacity: 0.5;
}

/* ==================== */
/* Grouped Log Display  */
/* ==================== */

/* Log date info in nav */
.log-date-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 160px;
}

.log-generated-at {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

/* Grouped content layout */
.log-grouped-content {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Individual group container */
.log-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

/* Log summary line */
.log-summary {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Group header with chip and stat */
.log-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.log-group-header.clickable {
  cursor: pointer;
}

.log-group-header.clickable:hover {
  background: rgba(255, 255, 255, 0.04);
}

.log-group-icon {
  color: var(--os-text-muted);
}

.log-group-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.log-group-count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
}

.log-group-lines {
  display: flex;
  gap: 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  margin-left: 0.25rem;
}

.log-group-lines .lines-added {
  color: rgba(74, 222, 128, 0.7);
}

.log-group-lines .lines-removed {
  color: rgba(248, 113, 113, 0.6);
}

.log-item-lines {
  display: flex;
  gap: 0.3rem;
  font-size: 0.6rem;
  font-weight: 500;
  margin-left: auto;
  flex-shrink: 0;
}

.log-item-lines .lines-added {
  color: rgba(74, 222, 128, 0.55);
}

.log-item-lines .lines-removed {
  color: rgba(248, 113, 113, 0.45);
}

.log-group-chevron {
  margin-left: auto;
  color: var(--os-text-hint);
  transition: transform 0.2s ease;
}

/* Area/domain chip in group header */
.log-group-chip {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Color variants for area chips */
.log-group-chip.blue { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.log-group-chip.green { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.log-group-chip.purple { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); }
.log-group-chip.orange { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.log-group-chip.gray { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }
.log-group-chip.pink { background: rgba(244, 114, 182, 0.2); color: #f472b6; }
.log-group-chip.teal { background: rgba(45, 212, 191, 0.2); color: #2dd4bf; }
.log-group-chip.cyan { background: rgba(34, 211, 238, 0.2); color: #22d3ee; }
.log-group-chip.amber { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }

/* Group stat badge */
.log-group-stat {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
}

/* Items within a group */
.log-group-items {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Individual log item (commit or focus session) */
.log-group-items .log-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.log-group-items .log-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Commit hash styling */
.log-item-hash {
  flex-shrink: 0;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

/* Summary stats row */
.log-summary-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.log-summary-stat {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
}

.log-summary-stat strong {
  color: var(--os-text-primary);
  font-weight: 600;
}

.log-summary-stat.positive {
  color: rgba(74, 222, 128, 0.9);
}

.log-summary-stat.negative {
  color: rgba(239, 68, 68, 0.8);
}

/* Focus time group colors */
.log-group.body .log-group-header { background: rgba(74, 222, 128, 0.06); }
.log-group.build .log-group-header { background: rgba(56, 189, 248, 0.06); }
.log-group.admin .log-group-header { background: rgba(251, 146, 60, 0.06); }
.log-group.visibility .log-group-header { background: rgba(244, 114, 182, 0.06); }
.log-group.village .log-group-header { background: rgba(var(--accent-rgb), 0.06); }
.log-group.nest .log-group-header { background: rgba(45, 212, 191, 0.06); }
.log-group.work .log-group-header { background: rgba(251, 191, 36, 0.06); }

/* Code shipped area colors */
.log-group.desktop .log-group-header { background: rgba(56, 189, 248, 0.06); }
.log-group.desktop .log-group-icon { color: #38bdf8; }
.log-group.mobile .log-group-header { background: rgba(74, 222, 128, 0.06); }
.log-group.mobile .log-group-icon { color: #4ade80; }
.log-group.annex .log-group-header { background: rgba(var(--accent-rgb), 0.06); }
.log-group.annex .log-group-icon { color: var(--accent); }
.log-group.cli .log-group-header { background: rgba(251, 146, 60, 0.06); }
.log-group.cli .log-group-icon { color: #fb923c; }
.log-group.docs .log-group-header { background: rgba(156, 163, 175, 0.06); }
.log-group.docs .log-group-icon { color: #9ca3af; }
.log-group.vault .log-group-header { background: rgba(244, 114, 182, 0.06); }
.log-group.vault .log-group-icon { color: #f472b6; }
.log-group.content .log-group-header { background: rgba(244, 114, 182, 0.06); }
.log-group.content .log-group-icon { color: #f472b6; }
.log-group.other .log-group-header { background: rgba(255, 255, 255, 0.02); }
.log-group.other .log-group-icon { color: var(--os-text-muted); }
.log-group.general .log-group-header { background: rgba(255, 255, 255, 0.02); }

/* Domain name text in group header */
.log-group-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

/* Muted items (e.g., "and X more") */
.log-item.muted {
  opacity: 0.5;
  font-style: italic;
}

.log-item.muted .log-item-text {
  font-size: 0.75rem;
}

/* ==================== */
/* Grouped Task List    */
/* ==================== */

.task-list-grouped {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Task group container */
.task-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

/* Group header */
.task-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Domain icon in group header */
.task-group-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-group-icon.blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.task-group-icon.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.task-group-icon.purple { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.task-group-icon.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.task-group-icon.gray { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }
.task-group-icon.pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.task-group-icon.teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }

/* Domain name in header */
.task-group-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-primary);
  flex: 1;
}

/* Task count badge */
.task-group-count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
}

/* Group header color accents */
.task-group.blue .task-group-header { background: rgba(56, 189, 248, 0.06); }
.task-group.green .task-group-header { background: rgba(74, 222, 128, 0.06); }
.task-group.purple .task-group-header { background: rgba(var(--accent-rgb), 0.06); }
.task-group.orange .task-group-header { background: rgba(251, 146, 60, 0.06); }
.task-group.pink .task-group-header { background: rgba(244, 114, 182, 0.06); }
.task-group.teal .task-group-header { background: rgba(45, 212, 191, 0.06); }

/* Items container */
.task-group-items {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* Grouped task row with checkbox */
.task-row-grouped {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.task-row-grouped:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Checkbox button */
.task-checkbox {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
}

.task-checkbox:hover {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
}

/* Task content area */
.task-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Task content in grouped view - don't expand, keep actions near text */
.task-row-grouped .task-content {
  flex: none;
  max-width: 100%;
}

/* Area indicator (subdomain) */
.task-area {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.125rem 0.375rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

/* Task text in grouped row */
.task-row-grouped .task-text {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  line-height: 1.4;
}

/* Completed task row styling (grouped) */
.task-row-grouped.completed {
  opacity: 0.5;
}

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

.task-row-grouped.completed .task-checkbox {
  color: #4ade80;
  cursor: default;
}

.task-row-grouped.completed .task-checkbox:hover {
  background: transparent;
}

/* Defer/Later button */
.task-defer-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0;
}

.task-row-grouped:hover .task-defer-btn {
  opacity: 1;
}

.task-defer-btn:hover {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

/* Task row actions (grouped view) - inline with text */
.task-row-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  margin-left: 0.5rem;
}

.task-row-grouped:hover .task-row-actions,
.task-row-grouped.dropdown-open .task-row-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.task-row-actions .task-action-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.task-row-actions .task-action-btn.promote:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.task-row-actions .task-action-btn.demote:hover {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}

.task-row-actions .task-action-btn.thread:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.task-row-actions .task-action-btn.thread.has-thread {
  color: var(--accent);
  opacity: 1;
}

.task-row-actions .task-action-btn.edit:hover {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

.task-row-actions .task-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Editing state for grouped rows */
.task-row-grouped.editing {
  background: rgba(255, 255, 255, 0.04);
}

.task-row-grouped .task-edit-form {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.task-row-grouped .task-edit-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.375rem 0.625rem;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.15s ease;
}

.task-row-grouped .task-edit-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.task-row-grouped .task-edit-actions {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: 0.25rem;
}

.task-row-grouped .task-edit-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.task-row-grouped .task-edit-btn.save:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.task-row-grouped .task-edit-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Voice source badge in grouped view */
.task-row-grouped .task-source-badge.voice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 50%;
  color: var(--accent);
  flex-shrink: 0;
}

/* Compact task row (no domain chip) - keep for other uses */
.task-row.compact {
  padding: 0.5rem 0.625rem;
  gap: 0.5rem;
}

/* Adjust text in compact row */
.task-row.compact .task-text {
  font-size: 0.8125rem;
}

/* ==================== */
/* Tree Navigation v2   */
/* ==================== */

.tree-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.5rem 0.75rem;
}

.tree-section-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-hint);
  padding: 0.375rem 0.75rem;
  margin-top: 0.25rem;
}

/* Collapsible section headers (Planning, Tags, Areas) */
.tree-section-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--os-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}

.tree-section-header:hover {
  color: var(--os-text-secondary);
}

.tree-section-chevron {
  opacity: 0.5;
  flex-shrink: 0;
}

.tree-section-count {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 6px;
}

/* Domain items in tree */
.tree-item.domain-item {
}

.tree-item.domain-item.blue { color: rgba(56, 189, 248, 0.9); }
.tree-item.domain-item.green { color: rgba(74, 222, 128, 0.9); }
.tree-item.domain-item.purple { color: rgba(var(--accent-rgb), 0.9); }
.tree-item.domain-item.orange { color: rgba(251, 146, 60, 0.9); }
.tree-item.domain-item.gray { color: rgba(156, 163, 175, 0.9); }
.tree-item.domain-item.pink { color: rgba(244, 114, 182, 0.9); }
.tree-item.domain-item.teal { color: rgba(45, 212, 191, 0.9); }

.tree-item.domain-item.active.blue { background: rgba(56, 189, 248, 0.15); }
.tree-item.domain-item.active.green { background: rgba(74, 222, 128, 0.15); }
.tree-item.domain-item.active.purple { background: rgba(var(--accent-rgb), 0.15); }
.tree-item.domain-item.active.orange { background: rgba(251, 146, 60, 0.15); }
.tree-item.domain-item.active.gray { background: rgba(156, 163, 175, 0.15); }
.tree-item.domain-item.active.pink { background: rgba(244, 114, 182, 0.15); }
.tree-item.domain-item.active.teal { background: rgba(45, 212, 191, 0.15); }

/* Suggested item purple accent */
.tree-item.suggested-item {
  color: rgba(var(--accent-rgb), 0.9);
}

.tree-item.suggested-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

/* Section description */
.section-description {
  padding: 0 1rem 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin: 0;
}

/* ==================== */
/* Domain View          */
/* ==================== */

.domain-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Domain header */
.domain-view-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.domain-view-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.domain-view-icon.blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.domain-view-icon.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.domain-view-icon.purple { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.domain-view-icon.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.domain-view-icon.gray { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }
.domain-view-icon.pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.domain-view-icon.teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }

.domain-view-title h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.domain-view-stats {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

/* Domain tabs */
.domain-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.domain-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.domain-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}

.domain-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.domain-tab .tab-count {
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
}

.domain-tab.active .tab-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

/* Domain content */
.domain-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

/* Domain empty state */
.domain-empty {
  text-align: center;
  padding: 2rem 1rem;
}

.domain-empty p {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}

.domain-empty-hint {
  font-size: 0.75rem;
  color: var(--os-text-hint);
}

/* Domain task list */
.domain-task-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Domain task row */
.domain-task-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.domain-task-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Domain task actions */
.domain-task-actions {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.domain-task-row:hover .domain-task-actions,
.domain-task-row.dropdown-open .domain-task-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Domain action buttons */
.domain-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.domain-action-btn.promote:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.domain-action-btn.demote:hover {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}

.domain-action-btn.mention:hover {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}

/* Task move dropdown menu */
.task-move-dropdown {
  position: fixed;
  min-width: 140px;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  overflow: hidden;
}

.task-move-dropdown-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.task-move-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.1s ease;
  text-align: left;
}

.task-move-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.task-move-dropdown-item:first-of-type {
  color: #4ade80;
}

.task-move-dropdown-item:first-of-type:hover {
  background: rgba(74, 222, 128, 0.15);
}

/* Domain header color accents */
.domain-view-header.blue { border-left: 3px solid #38bdf8; }
.domain-view-header.green { border-left: 3px solid #4ade80; }
.domain-view-header.purple { border-left: 3px solid #a78bfa; }
.domain-view-header.orange { border-left: 3px solid #fb923c; }
.domain-view-header.gray { border-left: 3px solid #9ca3af; }
.domain-view-header.pink { border-left: 3px solid #f472b6; }
.domain-view-header.teal { border-left: 3px solid #2dd4bf; }

/* Add button in domain header */
.domain-add-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 8px;
  color: #4ade80;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}

.domain-add-btn:hover {
  background: rgba(74, 222, 128, 0.25);
  border-color: rgba(74, 222, 128, 0.5);
}

/* Add form */
.domain-add-form {
  padding: 1rem 1.25rem;
  background: rgba(74, 222, 128, 0.06);
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.add-form-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.add-form-row.secondary {
  flex-wrap: wrap;
}

.add-form-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease;
}

.add-form-input:focus {
  border-color: rgba(74, 222, 128, 0.5);
}

.add-form-input.small {
  flex: 0 0 120px;
}

.add-form-select {
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  outline: none;
  cursor: pointer;
}

.add-form-select:focus {
  border-color: rgba(74, 222, 128, 0.5);
}

.add-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.add-form-btn {
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.add-form-btn.cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--os-text-muted);
}

.add-form-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
}

.add-form-btn.submit {
  background: rgba(74, 222, 128, 0.2);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.add-form-btn.submit:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.3);
}

.add-form-btn.submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Edit and delete buttons */
.domain-action-btn.edit {
  padding: 0.375rem;
}

.domain-action-btn.edit:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.domain-action-btn.delete {
  padding: 0.375rem;
}

.domain-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Editing state */
.domain-task-row.editing {
  background: rgba(56, 189, 248, 0.06);
}

.task-edit-form {
  flex: 1;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.task-edit-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
}

.task-edit-input:focus {
  border-color: rgba(56, 189, 248, 0.5);
}

.task-edit-actions {
  display: flex;
  gap: 0.25rem;
}

.task-edit-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.task-edit-btn.save {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.task-edit-btn.save:hover {
  background: rgba(74, 222, 128, 0.25);
}

.task-edit-btn.cancel {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.8);
}

.task-edit-btn.cancel:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Voice source badge */
.task-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.task-source-badge.voice {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

/* Task content with badge */
.task-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Task tags */
.task-tags {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.task-tag {
  padding: 0.125rem 0.375rem;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  color: rgba(var(--accent-rgb), 0.9);
  font-size: 0.625rem;
  font-weight: 500;
}

/* Task age indicator */
.task-age {
  padding: 0.125rem 0.375rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  color: var(--os-text-muted);
  font-size: 0.625rem;
  font-weight: 500;
  flex-shrink: 0;
}

.task-age.aging {
  background: rgba(251, 146, 60, 0.15);
  color: rgba(251, 146, 60, 0.9);
}

.task-age.stale {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.9);
}

/* Mention count indicator */
.task-mentions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.125rem 0.375rem;
  background: rgba(251, 146, 60, 0.15);
  border-radius: 4px;
  color: rgba(251, 146, 60, 0.9);
  font-size: 0.625rem;
  font-weight: 600;
  flex-shrink: 0;
}

.task-mentions svg {
  color: rgba(251, 146, 60, 0.9);
}

/* High mention count - more emphasis */
.task-mentions.hot {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.95);
}

.task-mentions.hot svg {
  color: rgba(239, 68, 68, 0.95);
}

/* Row highlighting for aging/stale tasks */
.domain-task-row.aging {
  border-left: 2px solid rgba(251, 146, 60, 0.5);
}

.domain-task-row.stale {
  border-left: 2px solid rgba(239, 68, 68, 0.5);
}

/* Completed task styling */
.domain-task-row.completed {
  opacity: 0.5;
}

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

.domain-task-row.completed .task-checkbox {
  color: #4ade80;
  cursor: default;
}

.domain-task-row.completed .task-checkbox:hover {
  background: transparent;
}

/* ─── Task Type Indicators ─── */
/* ─── Task Type Visual Indicators ─── */
.task-row-flat.task-type-obligation .task-checkbox,
.task-row-grouped.task-type-obligation .task-checkbox,
.domain-task-row.task-type-obligation .task-checkbox {
  color: rgba(251, 146, 60, 0.7);
}
.task-row-flat.task-type-self .task-checkbox,
.task-row-grouped.task-type-self .task-checkbox,
.domain-task-row.task-type-self .task-checkbox {
  color: rgba(56, 189, 248, 0.7);
}
.task-row-flat.task-type-intention .task-checkbox,
.task-row-grouped.task-type-intention .task-checkbox,
.domain-task-row.task-type-intention .task-checkbox {
  color: var(--os-text-hint);
}
.task-heavy .task-text {
  font-weight: 600;
}
.domain-task-row.task-type-obligation {
  border-left: 3px solid rgba(251, 146, 60, 0.5);
}
.domain-task-row.task-type-self {
  border-left: 3px solid rgba(56, 189, 248, 0.5);
}
.domain-task-row.task-type-intention {
  border-left: 3px solid rgba(255, 255, 255, 0.12);
}

/* ─── Task Type Toggle (Add/Edit Dialog) ─── */
.task-type-toggle {
  display: flex;
  gap: 4px;
}
.task-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-type-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}
.task-type-btn.active.type-obligation {
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}
.task-type-btn.active.type-self {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}
.task-type-btn.active.type-intention {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--os-text-muted);
}

/* ─── Task Weight Toggle ─── */
.task-weight-toggle {
  display: flex;
  gap: 4px;
}
.task-weight-btn {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-weight-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}
.task-weight-btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--os-text-secondary);
}

/* ─── Priority Toggles (Urgent/Important) ─── */
.task-priority-toggles {
  display: flex;
  gap: 4px;
}
.task-priority-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.task-priority-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
}
.task-priority-btn.active.urgent {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.task-priority-btn.active.important {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.3);
  color: #eab308;
}

/* ─── Priority Indicators in Task List ─── */
.task-priority-indicators {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-left: 4px;
  flex-shrink: 0;
}
.task-priority-indicator {
  display: flex;
  align-items: center;
  opacity: 0.6;
}
.task-priority-indicator.urgent {
  color: #ef4444;
}
.task-priority-indicator.important {
  color: #eab308;
}

/* Toast Notification */
.ops-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: #fff;
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  min-width: 200px;
  max-width: 400px;
}

.ops-toast.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ops-toast.success {
  border-left: 4px solid #4ade80;
}

.ops-toast.error {
  border-left: 4px solid #ef4444;
}

.ops-toast.info {
  border-left: 4px solid #38bdf8;
}

.ops-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ops-toast.success .ops-toast-icon {
  color: #4ade80;
}

.ops-toast.error .ops-toast-icon {
  color: #ef4444;
}

.ops-toast.info .ops-toast-icon {
  color: #38bdf8;
}

.ops-toast-message {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
}

.ops-toast-close {
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}

.ops-toast-close:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}

/* ==================== */
/* Task Edit Dialog     */
/* ==================== */

.task-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.15s ease;
}

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

.task-edit-dialog {
  width: 90%;
  max-width: 860px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease;
}

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

.task-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.task-edit-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.task-edit-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.task-edit-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.task-edit-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 70vh;
  overflow-y: auto;
}

.task-edit-body::-webkit-scrollbar {
  width: 8px;
}

.task-edit-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.task-edit-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.task-edit-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.task-edit-textarea::-webkit-scrollbar {
  width: 6px;
}

.task-edit-textarea::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.task-edit-textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.task-edit-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.task-edit-two-col {
  flex-direction: row;
  gap: 1.5rem;
}

.task-edit-col-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.task-edit-col-meta {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.task-edit-col-meta .task-edit-field label {
  font-size: 0.7rem;
}

.task-edit-col-meta .task-edit-select,
.task-edit-col-meta .task-edit-input {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

.task-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.task-edit-field label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
}

.task-edit-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--os-text-primary);
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: none;
  min-height: 80px;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.task-edit-textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.task-edit-textarea::placeholder {
  color: var(--os-text-hint);
}

.task-edit-textarea.subtasks {
  min-height: 100px;
  font-size: 0.875rem;
  font-family: inherit;
}

.task-edit-hint {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  font-weight: 400;
  margin-left: 0.5rem;
}

.task-edit-row {
  display: flex;
  gap: 1rem;
}

.task-edit-row .task-edit-field {
  flex: 1;
}

.task-edit-select {
  width: 100%;
  padding: 0.625rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.task-edit-select:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.task-edit-select option {
  background: #1e1e23;
  color: var(--os-text-primary);
}

.task-edit-input {
  width: 100%;
  padding: 0.625rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.875rem;
  transition: border-color 0.15s ease;
}

.task-edit-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.task-edit-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}

.task-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  gap: 0.75rem;
}

.task-edit-footer-right {
  display: flex;
  gap: 0.75rem;
}

.task-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
}

.task-edit-btn.save {
  background: rgba(var(--accent-rgb), 0.9);
  color: white;
  padding: 0.75rem 2rem;
  min-width: 100px;
}

.task-edit-btn.save:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 1);
  transform: translateY(-1px);
}

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

.task-edit-btn.cancel {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  padding: 0.75rem 1.5rem;
  min-width: 90px;
}

.task-edit-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--os-text-primary);
}

.task-edit-btn.delete {
  background: rgba(239, 68, 68, 0.1);
  color: rgba(239, 68, 68, 0.9);
  padding: 0.75rem 1.5rem;
  min-width: 90px;
}

.task-edit-btn.delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 1);
}

/* Area Tree Picker */
.area-tree {
  max-height: 200px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.25rem;
}

.area-tree::-webkit-scrollbar {
  width: 4px;
}

.area-tree::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.area-tree-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.3rem 0.5rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.1s ease;
  text-align: left;
}

.area-tree-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

.area-tree-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.area-tree-none {
  margin-bottom: 0.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px 4px 0 0;
  padding-bottom: 0.35rem;
}

.area-tree-domain {
  font-weight: 600;
  color: var(--os-text-secondary);
}

.area-tree-arrow {
  flex-shrink: 0;
  opacity: 0.5;
  cursor: pointer;
}

.area-tree-area {
  padding-left: 1.5rem;
  font-weight: 400;
}

.area-tree-group {
  margin-bottom: 0.0625rem;
}

/* People Picker */
.people-picker {
  position: relative;
}

.people-picker-filter {
  width: 100%;
}

.people-picker-list {
  max-height: 160px;
  overflow-y: auto;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.25rem;
  margin-top: 0.25rem;
}

.people-picker-list::-webkit-scrollbar {
  width: 4px;
}

.people-picker-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.people-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.35rem 0.5rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
}

.people-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

.people-picker-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.people-picker-none {
  color: var(--os-text-muted);
  font-style: italic;
  margin-bottom: 0.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.35rem;
}

.people-picker-name {
  font-weight: 500;
}

.people-picker-circle {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: capitalize;
}

.backlog-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Task Domain Groups - two-level hierarchy: Domain > Area */
.task-domain-group {
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

.task-domain-group:last-child {
  margin-bottom: 0;
}

.task-domain-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.task-domain-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.task-domain-icon.blue { color: #38bdf8; background: rgba(56, 189, 248, 0.15); }
.task-domain-icon.green { color: #4ade80; background: rgba(74, 222, 128, 0.15); }
.task-domain-icon.purple { color: var(--accent); background: rgba(var(--accent-rgb), 0.15); }
.task-domain-icon.orange { color: #fb923c; background: rgba(251, 146, 60, 0.15); }
.task-domain-icon.pink { color: #f472b6; background: rgba(244, 114, 182, 0.15); }
.task-domain-icon.teal { color: #2dd4bf; background: rgba(45, 212, 191, 0.15); }
.task-domain-icon.gray { color: var(--os-text-muted); background: rgba(255, 255, 255, 0.08); }

.task-domain-label {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--os-text-primary);
}

.task-domain-count {
  padding: 0.125rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
}

.task-domain-areas {
  padding: 0.5rem;
}

/* Task Area Groups - within domain groups */
.task-area-group {
  margin-bottom: 0.5rem;
}

.task-area-group:last-child {
  margin-bottom: 0;
}

.task-area-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin-left: 0.25rem;
}

.task-area-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-muted);
}

.task-area-count {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-hint);
}

/* Task action dropdown (portaled to body) */
.task-dropdown {
  position: fixed;
  z-index: 9999;
  min-width: 120px;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.task-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.task-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.task-dropdown-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Task Detail Popup */
.task-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}

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

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

.task-detail-popup {
  width: 90%;
  max-width: 400px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.2s ease;
}

.task-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(var(--accent-rgb), 0.1);
}

.task-detail-header h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.task-detail-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.task-detail-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}

.task-detail-content {
  padding: 1.25rem;
}

.task-detail-text {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9375rem;
  color: var(--os-text-primary);
  line-height: 1.5;
}

.task-detail-text svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--os-text-hint);
}

.task-detail-text svg.completed {
  color: rgba(74, 222, 128, 0.7);
}

/* Subtasks in task detail popup */
.task-detail-subtasks {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.task-detail-subtask {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.4;
}

.task-detail-subtask:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.task-detail-subtask svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--os-text-hint);
}

.task-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.task-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.task-detail-label {
  width: 60px;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.task-detail-value {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

.task-detail-value.muted {
  color: var(--os-text-muted);
}

.task-detail-value.source {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.task-detail-value.source.green {
  background: rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 0.9);
}

.task-detail-value.source.blue {
  background: rgba(56, 189, 248, 0.15);
  color: rgba(56, 189, 248, 0.9);
}

.task-detail-value.source.gray {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
}

.task-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.task-detail-tag {
  padding: 0.125rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  font-size: 0.75rem;
  color: rgba(var(--accent-rgb), 0.9);
}

/* Task Detail Action Buttons */
.task-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.task-detail-action {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.task-detail-action.complete {
  background: rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 0.9);
}

.task-detail-action.complete:hover {
  background: rgba(74, 222, 128, 0.25);
}

.task-detail-action.edit {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}

.task-detail-action.edit:hover {
  background: rgba(255, 255, 255, 0.1);
}

.task-detail-action.promote {
  background: rgba(56, 189, 248, 0.15);
  color: rgba(56, 189, 248, 0.9);
}

.task-detail-action.promote:hover {
  background: rgba(56, 189, 248, 0.25);
}

.task-detail-action.demote {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}

.task-detail-action.demote:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ==================== */
/* Additional Scrollbar Styles */
/* ==================== */

.log-days-container::-webkit-scrollbar,
.domain-content::-webkit-scrollbar {
  width: 8px;
}

.log-days-container::-webkit-scrollbar-track,
.domain-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.log-days-container::-webkit-scrollbar-thumb,
.domain-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.log-days-container::-webkit-scrollbar-thumb:hover,
.domain-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ==================== */
/* Notebook Styles */
/* ==================== */

.notebook-view {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.notebook-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 1rem 1.25rem;
  gap: 0.75rem;
}

.notebook-sidebar {
  width: 240px;
  min-width: 200px;
  padding: 0.75rem 1.25rem;
  overflow: hidden;
  flex-shrink: 0;
}

.notebook-sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
}

.notebook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.notebook-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.notebook-processed-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(74, 222, 128, 0.6);
  background: rgba(74, 222, 128, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.notebook-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notebook-mode-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

/* notebook-sidebar-toggle removed — collapse btn now uses shared .tree-collapse-btn */

.notebook-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.notebook-mode-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

.notebook-mode-btn.active {
  color: rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--accent-rgb), 0.15);
}

.notebook-editor {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.notebook-editor .editable-markdown-edit-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.notebook-editor .editable-markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.notebook-editor .editable-markdown-editor-wrapper .editable-markdown-editor {
  flex: 1;
}

.notebook-editor .editable-markdown-editor-wrapper .cm-content {
  padding-bottom: 50vh !important;
}

.notebook-editor .editable-markdown-view {
  flex: 1;
  padding-top: 0;
}
.notebook-editor .editable-markdown-view h1:first-child,
.notebook-editor .editable-markdown-view h2:first-child,
.notebook-editor .editable-markdown-view h3:first-child {
  margin-top: 0;
}

/* Notebook reading controls (font size + TTS) */
.notebook-reading-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notebook-font-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 2px;
}

.notebook-font-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8rem;
}

.notebook-font-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.notebook-font-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.notebook-font-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  padding: 0 4px;
  min-width: 20px;
  text-align: center;
}

.notebook-speak-btn {
  width: 24px;
  height: 24px;
}

/* Notebook font size classes (preview mode only) */
.notebook-editor.notebook-font-xs .editable-markdown-view {
  font-size: 0.65rem;
  line-height: 1.5;
}

.notebook-editor.notebook-font-small .editable-markdown-view {
  font-size: 0.75rem;
  line-height: 1.6;
}

.notebook-editor.notebook-font-medium .editable-markdown-view {
  font-size: 0.85rem;
  line-height: 1.7;
}

.notebook-editor.notebook-font-large .editable-markdown-view {
  font-size: 0.95rem;
  line-height: 1.75;
}

.notebook-editor.notebook-font-xlarge .editable-markdown-view {
  font-size: 1.1rem;
  line-height: 1.8;
}

.notebook-editor.notebook-font-xxlarge .editable-markdown-view {
  font-size: 1.25rem;
  line-height: 1.85;
}

.notebook-editor.notebook-font-xxxlarge .editable-markdown-view {
  font-size: 1.4rem;
  line-height: 1.9;
}

/* ==================== */
/* Shared Editor Font   */
/* ==================== */

/* Font size classes — apply on container, scopes to preview, edit, and entry cards */
.editor-font-xs .editable-markdown-view,
.editor-font-xs .cm-content,
.editor-font-xs .cm-scroller,
.editor-font-xs .journal-entry-body,
.editor-font-xs .journal-entry-body p,
.editor-font-xs .journal-entry-body div,
.editor-font-xs .journal-entry-body span,
.editor-font-xs .journal-entry-body .markdown-text,
.editor-font-xs .journal-commit-group { font-size: 0.65rem !important; line-height: 1.5 !important; }

.editor-font-small .editable-markdown-view,
.editor-font-small .cm-content,
.editor-font-small .cm-scroller,
.editor-font-small .journal-entry-body,
.editor-font-small .journal-entry-body p,
.editor-font-small .journal-entry-body div,
.editor-font-small .journal-entry-body span,
.editor-font-small .journal-entry-body .markdown-text,
.editor-font-small .journal-commit-group { font-size: 0.75rem !important; line-height: 1.6 !important; }

.editor-font-medium .editable-markdown-view,
.editor-font-medium .cm-content,
.editor-font-medium .cm-scroller,
.editor-font-medium .journal-entry-body,
.editor-font-medium .journal-entry-body p,
.editor-font-medium .journal-entry-body div,
.editor-font-medium .journal-entry-body span,
.editor-font-medium .journal-entry-body .markdown-text,
.editor-font-medium .journal-commit-group { font-size: 0.85rem !important; line-height: 1.7 !important; }

.editor-font-large .editable-markdown-view,
.editor-font-large .cm-content,
.editor-font-large .cm-scroller,
.editor-font-large .journal-entry-body,
.editor-font-large .journal-entry-body p,
.editor-font-large .journal-entry-body div,
.editor-font-large .journal-entry-body span,
.editor-font-large .journal-entry-body .markdown-text,
.editor-font-large .journal-commit-group { font-size: 0.95rem !important; line-height: 1.75 !important; }

.editor-font-xlarge .editable-markdown-view,
.editor-font-xlarge .cm-content,
.editor-font-xlarge .cm-scroller,
.editor-font-xlarge .journal-entry-body,
.editor-font-xlarge .journal-entry-body p,
.editor-font-xlarge .journal-entry-body div,
.editor-font-xlarge .journal-entry-body span,
.editor-font-xlarge .journal-entry-body .markdown-text,
.editor-font-xlarge .journal-commit-group { font-size: 1.1rem !important; line-height: 1.8 !important; }

.editor-font-xxlarge .editable-markdown-view,
.editor-font-xxlarge .cm-content,
.editor-font-xxlarge .cm-scroller,
.editor-font-xxlarge .journal-entry-body,
.editor-font-xxlarge .journal-entry-body p,
.editor-font-xxlarge .journal-entry-body div,
.editor-font-xxlarge .journal-entry-body span,
.editor-font-xxlarge .journal-entry-body .markdown-text,
.editor-font-xxlarge .journal-commit-group { font-size: 1.25rem !important; line-height: 1.85 !important; }

.editor-font-xxxlarge .editable-markdown-view,
.editor-font-xxxlarge .cm-content,
.editor-font-xxxlarge .cm-scroller,
.editor-font-xxxlarge .journal-entry-body,
.editor-font-xxxlarge .journal-entry-body p,
.editor-font-xxxlarge .journal-entry-body div,
.editor-font-xxxlarge .journal-entry-body span,
.editor-font-xxxlarge .journal-entry-body .markdown-text,
.editor-font-xxxlarge .journal-commit-group { font-size: 1.4rem !important; line-height: 1.9 !important; }

/* Inline font controls — reuses notebook look */
.editor-font-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 2px;
}

.editor-font-controls button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8rem;
}

.editor-font-controls button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.editor-font-controls button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.editor-font-controls .editor-font-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  padding: 0 4px;
  min-width: 20px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.editor-font-controls .editor-font-label-icon {
  font-size: 0.65rem;
  opacity: 0.7;
}

/* ==================== */
/* Process Button       */
/* ==================== */

.notebook-process-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
  cursor: pointer;
  transition: all 0.15s;
}

.notebook-process-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.notebook-process-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==================== */
/* Process Preview      */
/* ==================== */

.process-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.process-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.process-preview-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--os-text-muted);
}

.process-spinner {
  animation: spin 1s linear infinite;
}

.process-streaming-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.process-streaming-status {
  font-size: 0.8rem;
  color: var(--os-text-muted);
}

.process-streaming-date {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  font-weight: 500;
}

.process-entry-count {
  font-size: 0.7rem;
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.8);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.process-select-all {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.process-select-all:hover {
  color: var(--os-text-secondary);
}

.process-entry-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.process-entry {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.8rem;
  transition: background 0.1s;
}

.process-entry-top {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.process-entry-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-left: 1.5rem;
}

.process-entry:hover {
  background: rgba(255, 255, 255, 0.04);
}

.process-entry.corrected {
  border-left: 2px solid rgba(251, 191, 36, 0.4);
  padding-left: calc(0.65rem - 2px);
}

.process-entry.unchecked {
  opacity: 0.4;
}

.process-entry-segment {
  margin-left: 1.25rem;
  border-left: 2px solid rgba(var(--accent-rgb), 0.2);
  padding-left: calc(0.65rem - 2px);
}

.process-segment-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-right: 0.35rem;
  flex-shrink: 0;
}

.process-segment-connector {
  color: rgba(var(--accent-rgb), 0.5);
  font-size: 0.75rem;
  margin-right: 0.25rem;
  flex-shrink: 0;
}

.process-entry input[type="checkbox"] {
  accent-color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.process-entry-text {
  flex: 1;
  color: var(--os-text-secondary);
  min-width: 0;
  line-height: 1.4;
}

.process-entry-display {
  cursor: text;
  border-radius: 4px;
  padding: 1px 2px;
  transition: background 0.15s;
}

.process-entry-display:hover {
  background: rgba(255, 255, 255, 0.04);
}

.process-entry-display.showing-original {
  color: var(--os-text-muted);
  font-style: italic;
}

.process-entry-edit {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font-size: inherit;
  font-family: inherit;
  color: var(--os-text-primary);
  line-height: 1.4;
  resize: none;
  outline: none;
  overflow: hidden;
  min-height: 1.4em;
}

.process-entry-edit:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.process-entry-text-actions {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.25rem;
}

.process-toggle-original,
.process-regen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--os-text-hint);
  transition: all 0.15s;
}

.process-toggle-original:hover,
.process-regen-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-muted);
}

.process-regen-btn.spinning {
  animation: spin 1s linear infinite;
}

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

.process-regen-feedback {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-left: 1.5rem;
}

.process-regen-feedback input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: var(--os-text-secondary);
  outline: none;
}

.process-regen-feedback input::placeholder {
  color: var(--os-text-hint);
}

.process-regen-feedback input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.process-regen-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  color: rgba(var(--accent-rgb), 0.8);
  transition: all 0.15s;
}

.process-regen-submit:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.process-type-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.process-type-badge.purple {
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(var(--accent-rgb), 0.9);
}

.process-type-badge.green {
  background: rgba(34, 197, 94, 0.2);
  color: rgba(34, 197, 94, 0.9);
}

.process-type-badge.blue {
  background: rgba(56, 189, 248, 0.2);
  color: rgba(56, 189, 248, 0.9);
}

.process-type-badge.amber {
  background: rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.9);
}

.process-dest-select {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  flex-shrink: 0;
  cursor: pointer;
}

.process-dest-select:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.process-dest-select option {
  background: #1a1a2e;
  color: var(--os-text-secondary);
}

.process-domain-picker {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
}

.process-domain-select {
  font-size: 0.6rem;
  color: var(--os-text-muted);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
  cursor: pointer;
}

.process-domain-select:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--os-text-secondary);
}

.process-domain-select option {
  background: #1a1a2e;
  color: var(--os-text-secondary);
}

.process-source-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.process-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.process-tag {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 3px;
}

.process-tag-remove {
  background: none;
  border: none;
  color: rgba(var(--accent-rgb), 0.5);
  cursor: pointer;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
}

.process-tag-remove:hover {
  color: #ef4444;
}

.process-tag-input {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(0, 0, 0, 0.3);
  color: var(--accent);
  width: 70px;
  outline: none;
}

.process-tag-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}

.process-add-tag-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
}

.process-add-tag-btn:hover {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.process-entry-people {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.process-people-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(244, 114, 182, 0.15);
  color: #f472b6;
  display: flex;
  align-items: center;
  gap: 3px;
}

.process-original-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  background: rgba(251, 191, 36, 0.1);
  color: rgba(251, 191, 36, 0.5);
  flex-shrink: 0;
}

.process-original-badge s {
  text-decoration: line-through;
}

.process-correction-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 1.5rem;
  color: rgba(251, 191, 36, 0.5);
}

.process-correction-reason {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: var(--os-text-secondary);
  outline: none;
  transition: border-color 0.15s;
}

.process-correction-reason::placeholder {
  color: var(--os-text-hint);
}

.process-correction-reason:focus {
  border-color: rgba(251, 191, 36, 0.35);
}

.process-correction-dismiss {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.process-correction-dismiss:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
}

.process-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.process-cancel-btn {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.process-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.process-confirm-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
  cursor: pointer;
  transition: all 0.15s;
}

.process-confirm-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.process-confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.process-feedback-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  margin-right: auto;
}

.process-feedback-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.process-feedback-panel {
  position: absolute;
  bottom: 3.5rem;
  left: 1rem;
  right: 1rem;
  max-height: 300px;
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.process-feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.process-feedback-header button {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
}

.process-feedback-header button:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

.process-feedback-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.process-feedback-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
}

.process-feedback-content th {
  text-align: left;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.process-feedback-content td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--os-text-muted);
}

/* ==================== */
/* Scratch View         */
/* ==================== */

.scratch-view {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* When notebook is embedded inside PlanningView's today-main */
.scratch-view.scratch-view-embedded {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.scratch-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  gap: 0;
  order: 2;
  position: relative;
  min-width: 0;
}

/* Toolbar rendered inline in the tab bar */
.notebook-tab-toolbar {
  margin-left: auto;
  flex-shrink: 0;
  border-bottom: none;
  background: transparent;
  padding: 0 4px;
  height: 100%;
  align-items: center;
}

.notebook-tab-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 100%;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--os-text-muted);
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  margin-right: 2px;
  transition: color 0.12s, background 0.12s;
}

.notebook-tab-sidebar-toggle:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.05);
}

body.light .notebook-tab-sidebar-toggle {
  border-right-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}

body.light .notebook-tab-sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}

/* editor area: clean padding inside the column */
.scratch-main .notebook-editor {
  padding: 1rem 1.5rem 2rem;
  min-width: 0;
}

/* Content-sized editor — don't stretch to fill container */
.scratch-main .live-editor-compat {
  height: auto;
  flex: none;
}

.scratch-main .live-editor-compat .live-preview-editor {
  flex: none;
  min-height: 0;
}

.scratch-main .live-editor-compat .cm-editor {
  height: auto;
}

.notebook-editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0.5rem;
  flex-shrink: 0;
}

.scratch-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.scratch-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.scratch-sidebar {
  order: 0;
  position: relative;
  width: 180px;
  flex-shrink: 0;
  min-height: 0;
  padding: 0.75rem 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow-y: auto;
}

.scratch-sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  border-right: none;
  overflow: hidden;
}

.scratch-sidebar-divider {
  order: 1;
  width: 4px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s ease;
}

.scratch-sidebar-divider:hover,
.scratch-sidebar-divider.active {
  background: rgba(var(--accent-rgb), 0.4);
}

/* divider hover handled by direct background above */

/* ===== Notebook Calendar Sidebar (right) ===== */
.notebook-cal-sidebar {
  order: 3;
  width: 240px;
  flex-shrink: 0;
  min-height: 0;
  padding: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}

.notebook-cal-sidebar.collapsed {
  width: 36px;
  min-width: 36px;
  padding: 0.5rem 0.25rem;
  align-items: center;
  overflow: hidden;
}

.notebook-cal-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  align-self: flex-end;
  flex-shrink: 0;
}
.notebook-cal-toggle:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.notebook-cal-sidebar.collapsed .notebook-cal-toggle {
  align-self: center;
}

.scratch-sidebar-search-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.scratch-sidebar-search-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}
.scratch-sidebar-search {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--os-text-primary);
  font-size: 0.7rem;
  padding: 3px 0;
  min-width: 0;
}
.scratch-sidebar-search::placeholder {
  color: var(--os-text-hint);
}
.scratch-sidebar-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--os-text-hint);
  border-radius: 3px;
}
.scratch-sidebar-search-clear:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.08);
}
.scratch-sidebar-search-results {
  overflow-y: auto;
  flex: 1;
}
.scratch-sidebar-search-empty {
  padding: 8px 4px;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  text-align: center;
}

.scratch-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
  padding: 0 0.25rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scratch-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.scratch-add-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}

.scratch-page-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.scratch-page-list::-webkit-scrollbar {
  width: 3px;
}

.scratch-page-list::-webkit-scrollbar-track {
  background: transparent;
}

.scratch-page-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* Tree node: page + optional heading subtree */
.scratch-page-tree-node {
  display: flex;
  flex-direction: column;
}

.scratch-page-tree-node + .scratch-page-tree-node {
  margin-top: 1px;
}

/* Page row */
.scratch-page-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 28px;
}

.scratch-page-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.scratch-page-item.active {
  background: rgba(var(--accent-rgb), 0.12);
}

.scratch-page-item.drag-over {
  border-top: 2px solid rgba(var(--accent-rgb), 0.6);
  padding-top: calc(0.35rem - 2px);
}

.scratch-page-item[draggable="true"] {
  cursor: grab;
}

.scratch-page-item[draggable="true"]:active {
  cursor: grabbing;
  opacity: 0.6;
}

.scratch-tree-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
  transition: all 0.12s;
}

.scratch-tree-toggle:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

.scratch-page-item.active .scratch-tree-toggle {
  color: rgba(var(--accent-rgb), 0.6);
}

.scratch-page-item.active .scratch-tree-toggle:hover {
  color: rgba(var(--accent-rgb), 0.9);
}

.scratch-page-icon {
  flex-shrink: 0;
  color: var(--os-text-hint);
}

.scratch-page-toggle-spacer {
  width: 12px;
  flex-shrink: 0;
}

.scratch-page-item.active .scratch-page-icon {
  color: rgba(var(--accent-rgb), 0.65);
}

.scratch-page-title {
  font-size: 0.7875rem;
  color: var(--os-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  line-height: 1.3;
}

.scratch-page-item.active .scratch-page-title {
  color: rgba(var(--accent-rgb), 0.95);
  font-weight: 550;
}

/* ---- Right-click context menu ---- */
.scratch-context-backdrop {
  position: absolute;
  inset: 0;
  z-index: 999;
}

.scratch-context-menu {
  position: absolute;
  z-index: 1000;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.scratch-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--os-text-secondary);
  font-size: 0.78rem;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}

.scratch-context-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.scratch-context-menu button.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* ---- Context menu submenu (Move to) ---- */
/* ---- Move file dialog ---- */
.scratch-move-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.scratch-move-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  max-height: 420px;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.scratch-move-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.scratch-move-header button {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.scratch-move-header button:hover {
  color: var(--os-text-secondary);
}

.scratch-move-list {
  overflow-y: auto;
  padding: 6px 0;
  flex: 1;
}

.scratch-move-group {
  padding: 4px 0;
}

.scratch-move-group + .scratch-move-group {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.scratch-move-group-label {
  padding: 6px 14px 3px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-hint);
}

.scratch-move-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px 7px 22px;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
}

.scratch-move-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

.scratch-folder-create-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scratch-folder-create-path {
  font-size: 0.7rem;
  color: var(--os-text-muted);
}

.scratch-folder-create-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.28);
  color: var(--os-text-primary);
  font-size: 0.8rem;
  outline: none;
}

.scratch-folder-create-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}
select.scratch-folder-create-input {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  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='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
select.scratch-folder-create-input option {
  background: #1a1a22;
  color: var(--os-text-primary);
}

.scratch-folder-create-error {
  font-size: 0.72rem;
  color: #ef4444;
}

.scratch-folder-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.scratch-folder-create-btn {
  border-radius: 7px;
  border: 1px solid transparent;
  padding: 6px 10px;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.scratch-folder-create-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--os-text-secondary);
}

.scratch-folder-create-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.scratch-folder-create-btn.primary {
  background: rgba(var(--accent-rgb), 0.22);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: #d8b4fe;
}

.scratch-folder-create-btn.primary:hover {
  background: rgba(var(--accent-rgb), 0.3);
}

.scratch-folder-create-btn.danger {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.35);
  color: rgba(252, 165, 165, 0.95);
}

.scratch-folder-create-btn.danger:hover {
  background: rgba(239, 68, 68, 0.24);
}

.scratch-folder-create-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.scratch-folder-create-textarea {
  min-height: 72px;
  resize: vertical;
  font-family: inherit;
}

.scratch-area-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
}

.scratch-area-checkbox input {
  accent-color: rgba(var(--accent-rgb), 0.9);
}

/* ---- TOC panel in editor (collapsible tree) ---- */
.scratch-toc-panel {
  position: relative;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem 0.375rem 0.75rem 0.625rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  align-self: flex-start;
  max-height: 100%;
}

/* Resize handle on the left edge */
.scratch-toc-resize {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 2;
}

.scratch-toc-resize:hover,
.scratch-toc-resize:active {
  background: rgba(var(--accent-rgb), 0.25);
}

.scratch-toc-title {
  padding: 0 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--os-text-hint);
}

/* Row: toggle + text */
.scratch-toc-item {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 2px 0.25rem;
  border-radius: 4px;
  transition: background 0.15s;
}

.scratch-toc-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.scratch-toc-item.scratch-toc-active {
  background: rgba(167, 139, 250, 0.15);
  border-left: 2px solid #a78bfa;
}

.scratch-toc-item.scratch-toc-active .scratch-toc-text {
  color: #a78bfa;
  font-weight: 600;
}

.scratch-toc-item.scratch-toc-in-section {
  background: rgba(167, 139, 250, 0.06);
  border-left: 2px solid rgba(167, 139, 250, 0.25);
}

.scratch-toc-item.scratch-toc-in-section .scratch-toc-text {
  color: rgba(167, 139, 250, 0.8);
}

/* Chevron toggle button */
.scratch-toc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, background 0.15s, transform 0.15s;
}

.scratch-toc-toggle:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

.scratch-toc-toggle.collapsed {
  transform: rotate(-90deg);
}

/* Dot for leaf nodes (no children) */
.scratch-toc-dot {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scratch-toc-dot::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

/* Clickable heading text */
.scratch-toc-text {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 1px 0.25rem;
  color: var(--os-text-muted);
  font-size: 0.73rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 3px;
  transition: color 0.15s;
}

.scratch-toc-text:hover {
  color: var(--os-text-primary);
}

/* Level-specific text styling */
.scratch-toc-item.level-1 .scratch-toc-text {
  color: var(--os-text-secondary);
  font-size: 0.76rem;
}

.scratch-toc-item.level-3 .scratch-toc-text,
.scratch-toc-item.level-4 .scratch-toc-text {
  font-size: 0.68rem;
  color: var(--os-text-muted);
}

/* Nested children — indented with a subtle left border */
.scratch-toc-children {
  margin-left: 7px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.scratch-toc-empty {
  padding: 1.5rem 0.75rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  text-align: center;
  font-style: italic;
}

.scratch-toc-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 6px 4px;
}

.scratch-toc-link-branch {
  cursor: pointer;
}

.scratch-toc-link-icon {
  flex-shrink: 0;
  color: var(--os-text-hint);
  margin-right: 2px;
}

.scratch-toc-link-label {
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  color: var(--os-text-muted) !important;
}

.scratch-toc-root-node {
  cursor: pointer;
}

.scratch-toc-root-label {
  font-weight: 500 !important;
  font-size: 0.76rem !important;
  color: var(--os-text-muted) !important;
}

.scratch-toc-link-count {
  margin-left: 3px;
  font-size: 9px;
  font-weight: 400;
  color: var(--os-text-hint);
  min-width: 0;
  line-height: 1;
}

/* Toolbar (search, expand/collapse) */
.scratch-toc-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px 6px 2px;
  flex-shrink: 0;
}
.scratch-toc-toolbar-btn {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.scratch-toc-toolbar-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.scratch-toc-toolbar-btn.active {
  color: rgba(167, 139, 250, 0.8);
}

/* Outline search */
.scratch-toc-search {
  padding: 2px 6px 4px;
  position: relative;
  flex-shrink: 0;
}
.scratch-toc-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 24px 4px 8px;
  font-size: 0.7rem;
  color: var(--os-text-primary);
  outline: none;
  box-sizing: border-box;
}
.scratch-toc-search-input:focus {
  border-color: rgba(167, 139, 250, 0.4);
}
.scratch-toc-search-input::placeholder {
  color: var(--os-text-hint);
}
.scratch-toc-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}
.scratch-toc-search-clear:hover {
  color: var(--os-text-muted);
}

/* ---- Area sub-files tree in Notes sidebar ---- */
.scratch-area-add-file-btn {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  margin-left: auto;
  display: none;
  align-items: center;
  flex-shrink: 0;
}

.scratch-page-item:hover .scratch-area-add-file-btn {
  display: flex;
}

.scratch-area-add-file-btn:hover {
  color: var(--os-text-secondary);
}

.scratch-area-file-tree {
  display: flex;
  flex-direction: column;
  margin-left: 24px;
  padding: 0.15rem 0 0.25rem 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.scratch-area-file-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.7875rem;
  color: var(--os-text-muted);
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scratch-area-file-item:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.scratch-area-file-item.active {
  color: rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--accent-rgb), 0.1);
}

.scratch-area-file-item.creating {
  opacity: 1;
  color: var(--os-text-secondary);
}

.scratch-area-file-input {
  flex: 1;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 3px;
  color: var(--os-text-primary);
  font-size: 0.68rem;
  outline: none;
  min-width: 0;
}

.scratch-area-file-input:focus {
  border-color: rgba(var(--accent-rgb), 0.7);
}

/* ---- Heading tree under active page ---- */
.scratch-heading-tree {
  display: flex;
  flex-direction: column;
  margin-left: 0.85rem;
  padding: 0.2rem 0 0.35rem 0;
  border-left: 1px solid rgba(var(--accent-rgb), 0.15);
}

.scratch-heading-item {
  position: relative;
  padding: 0.175rem 0.5rem 0.175rem 0;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.12s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

/* Connector tick from the tree line */
.scratch-heading-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 1px;
  background: rgba(var(--accent-rgb), 0.15);
}

.scratch-heading-item:hover {
  color: var(--os-text-secondary);
  background: rgba(var(--accent-rgb), 0.08);
}

.scratch-heading-item.level-2 {
  padding-left: 0.75rem;
}

.scratch-heading-item.level-2::before {
  left: 0;
}

.scratch-heading-item.level-3 {
  padding-left: 1.35rem;
}

.scratch-heading-item.level-3::before {
  left: 0.6rem;
  width: 6px;
}

.scratch-heading-item.level-4 {
  padding-left: 1.95rem;
  font-size: 0.675rem;
  color: var(--os-text-hint);
}

.scratch-heading-item.level-4::before {
  left: 1.2rem;
  width: 6px;
}

.scratch-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0.75rem;
  color: var(--os-text-hint);
}

.scratch-empty p {
  margin: 0;
  font-size: 0.875rem;
}

.scratch-create-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.scratch-create-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* ==================== */
/* Notebook Tab Bar      */
/* ==================== */

.notebook-tab-bar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 36px;
  flex-shrink: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 0.25rem;
  scrollbar-width: none;
}
.notebook-tab-bar::-webkit-scrollbar { display: none; }

.notebook-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 0.5rem;
  max-width: 160px;
  min-width: 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.notebook-tab:hover {
  color: var(--os-text-secondary);
}
.notebook-tab.active {
  color: var(--os-text-primary);
  border-bottom-color: var(--accent);
}

.notebook-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.notebook-tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  color: var(--os-text-hint);
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.notebook-tab:hover .notebook-tab-close,
.notebook-tab.active .notebook-tab-close {
  opacity: 1;
}
.notebook-tab-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.notebook-tab[draggable] {
  cursor: grab;
}
.notebook-tab[draggable]:active {
  cursor: grabbing;
}
.notebook-tab.dragging {
  opacity: 0.4;
}
.notebook-tab.drag-left {
  border-left: 2px solid rgba(var(--accent-rgb), 0.6);
  padding-left: calc(0.5rem - 2px);
}
.notebook-tab.drag-right {
  border-right: 2px solid rgba(var(--accent-rgb), 0.6);
  padding-right: calc(0.5rem - 2px);
}

/* Tab context menu */
.notebook-tab-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 150px;
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.notebook-tab-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.78rem;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}
.notebook-tab-context-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}
.notebook-tab-context-menu button:disabled {
  opacity: 0.35;
  cursor: default;
}
.notebook-tab-context-menu button:disabled:hover {
  background: none;
}

/* ==================== */
/* Notebook Landing Page */
/* ==================== */

.notebook-landing {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding-top: 3rem;
}

.notebook-landing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 400px;
  padding: 0 1rem 2rem;
}

.notebook-landing-search-wrap {
  position: relative;
  width: 100%;
}

.notebook-landing-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--os-text-hint);
  pointer-events: none;
}

.notebook-landing-search {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.notebook-landing-search:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}
.notebook-landing-search::placeholder {
  color: var(--os-text-hint);
}

.notebook-landing-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.notebook-landing-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  transition: background 0.12s;
}
.notebook-landing-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}
.notebook-landing-item-remove {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.notebook-landing-item:hover .notebook-landing-item-remove {
  display: flex;
}
.notebook-landing-item-remove:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}

.notebook-landing-item-icon {
  flex-shrink: 0;
  color: var(--os-text-hint);
}

.notebook-landing-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notebook-landing-item-badge {
  font-size: 0.6875rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}

.notebook-landing-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-hint);
  padding: 0 0.25rem;
  width: 100%;
}
.notebook-landing-clear-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
}
.notebook-landing-clear-btn:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.08);
}

.notebook-landing-empty {
  text-align: center;
  color: var(--os-text-hint);
  font-size: 0.8125rem;
  padding: 1.5rem 0;
}

/* Reuse notebook editor styles for scratch */
.scratch-main .notebook-editor-row {
  display: flex;
  min-width: 0;
  overflow: hidden;
}

.scratch-main .notebook-editor-row .notebook-editor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Remove boxy frame from notebook editor */
.scratch-main .notebook-editor .editable-markdown-editor-wrapper {
  border: none !important;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Scratch sidebar header actions */
.scratch-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Starred section */
.scratch-starred-header {
  margin-bottom: 2px;
}
.scratch-starred-header span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.scratch-starred-header .lucide {
  color: rgba(250, 204, 21, 0.6);
}
.scratch-starred-list {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.scratch-starred-item {
  padding-left: 0.6rem;
}

/* Star indicator on items */
.scratch-star-indicator {
  flex-shrink: 0;
  color: rgba(250, 204, 21, 0.5);
  margin-left: 2px;
}
.scratch-today-badge {
  flex-shrink: 0;
  font-size: 9px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(100, 160, 255, 0.15);
  color: rgba(100, 160, 255, 0.8);
  margin-left: 4px;
  line-height: 16px;
}


/* ==================== */
/* Scratch Folders */
/* ==================== */

.scratch-folder-node {
  margin-bottom: 2px;
}

.scratch-virtual-folder-node {
  margin-bottom: 1px;
}

.scratch-virtual-folder-item {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 4px 6px;
  border: none;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  text-align: left;
}

.scratch-virtual-folder-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.scratch-virtual-folder-item.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: rgba(var(--accent-rgb), 0.95);
}

.scratch-folder-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  transition: background 0.15s ease;
  user-select: none;
}

.scratch-folder-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.scratch-folder-item.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: rgba(var(--accent-rgb), 0.95);
}

.scratch-folder-item.drag-over {
  background: rgba(56, 189, 248, 0.12);
  outline: 1px dashed rgba(56, 189, 248, 0.4);
  outline-offset: -1px;
}

.scratch-folder-item.drag-above {
  border-top: 2px solid rgba(56, 189, 248, 0.6);
}

.scratch-drop-top {
  height: 4px;
  flex-shrink: 0;
  border-radius: 2px;
  transition: height 0.15s ease, background 0.15s ease;
}

.scratch-drop-top.active {
  height: 6px;
  background: rgba(56, 189, 248, 0.4);
}

.scratch-folder-chevron {
  flex-shrink: 0;
  opacity: 0.5;
}

.scratch-folder-toggle-btn {
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scratch-folder-toggle-spacer {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: inline-block;
}

.scratch-folder-icon {
  flex-shrink: 0;
  color: rgba(var(--accent-rgb), 0.6);
}

.scratch-folder-item:hover .scratch-folder-icon {
  color: rgba(var(--accent-rgb), 0.85);
}

.scratch-folder-item.active .scratch-folder-icon,
.scratch-virtual-folder-item.active .scratch-folder-icon {
  color: rgba(var(--accent-rgb), 0.9);
}

.scratch-folder-name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scratch-folder-count {
  font-size: 0.625rem;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 8px;
  flex-shrink: 0;
}

.scratch-folder-rename-input {
  flex: 1;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 3px;
  color: var(--os-text-primary);
  font-size: 0.75rem;
  outline: none;
  min-width: 0;
}

.scratch-folder-rename-input:focus {
  border-color: rgba(var(--accent-rgb), 0.7);
}

.scratch-folder-children {
  padding-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  margin-left: 12px;
  margin-top: 1px;
}

.scratch-folder-children .scratch-folder-children {
  margin-left: 10px;
}

.scratch-folder-empty {
  padding: 4px 8px;
  font-size: 0.65rem;
  color: var(--os-text-hint);
  font-style: italic;
}

/* ==================== */
/* Mini Calendar */
/* ==================== */

.mini-cal {
  background: var(--os-glass-bg);
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  padding: 0.75rem;
  flex-shrink: 0;
}

.mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.mini-cal-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.mini-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.mini-cal-nav:hover {
  background: var(--os-hover-bg);
  color: var(--os-text-secondary);
}

.mini-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.25rem;
}

.mini-cal-weekday {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--os-text-hint);
  padding: 0.2rem;
}

.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mini-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  max-width: 28px;
  border-radius: 6px;
  font-size: 0.75rem;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  margin: 0 auto;
}

.mini-cal-day.blank {
  cursor: default;
}

.mini-cal-day:not(.blank):hover {
  background: rgba(255, 255, 255, 0.1);
}

.mini-cal-day.today {
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: rgba(56, 189, 248, 0.9);
}

.mini-cal-day.selected {
  background: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-weight: 600;
}

.mini-cal-day.has-content::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.6);
}

.mini-cal-day.selected.has-content::after {
  background: var(--accent);
}

.mini-cal-day.has-content.processed::after {
  background: rgba(74, 222, 128, 0.6);
}

.mini-cal-day.selected.has-content.processed::after {
  background: #4ade80;
}

/* Calendar context menu */
.mini-cal-context-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.mini-cal-context-menu {
  position: fixed;
  background: rgba(20, 22, 35, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  transform: translateX(-100%);
}

.mini-cal-context-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
}

.mini-cal-context-item:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 1);
}

/* ===========================
   Info View - Posture System
   =========================== */

.info-view {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}

.info-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.info-section-desc {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  line-height: 1.5;
}

/* Posture cards grid */
.posture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.posture-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid;
  border-radius: 8px;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.posture-card.orange { border-left-color: #fb923c; }
.posture-card.green { border-left-color: #4ade80; }
.posture-card.red { border-left-color: #ef4444; }
.posture-card.blue { border-left-color: #38bdf8; }
.posture-card.amber { border-left-color: #fbbf24; }
.posture-card.teal { border-left-color: #2dd4bf; }
.posture-card.purple { border-left-color: var(--accent); }

.posture-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.posture-card.orange .posture-card-header { color: #fb923c; }
.posture-card.green .posture-card-header { color: #4ade80; }
.posture-card.red .posture-card-header { color: #ef4444; }
.posture-card.blue .posture-card-header { color: #38bdf8; }
.posture-card.amber .posture-card-header { color: #fbbf24; }
.posture-card.teal .posture-card-header { color: #2dd4bf; }
.posture-card.purple .posture-card-header { color: var(--accent); }

.posture-card-name {
  font-size: 0.875rem;
  font-weight: 600;
}

.posture-card-def {
  margin: 0;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

.posture-card-test {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.4;
  font-style: italic;
}

.posture-card-label {
  font-weight: 600;
  font-style: normal;
  color: var(--os-text-muted);
}

.posture-card-route {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.7rem;
  color: var(--os-text-muted);
}

.posture-card-route code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

/* Key distinctions */
.info-distinction {
  margin-bottom: 1rem;
}

.info-distinction:last-child {
  margin-bottom: 0;
}

.info-distinction h4 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.info-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-table th:first-child {
  border-radius: 6px 0 0 0;
}

.info-table th:last-child {
  border-radius: 0 6px 0 0;
}

.info-table td {
  padding: 0.4rem 0.75rem;
  color: var(--os-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

/* Routing priority */
.info-priority-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: priority;
}

.info-priority-list li {
  counter-increment: priority;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.info-priority-list li::before {
  content: counter(priority);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  flex-shrink: 0;
}

.info-priority-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.info-priority-badge.orange { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.info-priority-badge.green { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.info-priority-badge.red { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.info-priority-badge.blue { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.info-priority-badge.amber { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.info-priority-badge.teal { background: rgba(45, 212, 191, 0.2); color: #2dd4bf; }
.info-priority-badge.purple { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); }

/* Also add missing process-type-badge colors */
.process-type-badge.orange {
  background: rgba(251, 146, 60, 0.2);
  color: rgba(251, 146, 60, 0.9);
}

.process-type-badge.red {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.9);
}

.process-type-badge.teal {
  background: rgba(45, 212, 191, 0.2);
  color: rgba(45, 212, 191, 0.9);
}

/* Philosophy section */
.info-philosophy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-philosophy-columns {
  display: flex;
  gap: 0.75rem;
}

.info-philosophy-col {
  flex: 1;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.info-philosophy-col.within {
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.15);
}

.info-philosophy-col.beyond {
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.15);
}

.info-philosophy-col h4 {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.info-philosophy-col.within h4 { color: #4ade80; }
.info-philosophy-col.beyond h4 { color: #38bdf8; }

.info-philosophy-subtitle {
  margin: 0 0 0.625rem;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  font-style: italic;
}

.info-philosophy-col ul {
  margin: 0;
  padding: 0 0 0 1rem;
  list-style: disc;
}

.info-philosophy-col ul li {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.6;
}

.info-philosophy-route {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: var(--os-text-muted);
}

.info-philosophy-route code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.info-philosophy-pipeline {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1rem;
}

.info-philosophy-pipeline h4 {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.info-pipeline-flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.info-pipeline-flow svg {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.pipeline-stage {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Planning stack */
.info-planning-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.info-planning-layer {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

.info-planning-layer.execution {
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.15);
}

.info-planning-layer-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.info-planning-layer-header svg {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}

.info-planning-layer.execution .info-planning-layer-header svg {
  color: rgba(74, 222, 128, 0.7);
}

.info-planning-layer p {
  margin: 0;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.5;
  padding-left: 1.15rem;
}

.info-planning-connector {
  display: flex;
  justify-content: center;
  padding: 0.125rem 0;
  color: var(--os-text-hint);
}

/* ============================== */
/* Planning Position Bar          */
/* ============================== */

/* Legacy tree-item-planning (kept for compatibility) */
.tree-item-planning {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.35rem 0.25rem 0.35rem 0.5rem;
  margin-left: 0.25rem;
}

.tree-item-click-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  overflow: hidden;
}

.tree-item-click-area .tree-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Goal items ────────────────────────────── */

.planning-tree .tree-item.goal-item {
  padding-left: 2.5rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  white-space: nowrap;
}

.planning-tree .tree-item.goal-item .tree-item-subtitle {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.planning-tree .tree-item.goal-item:hover .tree-item-subtitle,
.planning-tree .tree-item.goal-item.active .tree-item-subtitle {
  opacity: 1;
}

.tree-item.goal-item.not-current .tree-item-label {
  opacity: 0.7;
  font-style: italic;
}

.tree-item.goal-item:hover .tree-period-chevron {
  color: var(--os-text-muted);
}

/* Dropdown trigger — small chevron on the right */
.tree-period-dropdown-wrap {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tree-period-dropdown-wrap .tree-period-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
}

.tree-period-chevron {
  color: var(--os-text-hint);
  pointer-events: none;
  transition: color 0.15s ease;
}

.tree-item-planning:hover .tree-period-chevron {
  color: var(--os-text-muted);
}

.tree-period-dropdown-wrap:hover .tree-period-chevron {
  color: var(--os-text-secondary);
}

.tree-period-select option {
  background: #1a1a2e;
  color: var(--os-text-primary);
  padding: 0.25rem;
}

/* Reset dot — appears when navigated away from current period */
.tree-period-reset {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  color: rgba(var(--accent-rgb), 0.6);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.tree-period-reset:hover {
  color: rgba(var(--accent-rgb), 1);
  background: rgba(var(--accent-rgb), 0.15);
}

/* ============================== */
/* Tree Hierarchy Indentation     */
/* ============================== */

.tree-item.season-item {
  font-weight: 600;
}

.tree-item.month-item {
}

.tree-item.week-item {
}

.tree-item.day-item {
}

.tree-item.not-current .tree-item-label {
  opacity: 0.7;
  font-style: italic;
}

/* ============================== */
/* Horizon Cascade / Context      */
/* ============================== */

/* Horizon body — side by side layout when context is open */
.horizon-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

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

.horizon-body.with-context .horizon-content {
  flex: 1;
}

/* Context panel — right side, resizable */
.horizon-context-panel {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.horizon-context-resize-handle {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 5;
}

.horizon-context-resize-handle:hover,
.horizon-context-resize-handle:active {
  background: rgba(251, 191, 36, 0.3);
}

.horizon-context-panel-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--os-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.horizon-context-panel-header span {
  flex: 1;
}

.horizon-context-close {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.horizon-context-close:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
}

.horizon-context-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.horizon-context-level {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.horizon-context-level-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(251, 191, 36, 0.6);
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.horizon-context-level-content {
  padding: 0.4rem 0.6rem;
  overflow-x: auto;
}

.horizon-context-level-content table {
  font-size: 0.7rem;
  width: 100%;
}

.horizon-context-level-content table th,
.horizon-context-level-content table td {
  padding: 0.2rem 0.4rem;
  white-space: nowrap;
}

.horizon-context-level-content .markdown-block {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--os-text-muted);
}

.horizon-context-level-content .markdown-block p {
  margin: 0.15rem 0;
}

.horizon-context-level-content .markdown-block ul,
.horizon-context-level-content .markdown-block ol {
  margin: 0.15rem 0;
  padding-left: 1.1rem;
}

.horizon-context-level-content .markdown-block li {
  margin: 0.1rem 0;
}

.horizon-context-level-content .markdown-block strong {
  color: var(--os-text-secondary);
}

.horizon-context-empty {
  font-size: 0.75rem;
  color: var(--os-text-hint);
  font-style: italic;
}

/* Context button in header */
.horizon-context-btn {
  gap: 0.3rem;
}

.horizon-context-btn.active {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

/* Legacy cascade styles (kept for compat) */
.horizon-cascade {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cascade-toggle {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  font-size: 0.6875rem;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
}

.cascade-toggle:hover {
  color: var(--os-text-muted);
}

.cascade-content {
  margin-top: 0.5rem;
  padding: 0.625rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 2px solid rgba(251, 191, 36, 0.3);
}

.cascade-content .markdown-block {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--os-text-muted);
}

.cascade-empty {
  font-size: 0.75rem;
  color: var(--os-text-hint);
  font-style: italic;
}

/* Backlog open button */
.backlog-open-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-top: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--os-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.backlog-open-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.15);
}

.backlog-open-count {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 8px;
  margin-left: auto;
}

/* Backlog dialog */
.backlog-dialog {
  background: rgba(20, 20, 25, 0.98);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.backlog-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.backlog-dialog-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--os-text-primary);
}

.backlog-dialog-title h3 {
  margin: 0;
  font-size: 1rem;
}

.backlog-dialog-add {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.backlog-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

/* Add form options row */
.section-add-options {
  display: flex;
  gap: 0.4rem;
}

/* Linked note */
.linked-note-display {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.linked-note-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  color: rgba(var(--accent-rgb), 0.9);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  min-width: 0;
}

.linked-note-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linked-note-link:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.linked-note-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  flex-shrink: 0;
}

.linked-note-remove:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.linked-note-add-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.linked-note-add-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  border-color: rgba(255, 255, 255, 0.25);
}

.linked-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

.linked-notes-actions {
  display: flex;
  gap: 0.35rem;
}

.linked-notes-actions .linked-note-add-btn {
  width: auto;
  flex: 1;
}

.linked-note-type {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.task-linked-notes-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: rgba(var(--accent-rgb), 0.7);
  font-size: 0.7rem;
  margin-left: 0.35rem;
  flex-shrink: 0;
}

.task-linked-notes-count {
  font-size: 0.65rem;
}

/* Note Picker Dialog */
.note-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.note-picker-dialog {
  width: 90%;
  max-width: 420px;
  max-height: 65vh;
  background: rgba(24, 24, 32, 0.98);
  backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.15s ease;
}

.note-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.note-picker-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-primary);
  letter-spacing: -0.01em;
}

.note-picker-tabs {
  display: flex;
  gap: 2px;
  padding: 0.5rem 0.75rem 0;
}

.note-picker-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.note-picker-tab:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.04);
}

.note-picker-tab.active {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.note-picker-thread-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-picker-thread-area {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.note-picker-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.6rem 0.75rem 0.35rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--os-text-hint);
  transition: border-color 0.15s ease;
}

.note-picker-filter:focus-within {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.04);
}

.note-picker-filter input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  outline: none;
}

.note-picker-filter input::placeholder {
  color: var(--os-text-hint);
}

.note-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.35rem 0.5rem 0.65rem;
  scrollbar-gutter: stable;
}

.note-picker-list::-webkit-scrollbar {
  width: 5px;
}

.note-picker-list::-webkit-scrollbar-track {
  background: transparent;
}

.note-picker-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.note-picker-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.note-picker-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.35rem 0.55rem;
  margin-bottom: 1px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--os-text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.1s ease;
}

.note-picker-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.note-picker-arrow {
  color: var(--os-text-hint);
  flex-shrink: 0;
  width: 14px;
  transition: transform 0.12s ease;
}

.note-picker-item.folder {
  color: var(--os-text-muted);
  font-weight: 500;
}

.note-picker-item.folder > .lucide-icon:not(.note-picker-arrow) {
  color: rgba(130, 170, 255, 0.7);
}

.note-picker-item.folder:hover {
  background: rgba(130, 170, 255, 0.06);
  color: var(--os-text-secondary);
}

.note-picker-item.file {
  color: var(--os-text-muted);
  padding-left: calc(0.55rem + 14px + 0.45rem);
  font-weight: 400;
}

.note-picker-item.file:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: rgba(var(--accent-rgb), 0.95);
}

.note-picker-item.flat-result {
  padding: 0.45rem 0.55rem;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.note-picker-result-name {
  font-weight: 500;
  color: var(--os-text-secondary);
}

.note-picker-result-path {
  font-size: 0.67rem;
  color: var(--os-text-hint);
  width: 100%;
  padding-left: calc(15px + 0.45rem);
  letter-spacing: 0.01em;
}

.note-picker-empty {
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--os-text-hint);
  font-size: 0.8rem;
}

/* ========== Areas View ========== */

.areas-view {
  padding: 1.5rem;
  overflow-y: auto;
  height: 100%;
}

.areas-view-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.areas-view-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--os-text-primary);
}

.areas-view-count {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.areas-view-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.areas-group-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  outline: none;
  cursor: pointer;
}

.areas-add-btn-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
  font-weight: 500;
}

.areas-add-btn-header:hover {
  background: rgba(var(--accent-rgb), 0.2);
}

.areas-domain-group {
  margin-bottom: 1.25rem;
}

.areas-domain-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.areas-domain-name {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.areas-domain-count {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 8px;
}

.areas-add-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.areas-add-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

.areas-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.areas-add-form-row {
  display: flex;
  gap: 0.4rem;
}

.areas-add-form-row input {
  flex: 1;
}

.areas-add-form-row select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  outline: none;
}

.areas-add-form input,
.areas-add-form select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  outline: none;
}

.areas-add-form input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.areas-add-form-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

.areas-add-form-actions button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
}

.areas-add-form-actions button:first-child {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.areas-add-form-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.areas-add-form-actions button:first-child:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.areas-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
  padding: 0 0.25rem;
}

.areas-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}

.areas-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
}

.areas-card.editing {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.05);
}

.areas-card-display {
  padding: 0.75rem;
  cursor: pointer;
  position: relative;
}

.areas-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin-bottom: 0.25rem;
}

.areas-card-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  line-height: 1.4;
}


.areas-card-tags {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.areas-card-tag {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: lowercase;
}

.areas-card-tag.blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.areas-card-tag.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.areas-card-tag.purple { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.areas-card-tag.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.areas-card-tag.gray { background: rgba(255, 255, 255, 0.08); color: var(--os-text-muted); }
.areas-card-tag.pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.areas-card-tag.teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }

.areas-card-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.areas-card-badge.legacy {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-hint);
}

.areas-card-edit {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.areas-card-edit label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.areas-card-edit label span {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.areas-card-edit textarea,
.areas-card-edit input,
.areas-card-edit select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  outline: none;
  font-family: inherit;
  resize: vertical;
}

.areas-card-edit textarea:focus,
.areas-card-edit input:focus,
.areas-card-edit select:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.areas-card-edit-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

.areas-card-edit-actions button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
}

.areas-card-edit-actions button:first-child {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.areas-card-edit-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.areas-empty {
  padding: 1rem;
  text-align: center;
  color: var(--os-text-hint);
  font-size: 0.8rem;
  grid-column: 1 / -1;
}

.areas-card-intention {
  font-size: 0.75rem;
  color: rgba(var(--accent-rgb), 0.7);
  font-style: italic;
  margin-top: 0.15rem;
}

/* ========== Sidebar Area Items ========== */

.tree-area-group {
  margin-bottom: 0;
}

.tree-area-domain-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.25rem 0.75rem 0.25rem 1.75rem;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}

.tree-area-domain-label:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.tree-area-chevron {
  opacity: 0.5;
  flex-shrink: 0;
}

.tree-area-domain-name {
  flex: 1;
}

.tree-area-domain-count {
  font-size: 0.6rem;
  color: var(--os-text-hint);
  font-weight: 400;
  margin-left: auto;
  min-width: 14px;
  text-align: right;
}

.tree-area-children {
  position: relative;
  margin-left: 1.2rem;
  padding-left: 0.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.tree-area-item-group {
  display: flex;
  flex-direction: column;
}

.tree-item-area {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 0.25rem !important;
  font-size: 0.7rem;
  opacity: 0.65;
}

.tree-item-area:hover {
  opacity: 0.9;
}

.tree-item-area.active {
  opacity: 1;
}

.tree-area-expand-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  flex-shrink: 0;
  width: 14px;
}

.tree-area-expand-btn:hover {
  opacity: 1;
}

.tree-area-expand-spacer {
  width: 14px;
  flex-shrink: 0;
  display: inline-block;
}

.tree-item-area-label {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px 6px;
  text-align: left;
  width: 100%;
  border-radius: 4px;
  font-size: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
}

.tree-area-icon {
  opacity: 0.7;
  flex-shrink: 0;
  color: var(--accent);
}

.tree-area-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.5;
}

.tree-item-area:hover .tree-area-dot {
  opacity: 0.8;
}

.tree-item-area.active .tree-area-dot {
  opacity: 1;
}

.tree-area-file-count {
  font-size: 0.55rem;
  color: var(--os-text-hint);
  margin-left: auto;
}

.tree-item-area-label:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tree-item-area.active .tree-item-area-label {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.tree-item-area.active .tree-area-icon {
  opacity: 1;
  color: var(--accent);
}

.tree-area-files {
  margin-left: 1rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.tree-item-file {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 4px;
  font-size: 0.7rem;
  opacity: 0.65;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-radius: 4px;
}

.tree-item-file:hover {
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.06);
}

.tree-item-file.active {
  opacity: 1;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.tree-file-icon {
  opacity: 0.5;
  flex-shrink: 0;
}

/* ========== Area Detail View ========== */

.area-detail {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

.area-detail--focused {
  flex-direction: column;
}

/* Left section nav */
/* Right section nav */
.area-detail-nav {
  width: 140px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.75rem 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.area-detail-nav-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  background: none;
  border: none;
  border-right: 2px solid transparent;
  border-radius: 6px 0 0 6px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.area-detail-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-secondary);
}

.area-detail-nav-item.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
  border-right-color: rgba(var(--accent-rgb), 0.6);
}

.area-detail-nav-label {
  flex: 1;
}

.area-detail-nav-count {
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 400;
  color: var(--os-text-hint);
}

/* Main content area */
.area-detail-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

/* Section title row with add button */
.area-detail-section-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}

.area-detail-section-add-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.area-detail-section-add-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.area-detail-loading {
  padding: 2rem;
  text-align: center;
  color: var(--os-text-muted);
}

.area-detail-header {
  margin-bottom: 0.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.area-detail-header-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.area-detail-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.area-detail-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.area-detail-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.area-detail-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.area-detail-title h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--os-text-primary);
}

.area-detail-domain-tag {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: lowercase;
}

.area-detail-domain-tag.blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.area-detail-domain-tag.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.area-detail-domain-tag.purple { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.area-detail-domain-tag.orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.area-detail-domain-tag.gray { background: rgba(255, 255, 255, 0.08); color: var(--os-text-muted); }
.area-detail-domain-tag.pink { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.area-detail-domain-tag.teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }

.area-detail-tag {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  font-family: monospace;
}
.area-detail-vault-path {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  font-family: monospace;
  cursor: pointer;
  margin-left: auto;
}
.area-detail-vault-path:hover {
  color: var(--os-text-muted);
}

.area-detail-desc {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  margin-top: 0.25rem;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.15rem 0;
}

.area-detail-desc:hover {
  color: var(--os-text-muted);
}

.area-detail-desc-edit-icon {
  opacity: 0;
  transition: opacity 0.12s;
  color: var(--os-text-hint);
}

.area-detail-desc:hover .area-detail-desc-edit-icon {
  opacity: 1;
}

.area-detail-desc-edit {
  margin-top: 0.35rem;
}

.area-detail-desc-edit input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  outline: none;
}

.area-detail-desc-edit input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* Intention */
.area-detail-intention {
  margin-top: 0.75rem;
}

.area-detail-intention-display {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px dashed rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  cursor: pointer;
  color: rgba(var(--accent-rgb), 0.8);
  font-size: 0.85rem;
  transition: background 0.15s, border-color 0.15s;
}

.area-detail-intention-display:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.area-detail-intention-empty {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--os-text-hint);
  font-style: italic;
}

.area-detail-intention-edit {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.area-detail-intention-edit input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--os-text-primary);
  font-size: 0.85rem;
  outline: none;
}

.area-detail-intention-edit input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}

.area-detail-intention-edit button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.area-detail-intention-edit button:first-of-type {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* Sections */
.area-detail-focused-file {
  margin-bottom: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.area-detail-focused-file-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.area-detail-focused-file-header span:not(.area-detail-edit-link) {
  flex: 1;
}

.area-detail-edit-link {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.area-detail-edit-link:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

.area-detail-focused-file-editor {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.area-detail-sections {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.area-detail-section {
  overflow: hidden;
}

.area-detail-section-content {
  flex: 1;
}

.area-detail-section-header-row {
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
}
.area-detail-section-header-row .area-detail-section-header {
  flex: 1;
}

.area-detail-section-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.area-detail-section-header:hover {
  color: var(--os-text-primary);
}

.area-detail-section-count {
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 400;
  color: var(--os-text-muted);
}

/* Horizons section */
.area-detail-horizons-section {
  border-color: rgba(56, 189, 248, 0.15);
}

.area-detail-horizons-section .area-detail-section-header {
  color: rgba(56, 189, 248, 0.8);
}

.area-detail-horizons {
  padding: 0.35rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.area-detail-horizon-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.area-detail-horizon-group-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.1rem;
}

.area-detail-horizon-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.1rem 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.area-detail-horizon-bullet {
  color: rgba(56, 189, 248, 0.4);
  flex-shrink: 0;
}

.area-detail-horizon-text {
  color: var(--os-text-secondary);
}

/* Craft section */
.area-detail-craft {
  padding: 0.25rem;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  line-height: 1.6;
}
.area-detail-craft .editable-markdown-container {
  min-height: 120px;
}
.area-detail-craft .editable-markdown-textarea {
  min-height: 120px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
}

.area-detail-craft h4 {
  font-size: 0.85rem;
  color: var(--os-text-secondary);
  margin: 0.75rem 0 0.3rem;
}

.area-detail-craft h5 {
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  margin: 0.5rem 0 0.2rem;
}

.area-detail-craft ul {
  padding-left: 1.25rem;
  margin: 0.3rem 0;
}

.area-detail-craft li {
  margin-bottom: 0.2rem;
}

/* Tasks section */
.area-detail-tasks {
  padding: 0 0.75rem 0.75rem;
}

.area-detail-task {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.area-detail-task:last-child {
  border-bottom: none;
}

.area-detail-task-check {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 0;
  display: flex;
}

.area-detail-task-check:hover {
  color: #4ade80;
}

.area-detail-task-text {
  flex: 1;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
}

.area-detail-task-text.done {
  text-decoration: line-through;
  opacity: 0.4;
}

.area-detail-task-section {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
}

.area-detail-task-delete {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}

.area-detail-task:hover .area-detail-task-delete {
  opacity: 1;
}

.area-detail-task-delete:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

/* Thoughts section */
.area-detail-thoughts {
  padding: 0 0.75rem 0.75rem;
}

.area-detail-thought {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.area-detail-thought:last-child {
  border-bottom: none;
}

.area-detail-thought-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.area-detail-thought-date {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  margin-top: 0.1rem;
}

.area-detail-thought-body {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin-top: 0.3rem;
  line-height: 1.4;
}

/* Log section */
.area-detail-log {
  padding: 0 0.75rem 0.75rem;
}

.area-detail-log-day {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.area-detail-log-day:last-child {
  border-bottom: none;
}

.area-detail-log-date {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-muted);
  margin-bottom: 0.2rem;
}

.area-detail-log-item {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  padding: 0.25rem 0 0.25rem 0.75rem;
  border-left: 2px solid rgba(255, 255, 255, 0.06);
  line-height: 1.4;
}
.area-detail-log-item strong {
  color: var(--os-text-secondary);
  font-weight: 600;
}

.area-detail-empty {
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  text-align: center;
  font-style: italic;
}

.area-detail-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 3rem 1rem;
  color: var(--os-text-hint);
}

.area-detail-empty-cta span {
  font-size: 0.8rem;
  color: var(--os-text-hint);
}

.area-detail-empty-cta-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.area-detail-empty-cta-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Section action button (edit/add icon in header) */
.area-detail-section-action {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s;
}
.area-detail-section-action:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

/* Craft edit */
.area-detail-craft-edit {
  padding: 0.5rem;
}
.area-detail-craft-edit textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0.75rem;
  resize: vertical;
  min-height: 200px;
  box-sizing: border-box;
}
.area-detail-craft-edit textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

/* Edit action buttons row */
.area-detail-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.area-detail-save-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  color: var(--os-text-primary);
  font-size: 0.75rem;
  cursor: pointer;
}
.area-detail-save-btn:hover {
  background: rgba(var(--accent-rgb), 0.4);
}
.area-detail-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.area-detail-cancel-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
}
.area-detail-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Inline add forms */
.area-detail-add-form {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem;
  align-items: center;
}
.area-detail-add-form input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
}
.area-detail-add-form input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.area-detail-add-form > button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.area-detail-add-form > button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}

/* Vertical add forms (thought and log) */
.area-detail-add-thought-form,
.area-detail-add-log-form {
  flex-direction: column;
  align-items: stretch;
}
.area-detail-add-thought-form textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
  resize: vertical;
}
.area-detail-add-thought-form textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

/* Add dialogs (modal overlay) */
.area-detail-dialog-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;
}
.area-detail-dialog {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1.25rem;
  width: 400px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.area-detail-dialog-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-primary);
}
.area-detail-dialog input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  padding: 0.5rem 0.7rem;
}
.area-detail-dialog input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.area-detail-dialog textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  padding: 0.5rem 0.7rem;
  resize: vertical;
  font-family: inherit;
}
.area-detail-dialog textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.area-detail-dialog-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

/* Task text clickable for edit */
.area-detail-task-text {
  cursor: pointer;
}
.area-detail-task-text:hover {
  color: rgba(var(--accent-rgb), 0.9);
}

/* Files section */
.area-detail-files {
  padding: 0 0.75rem 0.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.area-detail-file-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
}
.area-detail-file-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.area-detail-file-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  cursor: pointer;
}
.area-detail-file-name:hover {
  color: var(--os-text-primary);
}
.area-detail-file-name.active {
  color: var(--accent);
}
.area-detail-file-delete {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}
.area-detail-file-item:hover .area-detail-file-delete {
  opacity: 1;
}
.area-detail-file-delete:hover {
  color: #ef4444;
}
.area-detail-file-editor {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.25rem 0 0.5rem;
}
.area-detail-file-editor .editable-markdown-container {
  min-height: 80px;
}
.area-detail-file-editor .editable-markdown-textarea {
  min-height: 80px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
}

/* ==========================================
   Workbench (Active Threads)
   ========================================== */

/* Focus View subsection */
.workbench-subsection .workbench-thread-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workbench-thread-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
}

.workbench-thread-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.workbench-thread-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-thread-area {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  white-space: nowrap;
}

/* Workbench tab content */
.workbench-tab-content {
  padding: 0.75rem 1.5rem;
  overflow: hidden;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.workbench-tab-content .workbench-thread-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workbench-tab-content .content-view-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workbench-tab-content .editable-markdown-edit-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workbench-tab-content .editable-markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

.workbench-tab-content .editable-markdown-editor-wrapper .cm-editor {
  flex: 1;
  min-height: 0;
}

.workbench-tab-content .editable-markdown-editor-wrapper .cm-scroller {
  overflow: auto;
}

.workbench-tab-content .editable-markdown-editor-wrapper .cm-content {
  padding-bottom: 50vh !important;
}

.workbench-thread-list-tab {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0.25rem;
}

.workbench-thread-list-tab > .workbench-thread-row + .workbench-thread-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.workbench-page-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.35rem;
  color: var(--os-text-muted);
}

.workbench-page-title h2 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.workbench-page-count {
  font-size: 0.7rem;
  color: var(--os-text-hint);
}

.workbench-project-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.workbench-thread-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.workbench-thread-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.workbench-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding: 0 0.25rem;
}

.workbench-footer-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.workbench-footer-btn:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.05);
}

.workbench-footer-btn.active {
  color: var(--os-text-muted);
}

.workbench-archived-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workbench-archived-row {
  opacity: 0.6;
}

.workbench-action-btn {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--os-text-muted);
  flex-shrink: 0;
}

.workbench-action-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

.workbench-action-btn.danger:hover {
  color: rgba(239, 68, 68, 0.9);
  background: rgba(239, 68, 68, 0.1);
}

.workbench-archived-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  font-style: italic;
}

/* (today-main-tab .tab-count removed — tabs now in header) */

/* Thread content view */
.workbench-thread-view .content-view-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.workbench-thread-view .content-view-header h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-thread-view .content-view-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.workbench-thread-view .content-view-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  cursor: pointer;
}

.workbench-thread-view .content-view-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.workbench-thread-view .content-view-btn.danger {
  color: rgba(239, 68, 68, 0.8);
  border-color: rgba(239, 68, 68, 0.2);
}

.workbench-thread-view .content-view-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.workbench-progress-btn {
  gap: 0.35rem;
  padding: 0.35rem 0.75rem !important;
}

.workbench-progress-btn span {
  font-size: 0.72rem;
  font-weight: 600;
}

.workbench-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.workbench-status-dot.active {
  background: rgba(74, 222, 128, 0.9);
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.4);
}

.workbench-status-dot.idle {
  background: rgba(255, 255, 255, 0.25);
}

.workbench-progress-btn.active {
  background: rgba(74, 222, 128, 0.08) !important;
  border-color: rgba(74, 222, 128, 0.2) !important;
  color: rgba(74, 222, 128, 0.85) !important;
}

.workbench-progress-btn.active:hover {
  background: rgba(74, 222, 128, 0.15) !important;
}

.workbench-progress-btn:not(.active) {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--os-text-muted) !important;
}

.workbench-progress-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.workbench-thread-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.workbench-thread-area-tag {
  font-size: 0.7rem;
  color: rgba(var(--accent-rgb), 0.8);
  padding: 0.15rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 4px;
}

.workbench-thread-date {
  font-size: 0.7rem;
  color: var(--os-text-muted);
}

.workbench-thread-view .content-view-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workbench-thread-view .content-editor {
  width: 100%;
  min-height: 300px;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
  color: var(--os-text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
}

.workbench-thread-view .content-loading {
  color: var(--os-text-muted);
  padding: 2rem;
  text-align: center;
}

/* File sidebar for multi-file threads */
.workbench-thread-view .content-view-body.with-file-sidebar {
  flex-direction: row;
  gap: 0;
}

.workbench-file-sidebar {
  width: 160px;
  min-width: 160px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workbench-file-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.workbench-file-sidebar-header .content-view-btn {
  padding: 2px;
  border: none;
}

.workbench-file-list {
  flex: 1;
  overflow-y: auto;
}

.workbench-file-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  cursor: pointer;
  border-left: 2px solid transparent;
}

.workbench-file-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-secondary);
}

.workbench-file-item.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
  border-left-color: var(--accent);
}

.workbench-file-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-file-delete {
  opacity: 0;
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}

.workbench-file-item:hover .workbench-file-delete {
  opacity: 1;
}

.workbench-file-delete:hover {
  color: rgba(239, 68, 68, 0.8);
}

.workbench-new-file-input {
  padding: 0.35rem 0.5rem;
}

.workbench-new-file-input input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: var(--os-text-primary);
  font-size: 0.72rem;
  padding: 0.25rem 0.4rem;
  outline: none;
}

.workbench-new-file-input input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.workbench-editor-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.workbench-editor-area .editable-markdown-edit-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workbench-editor-area .editable-markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workbench-editor-area .editable-markdown-editor-wrapper .cm-editor {
  flex: 1;
  min-height: 0;
}

.workbench-editor-area .editable-markdown-editor-wrapper .cm-scroller {
  overflow: auto;
}

.workbench-new-file-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin: 0.25rem 0;
}

.workbench-new-file-inline input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: var(--os-text-primary);
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  outline: none;
}

.workbench-new-file-inline input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

/* Link badges and picker */
.workbench-link-badges {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.workbench-link-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 500;
}

.workbench-link-badge.area {
  color: rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--accent-rgb), 0.12);
}

.workbench-link-badge.task {
  color: rgba(56, 189, 248, 0.9);
  background: rgba(56, 189, 248, 0.12);
}

.link-badge-remove {
  display: flex;
  align-items: center;
  padding: 0;
  margin-left: 0.15rem;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
}

.link-badge-remove:hover {
  opacity: 1;
}

.link-picker-wrapper {
  position: relative;
}

.link-btn {
  padding: 0.25rem 0.4rem !important;
}

.link-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  width: 260px;
  margin-top: 0.25rem;
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.link-picker-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.link-picker-tab {
  flex: 1;
  padding: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
}

.link-picker-tab:hover {
  color: var(--os-text-muted);
}

.link-picker-tab.active {
  color: var(--os-text-primary);
  border-bottom: 2px solid rgba(var(--accent-rgb), 0.8);
}

.link-picker-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 0.25rem;
}

.link-picker-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 5px;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.link-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.link-picker-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.95);
}

.link-picker-folder {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--os-text-hint);
}

.link-picker-task-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.link-picker-empty {
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  text-align: center;
  font-style: italic;
}

/* Thread more menu (overflow) */
.thread-more-wrapper {
  position: relative;
}

.thread-more-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  width: 240px;
  margin-top: 0.25rem;
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 0.25rem;
  max-height: 360px;
  overflow-y: auto;
}

.thread-more-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 5px;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.thread-more-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.thread-more-item.active {
  color: var(--accent);
}

.thread-more-item.danger:hover {
  color: rgba(239, 68, 68, 0.9);
  background: rgba(239, 68, 68, 0.1);
}

.thread-more-label {
  padding: 0.35rem 0.5rem 0.15rem;
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.thread-more-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.25rem 0;
}

.thread-more-folder {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--os-text-hint);
}

.thread-more-task-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.thread-more-empty {
  padding: 0.4rem 0.5rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  font-style: italic;
}

.thread-more-chevron {
  margin-left: auto;
  opacity: 0.4;
}

.thread-more-expand {
  max-height: 200px;
  overflow-y: auto;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  margin-left: 0.75rem;
  margin-bottom: 0.15rem;
}

.thread-more-tree-group {
  margin-bottom: 0.1rem;
}

.thread-more-tree-parent {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.3rem 0.4rem;
  background: none;
  border: none;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
}

.thread-more-tree-parent:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.thread-more-tree-children {
  padding-left: 0.75rem;
  margin-left: 0.4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.thread-more-tree-item {
  font-size: 0.7rem;
  padding: 0.25rem 0.4rem;
}

/* Project thread row with hover actions */
.workbench-project-thread-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
}

.workbench-project-thread-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  padding: 0.45rem 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  text-align: left;
  min-width: 0;
}

.workbench-project-thread-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
  padding-right: 0.35rem;
}

.workbench-project-thread-row:hover .workbench-project-thread-actions {
  opacity: 1;
}

/* Thread context menu */
.thread-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 180px;
  max-width: 240px;
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 0.3rem;
  overflow: hidden;
}

.thread-context-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border-radius: 5px;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.thread-context-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.thread-context-item.active {
  color: rgba(var(--accent-rgb), 0.95);
}

.thread-context-item.unlink {
  color: var(--os-text-muted);
  font-size: 0.7rem;
}

.thread-context-item.danger {
  color: rgba(239, 68, 68, 0.8);
}

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

.thread-context-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.25rem 0.4rem;
}

.thread-context-label {
  padding: 0.3rem 0.6rem 0.15rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-text-hint);
}

/* Thread dialog (area picker, delete confirm) */
.thread-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thread-dialog {
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  min-width: 280px;
  max-width: 360px;
  overflow: hidden;
}

.thread-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.thread-dialog-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.thread-dialog-close {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
}

.thread-dialog-close:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

.thread-dialog-list {
  padding: 0.4rem;
  max-height: 320px;
  overflow-y: auto;
}

.thread-dialog-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.thread-dialog-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.thread-dialog-item.active {
  color: rgba(var(--accent-rgb), 0.95);
  background: rgba(var(--accent-rgb), 0.08);
}

.thread-dialog-check {
  margin-left: auto;
}

.thread-dialog-message {
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  margin: 0;
}

.thread-dialog-message strong {
  color: var(--os-text-primary);
}

.thread-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.thread-dialog-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}

.thread-dialog-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.thread-dialog-btn.danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 0.9);
}

.thread-dialog-btn.danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

.thread-dialog-btn.create {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.95);
}

.thread-dialog-btn.create:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.thread-dialog-btn.create:disabled {
  opacity: 0.4;
  cursor: default;
}

.thread-dialog-body {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.thread-dialog-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: var(--os-text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}

.thread-dialog-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.thread-dialog-fields {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.thread-dialog-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 120px;
  flex: 1;
}

.thread-dialog-field label {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.thread-dialog-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  width: 100%;
}

.thread-dialog-select:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.thread-dialog-select option,
.thread-dialog-select optgroup {
  background: #1a1a2e;
  color: var(--os-text-secondary);
}

.thread-dialog-create {
  min-width: 340px;
}

.thread-move-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.thread-move-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.thread-move-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.workbench-thread-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Thread row area badge in list */
.workbench-thread-area {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.workbench-area-overflow {
  opacity: 0.5;
}

.workbench-thread-task-badge {
  font-size: 0.65rem;
  color: rgba(56, 189, 248, 0.7);
  flex-shrink: 0;
}

.workbench-meta-summary {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
  white-space: nowrap;
}

.workbench-thread-age {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.workbench-thread-age.stale {
  color: rgba(251, 191, 36, 0.6);
}

.workbench-thread-stale {
  opacity: 0.55;
}

.workbench-thread-stale:hover {
  opacity: 0.8;
}

.workbench-thread-empty {
  opacity: 0.65;
}

.workbench-thread-empty:hover {
  opacity: 0.85;
}

/* Pin icon on pinned threads */
.workbench-pin-icon {
  color: rgba(251, 191, 36, 0.6);
  flex-shrink: 0;
}

/* Area filter pills */
.workbench-area-filters {
  display: flex;
  gap: 4px;
  padding: 0 0.25rem 0.5rem;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}

.workbench-area-filters::-webkit-scrollbar {
  display: none;
}

.workbench-project-tag {
  padding: 0.15rem 0.45rem;
  border-radius: 8px;
  font-size: 0.65rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: rgba(56, 189, 248, 0.7);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.2);
  white-space: nowrap;
}

.workbench-area-pill {
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.workbench-area-pill:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}

.workbench-area-pill.active {
  color: rgba(var(--accent-rgb), 0.95);
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* Search bar */
.workbench-search-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.workbench-search-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.workbench-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-family: inherit;
}

.workbench-search-input::placeholder {
  color: var(--os-text-hint);
}

.workbench-search-clear {
  display: flex;
  align-items: center;
  padding: 0.15rem;
  border-radius: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--os-text-hint);
}

.workbench-search-clear:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

/* New thread dialog */
.workbench-new-dialog {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-top: 0.25rem;
}

.workbench-new-dialog-input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  font-family: inherit;
  outline: none;
}

.workbench-new-dialog-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.workbench-template-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.workbench-template-pill {
  padding: 0.15rem 0.45rem;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}

.workbench-template-pill:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}

.workbench-template-pill.active {
  color: rgba(var(--accent-rgb), 0.95);
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.workbench-new-dialog-fields {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.workbench-new-dialog-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.workbench-new-dialog-field label {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.workbench-new-dialog-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  font-family: inherit;
  outline: none;
  min-width: 0;
  max-width: 180px;
  cursor: pointer;
}

.workbench-new-dialog-select:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.workbench-new-dialog-select option,
.workbench-new-dialog-select optgroup {
  background: #1a1a2e;
  color: var(--os-text-secondary);
}

.workbench-new-dialog-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

.workbench-new-dialog-btn {
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
}

.workbench-new-dialog-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.workbench-new-dialog-btn.create {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.95);
}

.workbench-new-dialog-btn.create:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.workbench-new-dialog-btn.create:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Tab add button */
.workbench-tab-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  cursor: pointer;
  margin-left: -0.25rem;
  align-self: center;
}

.workbench-tab-add-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}

/* Stale thread banner */
.workbench-stale-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 8px;
  font-size: 0.8rem;
  color: rgba(251, 191, 36, 0.8);
}

.workbench-stale-banner span {
  flex: 1;
}

.stale-banner-btn {
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.85);
}

.stale-banner-btn:hover {
  background: rgba(251, 191, 36, 0.2);
}

.stale-banner-btn.keep {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
}

.stale-banner-btn.keep:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

/* Workbench Project styles */
.workbench-project-group {
  display: flex;
  flex-direction: column;
}

.workbench-project-row {
  font-weight: 500;
}

.workbench-expand-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.workbench-thread-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.workbench-project-children {
  display: flex;
  flex-direction: column;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  margin-left: 0.55rem;
}

.workbench-child-thread {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  padding: 0.3rem 0.5rem;
}

.workbench-child-thread:hover {
  color: var(--os-text-secondary);
}

.workbench-child-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.workbench-project-open {
  color: var(--os-text-hint);
  font-size: 0.7rem;
}

.workbench-project-open:hover {
  color: rgba(var(--accent-rgb), 0.7);
}

.workbench-project-loading {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  padding: 0.3rem 0.5rem 0.3rem 1.75rem;
  font-style: italic;
}


.workbench-status-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.workbench-status-paused {
  background: rgba(251, 191, 36, 0.15);
  color: rgba(251, 191, 36, 0.85);
}

.workbench-status-completed {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.85);
}

.workbench-project-counts {
  display: flex;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--os-text-hint);
}

.workbench-project-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.workbench-project-view .content-view-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  padding-bottom: 1rem;
}

.project-header-block,
.thread-header-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.75rem;
}

.workbench-project-description-row {
  padding: 0 0.25rem;
}

.workbench-project-description {
  font-size: 0.8rem;
  color: var(--os-text-muted);
  margin: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.15rem 0.25rem;
}

.workbench-project-description:hover {
  background: rgba(255, 255, 255, 0.06);
}

.workbench-project-description-input {
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.2rem 0.35rem;
  width: 100%;
  outline: none;
}

.workbench-project-description-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.workbench-status-select {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--os-text-secondary);
  cursor: pointer;
}

.workbench-status-select:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.workbench-project-areas-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  position: relative;
}

.workbench-project-areas-label {
  display: inline;
}

.workbench-area-inline {
  white-space: nowrap;
}

.workbench-area-remove {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0 0.15rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.workbench-area-inline:hover .workbench-area-remove {
  opacity: 1;
  color: var(--os-text-muted);
}

.workbench-area-sep {
  color: var(--os-text-hint);
}

.workbench-area-add-wrapper {
  position: relative;
}

.workbench-area-add-inline {
  background: none;
  border: none;
  color: var(--os-text-hint);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
}

.workbench-area-add-inline:hover {
  color: var(--os-text-muted);
}

.workbench-area-picker {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  min-width: 180px;
  backdrop-filter: blur(12px);
}

.workbench-area-picker-item {
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workbench-area-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.workbench-area-picker-tag {
  color: rgba(var(--accent-rgb), 0.6);
  font-size: 0.65rem;
  margin-left: auto;
}

.workbench-project-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.5rem 0.5rem 0.35rem;
}

.workbench-project-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.workbench-project-section-header .workbench-action-btn {
  margin-left: auto;
}

.workbench-project-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  font-style: italic;
}

.workbench-project-overview {
  padding: 0.25rem 0.5rem;
}

.workbench-project-overview h1,
.workbench-project-overview h2,
.workbench-project-overview h3 {
  margin-top: 0.5rem;
}

.workbench-inline-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
}

.workbench-inline-input input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--os-text-primary);
  outline: none;
}

.workbench-inline-input input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.workbench-loading {
  padding: 1rem;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.8rem;
}

/* Code Activity Chart */
.code-activity-chart {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 0.75rem;
}

.code-activity-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.85);
  border-radius: 12px 12px 0 0;
}

.code-activity-range {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--os-text-muted);
}

.code-activity-stats {
  display: flex;
  gap: 1.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.code-stat {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.code-stat-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--os-text-primary);
}

.code-stat-value.green {
  color: #4ade80;
}

.code-stat-value.red {
  color: #f87171;
}

.code-stat-label {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.code-activity-sub-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
}

.code-activity-periods {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.code-period-btn {
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  transition: all 0.15s ease;
}

.code-period-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
}

.code-period-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
}

.code-activity-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}

.code-activity-body {
  padding: 0.75rem 0.5rem 0.25rem;
}

.code-tab-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
}

/* ==================== */
/* ===== Responsive Layout (Container Queries) ===== */

/* Medium: hide tab labels, show icons only */
@container daily (max-width: 700px) {
  .ops-nav-tabs .tab {
    padding: 0.35rem 0.45rem;
    gap: 0;
  }
  .ops-nav-tabs .tab span,
  .ops-nav-tabs .tab:not(:has(svg))::after {
    display: none;
  }
  /* Hide text nodes inside tabs — keep only the icon */
  .ops-nav-tabs .tab {
    font-size: 0;
  }
  .ops-nav-tabs .tab svg {
    font-size: initial;
  }
  /* Narrower left tree */
  .planning-tree:not(.collapsed) {
    width: 120px;
  }
  /* Shrink right sidebar to give center more space */
  .today-sidebar {
    flex: 0 1 220px;
    min-width: 180px;
  }
}

/* Small: stack today layout vertically */
@container daily (max-width: 560px) {
  /* Header compact */
  .ops-nav-header {
    padding: 0.4rem 0.625rem;
    gap: 0.5rem;
  }
  .ops-nav-title h2 {
    display: none;
  }

  /* Collapse left tree to icons only */
  .planning-tree:not(.collapsed) {
    width: 36px;
    min-width: 36px;
    padding: 0.5rem 0.25rem;
    align-items: center;
    overflow: hidden;
  }
  .planning-tree:not(.collapsed) .tree-item-label,
  .planning-tree:not(.collapsed) .tree-group-title,
  .planning-tree:not(.collapsed) .tree-item-count,
  .planning-tree:not(.collapsed) .tree-item-chevron,
  .planning-tree:not(.collapsed) .planning-tree-heading {
    display: none;
  }

  /* Stack today grid vertically */
  .today-grid {
    flex-direction: column;
  }

  /* Sidebar becomes top strip */
  .today-sidebar {
    width: 100% !important;
    max-width: 100%;
    flex-shrink: 0;
    order: -1;
  }
  .today-sidebar .sidebar-resize-handle {
    display: none;
  }

  /* Compact calendar in horizontal mode */
  .today-sidebar .mini-cal {
    margin-top: 0.25rem;
  }

  /* Let main content fill remaining space */
  .planning-content.today-scroll-layout .today-main {
    padding-right: 0;
  }

  .planning-content.today-scroll-layout .today-grid {
    overflow-y: auto;
  }
  .planning-content.today-scroll-layout .today-main {
    overflow-y: visible;
    height: auto;
  }
}

/* Global Dark Scrollbar */
/* ==================== */
.ops-navigator *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ops-navigator *::-webkit-scrollbar-track {
  background: transparent;
}

.ops-navigator *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.ops-navigator *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.ops-navigator * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* ============================================================== */
/* LIGHT THEME OVERRIDES                                          */
/* ============================================================== */

/* 1. Main container */
body.light .ops-navigator {
  background: var(--os-glass-bg-solid);
  color: rgba(20, 20, 30, 0.9);
}

/* 2. Header */
body.light .ops-nav-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* 3. Tabs */
body.light .ops-nav-tabs {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
}

body.light .ops-nav-tabs .tab {
  color: rgba(20, 20, 30, 0.5);
}

body.light .ops-nav-tabs .tab:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.04);
}

body.light .ops-nav-tabs .tab.active {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.95);
}

/* Edit button */
body.light .edit-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.5);
}

body.light .edit-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.9);
}

/* 4. Planning tree / sidebar */
body.light .planning-tree {
  background: rgba(0, 0, 0, 0.02);
  border-right-color: rgba(0, 0, 0, 0.06);
}

body.light .tree-collapse-btn {
  color: rgba(20, 20, 30, 0.5);
}

body.light .tree-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}

body.light .tree-item {
  color: rgba(20, 20, 30, 0.8);
}

body.light .tree-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1a1a2e;
}

body.light .tree-item.active {
  background: rgba(56, 189, 248, 0.1);
  color: #0284c7;
}

body.light .tree-item-subtitle {
  color: rgba(20, 20, 30, 0.5);
}

body.light .tree-item-count {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(20, 20, 30, 0.6);
}

body.light .tree-item.active .tree-item-count {
  background: rgba(56, 189, 248, 0.15);
  color: #0284c7;
}

body.light .tree-areas {
  border-left-color: rgba(0, 0, 0, 0.06);
}

body.light .tree-item.child.area {
  color: rgba(20, 20, 30, 0.65);
}

body.light .tree-item.child.area:hover {
  color: rgba(20, 20, 30, 0.9);
}

body.light .tree-item.child.area.active {
  background: rgba(56, 189, 248, 0.1);
  color: #0284c7;
}

body.light .tree-expand-icon {
  color: rgba(20, 20, 30, 0.45);
}

body.light .tree-expand-icon:hover {
  color: rgba(20, 20, 30, 0.7);
}

body.light .tree-children {
  border-left-color: rgba(0, 0, 0, 0.06);
}

/* Resize handle */
body.light .planning-resize-handle::after {
  background: rgba(0, 0, 0, 0.15);
}

body.light .planning-resize-handle:hover::after,
body.light .planning-resize-handle:active::after {
  background: rgba(var(--accent-rgb), 0.4);
}

/* 5. Planning content and sections */
body.light .planning-section .section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .planning-section .section-header h3 {
  color: rgba(20, 20, 30, 0.85);
}

body.light .temporal-section .section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .temporal-section.today .section-header h3 {
  color: rgba(20, 20, 30, 0.9);
}

body.light .temporal-section.week .section-header h3 {
  color: rgba(20, 20, 30, 0.6);
}

body.light .planning-section.week .section-header h3 {
  color: rgba(20, 20, 30, 0.6);
}

/* Horizon collapsed */
body.light .horizon-collapsed .section-header {
  background: rgba(0, 0, 0, 0.02);
}

/* Section add input */
body.light .section-add-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.9);
}

body.light .section-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: white;
}

/* 6. Task rows */
body.light .task-row {
  color: rgba(20, 20, 30, 0.85);
}

body.light .task-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .task-text {
  color: rgba(20, 20, 30, 0.85);
}

body.light .task-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.5);
}

body.light .task-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.8);
}

/* Task row flat */
body.light .task-row-flat {
  color: rgba(20, 20, 30, 0.85);
}

body.light .task-row-flat:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .task-row-flat .task-text {
  color: rgba(20, 20, 30, 0.85);
}

body.light .task-row-flat .task-description-preview {
  color: rgba(20, 20, 30, 0.45);
}

body.light .task-row-flat .task-domain-tag {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(20, 20, 30, 0.55);
}

body.light .task-row-flat .task-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
}

body.light .task-row-flat .task-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.8);
}

body.light .task-row-flat .drag-handle {
  color: rgba(20, 20, 30, 0.2);
}

body.light .task-row-flat:hover .drag-handle {
  color: rgba(20, 20, 30, 0.4);
}

body.light .task-row-flat.dragging {
  background: rgba(0, 0, 0, 0.06);
}

body.light .task-row-flat.drag-over {
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* Task row grouped */
body.light .task-row-grouped {
  color: rgba(20, 20, 30, 0.85);
}

body.light .task-row-grouped:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .task-row-grouped .task-text {
  color: rgba(20, 20, 30, 0.85);
}

body.light .task-row-grouped.completed .task-text {
  color: rgba(20, 20, 30, 0.4);
}

body.light .task-row-actions .task-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.45);
}

/* 7. Task inputs */
body.light .task-edit-input {
  background: white;
  border-color: rgba(56, 189, 248, 0.3);
  color: rgba(20, 20, 30, 0.95);
}

body.light .task-edit-input:focus {
  border-color: rgba(56, 189, 248, 0.5);
}

body.light .task-row-flat .task-edit-input {
  background: white;
  color: rgba(20, 20, 30, 0.95);
}

body.light .task-row-flat .task-edit-input:focus {
  border-color: rgba(56, 189, 248, 0.5);
}

body.light .task-row-grouped .task-edit-input {
  background: white;
  color: rgba(20, 20, 30, 0.95);
}

body.light .task-row-grouped .task-edit-input:focus {
  border-color: rgba(56, 189, 248, 0.5);
}

/* 8. Add form inputs */
body.light .add-form-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.95);
}

body.light .add-form-input:focus {
  border-color: rgba(74, 222, 128, 0.5);
}

body.light .add-form-select {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.8);
}

body.light .add-form-select:focus {
  border-color: rgba(74, 222, 128, 0.5);
}

body.light .add-form-btn.cancel {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.55);
}

body.light .add-form-btn.cancel:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 30, 0.8);
}

/* 9. Task edit dialog / modal */
body.light .task-edit-overlay {
  background: rgba(0, 0, 0, 0.3);
}

body.light .task-edit-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

body.light .task-edit-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .task-edit-header h3 {
  color: rgba(20, 20, 30, 0.95);
}

body.light .task-edit-close {
  color: rgba(20, 20, 30, 0.45);
}

body.light .task-edit-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}

body.light .task-edit-field label {
  color: rgba(20, 20, 30, 0.6);
}

body.light .task-edit-textarea {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}

body.light .task-edit-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

body.light .task-edit-textarea::placeholder {
  color: rgba(20, 20, 30, 0.35);
}

/* Task detail popup */
body.light .task-detail-overlay {
  background: rgba(0, 0, 0, 0.2);
}

body.light .task-detail-popup {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

body.light .task-detail-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .task-detail-header h4 {
  color: rgba(20, 20, 30, 0.95);
}

body.light .task-detail-close {
  color: rgba(20, 20, 30, 0.45);
}

body.light .task-detail-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}

body.light .task-detail-text {
  color: rgba(20, 20, 30, 0.9);
}

body.light .task-detail-label {
  color: rgba(20, 20, 30, 0.45);
}

body.light .task-detail-value {
  color: rgba(20, 20, 30, 0.85);
}

body.light .task-detail-value.muted {
  color: rgba(20, 20, 30, 0.4);
}

body.light .task-detail-subtask {
  color: rgba(20, 20, 30, 0.7);
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

body.light .task-detail-meta {
  border-top-color: rgba(0, 0, 0, 0.06);
}

/* 10. Calendar widget */
body.light .calendar-day-label {
  color: rgba(20, 20, 30, 0.5);
}

body.light .calendar-day-group + .calendar-day-group {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .calendar-event-item {
  color: rgba(20, 20, 30, 0.85);
}

body.light .calendar-event-icon {
  color: rgba(20, 20, 30, 0.4);
}

body.light .calendar-event-title {
  color: rgba(20, 20, 30, 0.85);
}

body.light .calendar-event-time-inline {
  color: rgba(20, 20, 30, 0.45);
}

body.light .calendar-event-date {
  color: rgba(20, 20, 30, 0.4);
}

body.light .calendar-event-meet {
  background: rgba(66, 133, 244, 0.08);
  color: #1a73e8;
}

body.light .calendar-event-meet:hover {
  background: rgba(66, 133, 244, 0.15);
}

/* Calendar review dialog */
body.light .calendar-review-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

body.light .calendar-review-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .calendar-review-title h3 {
  color: rgba(20, 20, 30, 0.9);
}

body.light .calendar-review-field > span {
  color: rgba(20, 20, 30, 0.5);
}

body.light .calendar-review-field .task-edit-input,
body.light .calendar-review-field .task-edit-select {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}

body.light .calendar-nl-textarea {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}

/* Calendar multi-review */
body.light .calendar-multi-review-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
}

body.light .calendar-multi-review-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .calendar-multi-review-item-title {
  color: rgba(20, 20, 30, 0.85);
}

body.light .calendar-multi-review-item-meta {
  color: rgba(20, 20, 30, 0.45);
}

/* 11. Focus section / horizon context */
body.light .focus-section-inner {
  background: transparent;
  border-color: transparent;
}

body.light .focus-horizon-context {
  background: rgba(var(--accent-rgb), 0.04);
  border-color: rgba(var(--accent-rgb), 0.1);
}

body.light .focus-horizon-header {
  color: rgba(20, 20, 30, 0.55);
}

body.light .focus-horizon-header:hover {
  color: rgba(20, 20, 30, 0.75);
}

body.light .focus-horizon-label {
  color: rgba(var(--accent-rgb), 0.7);
}

body.light .focus-horizon-preview {
  color: rgba(20, 20, 30, 0.45);
}

body.light .focus-horizon-section-label {
  color: rgba(var(--accent-rgb), 0.5);
}

body.light .focus-horizon-section .markdown-block {
  color: rgba(20, 20, 30, 0.7);
}

body.light .focus-horizon-section .markdown-block strong {
  color: rgba(20, 20, 30, 0.85);
}

body.light .focus-subsection {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .focus-subsection-header {
  color: rgba(20, 20, 30, 0.55);
}

body.light .focus-subsection-header .subsection-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.5);
}

body.light .next-calendar-events .next-calendar-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .next-calendar-events .next-calendar-item:hover .task-text {
  color: #1a1a2e;
}

body.light .upcoming-divider {
  color: rgba(20, 20, 30, 0.35);
}

body.light .upcoming-divider::after {
  background: rgba(0, 0, 0, 0.08);
}

body.light .focus-backlog-btn {
  color: rgba(20, 20, 30, 0.5);
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .focus-backlog-btn:hover {
  color: rgba(20, 20, 30, 0.75);
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}

body.light .focus-backlog-btn .subsection-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.5);
}

body.light .subsection-add-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.35);
}

body.light .subsection-add-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.7);
}

/* Backlog dialog (light theme) */
body.light .backlog-dialog-overlay {
  background: rgba(0, 0, 0, 0.2);
}

body.light .backlog-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

body.light .backlog-dialog-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .backlog-dialog-header h3 {
  color: rgba(20, 20, 30, 0.9);
}

body.light .backlog-dialog-count {
  color: rgba(20, 20, 30, 0.4);
}

body.light .backlog-dialog-close {
  color: rgba(20, 20, 30, 0.35);
}

body.light .backlog-dialog-close:hover {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.06);
}

body.light .backlog-dialog-empty {
  color: rgba(20, 20, 30, 0.3);
}

body.light .email-more {
  color: rgba(20, 20, 30, 0.4);
}

body.light .email-collapse-chevron {
  color: rgba(20, 20, 30, 0.4);
}

/* 12. Horizon sections */
body.light .horizon-section .section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .horizon-section .section-header h3 {
  color: rgba(20, 20, 30, 0.85);
}

body.light .horizon-period-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.6);
}

body.light .horizon-period-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}

body.light .horizon-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.5);
}

body.light .horizon-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.8);
}

body.light .horizon-content {
  color: rgba(20, 20, 30, 0.75);
}

body.light .horizon-content .markdown-block {
  color: rgba(20, 20, 30, 0.75);
}

body.light .horizon-content .markdown-block strong {
  color: rgba(20, 20, 30, 0.9);
}

body.light .horizon-content .markdown-block em {
  color: rgba(20, 20, 30, 0.55);
}

body.light .horizon-section {
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .horizon-compact .section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* Horizon file inline input */
body.light .horizon-file-inline-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.9);
}

body.light .horizon-file-inline-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

/* Rollover items */
body.light .rollover-item {
  color: rgba(20, 20, 30, 0.75);
}

body.light .rollover-item input[type="checkbox"] {
  border-color: rgba(0, 0, 0, 0.2);
}

body.light .rollover-group-header input[type="checkbox"] {
  border-color: rgba(0, 0, 0, 0.2);
}

/* 13. This-week content */
body.light .this-week-content .markdown-block {
  color: rgba(20, 20, 30, 0.75);
}

body.light .this-week-content .markdown-block strong {
  color: rgba(20, 20, 30, 0.9);
}

body.light .this-week-content .markdown-block em {
  color: rgba(20, 20, 30, 0.55);
}

body.light .this-week-textarea {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}

body.light .this-week-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

body.light .this-week-textarea::placeholder {
  color: rgba(20, 20, 30, 0.35);
}

/* 14. Workbench focus cards */
body.light .workbench-focus-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .workbench-focus-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

body.light .workbench-focus-card-name {
  color: rgba(20, 20, 30, 0.85);
}

body.light .workbench-focus-card-desc {
  color: rgba(20, 20, 30, 0.45);
}

body.light .workbench-focus-card-meta {
  color: rgba(20, 20, 30, 0.4);
}

body.light .workbench-focus-card.active {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.2);
}

body.light .workbench-focus-card.active .workbench-focus-card-name {
  color: rgba(20, 20, 30, 0.95);
}

body.light .workbench-focus-divider {
  border-color: rgba(0, 0, 0, 0.06);
}

/* Workbench picker dropdown */
body.light .workbench-picker-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

body.light .workbench-picker-item {
  color: rgba(20, 20, 30, 0.75);
}

body.light .workbench-picker-item:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}

body.light .workbench-picker-item:disabled {
  color: rgba(20, 20, 30, 0.3);
}

body.light .workbench-picker-item.active {
  background: rgba(var(--accent-rgb), 0.08);
}

body.light .workbench-picker-name {
  color: rgba(20, 20, 30, 0.85);
}

body.light .workbench-picker-project {
  color: rgba(20, 20, 30, 0.45);
}

body.light .workbench-picker-divider {
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .workbench-picker-group-header {
  color: rgba(20, 20, 30, 0.45);
}

body.light .workbench-picker-empty {
  color: rgba(20, 20, 30, 0.4);
}

/* 15. Journal composer */
body.light .journal-composer-editor .editable-markdown-editor-wrapper {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .journal-composer-editor .editable-markdown-editor-wrapper:focus-within {
  border-color: rgba(var(--accent-rgb), 0.4);
}

body.light .journal-composer-input {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}

body.light .journal-composer-input::placeholder {
  color: rgba(20, 20, 30, 0.35);
}

body.light .journal-composer-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

body.light .journal-composer-submit {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

body.light .journal-composer-submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
}

/* 16. Journal entries */
body.light .journal-entry-card {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .journal-entry-meta {
  color: rgba(20, 20, 30, 0.7);
}

body.light .journal-entry-time-continued {
  color: rgba(20, 20, 30, 0.5);
}

body.light .journal-entry-kind-badge.log {
  color: rgba(30, 120, 180, 0.9);
  border-color: rgba(30, 120, 180, 0.25);
  background: rgba(30, 120, 180, 0.08);
}

body.light .journal-entry-kind-badge.events {
  color: rgba(180, 110, 0, 0.9);
  border-color: rgba(180, 110, 0, 0.25);
  background: rgba(180, 110, 0, 0.08);
}

body.light .journal-entry-kind-badge.completed {
  color: rgba(10, 140, 90, 0.9);
  border-color: rgba(10, 140, 90, 0.3);
  background: rgba(10, 140, 90, 0.08);
}

body.light .journal-entry-body {
  color: rgba(20, 20, 30, 0.88);
}

body.light .journal-entry-body p,
body.light .journal-entry-body div,
body.light .journal-entry-body span,
body.light .journal-entry-body .markdown-text {
  color: rgba(20, 20, 30, 0.88);
}

body.light .journal-entry-body blockquote {
  border-left-color: rgba(0, 0, 0, 0.15);
  color: rgba(20, 20, 30, 0.7);
}

body.light .journal-entry-body pre {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .journal-entry-body code {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(20, 20, 30, 0.8);
}

body.light .journal-entry-body h1,
body.light .journal-entry-body h2,
body.light .journal-entry-body h3 {
  color: rgba(20, 20, 30, 0.9);
}

body.light .journal-entry-edit-btn {
  color: rgba(20, 20, 30, 0.3);
}

body.light .journal-entry-card:hover .journal-entry-edit-btn {
  color: rgba(20, 20, 30, 0.5);
}

body.light .journal-entry-edit-btn:hover {
  color: rgba(20, 20, 30, 0.8);
}

body.light .journal-entry-body-clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .journal-entry-card.commit {
  border-left-color: rgba(0, 0, 0, 0.08);
}

body.light .journal-entry-card.commit .journal-entry-body,
body.light .journal-entry-card.commit .journal-entry-body p,
body.light .journal-entry-card.commit .journal-entry-body div,
body.light .journal-entry-card.commit .journal-entry-body span,
body.light .journal-entry-card.commit .journal-entry-body .markdown-text {
  color: rgba(20, 20, 30, 0.65);
}

/* Journal entry edit */
body.light .journal-entry-edit-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.9);
}

body.light .journal-entry-edit-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

body.light .journal-entry-editor-compact .editable-markdown-editor-wrapper {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .journal-entry-editor-compact .editable-markdown-editor-wrapper:focus-within {
  border-color: rgba(var(--accent-rgb), 0.4);
}

body.light .journal-entry-processed-badge {
  background: rgba(74, 222, 128, 0.08);
  color: rgba(74, 222, 128, 0.7);
}

/* Journal infinite toggle */
body.light .journal-infinite-toggle {
  color: rgba(20, 20, 30, 0.5);
}

/* 17. Log view */
body.light .log-view {
  color: rgba(20, 20, 30, 0.85);
}

body.light .log-date-nav {
  background: rgba(0, 0, 0, 0.03);
}

body.light .log-date-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.55);
}

body.light .log-date-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}

body.light .log-section {
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .log-section-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .log-section-header h4 {
  color: rgba(20, 20, 30, 0.8);
}

body.light .log-section-header .item-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.5);
}

body.light .log-section-add-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.4);
}

body.light .log-section-add-btn:hover {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.3);
  color: #16a34a;
}

body.light .log-item {
  color: rgba(20, 20, 30, 0.75);
}

body.light .log-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .log-item-time {
  color: rgba(20, 20, 30, 0.4);
}

body.light .log-item-text {
  color: rgba(20, 20, 30, 0.8);
}

body.light .log-item-action {
  color: rgba(20, 20, 30, 0.35);
}

body.light .log-item-action:hover {
  color: rgba(20, 20, 30, 0.7);
}

body.light .log-add-time {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.8);
}

body.light .log-add-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}

body.light .log-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: white;
}

body.light .log-add-submit {
  color: rgba(20, 20, 30, 0.6);
}

body.light .log-add-cancel {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 30, 0.4);
}

body.light .log-item-edit-input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.9);
}

body.light .log-item-edit-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* Log context menu */
body.light .log-context-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

body.light .log-context-menu button {
  color: rgba(20, 20, 30, 0.75);
}

body.light .log-context-menu button:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* 18. Notebook */
body.light .notebook-header-left {
  color: rgba(20, 20, 30, 0.65);
}

body.light .notebook-mode-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .notebook-mode-btn {
  color: rgba(20, 20, 30, 0.4);
}

body.light .notebook-mode-btn:hover {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.04);
}

body.light .notebook-mode-btn.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

body.light .notebook-tab-bar {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .notebook-tab {
  color: rgba(20, 20, 30, 0.4);
}

body.light .notebook-tab:hover {
  color: rgba(20, 20, 30, 0.7);
}

body.light .notebook-tab.active {
  color: rgba(20, 20, 30, 0.9);
  border-bottom-color: var(--accent);
}

body.light .notebook-tab-close {
  color: rgba(20, 20, 30, 0.3);
}

body.light .notebook-tab-close:hover {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.06);
}

body.light .notebook-tab-context-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

body.light .notebook-tab-context-menu button {
  color: rgba(20, 20, 30, 0.75);
}

body.light .notebook-tab-context-menu button:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .notebook-tab-context-menu button:disabled {
  color: rgba(20, 20, 30, 0.25);
}

/* Notebook editor */
body.light .notebook-editor .editable-markdown-editor-wrapper {
  color: rgba(20, 20, 30, 0.85);
}

body.light .notebook-editor .editable-markdown-view {
  color: rgba(20, 20, 30, 0.85);
}

body.light .notebook-processed-badge {
  color: rgba(74, 222, 128, 0.7);
  background: rgba(74, 222, 128, 0.08);
}

/* Notebook editor toolbar */
body.light .notebook-editor-toolbar {
  border-color: rgba(0, 0, 0, 0.08);
}

/* Scratch create button */
body.light .scratch-create-btn {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

body.light .scratch-create-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* 19. Info view */
body.light .info-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .info-section-title {
  color: rgba(20, 20, 30, 0.9);
}

body.light .info-section-desc {
  color: rgba(20, 20, 30, 0.5);
}

/* Posture cards */
body.light .posture-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

/* 20. Domain chips */
body.light .domain-chip {
  opacity: 0.85;
}

/* 21. Empty messages */
body.light .empty-message {
  color: rgba(20, 20, 30, 0.4);
}

/* 22. Error / loading states */
body.light .ops-nav-loading,
body.light .ops-nav-error {
  color: rgba(20, 20, 30, 0.6);
}

body.light .ops-nav-error button {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.85);
}

body.light .ops-nav-error button:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* 23. Filter chips */
body.light .filter-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.6);
}

body.light .filter-chip:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}

body.light .filter-chip.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* 24. Scrollbars */
body.light .ops-navigator *::-webkit-scrollbar-track {
  background: transparent;
}

body.light .ops-navigator *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

body.light .ops-navigator *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

body.light .ops-navigator * {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

body.light .planning-tree::-webkit-scrollbar-track {
  background: transparent;
}

body.light .planning-tree::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

body.light .planning-content::-webkit-scrollbar-track {
  background: transparent;
}

body.light .planning-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

body.light .temporal-view::-webkit-scrollbar-track {
  background: transparent;
}

body.light .temporal-view::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

body.light .temporal-view::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

body.light .log-view::-webkit-scrollbar-track,
body.light .planning-view::-webkit-scrollbar-track {
  background: transparent;
}

body.light .log-view::-webkit-scrollbar-thumb,
body.light .planning-view::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

body.light .log-view::-webkit-scrollbar-thumb:hover,
body.light .planning-view::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

body.light .task-edit-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02);
}

body.light .task-edit-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

body.light .task-edit-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* 25. Horizon rollover button */
body.light .horizon-rollover-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.6);
}

body.light .horizon-rollover-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}

/* 26. Day counter badge */
body.light .day-counter {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

body.light .day-counter:hover {
  background: rgba(var(--accent-rgb), 0.2);
}

/* 27. Section header task count badges - keep colored badges as-is, they use accent colors that work in both themes */

/* 28. Editable markdown in horizon/planning contexts */
body.light .horizon-content .editable-markdown-edit-mode {
  color: rgba(20, 20, 30, 0.85);
}

body.light .horizon-content .editable-markdown-editor-wrapper {
  border-color: rgba(0, 0, 0, 0.1);
}

/* 29. Domain action buttons */
body.light .domain-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
}

body.light .domain-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.8);
}

/* 29b. Domain task rows (light theme) */
body.light .domain-task-row {
  background: rgba(0, 0, 0, 0.02);
}

body.light .domain-task-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .domain-task-row .task-text {
  color: rgba(20, 20, 30, 0.88);
}

body.light .domain-task-row.completed .task-text {
  color: rgba(20, 20, 30, 0.4);
}

body.light .task-area {
  color: rgba(20, 20, 30, 0.4);
  background: rgba(0, 0, 0, 0.04);
}

body.light .task-checkbox {
  color: rgba(20, 20, 30, 0.25);
}

body.light .task-checkbox:hover {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
}

body.light .domain-task-row.completed .task-checkbox {
  color: rgba(22, 163, 74, 0.5);
}

/* Light theme task type indicators */
body.light .task-row-flat.task-type-obligation .task-checkbox,
body.light .task-row-grouped.task-type-obligation .task-checkbox,
body.light .domain-task-row.task-type-obligation .task-checkbox {
  color: rgba(234, 88, 12, 0.6);
}
body.light .task-row-flat.task-type-self .task-checkbox,
body.light .task-row-grouped.task-type-self .task-checkbox,
body.light .domain-task-row.task-type-self .task-checkbox {
  color: rgba(14, 165, 233, 0.6);
}
body.light .task-row-flat.task-type-intention .task-checkbox,
body.light .task-row-grouped.task-type-intention .task-checkbox,
body.light .domain-task-row.task-type-intention .task-checkbox {
  color: rgba(0, 0, 0, 0.2);
}
body.light .domain-task-row.task-type-obligation {
  border-left: 3px solid rgba(234, 88, 12, 0.4);
}
body.light .domain-task-row.task-type-self {
  border-left: 3px solid rgba(14, 165, 233, 0.4);
}
body.light .domain-task-row.task-type-intention {
  border-left: 3px solid rgba(0, 0, 0, 0.1);
}

/* Light theme task type/weight toggles */
body.light .task-type-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.4);
}
body.light .task-type-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.6);
}
body.light .task-type-btn.active.type-obligation {
  background: rgba(234, 88, 12, 0.08);
  border-color: rgba(234, 88, 12, 0.3);
  color: #ea580c;
}
body.light .task-type-btn.active.type-self {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.3);
  color: #0ea5e9;
}
body.light .task-type-btn.active.type-intention {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.5);
}
body.light .task-weight-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.4);
}
body.light .task-weight-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.6);
}
body.light .task-weight-btn.active {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
}
body.light .task-priority-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.4);
}
body.light .task-priority-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.6);
}
body.light .task-priority-btn.active.urgent {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
  color: #dc2626;
}
body.light .task-priority-btn.active.important {
  background: rgba(202, 138, 4, 0.08);
  border-color: rgba(202, 138, 4, 0.3);
  color: #ca8a04;
}

/* 29c. Next task rows (light theme) */
body.light .next-task-row {
  background: rgba(0, 0, 0, 0.02);
}

body.light .next-task-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .next-task-text {
  color: rgba(20, 20, 30, 0.85);
}

body.light .next-task-text.done {
  color: rgba(20, 20, 30, 0.4);
}

/* 30. Horizon day today button */
body.light .horizon-day-today-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.6);
}

body.light .horizon-day-today-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}

/* 31. Task checkbox - keep default styling since they use colored borders */

/* 32. Notebook sidebar items */
body.light .notebook-sidebar {
  border-right-color: rgba(0, 0, 0, 0.06);
}

/* 33. Mini Calendar (light theme) */
body.light .mini-cal {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .mini-cal-title {
  color: rgba(20, 20, 30, 0.85);
}

body.light .mini-cal-nav {
  color: rgba(20, 20, 30, 0.45);
}

body.light .mini-cal-nav:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}

body.light .mini-cal-weekday {
  color: rgba(20, 20, 30, 0.5);
}

body.light .mini-cal-day {
  color: rgba(20, 20, 30, 0.7);
}

body.light .mini-cal-day:not(.blank):hover {
  background: rgba(0, 0, 0, 0.06);
}

body.light .mini-cal-day.today {
  border-color: rgba(56, 189, 248, 0.5);
  color: rgba(56, 189, 248, 0.9);
}

body.light .mini-cal-day.selected {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

body.light .mini-cal-context-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

body.light .mini-cal-context-item {
  color: rgba(20, 20, 30, 0.75);
}

body.light .mini-cal-context-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* 34. Horizon compact / Plan widget (light theme) */
body.light .horizon-compact {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .horizon-compact .section-header {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .horizon-compact .section-header h3 {
  color: rgba(56, 189, 248, 0.8);
}

body.light .horizon-compact .horizon-action-btn {
  color: rgba(20, 20, 30, 0.4);
}

body.light .horizon-compact .horizon-action-btn:hover {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.06);
}

body.light .horizon-compact .editable-markdown-block {
  color: rgba(20, 20, 30, 0.8);
}

body.light .horizon-compact .editable-markdown-edit-mode {
  color: rgba(20, 20, 30, 0.85);
}

/* 35. Sidebar tree section labels & headers (GOALS, AREAS, etc.) */
body.light .tree-section-label {
  color: rgba(20, 20, 30, 0.45);
}

body.light .tree-section-header {
  color: rgba(20, 20, 30, 0.45);
}

body.light .tree-section-header:hover {
  color: rgba(20, 20, 30, 0.7);
}

body.light .tree-section-count {
  color: rgba(20, 20, 30, 0.4);
  background: rgba(0, 0, 0, 0.06);
}

/* 36. Sidebar domain names (Admin, Body, Build, etc.) */
body.light .tree-area-domain-label {
  color: rgba(20, 20, 30, 0.65);
}

body.light .tree-area-domain-label:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.03);
}

body.light .tree-area-domain-name {
  color: rgba(20, 20, 30, 0.7);
}

body.light .tree-area-domain-count {
  color: rgba(20, 20, 30, 0.3);
}

body.light .tree-area-children {
  border-left-color: rgba(0, 0, 0, 0.08);
}

body.light .area-tree-domain {
  color: rgba(20, 20, 30, 0.85);
}

body.light .areas-domain-name {
  color: rgba(20, 20, 30, 0.8);
}

body.light .areas-domain-count {
  color: rgba(20, 20, 30, 0.4);
  background: rgba(0, 0, 0, 0.05);
}

body.light .areas-add-btn {
  color: rgba(20, 20, 30, 0.35);
}

body.light .areas-add-btn:hover {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.06);
}

body.light .next-domain-name {
  color: rgba(20, 20, 30, 0.9);
}

body.light .domain-task-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.5);
}

/* 37. Journal toolbar buttons (light theme) */
body.light .today-journal-toolbar {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .journal-toolbar-menu-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
}

body.light .journal-toolbar-menu-btn:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}

body.light .journal-toolbar-process-btn {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.15);
}

/* 38. Tabs row collapse button (light theme) */
body.light .tabs-row-refresh-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
}

body.light .tabs-row-refresh-btn:hover:not(:disabled) {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}

body.light .tabs-row-collapse-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
}

body.light .tabs-row-collapse-btn:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}

/* 39. Sidebar resize handle (light theme) */
body.light .sidebar-resize-handle::after {
  background: rgba(0, 0, 0, 0.06);
}

/* 40. Section date label (light theme) */
body.light .section-date-label {
  color: rgba(56, 189, 248, 0.8);
  background: rgba(56, 189, 248, 0.08);
}

/* 41. Today main scrollbar (light theme) */
body.light .planning-content.today-scroll-layout .today-main::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}

body.light .planning-content.today-scroll-layout .today-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

/* 42. Planning content background (light theme) */
body.light .planning-content {
  background: transparent;
}

/* 43. Tree divider lines (light theme) */
body.light .tree-divider {
  background: rgba(0, 0, 0, 0.06);
}

/* 44. Today journal action buttons (light theme) */
body.light .today-journal-actions .notebook-mode-btn {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.45);
  background: rgba(0, 0, 0, 0.03);
}

body.light .today-journal-actions .notebook-mode-btn:hover {
  color: rgba(20, 20, 30, 0.8);
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.06);
}

body.light .today-journal-actions .notebook-mode-btn.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.1);
}

/* 45. Section description (light theme) */
body.light .section-description {
  color: rgba(20, 20, 30, 0.4);
}

/* 46. Calendar event items in light theme */
body.light .calendar-day-label {
  color: rgba(20, 20, 30, 0.5);
}

body.light .calendar-event-item {
  color: rgba(20, 20, 30, 0.8);
}

body.light .calendar-event-icon {
  color: rgba(20, 20, 30, 0.4);
}

body.light .calendar-event-title {
  color: rgba(20, 20, 30, 0.85);
}

body.light .calendar-event-time-inline {
  color: rgba(20, 20, 30, 0.45);
}

body.light .calendar-event-date {
  color: rgba(20, 20, 30, 0.5);
}

body.light .account-badge.account-personal {
  background: rgba(2, 100, 170, 0.15);
  color: #075985;
}

body.light .account-badge.account-work {
  background: rgba(109, 40, 217, 0.12);
  color: #5b21b6;
}

body.light .task-row-flat .task-due-tag {
  background: rgba(2, 100, 170, 0.12);
  color: #075985;
}

body.light .task-row-flat .task-due-tag.due-today {
  background: rgba(161, 98, 7, 0.12);
  color: #92400e;
}

body.light .task-row-flat .task-due-tag.due-soon {
  background: rgba(194, 65, 12, 0.12);
  color: #9a3412;
}

body.light .task-row-flat .task-due-tag.overdue {
  background: rgba(185, 28, 28, 0.12);
  color: #991b1b;
}

/* 47. Email section (light theme) */
body.light .email-item {
  color: rgba(20, 20, 30, 0.7);
}

body.light .email-item + .email-item {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .email-from {
  color: rgba(20, 20, 30, 0.85);
}

body.light .email-subject {
  color: rgba(20, 20, 30, 0.6);
}

body.light .email-mark-all-read {
  color: rgba(20, 20, 30, 0.5);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .email-mark-all-read:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.08);
}

body.light .email-mark-spinner {
  border-color: rgba(0, 0, 0, 0.15);
  border-top-color: rgba(20, 20, 30, 0.6);
}

body.light .email-skip-btn {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.15);
  color: rgba(16, 185, 129, 0.5);
}

body.light .email-skip-btn:hover {
  color: rgba(16, 185, 129, 0.9);
  background: rgba(16, 185, 129, 0.12);
}

body.light .email-skip-btn.skipped {
  background: rgba(220, 100, 20, 0.08);
  border-color: rgba(220, 100, 20, 0.2);
  color: rgba(220, 100, 20, 0.8);
}

body.light .email-skip-btn.skipped:hover {
  background: rgba(220, 100, 20, 0.15);
}

body.light .email-item.email-skipped .email-from,
body.light .email-item.email-skipped .email-subject {
  text-decoration-color: rgba(0, 0, 0, 0.15);
}

body.light .email-track-btn {
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.25);
}

body.light .email-track-btn:hover {
  color: rgba(220, 100, 20, 0.9);
  background: rgba(220, 100, 20, 0.08);
  border-color: rgba(220, 100, 20, 0.2);
}

/* 48. Week Priorities (light theme) */
body.light .week-priorities {
  color: rgba(20, 20, 30, 0.88);
}
body.light .week-priorities strong {
  color: rgba(20, 20, 30, 0.88);
}

/* 50. Section Header (light theme) */
body.light .section-header-clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* 51. Section Collapse (light theme) */
body.light .section-collapse-chevron {
  color: rgba(20, 20, 30, 0.35);
}

/* 52. Section Add (light theme) */
body.light .section-add-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .section-add-form {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .section-add-select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .section-add-cancel {
  color: rgba(20, 20, 30, 0.55);
}

/* 53. Planning Section (light theme) */
body.light .planning-section.today .section-header h3 {
  color: rgba(20, 20, 30, 0.88);
}

/* 54. Next Calendar (light theme) */
body.light .next-calendar-events .next-calendar-item {
  color: rgba(20, 20, 30, 0.85);
}
body.light .next-calendar-events .next-calendar-item .task-text {
  color: rgba(20, 20, 30, 0.85);
}
body.light .next-calendar-events .next-calendar-item .task-due-tag {
  background: rgba(2, 100, 170, 0.12);
  color: #075985;
}
body.light .next-calendar-events .next-calendar-item .task-checkbox {
  color: #075985 !important;
}
body.light .next-calendar-events .next-calendar-item:hover .task-text {
  color: #1a1a2e;
}

/* 55. Subsection (light theme) */
body.light .subsection-link-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .subsection-link-btn.active {
  color: rgba(20, 20, 30, 0.55);
}
body.light .subsection-edit-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .subsection-edit-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .subsection-open-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .subsection-open-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}

/* 56. Focus Thread (light theme) */
body.light .focus-thread-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .focus-thread-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .focus-thread-name {
  color: rgba(20, 20, 30, 0.88);
}

/* 57. Workbench Focus (light theme) */
body.light .workbench-focus-card-icon.thread {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-focus-stop-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}

/* 58. Workbench Picker (light theme) */
body.light .workbench-picker-new {
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-picker-new:hover {
  color: rgba(20, 20, 30, 0.88);
}

/* 59. Focus Project (light theme) */
body.light .focus-project-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .focus-project-threads-count {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}

/* 60. Active Work (light theme) */
body.light .active-work-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .active-work-card:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .active-work-card-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .active-work-card-context {
  color: rgba(20, 20, 30, 0.35);
}
body.light .active-work-stop-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}

/* 62. Calendar Nl (light theme) */
body.light .calendar-nl-dialog {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
}
body.light .calendar-nl-dialog-hint {
  color: rgba(20, 20, 30, 0.55);
}

/* 63. Calendar Review (light theme) */
body.light .calendar-review-link-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .calendar-review-link-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .calendar-review-checkbox {
  color: rgba(20, 20, 30, 0.88);
}
body.light .calendar-review-checkbox input {
  background: rgba(0, 0, 0, 0.03);
}
body.light .calendar-review-datetime-icon {
  color: rgba(20, 20, 30, 0.88);
}
body.light .calendar-review-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .calendar-review-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .calendar-review-btn.secondary {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .calendar-review-btn.secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
}

/* 64. Calendar Multi Review (light theme) */
body.light .calendar-multi-review-item.removed {
  background: rgba(0, 0, 0, 0.03);
}
body.light .calendar-multi-review-who {
  color: rgba(20, 20, 30, 0.55);
}
body.light .calendar-multi-review-action-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .calendar-multi-review-action-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}

/* 65. Email Surface (light theme) */
body.light .email-surface-header {
  color: rgba(20, 20, 30, 0.55);
}
body.light .email-surface.email-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* 67. Google Expired (light theme) */
body.light .google-expired-account-name {
  color: rgba(20, 20, 30, 0.88);
}

/* 68. Skeleton (light theme) */
body.light .skeleton-line {
  background: rgba(0, 0, 0, 0.03);
}

/* 69. Journal Options (light theme) */
body.light .journal-options-popover {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
}
body.light .journal-options-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-options-item:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-options-divider {
  background: rgba(0, 0, 0, 0.03);
}

/* 70. Today Journal (light theme) */
body.light .today-journal-action-group {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .today-journal-action-group--mode {
  background: rgba(0, 0, 0, 0.03);
}
body.light .today-journal-action-btn {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .today-journal-action-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .today-journal-editor .editable-markdown-editor-wrapper {
  border-color: rgba(0, 0, 0, 0.08);
}

/* 71. Journal Day (light theme) */
body.light .journal-day-section.history {
  background: rgba(0, 0, 0, 0.03);
}
body.light .journal-day-title {
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-day-sub {
  color: rgba(20, 20, 30, 0.55);
}
body.light .journal-day-empty-note {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.08);
}

/* 72. Journal Empty (light theme) */
body.light .journal-empty-text {
  color: rgba(20, 20, 30, 0.35);
}
body.light .journal-empty-hint {
  color: rgba(20, 20, 30, 0.15);
}

/* 73. Journal Open (light theme) */
body.light .journal-open-day-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-open-day-btn:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.06);
}

/* 74. Journal Stream (light theme) */
body.light .journal-stream-empty {
  color: rgba(20, 20, 30, 0.35);
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.08);
}
body.light .journal-stream-more {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .journal-stream-more:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}

/* 75. Journal Time Group (light theme) */
body.light .journal-time-group-count {
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-time-group-entries .journal-entry-card {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 76. Journal Entry (light theme) */
body.light .journal-entry-edit-actions button {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-entry-edit-actions button:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* 77. Journal Commit (light theme) */
body.light .journal-commit-msg {
  color: rgba(20, 20, 30, 0.88);
}

/* 78. Journal Filter (light theme) */
body.light .journal-filter-pill {
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .journal-filter-pill:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}

/* 79. Journal Activity (light theme) */
body.light .journal-activity-log {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .journal-activity-log-header {
  color: rgba(20, 20, 30, 0.55);
}
body.light .journal-activity-log-header:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .journal-activity-log-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}

/* 80. This Week (light theme) */
body.light .this-week-display:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .this-week-hint {
  color: rgba(20, 20, 30, 0.55);
}
body.light .this-week-cancel {
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .this-week-cancel:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .this-week-save {
  color: rgba(20, 20, 30, 0.88);
}

/* 81. Horizon Period (light theme) */
body.light .horizon-period-nav {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .horizon-period-btn.horizon-period-today {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .horizon-period-btn.horizon-period-today.current {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-period-btn.horizon-period-today.current:hover {
  color: rgba(20, 20, 30, 0.35);
}

/* 82. Horizon Day (light theme) */
body.light .horizon-day-today-btn.current {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-day-today-btn.current:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.35);
}

/* 83. Strategy (light theme) */
body.light .strategy-block {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .strategy-block h4 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .strategy-block .markdown-block {
  color: rgba(20, 20, 30, 0.88);
}
body.light .strategy-toc {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .strategy-toc-title {
  color: rgba(20, 20, 30, 0.35);
}
body.light .strategy-toc-children {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .strategy-toc-item,
body.light .strategy-toc-item.level-0,
body.light .strategy-toc-item.level-1,
body.light .strategy-toc-item.level-2,
body.light .strategy-toc-item.level-3 {
  color: rgba(20, 20, 30, 0.55);
}
body.light .strategy-toc-item:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .strategy-toc-item.level-0 {
  color: rgba(20, 20, 30, 0.7);
}
body.light .strategy-toc-text {
  color: inherit;
}
body.light .strategy-toc-toggle {
  color: rgba(20, 20, 30, 0.35);
}
body.light .strategy-toc-toggle:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .strategy-context-empty {
  color: rgba(20, 20, 30, 0.55);
}

/* 84. Horizon Files (light theme) */
body.light .horizon-files-toggle {
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-files-toggle:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .horizon-files-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-files-action-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-files-action-btn:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .horizon-files-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* 85. Rollover (light theme) */
body.light .rollover-dialog {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.14);
}
body.light .rollover-dialog-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .rollover-dialog-meta {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .rollover-dialog-empty {
  color: rgba(20, 20, 30, 0.55);
}
body.light .rollover-toolbar-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .rollover-toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .rollover-toolbar-count {
  color: rgba(20, 20, 30, 0.55);
}
body.light .rollover-item-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .rollover-group.has-children .rollover-item-parent {
  background: rgba(0, 0, 0, 0.03);
}
body.light .rollover-group.has-children .rollover-item-child {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .rollover-group-header {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .rollover-group-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .rollover-group-count {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .rollover-dialog-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* 86. Horizon File (light theme) */
body.light .horizon-file-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .horizon-file-item.creating {
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-file-name {
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-file-delete {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-file-editor {
  background: rgba(0, 0, 0, 0.03);
}
body.light .horizon-file-editor-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-file-close {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-file-close:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}

/* 87. Next Tabs (light theme) */
body.light .next-tabs {
  background: rgba(0, 0, 0, 0.03);
}

/* 88. Next Tab (light theme) */
body.light .next-tab {
  color: rgba(20, 20, 30, 0.55);
}
body.light .next-tab:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .next-tab .tab-count {
  background: rgba(0, 0, 0, 0.03);
}
body.light .next-tab.active .tab-count {
  background: rgba(0, 0, 0, 0.06);
}

/* 89. Suggested (light theme) */
body.light .suggested-content .generated-at {
  color: rgba(20, 20, 30, 0.55);
}

/* 90. Task Row Flat (light theme) */
body.light .task-row-flat .task-checkbox {
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-row-flat .task-text-group:hover .task-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-row-flat .task-text.done {
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-row-flat .task-edit-btn {
  background: rgba(0, 0, 0, 0.06);
}
body.light .task-row-flat .task-edit-btn.cancel {
  color: rgba(20, 20, 30, 0.55);
}

/* 91. Next Queue (light theme) */
body.light .next-queue-filters {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 92. Next Domain (light theme) */
body.light .next-domain-section {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .next-domain-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .next-domain-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* 93. Next Area (light theme) */
body.light .next-area-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .next-area-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .next-area-name {
  color: rgba(20, 20, 30, 0.88);
}

/* 94. Area Task (light theme) */
body.light .area-task-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}

/* 95. Suggestion Row (light theme) */
body.light .suggestion-row {
  background: rgba(0, 0, 0, 0.03);
}
body.light .suggestion-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* 96. Suggestion Task (light theme) */
body.light .suggestion-task {
  color: rgba(20, 20, 30, 0.88);
}

/* 97. Suggestion Source (light theme) */
body.light .suggestion-source {
  color: rgba(20, 20, 30, 0.55);
}

/* 98. Suggestion Reasoning (light theme) */
body.light .suggestion-reasoning {
  color: rgba(20, 20, 30, 0.55);
}

/* 99. Suggestion Flag (light theme) */
body.light .suggestion-flag {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}

/* 100. Suggestion Action (light theme) */
body.light .suggestion-action-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .suggestion-action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}

/* 101. Capacity Note (light theme) */
body.light .capacity-note {
  background: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* 102. Capacity Text (light theme) */
body.light .capacity-text {
  color: rgba(20, 20, 30, 0.88);
}

/* 103. Rest Option (light theme) */
body.light .rest-option-text {
  color: rgba(20, 20, 30, 0.88);
}

/* 104. Generated At (light theme) */
body.light .generated-at {
  color: rgba(20, 20, 30, 0.35);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* 105. Log Current (light theme) */
body.light .log-current-date {
  color: rgba(20, 20, 30, 0.88);
}

/* 106. Log Add (light theme) */
body.light .log-add-submit:hover:not(:disabled) {
  color: rgba(20, 20, 30, 0.88);
}
body.light .log-add-time-display {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}

/* 107. Log Empty (light theme) */
body.light .log-empty-hint {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-empty {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-empty-sub {
  color: rgba(20, 20, 30, 0.35) !important;
}

/* 108. Log Item (light theme) */
body.light .log-item.editing {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-item-edit-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}

/* 109. Log View (light theme) */
body.light .log-view-loading {
  color: rgba(20, 20, 30, 0.55);
}

/* 110. Log Toolbar (light theme) */
body.light .log-toolbar {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .log-toolbar-title {
  color: rgba(20, 20, 30, 0.88);
}

/* 111. Log Day (light theme) */
body.light .log-day-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .log-day-title {
  color: rgba(20, 20, 30, 0.88);
}
body.light .log-day-count {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-day-content .log-item {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-day-content .log-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-day-content .log-item-time {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-day-content .log-item-text {
  color: rgba(20, 20, 30, 0.88);
}

/* 112. Log Section (light theme) */
body.light .log-section-compact {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-section-compact.clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-section-header.clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* 113. Log Compact (light theme) */
body.light .log-compact-value {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-compact-areas {
  color: rgba(20, 20, 30, 0.35);
}

/* 114. Log Generated (light theme) */
body.light .log-generated-at {
  color: rgba(20, 20, 30, 0.55);
}

/* 115. Log Group (light theme) */
body.light .log-group {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .log-group-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .log-group-header.clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-group-icon {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-group-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .log-group-count {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-group-chevron {
  color: rgba(20, 20, 30, 0.35);
}
body.light .log-group-stat {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-group-items .log-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-group.other .log-group-header {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-group.other .log-group-icon {
  color: rgba(20, 20, 30, 0.55);
}
body.light .log-group.general .log-group-header {
  background: rgba(0, 0, 0, 0.03);
}

/* 116. Log Summary (light theme) */
body.light .log-summary {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .log-summary-stats {
  background: rgba(0, 0, 0, 0.03);
}
body.light .log-summary-stat {
  color: rgba(20, 20, 30, 0.88);
}
body.light .log-summary-stat strong {
  color: rgba(20, 20, 30, 0.88);
}

/* 117. Task Group (light theme) */
body.light .task-group {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-group-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-group-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-group-count {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}

/* 118. Task Defer (light theme) */
body.light .task-defer-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}

/* 119. Task Row (light theme) */
body.light .task-row-grouped.editing {
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-row-grouped .task-edit-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}

/* 120. Domain View (light theme) */
body.light .domain-view-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .domain-view-title h2 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .domain-view-stats {
  color: rgba(20, 20, 30, 0.55);
}

/* 121. Domain Tabs (light theme) */
body.light .domain-tabs {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 122. Domain Tab (light theme) */
body.light .domain-tab {
  color: rgba(20, 20, 30, 0.55);
}
body.light .domain-tab:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .domain-tab.active {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .domain-tab .tab-count {
  background: rgba(0, 0, 0, 0.06);
}

/* 123. Domain Empty (light theme) */
body.light .domain-empty p {
  color: rgba(20, 20, 30, 0.55);
}
body.light .domain-empty-hint {
  color: rgba(20, 20, 30, 0.35);
}

/* 124. Task Move (light theme) */
body.light .task-move-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
body.light .task-move-dropdown-header {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-move-dropdown-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-move-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}

/* 125. Task Age (light theme) */
body.light .task-age {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}

/* 126. Ops Toast (light theme) */
body.light .ops-toast {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  color: rgba(20, 20, 30, 0.88);
}
body.light .ops-toast-close {
  color: rgba(20, 20, 30, 0.55);
}
body.light .ops-toast-close:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.06);
}

/* 127. Task Edit (light theme) */
body.light .task-edit-textarea::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}
body.light .task-edit-textarea::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .task-edit-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .task-edit-hint {
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-edit-select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-edit-select option {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-edit-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-edit-btn.save {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-edit-btn.cancel {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-edit-btn.cancel:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}

/* 128. Area Tree (light theme) */
body.light .area-tree {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-tree::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .area-tree-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-tree-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-tree-none {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 129. People Picker (light theme) */
body.light .people-picker-list {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .people-picker-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .people-picker-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .people-picker-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .people-picker-none {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .people-picker-circle {
  color: rgba(20, 20, 30, 0.35);
}

/* 130. Task Domain (light theme) */
body.light .task-domain-group {
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-domain-header {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-domain-icon {
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-domain-icon.gray {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .task-domain-label {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-domain-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}

/* 131. Task Area (light theme) */
body.light .task-area-label {
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-area-count {
  color: rgba(20, 20, 30, 0.35);
}

/* 132. Task Dropdown (light theme) */
body.light .task-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
body.light .task-dropdown-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}

/* 133. Task Detail (light theme) */
body.light .task-detail-text svg {
  color: rgba(20, 20, 30, 0.35);
}
body.light .task-detail-subtasks {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-detail-subtask:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-detail-subtask svg {
  color: rgba(20, 20, 30, 0.35);
}
body.light .task-detail-value.source.gray {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .task-detail-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .task-detail-action.edit {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-detail-action.edit:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .task-detail-action.demote {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .task-detail-action.demote:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* 134. Domain Content (light theme) */
body.light .domain-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}
body.light .domain-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .domain-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* 135. Notebook Font (light theme) */
body.light .notebook-font-controls {
  background: rgba(0, 0, 0, 0.03);
}
body.light .notebook-font-btn {
  color: rgba(20, 20, 30, 0.55);
}
body.light .notebook-font-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .notebook-font-label {
  color: rgba(20, 20, 30, 0.55);
}

/* 136. Editor Font (light theme) */
body.light .editor-font-controls {
  background: rgba(0, 0, 0, 0.03);
}
body.light .editor-font-controls button {
  color: rgba(20, 20, 30, 0.55);
}
body.light .editor-font-controls button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .editor-font-controls .editor-font-label {
  color: rgba(20, 20, 30, 0.55);
}

/* 137. Process Preview (light theme) */
body.light .process-preview {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .process-preview-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .process-preview-summary {
  color: rgba(20, 20, 30, 0.55);
}

/* 138. Process Streaming (light theme) */
body.light .process-streaming-status {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-streaming-date {
  color: rgba(20, 20, 30, 0.35);
}

/* 139. Process Select (light theme) */
body.light .process-select-all {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-select-all:hover {
  color: rgba(20, 20, 30, 0.88);
}

/* 140. Process Entry (light theme) */
body.light .process-entry:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .process-entry-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-entry-display:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .process-entry-display.showing-original {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-entry-edit {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}

/* 141. Process Regen (light theme) */
body.light .process-regen-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.35);
}
body.light .process-regen-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-regen-feedback input {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-regen-feedback input::placeholder {
  color: rgba(20, 20, 30, 0.35);
}

/* 142. Process Dest (light theme) */
body.light .process-dest-select {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .process-dest-select:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-dest-select option {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}

/* 143. Process Domain (light theme) */
body.light .process-domain-select {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-domain-select:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-domain-select option {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}

/* 144. Process Source (light theme) */
body.light .process-source-badge {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.35);
}

/* 145. Process Tag (light theme) */
body.light .process-tag-input {
  background: rgba(255, 255, 255, 0.98);
}

/* 146. Process Add (light theme) */
body.light .process-add-tag-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.35);
}

/* 147. Process Correction (light theme) */
body.light .process-correction-reason {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-correction-reason::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .process-correction-dismiss {
  color: rgba(20, 20, 30, 0.35);
}
body.light .process-correction-dismiss:hover {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}

/* 148. Process Actions (light theme) */
body.light .process-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* 149. Process Cancel (light theme) */
body.light .process-cancel-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}

/* 150. Process Feedback (light theme) */
body.light .process-feedback-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-feedback-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-feedback-panel {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
body.light .process-feedback-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .process-feedback-header button {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-feedback-header button:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .process-feedback-content {
  color: rgba(20, 20, 30, 0.55);
}
body.light .process-feedback-content th {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .process-feedback-content td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}

/* 151. Scratch Header (light theme) */
body.light .scratch-header-left {
  color: rgba(20, 20, 30, 0.88);
}

/* 152. Scratch Sidebar (light theme) */
body.light .scratch-sidebar {
  background: transparent;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .notebook-cal-sidebar {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .notebook-cal-toggle {
  color: rgba(20, 20, 30, 0.4);
}
body.light .notebook-cal-toggle:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-sidebar-search-wrap {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-sidebar-search-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-sidebar-search {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-sidebar-search::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-sidebar-search-clear {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-sidebar-search-clear:hover {
  color: rgba(20, 20, 30, 0.65);
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-sidebar-search-empty {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-sidebar-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}

/* 153. Scratch Add (light theme) */
body.light .scratch-add-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}

/* 154. Scratch Page (light theme) */
body.light .scratch-page-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-page-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-page-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-page-title {
  color: rgba(20, 20, 30, 0.88);
}

/* 155. Scratch Tree (light theme) */
body.light .scratch-tree-toggle {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-tree-toggle:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}

/* 156. Scratch Context (light theme) */
body.light .scratch-context-menu {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
body.light .scratch-context-menu button {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-context-menu button:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* 157. Scratch Move (light theme) */
body.light .scratch-move-backdrop {
  background: rgba(0, 0, 0, 0.25);
}
body.light .scratch-move-dialog {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .scratch-move-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-move-header button {
  color: rgba(20, 20, 30, 0.55);
}
body.light .scratch-move-header button:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-move-group + .scratch-move-group {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-move-group-label {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-move-option {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-move-option:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}

/* 158. Scratch Folder (light theme) */
body.light .scratch-folder-create-path {
  color: rgba(20, 20, 30, 0.55);
}
body.light .scratch-folder-create-input {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 30, 0.88);
}
body.light select.scratch-folder-create-input option {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-folder-create-btn.secondary {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-folder-create-btn.secondary:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-folder-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-folder-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-folder-count {
  color: rgba(20, 20, 30, 0.35);
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-folder-rename-input {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-folder-children {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-folder-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* 159. Scratch Area (light theme) */
body.light .scratch-area-checkbox {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-area-add-file-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-area-add-file-btn:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-area-file-tree {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-area-file-item {
  color: rgba(20, 20, 30, 0.55);
}
body.light .scratch-area-file-item:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-area-file-item.creating {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-area-file-input {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}

/* 160. Scratch Toc (light theme) */
body.light .scratch-toc-panel {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-toc-title {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-toc-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-toc-item.scratch-toc-active {
  background: rgba(109, 40, 217, 0.15);
  border-left: 2px solid #7c3aed;
}
body.light .scratch-toc-item.scratch-toc-active .scratch-toc-text {
  color: #7c3aed;
  font-weight: 600;
}
body.light .scratch-toc-item.scratch-toc-in-section {
  background: rgba(109, 40, 217, 0.06);
  border-left: 2px solid rgba(109, 40, 217, 0.3);
}
body.light .scratch-toc-item.scratch-toc-in-section .scratch-toc-text {
  color: rgba(109, 40, 217, 0.85);
}
body.light .scratch-toc-toggle {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-toc-toggle:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .scratch-toc-dot::after {
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-toc-text,
body.light .scratch-toc-item.level-1 .scratch-toc-text,
body.light .scratch-toc-item.level-2 .scratch-toc-text,
body.light .scratch-toc-item.level-3 .scratch-toc-text,
body.light .scratch-toc-item.level-4 .scratch-toc-text {
  color: rgba(20, 20, 30, 0.55);
}
body.light .scratch-toc-item.level-1 .scratch-toc-text {
  color: rgba(20, 20, 30, 0.7);
}
body.light .scratch-toc-text:hover,
body.light .scratch-toc-item.level-1 .scratch-toc-text:hover,
body.light .scratch-toc-item.level-2 .scratch-toc-text:hover,
body.light .scratch-toc-item.level-3 .scratch-toc-text:hover,
body.light .scratch-toc-item.level-4 .scratch-toc-text:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-toc-children {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .scratch-toc-empty {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-toc-divider {
  background: rgba(0, 0, 0, 0.06);
}
body.light .scratch-toc-link-icon {
  color: rgba(0, 0, 0, 0.3);
}
body.light .scratch-toc-link-label {
  color: rgba(0, 0, 0, 0.5) !important;
}
body.light .scratch-toc-root-label {
  color: rgba(0, 0, 0, 0.7) !important;
}
body.light .scratch-toc-link-count {
  color: rgba(0, 0, 0, 0.25);
}
body.light .scratch-toc-toolbar-btn {
  color: rgba(0, 0, 0, 0.35);
}
body.light .scratch-toc-toolbar-btn:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.05);
}
body.light .scratch-toc-toolbar-btn.active {
  color: rgba(109, 78, 201, 0.8);
}
body.light .scratch-toc-search-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
body.light .scratch-toc-search-input:focus {
  border-color: rgba(109, 78, 201, 0.4);
}
body.light .scratch-toc-search-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}
body.light .scratch-toc-search-clear {
  color: rgba(0, 0, 0, 0.3);
}
body.light .scratch-toc-search-clear:hover {
  color: rgba(0, 0, 0, 0.6);
}

/* 161. Scratch Heading (light theme) */
body.light .scratch-heading-item {
  color: rgba(20, 20, 30, 0.35);
}
body.light .scratch-heading-item:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .scratch-heading-item.level-4 {
  color: rgba(20, 20, 30, 0.35);
}

/* 162. Scratch Empty (light theme) */
body.light .scratch-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* 163. Notebook Landing (light theme) */
body.light .notebook-landing-search-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-search {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .notebook-landing-search::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .notebook-landing-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .notebook-landing-item-remove {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-item-remove:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.06);
}
body.light .notebook-landing-item-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-section-label {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-clear-btn {
  color: rgba(20, 20, 30, 0.35);
}
body.light .notebook-landing-clear-btn:hover {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .notebook-landing-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* 164. Scratch Starred (light theme) */
body.light .scratch-starred-list {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 165. Scratch Virtual (light theme) */
body.light .scratch-virtual-folder-item {
  color: rgba(20, 20, 30, 0.55);
}
body.light .scratch-virtual-folder-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* 166. Posture Card (light theme) */
body.light .posture-card-def {
  color: rgba(20, 20, 30, 0.88);
}
body.light .posture-card-test {
  color: rgba(20, 20, 30, 0.55);
}
body.light .posture-card-label {
  color: rgba(20, 20, 30, 0.55);
}
body.light .posture-card-route {
  color: rgba(20, 20, 30, 0.55);
}
body.light .posture-card-route code {
  background: rgba(0, 0, 0, 0.03);
}

/* 167. Info Distinction (light theme) */
body.light .info-distinction h4 {
  color: rgba(20, 20, 30, 0.88);
}

/* 168. Info Table (light theme) */
body.light .info-table th {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .info-table td {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 169. Info Priority (light theme) */
body.light .info-priority-list li {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .info-priority-list li::before {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}

/* 170. Info Philosophy (light theme) */
body.light .info-philosophy-col {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .info-philosophy-subtitle {
  color: rgba(20, 20, 30, 0.55);
}
body.light .info-philosophy-col ul li {
  color: rgba(20, 20, 30, 0.55);
}
body.light .info-philosophy-route {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .info-philosophy-route code {
  background: rgba(0, 0, 0, 0.03);
}
body.light .info-philosophy-pipeline {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .info-philosophy-pipeline h4 {
  color: rgba(20, 20, 30, 0.88);
}

/* 171. Info Pipeline (light theme) */
body.light .info-pipeline-flow svg {
  color: rgba(20, 20, 30, 0.35);
}

/* 172. Pipeline Stage (light theme) */
body.light .pipeline-stage {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* 173. Info Planning (light theme) */
body.light .info-planning-layer {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .info-planning-layer-header {
  color: rgba(20, 20, 30, 0.88);
}
body.light .info-planning-layer p {
  color: rgba(20, 20, 30, 0.55);
}
body.light .info-planning-connector {
  color: rgba(20, 20, 30, 0.35);
}

/* 174. Tree Item (light theme) */
body.light .tree-item.goal-item:hover .tree-period-chevron {
  color: rgba(20, 20, 30, 0.55);
}
body.light .tree-item-planning:hover .tree-period-chevron {
  color: rgba(20, 20, 30, 0.55);
}
body.light .tree-item-area-label:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .tree-item-file:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* 175. Tree Period (light theme) */
body.light .tree-period-chevron {
  color: rgba(20, 20, 30, 0.35);
}
body.light .tree-period-dropdown-wrap:hover .tree-period-chevron {
  color: rgba(20, 20, 30, 0.88);
}
body.light .tree-period-select option {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}

/* 176. Horizon Context (light theme) */
body.light .horizon-context-panel {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .horizon-context-panel-header {
  color: rgba(20, 20, 30, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}
body.light .horizon-context-close {
  color: rgba(20, 20, 30, 0.35);
}
body.light .horizon-context-close:hover {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .horizon-context-level {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .horizon-context-level-label {
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .horizon-context-level-content .markdown-block {
  color: rgba(20, 20, 30, 0.55);
}
body.light .horizon-context-level-content .markdown-block strong {
  color: rgba(20, 20, 30, 0.88);
}
body.light .horizon-context-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* 177. Horizon Cascade (light theme) */
body.light .horizon-cascade {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 178. Cascade (light theme) */
body.light .cascade-toggle {
  color: rgba(20, 20, 30, 0.35);
}
body.light .cascade-toggle:hover {
  color: rgba(20, 20, 30, 0.55);
}
body.light .cascade-content {
  background: rgba(0, 0, 0, 0.03);
}
body.light .cascade-content .markdown-block {
  color: rgba(20, 20, 30, 0.55);
}
body.light .cascade-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* 179. Backlog (light theme) */
body.light .backlog-open-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .backlog-open-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .backlog-open-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.55);
}
body.light .backlog-dialog-title {
  color: rgba(20, 20, 30, 0.88);
}
body.light .backlog-dialog-add {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 180. Linked Note (light theme) */
body.light .linked-note-remove {
  color: rgba(20, 20, 30, 0.35);
}
body.light .linked-note-remove:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .linked-note-add-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .linked-note-add-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .linked-note-type {
  color: rgba(20, 20, 30, 0.35);
}

/* 181. Note Picker (light theme) */
body.light .note-picker-overlay {
  background: rgba(0, 0, 0, 0.25);
}
body.light .note-picker-dialog {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .note-picker-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .note-picker-header h3 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .note-picker-tab {
  color: rgba(20, 20, 30, 0.55);
}
body.light .note-picker-tab:hover {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
}
body.light .note-picker-tab.active {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .note-picker-thread-area {
  color: rgba(20, 20, 30, 0.35);
}
body.light .note-picker-filter {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.35);
}
body.light .note-picker-filter input {
  color: rgba(20, 20, 30, 0.88);
}
body.light .note-picker-filter input::placeholder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .note-picker-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.06);
}
body.light .note-picker-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .note-picker-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .note-picker-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .note-picker-arrow {
  color: rgba(20, 20, 30, 0.35);
}
body.light .note-picker-item.folder {
  color: rgba(20, 20, 30, 0.55);
}
body.light .note-picker-item.folder:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .note-picker-item.file {
  color: rgba(20, 20, 30, 0.55);
}
body.light .note-picker-result-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .note-picker-result-path {
  color: rgba(20, 20, 30, 0.35);
}
body.light .note-picker-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* 182. Areas View (light theme) */
body.light .areas-view-header h3 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-view-count {
  color: rgba(20, 20, 30, 0.55);
}

/* 183. Areas Group (light theme) */
body.light .areas-group-select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}

/* 184. Areas Domain (light theme) */
body.light .areas-domain-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}

/* 185. Areas Add (light theme) */
body.light .areas-add-form {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .areas-add-form-row select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-add-form select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-add-form-actions button {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-add-form-actions button:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* 186. Areas Card (light theme) */
body.light .areas-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .areas-card:hover {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
}
body.light .areas-card-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-card-desc {
  color: rgba(20, 20, 30, 0.55);
}
body.light .areas-card-tag.gray {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .areas-card-badge.legacy {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.35);
}
body.light .areas-card-edit label span {
  color: rgba(20, 20, 30, 0.55);
}
body.light .areas-card-edit select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-card-edit-actions button {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .areas-card-edit-actions button:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* 187. Areas Empty (light theme) */
body.light .areas-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* 188. Tree Area (light theme) */
body.light .tree-area-file-count {
  color: rgba(20, 20, 30, 0.35);
}
body.light .tree-area-files {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

/* 189. Area Detail (light theme) */
body.light .area-detail-nav {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-nav-item {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-nav-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-nav-item.active {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-nav-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-section-add-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-section-add-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-loading {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-icon-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-title h3 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-domain-tag.gray {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-tag {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-vault-path {
  color: rgba(20, 20, 30, 0.2);
}
body.light .area-detail-vault-path:hover {
  color: rgba(20, 20, 30, 0.45);
}
body.light .area-detail-desc {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-desc:hover {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-desc-edit-icon {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-desc-edit input {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-intention-empty {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-intention-edit input {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-intention-edit button {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-focused-file-header {
  color: rgba(20, 20, 30, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-edit-link {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-edit-link:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .area-detail-section-header {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-section-header:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-section-count {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-horizon-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-craft {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-craft .editable-markdown-textarea {
  background: rgba(0, 0, 0, 0.04);
}
body.light .area-detail-craft h4 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-craft h5 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-task {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-task-check {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-task-text {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-task-section {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-task-delete {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-thought {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-thought-title {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-thought-date {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-thought-body {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-log-day {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-log-date {
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-log-item {
  color: rgba(20, 20, 30, 0.55);
  border-left: 2px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-log-item strong {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-empty {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-empty-cta {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-empty-cta span {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-empty-cta-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-empty-cta-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .area-detail-section-action {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-section-action:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .area-detail-craft-edit textarea {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-save-btn {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-cancel-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .area-detail-add-form input {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-add-form > button {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .area-detail-add-form > button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-add-thought-form textarea {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-dialog-overlay {
  background: rgba(0, 0, 0, 0.25);
}
body.light .area-detail-dialog {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .area-detail-dialog-header {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-dialog input {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-dialog textarea {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-file-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .area-detail-file-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-file-name:hover {
  color: rgba(20, 20, 30, 0.88);
}
body.light .area-detail-file-delete {
  color: rgba(20, 20, 30, 0.35);
}
body.light .area-detail-file-editor {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .area-detail-file-editor .editable-markdown-textarea {
  background: rgba(0, 0, 0, 0.04);
}

/* 190. Workbench Thread (light theme) */
body.light .workbench-thread-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-thread-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .workbench-thread-area {
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-thread-list-tab > .workbench-thread-row + .workbench-thread-row {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-thread-row {
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-thread-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .workbench-thread-view .content-view-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-thread-view .content-view-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-thread-view .content-view-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .workbench-thread-date {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-thread-view .content-editor {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-thread-view .content-loading {
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-thread-age {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-thread-icon {
  color: rgba(20, 20, 30, 0.5);
}

/* 191. Workbench Page (light theme) */
body.light .workbench-page-title {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-page-title h2 {
  color: #1a1a2e;
}
body.light .workbench-page-count {
  color: rgba(20, 20, 30, 0.5);
}

/* 192. Workbench Project (light theme) */
body.light .workbench-project-icon {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-project-children {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
body.light .workbench-project-open {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-project-loading {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-project-counts {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-project-description {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-project-description:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .workbench-project-description-input {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-project-areas-compact {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-project-section {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-project-section-header {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-project-empty {
  color: rgba(20, 20, 30, 0.5);
}

/* 193. Workbench Footer (light theme) */
body.light .workbench-footer-btn {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-footer-btn:hover {
  color: rgba(20, 20, 30, 0.75);
  background: rgba(0, 0, 0, 0.04);
}
body.light .workbench-footer-btn.active {
  color: rgba(20, 20, 30, 0.7);
}

/* 194. Workbench Action (light theme) */
body.light .workbench-action-btn {
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-action-btn:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}

/* 195. Workbench Archived (light theme) */
body.light .workbench-archived-empty {
  color: rgba(20, 20, 30, 0.5);
}

/* 196. Workbench Status (light theme) */
body.light .workbench-status-dot.idle {
  background: rgba(0, 0, 0, 0.06);
}
body.light .workbench-status-select {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}

/* 197. Workbench Progress (light theme) */
body.light .workbench-progress-btn:not(.active) {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: rgba(20, 20, 30, 0.55) !important;
}
body.light .workbench-progress-btn:not(.active):hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* 198. Workbench File (light theme) */
body.light .workbench-file-sidebar {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-file-sidebar-header {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-file-item {
  color: rgba(20, 20, 30, 0.7);
}
body.light .workbench-file-item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-file-item.active {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-file-delete {
  color: rgba(20, 20, 30, 0.45);
}

/* 199. Workbench New File (light theme) */
body.light .workbench-new-file-input input {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-new-file-inline {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-new-file-inline input {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}

/* 200. Link Picker (light theme) */
body.light .link-picker-dropdown {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .link-picker-tabs {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .link-picker-tab {
  color: rgba(20, 20, 30, 0.55);
}
body.light .link-picker-tab:hover {
  color: rgba(20, 20, 30, 0.55);
}
body.light .link-picker-tab.active {
  color: rgba(20, 20, 30, 0.88);
}
body.light .link-picker-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .link-picker-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .link-picker-folder {
  color: rgba(20, 20, 30, 0.5);
}
body.light .link-picker-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* 201. Thread More (light theme) */
body.light .thread-more-dropdown {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .thread-more-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-more-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-more-label {
  color: rgba(20, 20, 30, 0.35);
}
body.light .thread-more-divider {
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-more-folder {
  color: rgba(20, 20, 30, 0.35);
}
body.light .thread-more-empty {
  color: rgba(20, 20, 30, 0.35);
}
body.light .thread-more-expand {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .thread-more-tree-parent {
  color: rgba(20, 20, 30, 0.55);
}
body.light .thread-more-tree-parent:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-more-tree-children {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

/* 202. Thread Context (light theme) */
body.light .thread-context-menu {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .thread-context-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-context-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-context-item.unlink {
  color: rgba(20, 20, 30, 0.55);
}
body.light .thread-context-separator {
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-context-label {
  color: rgba(20, 20, 30, 0.35);
}

/* 203. Thread Dialog (light theme) */
body.light .thread-dialog-overlay {
  background: rgba(0, 0, 0, 0.25);
}
body.light .thread-dialog {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
}
body.light .thread-dialog-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .thread-dialog-header h3 {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-close {
  color: rgba(20, 20, 30, 0.55);
}
body.light .thread-dialog-close:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-dialog-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.light .thread-dialog-message {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-message strong {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .thread-dialog-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
body.light .thread-dialog-input {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-field label {
  color: rgba(20, 20, 30, 0.55);
}
body.light .thread-dialog-select {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-dialog-select optgroup {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}

/* 204. Thread Move (light theme) */
body.light .thread-move-option {
  color: rgba(20, 20, 30, 0.88);
}
body.light .thread-move-option:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

/* 205. Workbench Meta (light theme) */
body.light .workbench-meta-summary {
  color: rgba(20, 20, 30, 0.55);
}

/* 206. Workbench Area (light theme) */
body.light .workbench-area-pill {
  color: rgba(20, 20, 30, 0.7);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
body.light .workbench-area-pill:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.06);
}
body.light .workbench-area-remove {
  color: rgba(20, 20, 30, 0.45);
}
body.light .workbench-area-inline:hover .workbench-area-remove {
  color: rgba(20, 20, 30, 0.65);
}
body.light .workbench-area-sep {
  color: rgba(20, 20, 30, 0.45);
}
body.light .workbench-area-add-inline {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-area-add-inline:hover {
  color: rgba(20, 20, 30, 0.7);
}
body.light .workbench-area-picker {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-area-picker-item {
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-area-picker-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* 207. Workbench Search (light theme) */
body.light .workbench-search-bar {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-search-icon {
  color: rgba(20, 20, 30, 0.5);
}
body.light .workbench-search-input {
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-search-input::placeholder {
  color: rgba(20, 20, 30, 0.4);
}
body.light .workbench-search-clear {
  color: rgba(20, 20, 30, 0.45);
}
body.light .workbench-search-clear:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.03);
}

/* 208. Workbench New Dialog (light theme) */
body.light .workbench-new-dialog {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-new-dialog-input {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-new-dialog-field label {
  color: rgba(20, 20, 30, 0.35);
}
body.light .workbench-new-dialog-select {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-new-dialog-select optgroup {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(20, 20, 30, 0.88);
}
body.light .workbench-new-dialog-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-new-dialog-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}

/* 209. Workbench Template (light theme) */
body.light .workbench-template-pill {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .workbench-template-pill:hover {
  color: rgba(20, 20, 30, 0.55);
  background: rgba(0, 0, 0, 0.06);
}

/* 210. Workbench Tab (light theme) */
body.light .workbench-tab-add-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .workbench-tab-add-btn:hover {
  color: rgba(20, 20, 30, 0.88);
  background: rgba(0, 0, 0, 0.06);
}

/* 211. Stale Banner (light theme) */
body.light .stale-banner-btn.keep {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .stale-banner-btn.keep:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.88);
}

/* 212. Workbench Expand (light theme) */
body.light .workbench-expand-icon {
  color: rgba(20, 20, 30, 0.5);
}

/* 213. Workbench Child (light theme) */
body.light .workbench-child-thread {
  color: rgba(20, 20, 30, 0.7);
}
body.light .workbench-child-thread:hover {
  color: #1a1a2e;
}
body.light .workbench-child-icon {
  color: rgba(20, 20, 30, 0.5);
}

/* 214. Thread Header (light theme) */
body.light .thread-header-block {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 215. Workbench Inline (light theme) */
body.light .workbench-inline-input input {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.88);
}

/* 216. Workbench Loading (light theme) */
body.light .workbench-loading {
  color: rgba(20, 20, 30, 0.55);
}

/* 217. Code Activity (light theme) */
body.light .code-activity-chart {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .code-activity-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .code-activity-range {
  color: rgba(20, 20, 30, 0.55);
}
body.light .code-activity-stats {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.light .code-activity-sub-header {
  color: rgba(20, 20, 30, 0.55);
}
body.light .code-activity-loading {
  color: rgba(20, 20, 30, 0.55);
}

/* 218. Code Stat (light theme) */
body.light .code-stat-value {
  color: rgba(20, 20, 30, 0.88);
}
body.light .code-stat-label {
  color: rgba(20, 20, 30, 0.55);
}

/* 219. Code Period (light theme) */
body.light .code-period-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.55);
}
body.light .code-period-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(20, 20, 30, 0.55);
}

/* 220. Journal load more button (light theme) */
body.light .journal-load-more-btn {
  background: rgba(30, 120, 200, 0.08);
  border-color: rgba(30, 120, 200, 0.2);
  color: rgba(30, 120, 200, 0.85);
}

body.light .journal-load-more-btn:hover:not(:disabled) {
  background: rgba(30, 120, 200, 0.15);
}
/* ============================================
   DAILY DIGEST APP
   Self-contained styles with parent isolation
   ============================================ */

/* ============================================
   1. ISOLATION - Reset inherited styles
   ============================================ */

/* Remove window padding */
.window-body:has(.daily-digest-app) {
  padding: 0 !important;
}

/* Match window bg to newspaper theme so rounded corners blend with sidebar */
.window:has(.daily-digest-app) {
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
  border-color: rgba(180, 165, 140, 0.4) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

/* Light titlebar to match newspaper theme (including when maximized) */
.window:has(.daily-digest-app) .window-titlebar {
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%) !important;
  border-bottom: 1px solid rgba(180, 165, 140, 0.3) !important;
}
.window:has(.daily-digest-app) .window-title {
  color: rgba(0, 0, 0, 0.7) !important;
}
.window:has(.daily-digest-app) .window-title svg {
  color: rgba(0, 0, 0, 0.5) !important;
}
.window:has(.daily-digest-app) .window-titlebar-right button {
  color: rgba(0, 0, 0, 0.5) !important;
}
.window:has(.daily-digest-app) .window-titlebar-right button:hover {
  color: rgba(0, 0, 0, 0.8) !important;
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Remove news-panel's own border-radius — the window handles corner rounding */
.daily-digest-app .news-panel {
  border-radius: 0 !important;
}

/* App container - isolate text color from Window component */
.daily-digest-app {
  /* Override inherited text color - this is the key fix */
  color: rgba(0, 0, 0, 0.85);

  /* Layout */
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  /* App theme */
  background: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);

  /* CSS Variables for this app */
  --dd-text-primary: rgba(0, 0, 0, 0.85);
  --dd-text-secondary: rgba(0, 0, 0, 0.7);
  --dd-text-muted: rgba(0, 0, 0, 0.5);
  --dd-accent: rgb(139, 105, 20);
  --dd-accent-light: rgba(139, 105, 20, 0.15);
  --dd-accent-border: rgba(139, 105, 20, 0.25);
  --dd-bg-paper: linear-gradient(135deg, #f5f0e6 0%, #ebe5d8 100%);
  --dd-bg-sidebar: rgba(255, 250, 240, 0.95);
}

/* ============================================
   2. NEWS PANEL BASE
   ============================================ */

.daily-digest-app .news-panel {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  color: var(--dd-text-primary);
}

/* ============================================
   3. HEADLINES & TEXT COLORS
   ============================================ */

.daily-digest-app .headline-title {
  color: var(--dd-text-primary) !important;
}

.daily-digest-app .source-name {
  color: var(--dd-text-secondary) !important;
}

.daily-digest-app .source-count {
  color: var(--dd-text-muted) !important;
  background: var(--dd-accent-light) !important;
}

.daily-digest-app .more-header,
.daily-digest-app .more-header span {
  color: var(--dd-text-muted) !important;
}

.daily-digest-app .more-header svg {
  color: var(--dd-text-muted) !important;
}

.daily-digest-app .section-header {
  color: var(--dd-text-primary) !important;
  border-bottom-color: var(--dd-accent-border) !important;
}

.daily-digest-app .fetch-timestamp {
  color: var(--dd-text-muted) !important;
}

/* ============================================
   4. COLLECTIONS SIDEBAR
   ============================================ */

.daily-digest-app .news-sidebar {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 240px !important;
  background: var(--dd-bg-sidebar) !important;
  border-right: 1px solid var(--dd-accent-border) !important;
  z-index: 10 !important;
  transition: width 0.3s ease !important;
}

.daily-digest-app .news-sidebar.collapsed {
  width: 48px !important;
}

/* Fullscreen sidebar - ensure consistent width and position */
.daily-digest-app .news-panel.fullscreen .news-sidebar,
body > .news-panel.fullscreen.standalone-app .news-sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 240px !important;
  z-index: 300 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.daily-digest-app .news-panel.fullscreen .news-sidebar.collapsed,
body > .news-panel.fullscreen.standalone-app .news-sidebar.collapsed {
  width: 48px !important;
}

/* Ensure sidebar content doesn't overflow */
.daily-digest-app .news-panel.fullscreen .news-sidebar .sidebar-content,
body > .news-panel.fullscreen.standalone-app .news-sidebar .sidebar-content {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.daily-digest-app .news-sidebar.collapsed .sidebar-content,
.daily-digest-app .news-sidebar.collapsed .sidebar-section,
.daily-digest-app .news-sidebar.collapsed .sidebar-item {
  display: none !important;
}

.daily-digest-app .sidebar-toggle {
  position: absolute !important;
  top: 12px !important;
  right: 8px !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--dd-accent-light) !important;
  border: 1px solid rgba(139, 105, 20, 0.4) !important;
  border-radius: 50% !important;
  color: var(--dd-text-primary) !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

.daily-digest-app .sidebar-toggle:hover {
  background: rgba(139, 105, 20, 0.25) !important;
}

.daily-digest-app .sidebar-section-title {
  color: var(--dd-text-muted) !important;
}

.daily-digest-app .sidebar-item {
  color: var(--dd-text-secondary) !important;
}

.daily-digest-app .sidebar-item:hover {
  background: rgba(139, 105, 20, 0.1) !important;
  color: var(--dd-text-primary) !important;
}

.daily-digest-app .sidebar-item.active {
  background: rgba(139, 105, 20, 0.2) !important;
  color: var(--dd-text-primary) !important;
}

.daily-digest-app .sidebar-divider {
  background: var(--dd-accent-border) !important;
}

/* Nested sidebar items (Pulse navigation) */
.daily-digest-app .sidebar-nested {
  border-left-color: var(--dd-accent-border) !important;
}

.daily-digest-app .sidebar-nested-item {
  color: var(--dd-text-secondary) !important;
}

.daily-digest-app .sidebar-nested-item:hover {
  background: rgba(139, 105, 20, 0.1) !important;
  color: var(--dd-text-primary) !important;
}

.daily-digest-app .sidebar-nested-item.active {
  background: rgba(139, 105, 20, 0.18) !important;
  color: var(--dd-text-primary) !important;
  font-weight: 600 !important;
}

.daily-digest-app .sidebar-nested-count {
  color: var(--dd-text-muted) !important;
  background: var(--dd-accent-light) !important;
}

.daily-digest-app .sidebar-nested-badge {
  color: rgba(34, 139, 34, 0.9) !important;
}

.daily-digest-app .sidebar-nested-divider {
  color: var(--dd-text-muted) !important;
}

.daily-digest-app .sidebar-linkedin-time {
  color: var(--dd-text-muted) !important;
}

.daily-digest-app .sidebar-linkedin-refresh-btn {
  color: var(--dd-text-muted) !important;
}

.daily-digest-app .sidebar-linkedin-refresh-btn:hover:not(:disabled) {
  background: var(--dd-accent-light) !important;
  color: var(--dd-text-secondary) !important;
}

/* Expand/collapse chevron for Pulse */
.daily-digest-app .sidebar-expand-chevron {
  color: var(--dd-text-muted) !important;
}

.daily-digest-app .sidebar-item-expandable:hover .sidebar-expand-chevron {
  color: var(--dd-text-secondary) !important;
}

/* ============================================
   5. CONTENT LAYOUT (respects sidebar)
   ============================================ */

/* Override NewsPanel's 280px margin to match our 240px sidebar */
.daily-digest-app .news-panel.has-sidebar .newspaper-body {
  margin-left: 240px !important;
  transition: margin-left 0.3s ease !important;
}

.daily-digest-app .news-panel.has-sidebar.sidebar-collapsed .newspaper-body {
  margin-left: 48px !important;
}

/* Override masthead padding to match sidebar width */
.daily-digest-app .news-panel.has-sidebar .newspaper-masthead,
.daily-digest-app .news-panel.has-sidebar .newspaper-masthead.nyt-style {
  padding-left: 260px !important;
  transition: padding-left 0.3s ease !important;
}

.daily-digest-app .news-panel.has-sidebar.sidebar-collapsed .newspaper-masthead,
.daily-digest-app .news-panel.has-sidebar.sidebar-collapsed .newspaper-masthead.nyt-style {
  padding-left: 60px !important;
}

/* Reading toolbar - needs margin to not overlap sidebar */
.daily-digest-app .news-panel.has-sidebar .reading-toolbar {
  margin-left: 240px !important;
  transition: margin-left 0.3s ease !important;
}

.daily-digest-app .news-panel.has-sidebar.sidebar-collapsed .reading-toolbar {
  margin-left: 48px !important;
}

/* ============================================
   6. MASTHEAD
   ============================================ */

.daily-digest-app .newspaper-masthead {
  background: var(--dd-bg-paper) !important;
  border-bottom: 1px solid var(--dd-accent-border) !important;
}

.daily-digest-app .masthead-date,
.daily-digest-app .masthead-edition {
  color: var(--dd-text-primary) !important;
}

.daily-digest-app .masthead-title {
  color: var(--dd-text-primary) !important;
  font-weight: 700 !important;
}

.daily-digest-app .masthead-btn {
  color: var(--dd-text-secondary) !important;
  background: var(--dd-accent-light) !important;
  border: 1px solid var(--dd-accent-border) !important;
}

.daily-digest-app .masthead-btn:hover {
  background: rgba(139, 105, 20, 0.25) !important;
}

/* ============================================
   7. SECTION TABS
   ============================================ */

.daily-digest-app .newspaper-sections {
  background: var(--dd-bg-paper) !important;
  border-bottom: 1px solid var(--dd-accent-border) !important;
  min-height: 56px !important;
}

.daily-digest-app .section-tab {
  color: var(--dd-text-secondary) !important;
}

.daily-digest-app .section-tab:hover {
  color: var(--dd-text-primary) !important;
  background: rgba(139, 105, 20, 0.1) !important;
}

.daily-digest-app .section-tab.active {
  color: var(--dd-text-primary) !important;
  background: var(--dd-accent-light) !important;
}

/* ============================================
   8. READING TOOLBAR
   ============================================ */

.daily-digest-app .reading-toolbar {
  background: var(--dd-bg-sidebar) !important;
  border-bottom: 1px solid var(--dd-accent-border) !important;
}

.daily-digest-app .reading-section-indicator,
.daily-digest-app .reading-section-name,
.daily-digest-app .reading-section-count {
  color: var(--dd-text-secondary) !important;
}

.daily-digest-app .reading-progress-bar {
  background: rgba(139, 105, 20, 0.6) !important;
}

.daily-digest-app .reading-progress-track {
  background: var(--dd-accent-light) !important;
}

.daily-digest-app .reading-font-btn {
  background: var(--dd-accent-light) !important;
  border: 1px solid var(--dd-accent-border) !important;
  color: var(--dd-text-secondary) !important;
}

.daily-digest-app .reading-font-btn:hover:not(:disabled) {
  background: rgba(139, 105, 20, 0.25) !important;
}

.daily-digest-app .reading-font-label,
.daily-digest-app .reading-progress-text {
  color: var(--dd-text-muted) !important;
}

/* Section action buttons */
.daily-digest-app .section-actions .action-btn {
  color: var(--dd-text-secondary) !important;
  background: var(--dd-accent-light) !important;
  border: 1px solid var(--dd-accent-border) !important;
}

.daily-digest-app .section-actions .action-btn:hover {
  color: var(--dd-text-primary) !important;
  background: rgba(139, 105, 20, 0.25) !important;
}

.daily-digest-app .section-actions .action-divider {
  background: var(--dd-accent-border) !important;
}

.daily-digest-app .section-actions .lang-code {
  color: var(--dd-text-secondary) !important;
}

/* ============================================
   9. PULSE SIDEBAR & CONTENT
   ============================================ */

.daily-digest-app .pulse-sidebar {
  background: rgba(255, 250, 240, 0.5) !important;
  border-right-color: var(--dd-accent-border) !important;
}

.daily-digest-app .pulse-sidebar-header {
  background: rgba(255, 250, 240, 0.8) !important;
  color: var(--dd-text-secondary) !important;
  border-bottom-color: var(--dd-accent-border) !important;
}

/* Pulse content should fill available width */
.daily-digest-app .pulse-content,
body > .news-panel.standalone-app .pulse-content {
  width: 100% !important;
  max-width: none !important;
}

/* Pulse content header - ensure button doesn't wrap */
.daily-digest-app .pulse-content-header,
body > .news-panel.standalone-app .pulse-content-header {
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.daily-digest-app .pulse-content-header .action-btn,
body > .news-panel.standalone-app .pulse-content-header .action-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: fit-content !important;
  padding: 0.5rem 1rem !important;
}

/* Pulse layout - ensure full width */
.daily-digest-app .pulse-layout,
body > .news-panel.standalone-app .pulse-layout {
  width: 100% !important;
  max-width: none !important;
}

/* Pulse section view - remove max-width constraint */
.daily-digest-app .pulse-section-view,
body > .news-panel.standalone-app .pulse-section-view {
  max-width: none !important;
  width: 100% !important;
}

/* Pulse perspective view - remove max-width constraint */
.daily-digest-app .pulse-perspective-view,
body > .news-panel.standalone-app .pulse-perspective-view {
  max-width: none !important;
  width: 100% !important;
}

/* Pulse perspective empty state */
.daily-digest-app .pulse-perspective-empty,
body > .news-panel.standalone-app .pulse-perspective-empty {
  max-width: none !important;
  width: 100% !important;
}

.daily-digest-app .pulse-perspective-empty p,
body > .news-panel.standalone-app .pulse-perspective-empty p {
  max-width: none !important;
}

/* Pulse empty state - full width */
.daily-digest-app .pulse-empty,
body > .news-panel.standalone-app .pulse-empty {
  width: 100% !important;
  max-width: none !important;
}

/* ============================================
   10. BRIEFING CONTENT
   ============================================ */

.daily-digest-app .briefing-text {
  color: var(--dd-text-primary) !important;
}

.daily-digest-app .briefing-text strong {
  color: var(--dd-text-primary) !important;
}

.daily-digest-app .briefing-header {
  color: var(--dd-text-primary) !important;
}

/* ============================================
   11. FULLSCREEN MODE
   Note: Fullscreen content is portaled to document.body,
   so we can't use .daily-digest-app as ancestor
   ============================================ */

/* Fullscreen WITH sidebar - content needs margin, not centered */
.daily-digest-app .news-panel.fullscreen.has-sidebar .newspaper-body,
body > .news-panel.fullscreen.has-sidebar.standalone-app .newspaper-body {
  margin: 0 !important;
  margin-left: 240px !important;
  margin-right: 20px !important;
  max-width: none !important;
}

.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .newspaper-body,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .newspaper-body {
  margin-left: 48px !important;
}

.daily-digest-app .news-panel.fullscreen.has-sidebar .reading-toolbar,
body > .news-panel.fullscreen.has-sidebar.standalone-app .reading-toolbar {
  margin-left: 240px !important;
}

.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .reading-toolbar,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .reading-toolbar {
  margin-left: 48px !important;
}

.daily-digest-app .news-panel.fullscreen.has-sidebar .newspaper-masthead,
.daily-digest-app .news-panel.fullscreen.has-sidebar .newspaper-masthead.nyt-style,
body > .news-panel.fullscreen.has-sidebar.standalone-app .newspaper-masthead,
body > .news-panel.fullscreen.has-sidebar.standalone-app .newspaper-masthead.nyt-style {
  padding-left: 260px !important;
}

.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .newspaper-masthead,
.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .newspaper-masthead.nyt-style,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .newspaper-masthead,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .newspaper-masthead.nyt-style {
  padding-left: 60px !important;
}

/* Fullscreen pulse-layout - needs left offset for sidebar */
.daily-digest-app .news-panel.fullscreen.has-sidebar .pulse-section.pulse-layout,
.daily-digest-app .news-panel.fullscreen.has-sidebar .briefing-section.pulse-layout,
body > .news-panel.fullscreen.has-sidebar.standalone-app .pulse-section.pulse-layout,
body > .news-panel.fullscreen.has-sidebar.standalone-app .briefing-section.pulse-layout {
  position: fixed !important;
  top: 120px !important;
  left: 240px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: calc(100vw - 240px) !important;
  max-width: calc(100vw - 240px) !important;
  height: auto !important;
  max-height: none !important;
}

/* Fullscreen pulse content - constrain to available width */
.daily-digest-app .news-panel.fullscreen .pulse-content,
body > .news-panel.fullscreen.standalone-app .pulse-content {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Fullscreen pulse content header - ensure it fits */
.daily-digest-app .news-panel.fullscreen .pulse-content-header,
body > .news-panel.fullscreen.standalone-app .pulse-content-header {
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 1rem !important;
}

.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .pulse-section.pulse-layout,
.daily-digest-app .news-panel.fullscreen.has-sidebar.sidebar-collapsed .briefing-section.pulse-layout,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .pulse-section.pulse-layout,
body > .news-panel.fullscreen.has-sidebar.sidebar-collapsed.standalone-app .briefing-section.pulse-layout {
  left: 48px !important;
  bottom: 0 !important;
  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;
}

/* Fullscreen WITHOUT sidebar - no margin needed */
.daily-digest-app .news-panel.fullscreen:not(.has-sidebar) .newspaper-body,
.daily-digest-app .news-panel.fullscreen:not(.has-sidebar) .reading-toolbar {
  margin-left: 0 !important;
}

.daily-digest-app .news-panel.fullscreen:not(.has-sidebar) .newspaper-masthead {
  padding-left: 0 !important;
}

.daily-digest-app .news-panel.fullscreen:not(.has-sidebar) .pulse-section.pulse-layout {
  left: 0 !important;
}

/* Pulse no-sidebar layout - single column, content fills width */
.daily-digest-app .pulse-layout.pulse-no-sidebar,
body > .news-panel.standalone-app .pulse-layout.pulse-no-sidebar {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
}

/* Pulse content header styling in standalone app */
.daily-digest-app .pulse-content-header,
body > .news-panel.standalone-app .pulse-content-header {
  background: rgba(255, 250, 240, 0.8) !important;
  border-bottom-color: var(--dd-accent-border) !important;
}

.daily-digest-app .pulse-content-title,
body > .news-panel.standalone-app .pulse-content-title {
  color: var(--dd-text-secondary) !important;
}
/* Explorer App - Standalone file explorer styling */
.explorer-app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--os-glass-bg-solid);
  overflow: hidden;
}

/* Toolbar */
.explorer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.explorer-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--os-text-muted);
  overflow: hidden;
}

.explorer-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
}

.explorer-breadcrumb .breadcrumb-separator {
  opacity: 0.4;
  margin: 0 2px;
}

.explorer-breadcrumb .breadcrumb-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--os-text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.explorer-breadcrumb .breadcrumb-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

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

.explorer-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.explorer-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}

.explorer-toolbar-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* Body */
.explorer-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar / Tree */
.explorer-sidebar {
  position: relative;
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.explorer-sidebar.collapsed {
  width: 40px !important;
  min-width: 40px;
}

/* Resize handle between sidebar and editor */
.explorer-resize-handle {
  width: 4px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s ease;
}

.explorer-resize-handle:hover,
.explorer-resize-handle:active {
  background: rgba(var(--accent-rgb), 0.4);
}

.explorer-sidebar-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.explorer-sidebar-header .sidebar-header-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--os-text-muted);
}

.explorer-sidebar-header .sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.explorer-sidebar-header .sidebar-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
}

.explorer-sidebar-header .sidebar-header-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.explorer-sidebar .sidebar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-sidebar .sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.explorer-sidebar.collapsed .explorer-sidebar-header {
  justify-content: center;
}

.explorer-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 200px;
  color: var(--os-text-muted);
  font-size: 13px;
}

/* File tree - reuse the same styles */
.explorer-app .file-tree {
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.explorer-app .file-tree-branch {
  position: relative;
}

.explorer-app .file-tree-branch .file-tree-branch {
  margin-left: 12px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.explorer-app .file-tree-item-wrapper {
  position: relative;
  padding: 1px 6px;  /* spacing between items — wrapper catches drops in gaps */
}

.explorer-app .file-tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
}

.explorer-app .file-tree-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

.explorer-app .file-tree-item.selected {
  background: rgba(var(--accent-rgb), 0.25);
  color: white;
}

.explorer-app .file-tree-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.explorer-app .file-tree-item.selected svg {
  opacity: 1;
}

.explorer-app .file-tree-item.is-directory svg {
  color: var(--accent-light);
  opacity: 0.9;
}

/* Indent items without chevrons to align with folder names */
.explorer-app .file-tree-item:not(.is-directory),
.explorer-app .file-tree-item.is-empty {
  padding-left: calc(0.5rem + 20px); /* base padding + chevron width + gap */
}

.explorer-app .file-tree-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: -2px;
  transition: transform 0.15s ease;
}

.explorer-app .file-tree-chevron.expanded {
  transform: rotate(90deg);
}

.explorer-app .file-tree-chevron.loading {
  animation: explorerSpin 0.7s linear infinite;
  opacity: 0.5;
}

.explorer-app .file-tree-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorer-app .file-tree-item.is-empty {
  opacity: 0.5;
}

.explorer-app .file-tree-empty-badge {
  font-size: 10px;
  color: var(--os-text-hint);
  font-style: italic;
  margin-left: auto;
  flex-shrink: 0;
}

/* Drag-and-drop indicators */
.explorer-app .file-tree-item.drop-into {
  background: rgba(var(--accent-rgb), 0.25);
  outline: 1.5px solid rgba(var(--accent-rgb), 0.5);
  outline-offset: -1.5px;
  border-radius: 6px;
}

.explorer-app .file-tree-item-wrapper.drop-before::before {
  content: '';
  display: block;
  height: 2px;
  background: rgba(var(--accent-rgb), 0.7);
  border-radius: 1px;
  margin: 0 10px;
}

.explorer-app .file-tree-item-wrapper.drop-after::after {
  content: '';
  display: block;
  height: 2px;
  background: rgba(var(--accent-rgb), 0.7);
  border-radius: 1px;
  margin: 0 10px;
}

/* =============================================
   SEARCH LANDING (main editor area)
   ============================================= */

.explorer-search-landing {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.explorer-search-landing-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 1.5rem;
  transition: justify-content 0.2s ease;
}

.explorer-search-landing-inner.has-results {
  justify-content: flex-start;
  padding-top: 2rem;
}

/* Search logo */
.explorer-search-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: 0.15;
  margin-top: 1rem;
  transition: opacity 0.2s ease;
}

.explorer-search-logo:hover {
  opacity: 0.9;
}

/* Index status */
.explorer-index-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2rem;
  font-size: 11px;
  color: var(--os-text-hint);
}

.explorer-index-time {
  opacity: 0.7;
}

.explorer-index-time::before {
  content: '·';
  margin-right: 8px;
}

.explorer-index-status svg {
  opacity: 0.6;
}

.explorer-reindex-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-reindex-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.2);
}

.explorer-reindex-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Search/Ask mode tabs */
.explorer-search-mode-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  align-self: center;
  margin-top: 1rem;
}

.explorer-search-mode-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--os-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-search-mode-tab:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.05);
}

.explorer-search-mode-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.explorer-search-mode-tab svg {
  opacity: 0.7;
}

.explorer-search-mode-tab.active svg {
  opacity: 1;
}

/* Search bar area */
.explorer-search-bar-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 760px;
}

.explorer-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  transition: all 0.2s ease;
  position: relative;
}

.explorer-search-history {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(20, 20, 28, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 4px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}

.explorer-search-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
}

.explorer-search-history-item:hover,
.explorer-search-history-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

.explorer-search-history-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorer-search-bar:focus-within {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.explorer-search-bar.ask:focus-within {
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.08);
}

.explorer-search-bar-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.explorer-search-bar:focus-within .explorer-search-bar-icon {
  color: rgba(var(--accent-rgb), 0.7);
}

.explorer-search-bar.ask .explorer-search-bar-icon {
  color: rgba(251, 191, 36, 0.5);
}

.explorer-search-bar.ask:focus-within .explorer-search-bar-icon {
  color: rgba(251, 191, 36, 0.8);
}

.explorer-search-bar-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--os-text-primary);
  font-size: 15px;
  outline: none;
}

.explorer-search-bar-input::placeholder {
  color: var(--os-text-hint);
}

.explorer-search-bar-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.12s ease;
}

.explorer-search-bar-clear:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

.explorer-search-bar-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.explorer-search-bar-submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
}

.explorer-search-bar-submit.ask {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
  color: rgba(251, 191, 36, 0.9);
}

.explorer-search-bar-submit.ask:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.25);
}

.explorer-search-bar-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.explorer-search-hint {
  font-size: 13px;
  color: var(--os-text-hint);
  margin: 0;
}

/* Search content (results area) */
.explorer-search-content {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.explorer-search-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #f87171;
  font-size: 13px;
}

/* Ask AI button */
.explorer-ask-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-ask-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.explorer-ask-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Search result items */
.explorer-search-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.explorer-search-result-item {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-search-result-item:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.06);
}

.explorer-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.explorer-result-source {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  min-width: 0;
  overflow: hidden;
}

.explorer-result-source span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorer-result-score {
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: var(--os-text-muted);
  flex-shrink: 0;
}

.explorer-result-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--os-text-secondary);
  max-height: 80px;
  overflow: hidden;
}

.explorer-result-text .markdown-block {
  font-size: inherit;
  line-height: inherit;
}

.explorer-result-text .markdown-block h1,
.explorer-result-text .markdown-block h2,
.explorer-result-text .markdown-block h3 {
  font-size: 13px;
  margin: 3px 0;
}

.explorer-result-text .markdown-block p {
  margin: 3px 0;
}

.explorer-no-results {
  padding: 2rem;
  text-align: center;
  color: var(--os-text-hint);
  font-size: 14px;
}

/* Ask mode - thread layout */
.explorer-ask-thread {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Ask mode - conversation thread */
.explorer-ask-conversation {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}

/* Ask mode - follow-up input at bottom */
.explorer-ask-followup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.explorer-ask-followup-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--os-text-secondary);
  outline: none;
  transition: border-color 0.15s ease;
}

.explorer-ask-followup-input::placeholder {
  color: var(--os-text-hint);
}

.explorer-ask-followup-input:focus {
  border-color: rgba(var(--accent-rgb), 0.3);
}

.explorer-ask-followup-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  align-self: stretch;
  border-radius: 8px;
  border: none;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.explorer-ask-followup-send:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
}

.explorer-ask-followup-send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.explorer-ask-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.explorer-ask-question {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--os-text-muted);
  padding: 0 2px;
}

.explorer-ask-question svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.5;
}

.explorer-ask-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  color: var(--os-text-muted);
  font-size: 13px;
}

.explorer-ask-answer {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--os-text-primary);
}

.explorer-ask-answer .markdown-block {
  font-size: 14px;
  line-height: 1.7;
}

.explorer-ask-answer .markdown-block p {
  margin: 0 0 0.6rem 0;
}

.explorer-ask-answer .markdown-block p:last-child {
  margin-bottom: 0;
}

.explorer-ask-answer .markdown-block strong {
  color: var(--accent);
}

.explorer-ask-answer .markdown-block ul,
.explorer-ask-answer .markdown-block ol {
  margin: 0.4rem 0;
  padding-left: 1.25rem;
}

.explorer-ask-answer .markdown-block code {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}

.explorer-ask-actions {
  display: flex;
  gap: 6px;
  padding: 6px 0 0;
}

.explorer-ask-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--os-text-hint);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-ask-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.explorer-ask-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0 0;
}

.explorer-sources-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-hint);
  width: 100%;
  margin-bottom: 0;
}

.explorer-source-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--os-text-muted);
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
  max-width: 200px;
}

.explorer-source-item:hover {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.explorer-source-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.explorer-source-open-icon {
  margin-left: auto;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.12s ease;
}

.explorer-source-item:hover .explorer-source-open-icon {
  opacity: 0.7;
}

/* Tab bar */
.explorer-tab-bar {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 36px;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.explorer-tab-bar::-webkit-scrollbar {
  display: none;
}


.explorer-tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.12s ease;
}

.explorer-tab-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.explorer-tab-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
  box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.7);
}

.explorer-tab-icon {
  opacity: 0.6;
  flex-shrink: 0;
}

.explorer-tab-item.active .explorer-tab-icon {
  opacity: 0.9;
}

.explorer-tab-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorer-tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.1s ease;
  flex-shrink: 0;
}

.explorer-tab-item:hover .explorer-tab-close,
.explorer-tab-item.active .explorer-tab-close {
  opacity: 0.6;
}

.explorer-tab-close:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.15);
}

.explorer-tab-item.drag-over {
  box-shadow: inset 2px 0 0 rgba(var(--accent-rgb), 0.8);
}

/* Editor panel */
.explorer-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
}

.explorer-editor-header {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 8px 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  gap: 8px;
}

.explorer-editor-header .editor-header-left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Back/Forward navigation buttons */
.explorer-editor-header .editor-nav-buttons {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.explorer-editor-header .editor-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.12s ease;
  padding: 0;
}

.explorer-editor-header .editor-nav-btn:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.explorer-editor-header .editor-nav-btn.disabled {
  opacity: 0.25;
  cursor: default;
}

/* Breadcrumb path — left-aligned, clips overflow on the right */
.explorer-editor-header .editor-breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 13px;
  min-width: 0;
  white-space: nowrap;
}

.explorer-editor-header .breadcrumb-segment {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.explorer-editor-header .breadcrumb-sep {
  margin: 0 6px;
  color: var(--os-text-hint);
  font-size: 13px;
  flex-shrink: 0;
}

.explorer-editor-header .breadcrumb-link {
  background: none;
  border: none;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.12s ease;
}

.explorer-editor-header .breadcrumb-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.explorer-editor-header .breadcrumb-current {
  color: var(--os-text-secondary);
  font-weight: 500;
}

.explorer-editor-header .editor-file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--os-text-secondary);
  font-size: 13px;
}

.explorer-editor-header .editor-file-info svg {
  opacity: 0.6;
}

.explorer-editor-header .editor-filename {
  font-weight: 500;
}

.explorer-editor-header .editor-saving {
  margin-left: 12px;
  font-size: 11px;
  color: rgba(74, 222, 128, 0.8);
  font-weight: 500;
}

/* View mode segmented toggle */
.explorer-editor-header .editor-view-toggle {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 1px;
  gap: 1px;
}

.explorer-editor-header .editor-view-seg {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-editor-header .editor-view-seg:hover {
  color: var(--os-text-secondary);
}

.explorer-editor-header .editor-view-seg.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

/* Editor header right group */
.explorer-editor-header .editor-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* TTS Speak Button */
.explorer-editor-header .explorer-speak-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 4px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-editor-header .explorer-speak-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

.explorer-editor-header .explorer-speak-btn.speaking {
  color: rgba(var(--accent-rgb), 0.95);
}

.explorer-editor-header .explorer-speak-btn.loading {
  color: var(--os-text-muted);
}

body.light .explorer-editor-header .explorer-speak-btn {
  color: rgba(0, 0, 0, 0.45);
}

body.light .explorer-editor-header .explorer-speak-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.85);
}

body.light .explorer-editor-header .explorer-speak-btn.speaking {
  color: var(--accent-dark);
}

/* AI Note Button */
.explorer-note-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-note-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

.explorer-note-btn.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.explorer-note-btn.has-note {
  color: var(--accent);
  opacity: 0.8;
}

.explorer-note-btn.has-note:hover {
  opacity: 1;
}

/* AI Note Bar */
.explorer-note-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(var(--accent-rgb), 0.04);
  flex-shrink: 0;
}

.explorer-note-bar-icon {
  color: var(--accent);
  opacity: 0.6;
  flex-shrink: 0;
}

.explorer-note-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 12px;
  color: var(--os-text-secondary);
  font-family: inherit;
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  padding: 0;
}

.explorer-note-input::placeholder {
  color: var(--os-text-hint);
}

.explorer-note-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--os-text-hint);
  cursor: pointer;
  flex-shrink: 0;
}

.explorer-note-clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

/* Light theme */
body.light .explorer-note-btn {
  color: rgba(0, 0, 0, 0.35);
}

body.light .explorer-note-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.85);
}

body.light .explorer-note-btn.active {
  color: var(--accent-dark);
  background: rgba(var(--accent-rgb), 0.08);
}

body.light .explorer-note-btn.has-note {
  color: var(--accent-dark);
}

body.light .explorer-note-bar {
  background: rgba(var(--accent-rgb), 0.04);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .explorer-note-input {
  color: rgba(0, 0, 0, 0.85);
}

body.light .explorer-note-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

body.light .explorer-note-clear {
  color: rgba(0, 0, 0, 0.3);
}

body.light .explorer-note-clear:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

/* Editor + TOC row */
.explorer-editor-with-toc {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* CodeMirror Editor */
.explorer-editor-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.explorer-editor-content .cm-theme {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.explorer-editor-content .cm-editor {
  flex: 1;
  min-height: 0;
}

.explorer-editor-content .cm-scroller {
  overflow-y: auto !important;
}

.explorer-editor-content .cm-content {
  /* padding-bottom removed — using CM6's scrollPastEnd() instead for proper scroll handling */
}

.explorer-editor-content,
.explorer-preview-content {
  --explorer-md-width: 800px;
  --explorer-md-pad-y: 24px;
  --explorer-md-pad-x: 32px;
  --explorer-md-font-size: 14px;
  --explorer-md-line-height: 1.7;
  --explorer-md-text: rgba(255, 255, 255, 0.85);
  --explorer-md-text-muted: rgba(255, 255, 255, 0.8);
  --explorer-md-text-soft: rgba(255, 255, 255, 0.7);
  --explorer-md-heading-1: rgba(255, 255, 255, 0.95);
  --explorer-md-heading-2: rgba(255, 255, 255, 0.9);
  --explorer-md-heading-3: rgba(255, 255, 255, 0.85);
  --explorer-md-heading-4: rgba(255, 255, 255, 0.8);
  --explorer-md-strong: rgba(255, 255, 255, 0.95);
  --explorer-md-italic: rgba(255, 255, 255, 0.9);
  --explorer-md-strike: rgba(255, 255, 255, 0.4);
  --explorer-md-link: rgba(96, 165, 250, 0.95);
  --explorer-md-rule: rgba(255, 255, 255, 0.1);
  --explorer-md-code-bg: rgba(0, 0, 0, 0.3);
  --explorer-md-code-fg: rgba(var(--accent-rgb), 0.95);
  --explorer-md-pre-fg: rgba(255, 255, 255, 0.85);
  --explorer-md-table-border: rgba(255, 255, 255, 0.1);
  --explorer-md-table-header-bg: rgba(255, 255, 255, 0.05);
  --explorer-md-table-header-fg: rgba(255, 255, 255, 0.9);
  --explorer-md-table-cell-fg: rgba(255, 255, 255, 0.8);
  --explorer-md-blockquote-border: rgba(var(--accent-rgb), 0.5);
  --explorer-md-selection: rgba(255, 255, 255, 0.15);
  --explorer-md-selection-focus: rgba(255, 255, 255, 0.2);
}

body.light .explorer-editor-content,
body.light .explorer-preview-content {
  --explorer-md-text: rgba(0, 0, 0, 0.8);
  --explorer-md-text-muted: rgba(0, 0, 0, 0.75);
  --explorer-md-text-soft: rgba(0, 0, 0, 0.65);
  --explorer-md-heading-1: rgba(0, 0, 0, 0.9);
  --explorer-md-heading-2: rgba(0, 0, 0, 0.85);
  --explorer-md-heading-3: rgba(0, 0, 0, 0.8);
  --explorer-md-heading-4: rgba(0, 0, 0, 0.75);
  --explorer-md-strong: rgba(0, 0, 0, 0.9);
  --explorer-md-italic: rgba(0, 0, 0, 0.8);
  --explorer-md-strike: rgba(0, 0, 0, 0.45);
  --explorer-md-link: #2563eb;
  --explorer-md-rule: rgba(0, 0, 0, 0.2);
  --explorer-md-code-bg: rgba(0, 0, 0, 0.06);
  --explorer-md-code-fg: var(--accent-dark);
  --explorer-md-pre-fg: rgba(0, 0, 0, 0.8);
  --explorer-md-table-border: rgba(0, 0, 0, 0.1);
  --explorer-md-table-header-bg: rgba(0, 0, 0, 0.04);
  --explorer-md-table-header-fg: rgba(0, 0, 0, 0.85);
  --explorer-md-table-cell-fg: rgba(0, 0, 0, 0.75);
  --explorer-md-selection: rgba(0, 0, 0, 0.1);
  --explorer-md-selection-focus: rgba(0, 0, 0, 0.14);
}

/* Preview content */
.explorer-preview-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--explorer-md-pad-y) var(--explorer-md-pad-x);
}

/* Explorer markdown - scoped styles to avoid leaking from briefing-text */
.explorer-preview-content .explorer-markdown {
  display: block;
  max-width: var(--explorer-md-width);
  margin: 0 auto;
  font-size: var(--explorer-md-font-size);
  line-height: var(--explorer-md-line-height);
  color: var(--explorer-md-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: text;
  -webkit-user-select: text !important;
  user-select: text !important;
}

.explorer-preview-content .explorer-markdown * {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Reset any inherited styles from briefing-text */
.explorer-preview-content .explorer-markdown p:first-of-type::first-letter {
  font-size: inherit;
  font-weight: inherit;
  float: none;
  line-height: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
}

/* Headers - override any badge styling from briefing-text */
.explorer-preview-content .explorer-markdown h1,
.explorer-preview-content .explorer-markdown .md-h1 {
  display: block;
  font-size: var(--md-h1-size, 1.75rem);
  font-weight: var(--md-h1-weight, 600);
  font-family: inherit;
  color: var(--explorer-md-heading-1);
  margin: 0 0 1rem 0;
  padding: 0 0 0.5rem 0;
  border-bottom: 1px solid var(--explorer-md-rule);
  background: none;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0;
}

.explorer-preview-content .explorer-markdown h2,
.explorer-preview-content .explorer-markdown .md-h2 {
  display: block;
  font-size: var(--md-h2-size, 1.4rem);
  font-weight: var(--md-h2-weight, 600);
  font-family: inherit;
  color: var(--explorer-md-heading-2);
  margin: 1.5rem 0 0.75rem 0;
  padding: 0;
  background: none;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0;
}

.explorer-preview-content .explorer-markdown h3,
.explorer-preview-content .explorer-markdown .md-h3 {
  display: block;
  font-size: var(--md-h3-size, 1.15rem);
  font-weight: var(--md-h3-weight, 600);
  font-family: inherit;
  color: var(--explorer-md-heading-3);
  margin: 1.25rem 0 0.5rem 0;
  padding: 0;
  background: none;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0;
}

.explorer-preview-content .explorer-markdown h4,
.explorer-preview-content .explorer-markdown .md-h4,
.explorer-preview-content .explorer-markdown h5,
.explorer-preview-content .explorer-markdown .md-h5,
.explorer-preview-content .explorer-markdown h6,
.explorer-preview-content .explorer-markdown .md-h6 {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--explorer-md-heading-4);
  margin: 1rem 0 0.5rem 0;
  padding: 0;
  background: none;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0;
}

.explorer-preview-content .explorer-markdown p {
  color: var(--explorer-md-text-muted);
  line-height: var(--explorer-md-line-height);
  margin: 0.75rem 0;
}

.explorer-preview-content .explorer-markdown ul,
.explorer-preview-content .explorer-markdown ol {
  color: var(--explorer-md-text-muted);
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}

.explorer-preview-content .explorer-markdown li {
  margin: 0.35rem 0;
  line-height: 1.6;
  color: var(--explorer-md-text-muted);
}

.explorer-preview-content .explorer-markdown code,
.explorer-preview-content .explorer-markdown .md-code {
  background: var(--explorer-md-code-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
  color: var(--explorer-md-code-fg);
}

.explorer-preview-content .explorer-markdown pre {
  background: var(--explorer-md-code-bg);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1rem 0;
}

.explorer-preview-content .explorer-markdown pre code {
  background: none;
  padding: 0;
  color: var(--explorer-md-pre-fg);
}

.explorer-preview-content .explorer-markdown blockquote {
  border-left: 3px solid var(--explorer-md-blockquote-border);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--explorer-md-text-soft);
  font-style: italic;
}

.explorer-preview-content .explorer-markdown a,
.explorer-preview-content .explorer-markdown .md-link {
  color: var(--explorer-md-link);
  text-decoration: none;
  cursor: pointer !important;
}

.explorer-preview-content .explorer-markdown a:hover,
.explorer-preview-content .explorer-markdown .md-link:hover {
  text-decoration: underline;
}

.explorer-preview-content .explorer-markdown hr {
  border: none;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
  margin: 1.5rem 0;
  width: 100%;
}
body:not(.light) .explorer-preview-content .explorer-markdown hr {
  background: rgba(255, 255, 255, 0.12);
}

.explorer-preview-content .explorer-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.explorer-preview-content .explorer-markdown th,
.explorer-preview-content .explorer-markdown td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--explorer-md-table-border);
  text-align: left;
}

.explorer-preview-content .explorer-markdown th {
  background: var(--explorer-md-table-header-bg);
  font-weight: 600;
  color: var(--explorer-md-table-header-fg);
}

.explorer-preview-content .explorer-markdown td {
  color: var(--explorer-md-table-cell-fg);
}

/* Bold and italic */
.explorer-preview-content .explorer-markdown .md-bold,
.explorer-preview-content .explorer-markdown strong {
  font-weight: 600;
  color: var(--explorer-md-strong);
}

.explorer-preview-content .explorer-markdown .md-italic,
.explorer-preview-content .explorer-markdown em {
  font-style: italic;
  color: var(--explorer-md-italic);
}

/* Tags */
.explorer-preview-content .explorer-markdown .md-tag {
  color: rgba(74, 222, 128, 0.9);
  cursor: pointer;
}

.explorer-preview-content .explorer-markdown .md-tag:hover {
  text-decoration: underline;
}

/* Checkbox lists */
.explorer-preview-content input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* Empty/preview states */
.explorer-empty,
.explorer-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--os-text-muted);
  font-size: 14px;
}

.explorer-empty svg,
.explorer-preview svg {
  opacity: 0.3;
}

.explorer-preview .preview-filename {
  font-weight: 500;
  color: var(--os-text-muted);
}

.explorer-preview .preview-message {
  font-size: 13px;
  color: var(--os-text-hint);
}

/* Context Menu */
.explorer-context-menu {
  position: fixed;
  min-width: 180px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  z-index: 10100;
  animation: explorerContextMenuIn 0.12s ease-out;
}

@keyframes explorerContextMenuIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.explorer-context-menu .context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--os-text-primary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.1s ease;
}

.explorer-context-menu .context-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.explorer-context-menu .context-menu-item.danger {
  color: #f87171;
}

.explorer-context-menu .context-menu-item.danger:hover {
  background: rgba(248, 113, 113, 0.15);
}

.explorer-context-menu .context-menu-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.explorer-context-menu .context-menu-divider {
  height: 1px;
  margin: 4px 8px;
  background: rgba(255, 255, 255, 0.1);
}

/* Dialog */
.explorer-dialog-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10200;
  animation: explorerDialogOverlayIn 0.15s ease-out;
}

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

.explorer-dialog {
  width: 360px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  animation: explorerDialogIn 0.2s ease-out;
}

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

.explorer-dialog .dialog-header {
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--os-text-primary);
}

.explorer-dialog .dialog-subpath {
  margin-top: -8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--os-text-muted);
  word-break: break-word;
}

.explorer-dialog .dialog-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.15s ease;
}

.explorer-dialog .dialog-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.explorer-dialog .dialog-input::placeholder {
  color: var(--os-text-hint);
}

.explorer-dialog .dialog-error {
  margin-top: 8px;
  font-size: 12px;
  color: #ef4444;
}

.explorer-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.explorer-dialog .dialog-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-dialog .dialog-btn.cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.explorer-dialog .dialog-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}

.explorer-dialog .dialog-btn.primary {
  background: rgba(var(--accent-rgb), 0.8);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  color: white;
}

.explorer-dialog .dialog-btn.primary:hover {
  background: rgba(var(--accent-rgb), 0.95);
}

.explorer-dialog .dialog-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Add Drive — folder browser dialog */
.explorer-dialog-browse {
  width: 440px;
}

.explorer-dialog .dialog-field {
  margin-bottom: 12px;
}

.explorer-dialog .dialog-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--os-text-muted);
  margin-bottom: 6px;
}

.explorer-dialog .dialog-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 8px;
  font-size: 12px;
}

.explorer-dialog .dialog-breadcrumb {
  background: none;
  border: none;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--os-text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: all 0.1s ease;
}

.explorer-dialog .dialog-breadcrumb:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.explorer-dialog .dialog-breadcrumb-sep {
  color: var(--os-text-hint);
  font-size: 12px;
}

.explorer-dialog .dialog-dir-list {
  max-height: 240px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.explorer-dialog .dialog-dir-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--os-text-secondary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.explorer-dialog .dialog-dir-item:last-child {
  border-bottom: none;
}

.explorer-dialog .dialog-dir-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.explorer-dialog .dialog-dir-item svg {
  color: var(--os-text-muted);
  flex-shrink: 0;
}

.explorer-dialog .dialog-dir-loading,
.explorer-dialog .dialog-dir-empty {
  padding: 20px;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 12px;
}

.explorer-dialog .dialog-selected-path {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--os-text-secondary);
  word-break: break-all;
}

.explorer-dialog .dialog-selected-path svg {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}

.explorer-dialog .dialog-host-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 4px;
  font-size: 10px;
  color: rgba(var(--accent-rgb), 0.9);
  white-space: nowrap;
  flex-shrink: 0;
}

.explorer-history-dialog {
  width: min(980px, 92vw);
  max-width: 980px;
  max-height: min(72vh, 700px);
  display: flex;
  flex-direction: column;
}

.explorer-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.explorer-history-header .dialog-btn {
  padding: 6px 12px;
  font-size: 12px;
}

.explorer-history-header-text {
  min-width: 0;
}

.explorer-history-subpath {
  margin-top: 4px;
  font-size: 11px;
  color: var(--os-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorer-history-body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 12px;
  min-height: 260px;
  max-height: min(50vh, 460px);
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.explorer-history-body.folder-mode {
  grid-template-columns: minmax(240px, 320px) minmax(220px, 300px) minmax(0, 1fr);
}

.explorer-history-files,
.explorer-history-list,
.explorer-history-preview {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.explorer-history-panel-title {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: var(--os-text-secondary);
  letter-spacing: 0.01em;
}

.explorer-history-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-right: 8px;
}

.explorer-history-preview-toolbar .explorer-history-panel-title {
  border-bottom: none;
  padding-right: 0;
}

.explorer-history-preview-meta {
  font-size: 11px;
  color: var(--os-text-muted);
  white-space: nowrap;
  margin-left: auto;
}

.explorer-history-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.explorer-history-view-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-secondary);
  border-radius: 6px;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}

.explorer-history-view-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.explorer-history-view-btn.active {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--os-text-primary);
}

.explorer-history-scroll {
  overflow: auto;
  padding: 8px;
  min-height: 0;
}

.explorer-history-list-header {
  margin: 0 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--os-text-secondary);
  word-break: break-word;
}

.explorer-history-file {
  width: 100%;
  text-align: left;
  padding: 8px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
}

.explorer-history-file:hover {
  background: rgba(255, 255, 255, 0.08);
}

.explorer-history-file.selected {
  border-color: rgba(var(--accent-rgb), 0.48);
  background: rgba(var(--accent-rgb), 0.18);
}

.explorer-history-file-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--os-text-primary);
  word-break: break-word;
}

.explorer-history-file-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--os-text-muted);
}

.explorer-history-version {
  width: 100%;
  text-align: left;
  padding: 8px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
}

.explorer-history-version:hover {
  background: rgba(255, 255, 255, 0.08);
}

.explorer-history-version.selected {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.18);
}

.explorer-history-version-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--os-text-primary);
}

.explorer-history-version-time {
  margin-top: 2px;
  font-size: 11px;
  color: var(--os-text-muted);
}

.explorer-history-preview {
  overflow: hidden;
}

.explorer-history-preview pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.45;
  color: var(--os-text-secondary);
}

.explorer-history-diff {
  min-width: max-content;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.45;
}

.explorer-history-diff-row {
  display: grid;
  grid-template-columns: 42px 42px 24px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.explorer-history-diff-row:last-child {
  border-bottom: none;
}

.explorer-history-diff-line {
  text-align: right;
  padding: 2px 8px 2px 4px;
  color: var(--os-text-hint);
  user-select: none;
}

.explorer-history-diff-line.old {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.explorer-history-diff-line.new {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.explorer-history-diff-marker {
  text-align: center;
  color: var(--os-text-muted);
  user-select: none;
}

.explorer-history-diff-content {
  padding: 2px 10px 2px 6px;
  white-space: pre;
  color: var(--os-text-primary);
}

.explorer-history-diff-row.add {
  background: rgba(34, 197, 94, 0.14);
}

.explorer-history-diff-row.remove {
  background: rgba(239, 68, 68, 0.16);
}

.explorer-history-diff-row.hunk {
  background: rgba(var(--accent-rgb), 0.18);
}

.explorer-history-diff-row.file {
  background: rgba(251, 191, 36, 0.12);
}

.explorer-history-diff-row.meta {
  background: rgba(148, 163, 184, 0.08);
}

.explorer-history-diff-row.summary {
  background: rgba(56, 189, 248, 0.1);
}

.explorer-history-diff-marker.add {
  color: #4ade80;
}

.explorer-history-diff-marker.remove {
  color: #f87171;
}

.explorer-history-diff-marker.hunk {
  color: var(--accent-light);
}

.explorer-history-diff-marker.file {
  color: #fbbf24;
}

.explorer-history-diff-marker.summary {
  color: #38bdf8;
}

.explorer-history-empty {
  font-size: 12px;
  color: var(--os-text-muted);
  padding: 10px;
}

@media (max-width: 1080px) {
  .explorer-history-dialog {
    width: min(94vw, 760px);
    max-height: min(76vh, 640px);
  }

  .explorer-history-body,
  .explorer-history-body.folder-mode {
    grid-template-columns: 1fr;
    max-height: min(56vh, 480px);
    overflow: hidden;
  }
}

/* Toast */
.explorer-toast {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--os-text-secondary);
  z-index: 100;
  pointer-events: none;
  animation: explorerToastIn 0.15s ease-out;
}

@keyframes explorerToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

body.light .explorer-toast {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
}

/* Scrollbar */
.explorer-app .file-tree::-webkit-scrollbar {
  width: 8px;
}

.explorer-app .file-tree::-webkit-scrollbar-track {
  background: transparent;
}

.explorer-app .file-tree::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.explorer-app .file-tree::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Spinning animation */
@keyframes explorerSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.explorer-app .spinning {
  animation: explorerSpin 1s linear infinite;
}

/* =============================================
   OBSIDIAN SEARCH MODE
   ============================================= */

/* Obsidian accent color: var(--accent-dark) */
.explorer-search-mode-tab.obsidian {
  color: var(--accent-dark);
}

.explorer-search-bar.obsidian:focus-within {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.explorer-search-bar.obsidian .explorer-search-bar-icon {
  color: rgba(var(--accent-rgb), 0.5);
}

.explorer-search-bar.obsidian:focus-within .explorer-search-bar-icon {
  color: rgba(var(--accent-rgb), 0.8);
}

.explorer-search-bar-submit.obsidian {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-dark);
}

.explorer-search-bar-submit.obsidian:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
}

/* Obsidian result items */
.explorer-search-result-item.obsidian:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.06);
}

.explorer-search-result-item.obsidian.active {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}

.explorer-result-source.obsidian {
  color: var(--accent-dark);
}

/* Open in Obsidian button */
.explorer-obsidian-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.explorer-obsidian-open-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* Obsidian note preview */
.explorer-obsidian-preview {
  margin-top: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.explorer-obsidian-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(var(--accent-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}

.explorer-obsidian-preview-path {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--accent-dark);
  min-width: 0;
  overflow: hidden;
}

.explorer-obsidian-preview-path span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorer-obsidian-preview-content {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--os-text-secondary);
}

.explorer-obsidian-preview-content .markdown-block {
  font-size: 14px;
  line-height: 1.7;
}

.explorer-obsidian-preview-content .markdown-block p {
  margin: 0.5rem 0;
}

.explorer-obsidian-preview-content .markdown-block h1,
.explorer-obsidian-preview-content .markdown-block h2,
.explorer-obsidian-preview-content .markdown-block h3 {
  margin: 1rem 0 0.5rem 0;
  color: var(--os-text-primary);
}

.explorer-obsidian-preview-content .markdown-block code {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}

.explorer-obsidian-preview-content .markdown-block blockquote {
  border-left: 3px solid rgba(var(--accent-rgb), 0.5);
  padding-left: 1rem;
  color: var(--os-text-secondary);
  font-style: italic;
}

/* =============================================
   LIGHT THEME SUPPORT
   ============================================= */

/* Toolbar */
body.light .explorer-toolbar {
  background: rgba(0, 0, 0, 0.05);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light .explorer-breadcrumbs {
  color: rgba(0, 0, 0, 0.75);
}

body.light .explorer-breadcrumb .breadcrumb-btn {
  color: rgba(0, 0, 0, 0.7);
}

body.light .explorer-breadcrumb .breadcrumb-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.95);
}

body.light .explorer-breadcrumb .breadcrumb-btn.current {
  color: rgba(0, 0, 0, 0.92);
  font-weight: 600;
}

body.light .explorer-toolbar-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.65);
}

body.light .explorer-toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.9);
}

body.light .explorer-toolbar-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}

/* Sidebar */
body.light .explorer-sidebar {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0.06) 100%
  );
  border-right-color: rgba(0, 0, 0, 0.1);
}

body.light .explorer-sidebar-header {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light .explorer-sidebar-header .sidebar-header-title {
  color: rgba(0, 0, 0, 0.6);
}

body.light .explorer-sidebar-header .sidebar-header-btn {
  color: rgba(0, 0, 0, 0.5);
}

body.light .explorer-sidebar-header .sidebar-header-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.85);
}

/* Light theme - Search/Ask mode tabs */
body.light .explorer-search-mode-tabs {
  background: rgba(0, 0, 0, 0.05);
}

body.light .explorer-search-mode-tab {
  color: rgba(0, 0, 0, 0.5);
}

body.light .explorer-search-mode-tab:hover {
  color: rgba(0, 0, 0, 0.75);
  background: rgba(0, 0, 0, 0.04);
}

body.light .explorer-search-mode-tab.active {
  background: rgba(255, 255, 255, 0.8);
  color: rgba(0, 0, 0, 0.9);
}

/* Light theme - Search Landing */
body.light .explorer-search-bar {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

body.light .explorer-search-bar:focus-within {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(0, 0, 0, 0.02);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}

body.light .explorer-search-bar.ask:focus-within {
  border-color: rgba(217, 119, 6, 0.4);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.06);
}

body.light .explorer-search-bar-icon {
  color: rgba(0, 0, 0, 0.3);
}

body.light .explorer-search-bar:focus-within .explorer-search-bar-icon {
  color: rgba(var(--accent-rgb), 0.7);
}

body.light .explorer-search-bar.ask .explorer-search-bar-icon {
  color: rgba(217, 119, 6, 0.5);
}

body.light .explorer-search-bar.ask:focus-within .explorer-search-bar-icon {
  color: rgba(217, 119, 6, 0.8);
}

body.light .explorer-search-bar-input {
  color: rgba(0, 0, 0, 0.9);
}

body.light .explorer-search-bar-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

body.light .explorer-search-bar-clear {
  color: rgba(0, 0, 0, 0.35);
}

body.light .explorer-search-bar-clear:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.06);
}

body.light .explorer-search-bar-submit {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}

body.light .explorer-search-bar-submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
}

body.light .explorer-search-bar-submit.ask {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.25);
  color: #b45309;
}

body.light .explorer-search-bar-submit.ask:hover:not(:disabled) {
  background: rgba(217, 119, 6, 0.18);
}

body.light .explorer-search-hint {
  color: rgba(0, 0, 0, 0.3);
}

body.light .explorer-index-status {
  color: rgba(0, 0, 0, 0.35);
}

body.light .explorer-reindex-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.4);
}

body.light .explorer-reindex-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
  border-color: rgba(0, 0, 0, 0.2);
}

body.light .explorer-search-error {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

body.light .explorer-ask-btn {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-dark);
}

body.light .explorer-ask-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
}

body.light .explorer-search-result-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .explorer-search-result-item:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.04);
}

body.light .explorer-result-source {
  color: var(--accent-dark);
}

body.light .explorer-result-score {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}

body.light .explorer-result-text {
  color: rgba(0, 0, 0, 0.6);
}

body.light .explorer-no-results {
  color: rgba(0, 0, 0, 0.4);
}

body.light .explorer-ask-followup-bar {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .explorer-ask-followup-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}

body.light .explorer-ask-followup-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

body.light .explorer-ask-followup-input:focus {
  border-color: rgba(var(--accent-rgb), 0.3);
}

body.light .explorer-ask-followup-send {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}

body.light .explorer-ask-question {
  color: rgba(0, 0, 0, 0.5);
}

body.light .explorer-ask-loading {
  color: rgba(0, 0, 0, 0.4);
}

body.light .explorer-ask-answer {
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.8);
}

body.light .explorer-ask-answer .markdown-block strong {
  color: var(--accent-dark);
}

body.light .explorer-ask-answer .markdown-block code {
  background: rgba(0, 0, 0, 0.06);
}

body.light .explorer-ask-action-btn {
  color: rgba(0, 0, 0, 0.35);
}

body.light .explorer-ask-action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

body.light .explorer-ask-sources {
}

body.light .explorer-sources-label {
  color: rgba(0, 0, 0, 0.4);
}

body.light .explorer-source-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
}

body.light .explorer-source-item:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-dark);
}

body.light .explorer-sidebar .sidebar-toggle-btn {
  color: rgba(0, 0, 0, 0.4);
}

body.light .explorer-sidebar .sidebar-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}

body.light .explorer-loading {
  color: rgba(0, 0, 0, 0.65);
}

body.light .explorer-resize-handle:hover,
body.light .explorer-resize-handle:active {
  background: rgba(var(--accent-rgb), 0.3);
}

/* File Tree */
body.light .explorer-app .file-tree-branch .file-tree-branch {
  border-left-color: rgba(0, 0, 0, 0.12);
}

body.light .explorer-app .file-tree-item {
  color: rgba(0, 0, 0, 0.8);
}

body.light .explorer-app .file-tree-item:hover {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.95);
}

body.light .explorer-app .file-tree-item.selected {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-dark);
}

body.light .explorer-app .file-tree-item svg {
  opacity: 0.75;
}

body.light .explorer-app .file-tree-item.is-directory svg {
  color: var(--accent-dark);
  opacity: 1;
}

body.light .explorer-app .file-tree-empty-badge {
  color: rgba(0, 0, 0, 0.3);
}

body.light .explorer-app .file-tree-item.drop-into {
  background: rgba(var(--accent-rgb), 0.18);
  outline-color: rgba(var(--accent-rgb), 0.4);
}

body.light .explorer-app .file-tree-item-wrapper.drop-before::before,
body.light .explorer-app .file-tree-item-wrapper.drop-after::after {
  background: rgba(var(--accent-rgb), 0.5);
}

/* Tab Bar */
body.light .explorer-tab-bar {
  background: rgba(0, 0, 0, 0.04);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}


body.light .explorer-tab-item {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.5);
}

body.light .explorer-tab-item:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.75);
}

body.light .explorer-tab-item.active {
  background: rgba(255, 255, 255, 0.7);
  color: rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.6);
}

body.light .explorer-tab-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

body.light .explorer-tab-item.drag-over {
  box-shadow: inset 2px 0 0 rgba(var(--accent-rgb), 0.6);
}

/* Editor Panel */
body.light .explorer-editor {
  background: rgba(255, 255, 255, 0.5);
}

body.light .explorer-editor-header {
  border-bottom-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

body.light .explorer-editor-header .editor-file-info {
  color: rgba(0, 0, 0, 0.85);
}

body.light .explorer-editor-header .editor-file-info svg {
  opacity: 0.65;
}

body.light .explorer-editor-header .editor-nav-btn {
  color: rgba(0, 0, 0, 0.45);
}

body.light .explorer-editor-header .editor-nav-btn:hover:not(.disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.85);
}

body.light .explorer-editor-header .editor-nav-btn.disabled {
  opacity: 0.3;
}

body.light .explorer-editor-header .editor-breadcrumb {
  color: rgba(0, 0, 0, 0.35);
}

body.light .explorer-editor-header .breadcrumb-sep {
  color: rgba(0, 0, 0, 0.2);
}

body.light .explorer-editor-header .breadcrumb-link {
  color: rgba(0, 0, 0, 0.4);
}

body.light .explorer-editor-header .breadcrumb-link:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}

body.light .explorer-editor-header .breadcrumb-current {
  color: rgba(0, 0, 0, 0.8);
}

body.light .explorer-editor-header .editor-saving {
  color: rgba(22, 163, 74, 0.9);
}

/* Light theme - View toggle */
body.light .explorer-editor-header .editor-view-toggle {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .explorer-editor-header .editor-view-seg {
  color: rgba(0, 0, 0, 0.35);
}

body.light .explorer-editor-header .editor-view-seg:hover {
  color: rgba(0, 0, 0, 0.6);
}

body.light .explorer-editor-header .editor-view-seg.active {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.85);
}

/* Light theme - Preview content */
body.light .explorer-preview-content .explorer-markdown .md-tag {
  color: #16a34a;
}

/* Empty/Preview States */
body.light .explorer-empty,
body.light .explorer-preview {
  color: rgba(0, 0, 0, 0.65);
}

body.light .explorer-empty svg,
body.light .explorer-preview svg {
  opacity: 0.5;
}

body.light .explorer-preview .preview-filename {
  color: rgba(0, 0, 0, 0.8);
}

body.light .explorer-preview .preview-message {
  color: rgba(0, 0, 0, 0.55);
}

/* Context Menu */
body.light .explorer-context-menu {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

body.light .explorer-context-menu .context-menu-item {
  color: rgba(0, 0, 0, 0.85);
}

body.light .explorer-context-menu .context-menu-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

body.light .explorer-context-menu .context-menu-item.danger {
  color: #dc2626;
}

body.light .explorer-context-menu .context-menu-item.danger:hover {
  background: rgba(220, 38, 38, 0.1);
}

body.light .explorer-context-menu .context-menu-divider {
  background: rgba(0, 0, 0, 0.1);
}

/* Dialog */
body.light .explorer-dialog-overlay {
  background: rgba(0, 0, 0, 0.25);
}

body.light .explorer-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

body.light .explorer-dialog .dialog-header {
  color: rgba(0, 0, 0, 0.92);
}

body.light .explorer-dialog .dialog-subpath {
  color: rgba(0, 0, 0, 0.55);
}

body.light .explorer-dialog .dialog-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.9);
}

body.light .explorer-dialog .dialog-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

body.light .explorer-dialog .dialog-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

body.light .explorer-dialog .dialog-error {
  color: #dc2626;
}

body.light .explorer-dialog .dialog-btn.cancel {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.7);
}

body.light .explorer-dialog .dialog-btn.cancel:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

body.light .explorer-dialog .dialog-btn.primary {
  background: rgba(var(--accent-rgb), 0.9);
  border-color: rgba(var(--accent-rgb), 0.6);
}

body.light .explorer-dialog .dialog-label {
  color: rgba(0, 0, 0, 0.5);
}

body.light .explorer-dialog .dialog-breadcrumb {
  color: rgba(0, 0, 0, 0.6);
}

body.light .explorer-dialog .dialog-breadcrumb:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.9);
}

body.light .explorer-dialog .dialog-breadcrumb-sep {
  color: rgba(0, 0, 0, 0.3);
}

body.light .explorer-dialog .dialog-dir-list {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .explorer-dialog .dialog-dir-item {
  color: rgba(0, 0, 0, 0.8);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .explorer-dialog .dialog-dir-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.light .explorer-dialog .dialog-dir-item svg {
  color: rgba(0, 0, 0, 0.35);
}

body.light .explorer-dialog .dialog-dir-loading,
body.light .explorer-dialog .dialog-dir-empty {
  color: rgba(0, 0, 0, 0.4);
}

body.light .explorer-dialog .dialog-selected-path {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.15);
  color: rgba(0, 0, 0, 0.6);
}

body.light .explorer-dialog .dialog-selected-path svg {
  color: rgba(var(--accent-rgb), 0.6);
}

body.light .explorer-dialog .dialog-host-badge {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.18);
  color: rgba(99, 82, 200, 0.8);
}

body.light .explorer-history-list,
body.light .explorer-history-preview {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}

body.light .explorer-history-files {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}

body.light .explorer-history-file:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .explorer-history-file.selected {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.12);
}

body.light .explorer-history-file-title {
  color: rgba(0, 0, 0, 0.86);
}

body.light .explorer-history-file-meta {
  color: rgba(0, 0, 0, 0.55);
}

body.light .explorer-history-subpath {
  color: rgba(0, 0, 0, 0.5);
}

body.light .explorer-history-panel-title {
  color: rgba(0, 0, 0, 0.65);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .explorer-history-preview-toolbar {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .explorer-history-preview-meta {
  color: rgba(0, 0, 0, 0.5);
}

body.light .explorer-history-view-btn {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.65);
}

body.light .explorer-history-view-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

body.light .explorer-history-view-btn.active {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.12);
  color: rgba(0, 0, 0, 0.85);
}

body.light .explorer-history-list-header {
  color: rgba(0, 0, 0, 0.58);
}

body.light .explorer-history-version:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .explorer-history-version.selected {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.12);
}

body.light .explorer-history-version-title {
  color: rgba(0, 0, 0, 0.86);
}

body.light .explorer-history-version-time,
body.light .explorer-history-empty {
  color: rgba(0, 0, 0, 0.55);
}

body.light .explorer-history-preview pre {
  color: rgba(0, 0, 0, 0.82);
}

body.light .explorer-history-diff-row {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .explorer-history-diff-line {
  color: rgba(0, 0, 0, 0.45);
}

body.light .explorer-history-diff-line.old,
body.light .explorer-history-diff-line.new {
  border-right-color: rgba(0, 0, 0, 0.08);
}

body.light .explorer-history-diff-content {
  color: rgba(0, 0, 0, 0.82);
}

body.light .explorer-history-diff-row.add {
  background: rgba(34, 197, 94, 0.13);
}

body.light .explorer-history-diff-row.remove {
  background: rgba(239, 68, 68, 0.15);
}

body.light .explorer-history-diff-row.hunk {
  background: rgba(var(--accent-rgb), 0.14);
}

body.light .explorer-history-diff-row.file {
  background: rgba(245, 158, 11, 0.12);
}

body.light .explorer-history-diff-row.summary {
  background: rgba(56, 189, 248, 0.1);
}

/* Scrollbar */
body.light .explorer-app .file-tree::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

body.light .explorer-app .file-tree::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* Light theme - Obsidian search */
body.light .explorer-search-bar.obsidian:focus-within {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}

body.light .explorer-search-bar.obsidian .explorer-search-bar-icon {
  color: rgba(var(--accent-rgb), 0.5);
}

body.light .explorer-search-bar.obsidian:focus-within .explorer-search-bar-icon {
  color: rgba(var(--accent-rgb), 0.8);
}

body.light .explorer-search-bar-submit.obsidian {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}

body.light .explorer-search-bar-submit.obsidian:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
}

body.light .explorer-search-result-item.obsidian:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.04);
}

body.light .explorer-search-result-item.obsidian.active {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.06);
}

body.light .explorer-obsidian-open-btn {
  border-color: rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-dark);
}

body.light .explorer-obsidian-open-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
}

body.light .explorer-obsidian-preview {
  border-color: rgba(var(--accent-rgb), 0.15);
}

body.light .explorer-obsidian-preview-header {
  background: rgba(var(--accent-rgb), 0.05);
  border-bottom-color: rgba(var(--accent-rgb), 0.1);
}

body.light .explorer-obsidian-preview-content {
  color: rgba(0, 0, 0, 0.8);
}

body.light .explorer-obsidian-preview-content .markdown-block h1,
body.light .explorer-obsidian-preview-content .markdown-block h2,
body.light .explorer-obsidian-preview-content .markdown-block h3 {
  color: rgba(0, 0, 0, 0.9);
}

body.light .explorer-obsidian-preview-content .markdown-block code {
  background: rgba(0, 0, 0, 0.06);
}

body.light .explorer-obsidian-preview-content .markdown-block blockquote {
  border-left-color: rgba(var(--accent-rgb), 0.5);
  color: rgba(0, 0, 0, 0.65);
}

/* JSON Viewer */
.explorer-json-content {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

.json-viewer {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.6;
}

.json-viewer.json-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  color: #f87171;
}

.json-line {
  white-space: nowrap;
  padding: 1px 0;
}

.json-expandable {
  cursor: pointer;
  border-radius: 3px;
}

.json-expandable:hover {
  background: rgba(255, 255, 255, 0.05);
}

.json-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 2px;
  color: var(--os-text-muted);
  vertical-align: middle;
  flex-shrink: 0;
}

.json-key {
  color: #93c5fd;
}

.json-colon {
  color: var(--os-text-muted);
}

.json-string {
  color: #86efac;
}

.json-number {
  color: #fbbf24;
}

.json-boolean {
  color: #c084fc;
}

.json-null {
  color: var(--os-text-hint);
  font-style: italic;
}

.json-bracket {
  color: var(--os-text-muted);
}

.json-collapsed {
  color: var(--os-text-hint);
  font-style: italic;
}

/* Light theme JSON */
body.light .json-expandable:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.light .json-toggle {
  color: rgba(0, 0, 0, 0.4);
}

body.light .json-key {
  color: #2563eb;
}

body.light .json-colon {
  color: rgba(0, 0, 0, 0.5);
}

body.light .json-string {
  color: #16a34a;
}

body.light .json-number {
  color: #d97706;
}

body.light .json-boolean {
  color: #9333ea;
}

body.light .json-null {
  color: rgba(0, 0, 0, 0.35);
}

body.light .json-bracket {
  color: rgba(0, 0, 0, 0.5);
}

body.light .json-collapsed {
  color: rgba(0, 0, 0, 0.35);
}

/* ========== Locations (Drives) — Finder-style sidebar section ========== */

.explorer-locations-section {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 4px;
}

.explorer-locations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 4px;
}

.explorer-locations-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--os-text-muted);
}

.explorer-locations-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.12s ease;
  opacity: 0;
}

.explorer-locations-section:hover .explorer-locations-add-btn {
  opacity: 1;
}

.explorer-locations-add-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.explorer-locations-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 4px 8px;
  padding: 10px 12px;
  background: none;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--os-text-hint);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.explorer-locations-empty:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.04);
}

.explorer-locations-empty svg {
  color: var(--os-text-hint);
  transition: color 0.15s ease;
}

.explorer-locations-empty:hover svg {
  color: var(--os-text-muted);
}

.explorer-folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--os-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.12s ease;
}

.explorer-folder-header:hover {
  color: var(--os-text-secondary);
}

.explorer-folder-header svg {
  opacity: 0.6;
}

.explorer-folder-header.unavailable {
  opacity: 0.4;
  cursor: default;
}

.explorer-folder-header.unavailable:hover {
  color: var(--os-text-muted);
}

.folder-warning-icon {
  color: rgba(239, 68, 68, 0.7);
  margin-left: auto;
  opacity: 1 !important;
}

/* Drive preview panel */
.folder-preview-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 24px;
}

.folder-image-preview {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.folder-image-preview img {
  max-width: 100%;
  max-height: calc(100% - 48px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.folder-image-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.folder-image-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--os-text-secondary);
}

.folder-image-size {
  font-size: 12px;
  color: var(--os-text-muted);
}

.folder-file-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-width: 240px;
}

.folder-file-info svg {
  color: var(--os-text-muted);
}

.folder-file-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--os-text-primary);
  word-break: break-all;
  text-align: center;
}

.folder-file-size {
  font-size: 13px;
  color: var(--os-text-muted);
}

.folder-file-date {
  font-size: 12px;
  color: var(--os-text-hint);
}

/* Folder Gallery */
.folder-gallery {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.folder-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.folder-gallery-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--os-text-primary);
}

.folder-gallery-title svg {
  color: var(--os-text-muted);
}

.folder-gallery-count {
  font-size: 12px;
  color: var(--os-text-muted);
}

.folder-gallery-grid {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  align-content: start;
}

.folder-gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.1s;
  background: rgba(255, 255, 255, 0.04);
}

.folder-gallery-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.folder-gallery-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3);
}

.folder-gallery-item .lazy-image-wrapper {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
}

.folder-gallery-item .lazy-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.folder-gallery-item.load-error img {
  display: none;
}

.folder-gallery-loading-more {
  grid-column: 1 / -1;
  text-align: center;
  padding: 16px;
  color: var(--os-text-muted);
  font-size: 0.8rem;
}

.folder-gallery-item.load-error::after {
  content: '⚠';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--os-text-hint);
}

.folder-gallery-check {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: var(--os-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0;
}

.folder-gallery-item:hover .folder-gallery-check,
.folder-gallery-check.checked {
  opacity: 1;
}

.folder-gallery-check.checked {
  color: var(--accent);
  background: rgba(0, 0, 0, 0.7);
}

.folder-gallery-item-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  font-size: 10px;
  color: var(--os-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.15s;
}

.folder-gallery-item:hover .folder-gallery-item-name {
  opacity: 1;
}

/* Non-image files list */
.folder-gallery-files {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
}

.folder-gallery-files-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--os-text-hint);
  margin-bottom: 6px;
}

.folder-gallery-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--os-text-secondary);
  cursor: pointer;
}

.folder-gallery-file-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.folder-gallery-file-row svg {
  color: var(--os-text-muted);
  flex-shrink: 0;
}

/* Selection bar */
.folder-gallery-selection-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(var(--accent-rgb), 0.08);
  flex-shrink: 0;
}

.folder-gallery-selection-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  flex: 1;
}

.folder-gallery-clear-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--os-text-muted);
  cursor: pointer;
}

.folder-gallery-clear-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-secondary);
}

.folder-gallery-add-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.folder-gallery-add-btn:hover {
  opacity: 0.85;
}

.folder-gallery-add-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Full image preview from gallery */
.folder-gallery-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.folder-gallery-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.folder-gallery-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--os-text-secondary);
  cursor: pointer;
}

.folder-gallery-back-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
}

.folder-gallery-preview-name {
  font-size: 13px;
  color: var(--os-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.folder-gallery-preview-pos {
  color: var(--os-text-hint);
  font-size: 12px;
  flex-shrink: 0;
}

/* Overlay navigation arrows */
.folder-gallery-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 80px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--os-text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.folder-gallery-preview-body:hover .folder-gallery-nav-arrow {
  opacity: 1;
}

.folder-gallery-nav-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}

.folder-gallery-nav-arrow.nav-prev {
  left: 12px;
}

.folder-gallery-nav-arrow.nav-next {
  right: 12px;
}

.folder-gallery-preview-body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}

.folder-gallery-preview-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Light theme */
body.light .folder-gallery-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .folder-gallery-title {
  color: rgba(0, 0, 0, 0.85);
}

body.light .folder-gallery-title svg {
  color: rgba(0, 0, 0, 0.45);
}

body.light .folder-gallery-count {
  color: rgba(0, 0, 0, 0.4);
}

body.light .folder-gallery-item {
  background: rgba(0, 0, 0, 0.04);
}

body.light .folder-gallery-item:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

body.light .folder-gallery-check {
  background: rgba(255, 255, 255, 0.8);
  color: rgba(0, 0, 0, 0.4);
}

body.light .folder-gallery-check.checked {
  color: var(--accent-dark);
  background: rgba(255, 255, 255, 0.9);
}

body.light .folder-gallery-item-name {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  color: rgba(255, 255, 255, 0.9);
}

body.light .folder-gallery-files {
  border-top-color: rgba(0, 0, 0, 0.08);
}

body.light .folder-gallery-files-header {
  color: rgba(0, 0, 0, 0.35);
}

body.light .folder-gallery-file-row {
  color: rgba(0, 0, 0, 0.7);
}

body.light .folder-gallery-file-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .folder-gallery-selection-bar {
  border-top-color: rgba(0, 0, 0, 0.1);
  background: rgba(var(--accent-rgb), 0.06);
}

body.light .folder-gallery-add-btn {
  background: var(--accent-dark);
  color: #fff;
}

body.light .folder-gallery-preview-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .folder-gallery-back-btn {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}

body.light .folder-gallery-back-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.8);
}

body.light .folder-gallery-preview-name {
  color: rgba(0, 0, 0, 0.5);
}

body.light .folder-gallery-preview-pos {
  color: rgba(0, 0, 0, 0.35);
}

body.light .folder-gallery-loading-more {
  color: rgba(0, 0, 0, 0.4);
}

/* Context menu danger item */
.context-menu-item.danger {
  color: rgba(239, 68, 68, 0.9);
}

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

/* Light theme overrides */
body.light .explorer-locations-section {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .explorer-locations-label {
  color: rgba(0, 0, 0, 0.4);
}

body.light .explorer-locations-add-btn {
  color: rgba(0, 0, 0, 0.3);
}

body.light .explorer-locations-add-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

body.light .explorer-locations-empty {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.4);
}

body.light .explorer-locations-empty:hover {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.03);
}

body.light .explorer-locations-empty svg {
  color: rgba(0, 0, 0, 0.25);
}

body.light .explorer-locations-empty:hover svg {
  color: rgba(0, 0, 0, 0.5);
}

body.light .explorer-folder-header {
  color: rgba(0, 0, 0, 0.5);
}

body.light .folder-file-info {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .folder-file-info svg {
  color: rgba(0, 0, 0, 0.35);
}

body.light .folder-image-name {
  color: rgba(0, 0, 0, 0.8);
}

body.light .folder-image-size {
  color: rgba(0, 0, 0, 0.4);
}

body.light .folder-file-name {
  color: rgba(0, 0, 0, 0.85);
}

body.light .folder-file-size {
  color: rgba(0, 0, 0, 0.5);
}

body.light .folder-file-date {
  color: rgba(0, 0, 0, 0.35);
}

/* ============================================
   TAG SEARCH RESULTS PANEL
   ============================================ */

.tag-results-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(15, 15, 20, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 10;
  animation: tag-panel-slide-in 0.15s ease-out;
}

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

.tag-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.tag-results-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
}

.tag-results-title svg {
  opacity: 0.7;
}

.tag-results-count {
  font-size: 10px;
  font-weight: 400;
  color: var(--os-text-hint);
  margin-left: 2px;
}

.tag-results-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tag-results-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.tag-results-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.tag-results-loading {
  display: flex;
  justify-content: center;
  padding: 24px;
  color: var(--os-text-hint);
}

.tag-results-empty {
  text-align: center;
  padding: 24px;
  color: var(--os-text-hint);
  font-size: 12px;
}

.tag-result-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tag-result-group:last-child {
  border-bottom: none;
}

.tag-result-file-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  text-align: left;
  padding: 7px 14px 3px;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 0;
}

.tag-result-file-row:hover .tag-result-name {
  color: var(--os-text-primary);
}

.tag-result-icon {
  flex-shrink: 0;
  color: var(--os-text-hint);
}

.tag-result-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--os-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s ease;
}

.tag-result-path {
  font-size: 10px;
  color: var(--os-text-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  margin-left: auto;
}

.tag-result-snippet-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 2px 14px 2px 32px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease;
}

.tag-result-snippet-row:last-child {
  padding-bottom: 6px;
}

.tag-result-snippet-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.tag-result-snippet-row:hover .tag-result-section {
  color: var(--os-text-muted);
}

.tag-result-chevron {
  flex-shrink: 0;
  color: var(--os-text-hint);
  transition: transform 0.15s ease;
}

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

.tag-result-section-count {
  font-size: 9px;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  padding: 0 5px;
  border-radius: 8px;
  line-height: 16px;
  flex-shrink: 0;
}

.tag-result-section {
  font-size: 11px;
  font-weight: 400;
  color: var(--os-text-hint);
  transition: color 0.12s ease;
}

.tag-result-mention-count {
  font-size: 9px;
  color: var(--os-text-hint);
  margin-left: 4px;
}

/* Light theme */
body.light .tag-results-panel {
  background: rgba(255, 255, 255, 0.97);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

body.light .tag-results-title {
  color: var(--accent);
}

body.light .tag-results-count {
  color: rgba(0, 0, 0, 0.35);
}

body.light .tag-results-close {
  color: rgba(0, 0, 0, 0.35);
}

body.light .tag-results-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

body.light .tag-results-empty {
  color: rgba(0, 0, 0, 0.35);
}

body.light .tag-result-group {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .tag-result-file-row:hover .tag-result-name {
  color: rgba(0, 0, 0, 0.95);
}

body.light .tag-result-icon {
  color: rgba(0, 0, 0, 0.3);
}

body.light .tag-result-name {
  color: rgba(0, 0, 0, 0.7);
}

body.light .tag-result-path {
  color: rgba(0, 0, 0, 0.25);
}

body.light .tag-result-snippet-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .tag-result-snippet-row:hover .tag-result-section {
  color: rgba(0, 0, 0, 0.6);
}

body.light .tag-result-chevron {
  color: rgba(0, 0, 0, 0.25);
}

body.light .tag-result-section-count {
  color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.06);
}

body.light .tag-result-section {
  color: rgba(0, 0, 0, 0.35);
}

body.light .tag-result-mention-count {
  color: rgba(0, 0, 0, 0.25);
}

/* Tag hover preview (portal, appears left of results panel) */
.tag-hover-preview {
  max-width: 320px;
  padding: 10px 12px;
  background: rgba(10, 10, 18, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.tag-hover-preview-text {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--os-text-secondary);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 12;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.light .tag-hover-preview {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.tag-hover-highlight {
  color: var(--accent);
  font-weight: 500;
}

body.light .tag-hover-preview-text {
  color: rgba(0, 0, 0, 0.65);
}

body.light .tag-hover-highlight {
  color: var(--accent);
}

/* Thinking Surface Inspector */
.thinking-inspector-dialog {
  width: 700px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.thinking-inspector-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 600;
  color: var(--os-text-primary);
}

.thinking-inspector-header .thinking-inspector-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.thinking-inspector-header .thinking-inspector-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.thinking-inspector-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.thinking-inspector-body pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.5;
  color: var(--os-text-secondary);
  margin: 0;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.thinking-inspector-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.thinking-inspector-size {
  font-size: 12px;
  color: var(--os-text-muted);
}

body.light .thinking-inspector-dialog {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .thinking-inspector-header {
  color: rgba(0, 0, 0, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .thinking-inspector-header .thinking-inspector-close {
  color: rgba(0, 0, 0, 0.4);
}

body.light .thinking-inspector-header .thinking-inspector-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}

body.light .thinking-inspector-body pre {
  color: rgba(0, 0, 0, 0.7);
}

body.light .thinking-inspector-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}

body.light .thinking-inspector-size {
  color: rgba(0, 0, 0, 0.4);
}

/* ============================================
   SCRATCH TOC (imported from Daily, needs styles here too)
   ============================================ */

.explorer-editor-with-toc .scratch-toc-panel {
  position: relative;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem 0.375rem 0.75rem 0.625rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 120px;
  max-width: 220px;
  width: 160px;
}

.explorer-editor-with-toc .scratch-toc-title {
  padding: 0 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--os-text-hint);
}

.explorer-editor-with-toc .scratch-toc-item {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 2px 0.25rem;
  border-radius: 4px;
  transition: background 0.15s;
}

.explorer-editor-with-toc .scratch-toc-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.explorer-editor-with-toc .scratch-toc-item.scratch-toc-active {
  background: rgba(var(--accent-rgb), 0.12);
  border-left: 2px solid var(--accent);
}

.explorer-editor-with-toc .scratch-toc-item.scratch-toc-active .scratch-toc-text {
  color: var(--accent);
  font-weight: 600;
}

.explorer-editor-with-toc .scratch-toc-item.scratch-toc-in-section {
  background: rgba(var(--accent-rgb), 0.05);
  border-left: 2px solid rgba(var(--accent-rgb), 0.25);
}

.explorer-editor-with-toc .scratch-toc-item.scratch-toc-in-section .scratch-toc-text {
  color: rgba(var(--accent-rgb), 0.8);
}

.explorer-editor-with-toc .scratch-toc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0;
}

.explorer-editor-with-toc .scratch-toc-toggle.collapsed {
  transform: rotate(-90deg);
}

.explorer-editor-with-toc .scratch-toc-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  margin: 0 6px;
}

.explorer-editor-with-toc .scratch-toc-text {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 1px 0.25rem;
  color: var(--os-text-muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 3px;
}

.explorer-editor-with-toc .scratch-toc-text:hover {
  color: var(--os-text-primary);
}

.explorer-editor-with-toc .scratch-toc-item.level-1 .scratch-toc-text {
  color: var(--os-text-secondary);
}

.explorer-editor-with-toc .scratch-toc-link-count {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.4;
}

.explorer-editor-with-toc .scratch-toc-root-label,
.explorer-editor-with-toc .scratch-toc-link-label {
  font-size: 12.5px !important;
  font-weight: 400 !important;
}

/* Tag items in tree */
.explorer-editor-with-toc .scratch-toc-tag-item {
  padding: 2px 8px !important;
}

.explorer-editor-with-toc .scratch-toc-tag-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.explorer-editor-with-toc .scratch-toc-tag-label {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--os-text-muted);
}

.explorer-editor-with-toc .scratch-toc-tag-item:hover .scratch-toc-tag-label {
  color: var(--os-text-secondary);
}

body.light .explorer-editor-with-toc .scratch-toc-tag-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .explorer-editor-with-toc .scratch-toc-tag-label {
  color: rgba(0, 0, 0, 0.55);
}

body.light .explorer-editor-with-toc .scratch-toc-tag-item:hover .scratch-toc-tag-label {
  color: rgba(0, 0, 0, 0.85);
}

/* AI Note populated indicator */
.explorer-editor-with-toc .scratch-toc-dot.has-value {
  background: rgba(255, 255, 255, 0.5);
}

body.light .explorer-editor-with-toc .scratch-toc-dot.has-value {
  background: rgba(0, 0, 0, 0.4);
}

/* AI Note hover tooltip (positioned via JS with fixed positioning) */
.scratch-toc-ai-hover-tooltip {
  max-width: 260px;
  padding: 8px 10px;
  background: rgba(15, 15, 25, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.scratch-toc-ai-hover-text {
  font-size: 11px;
  color: var(--os-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}

body.light .scratch-toc-ai-hover-tooltip {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

body.light .scratch-toc-ai-hover-text {
  color: rgba(0, 0, 0, 0.7);
}

/* AI Note dialog */
.scratch-toc-note-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scratch-toc-note-dialog {
  background: rgba(30, 30, 35, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  width: 380px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.scratch-toc-note-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--os-text-muted);
}

.scratch-toc-note-dialog-close {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
}

.scratch-toc-note-dialog-close:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
}

.scratch-toc-note-dialog-input {
  margin: 0 16px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 12px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 60px;
}

.scratch-toc-note-dialog-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
}

.scratch-toc-note-dialog-input::placeholder {
  color: var(--os-text-hint);
}

.scratch-toc-note-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 12px;
}

.scratch-toc-note-dialog-hint {
  font-size: 10px;
  color: var(--os-text-hint);
}

.scratch-toc-note-dialog-actions {
  display: flex;
  gap: 6px;
}

.scratch-toc-note-dialog-btn {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
}

.scratch-toc-note-dialog-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.scratch-toc-note-dialog-btn.save {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-secondary);
}

.scratch-toc-note-dialog-btn.delete {
  color: rgba(255, 100, 100, 0.7);
  border-color: rgba(255, 100, 100, 0.15);
}

.scratch-toc-note-dialog-btn.delete:hover {
  background: rgba(255, 100, 100, 0.1);
}

/* Light theme */
body.light .scratch-toc-note-dialog {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light .scratch-toc-note-dialog-header {
  color: rgba(0, 0, 0, 0.6);
}

body.light .scratch-toc-note-dialog-close {
  color: rgba(0, 0, 0, 0.3);
}

body.light .scratch-toc-note-dialog-close:hover {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.06);
}

body.light .scratch-toc-note-dialog-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}

body.light .scratch-toc-note-dialog-input:focus {
  border-color: rgba(0, 0, 0, 0.2);
}

body.light .scratch-toc-note-dialog-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

body.light .scratch-toc-note-dialog-hint {
  color: rgba(0, 0, 0, 0.25);
}

body.light .scratch-toc-note-dialog-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.6);
}

body.light .scratch-toc-note-dialog-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

body.light .scratch-toc-note-dialog-btn.save {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}

body.light .scratch-toc-note-dialog-btn.delete {
  color: rgba(200, 50, 50, 0.7);
  border-color: rgba(200, 50, 50, 0.15);
}

body.light .scratch-toc-note-dialog-btn.delete:hover {
  background: rgba(200, 50, 50, 0.08);
}

.explorer-editor-with-toc .scratch-toc-children {
  margin-left: 7px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.explorer-editor-with-toc .scratch-toc-empty {
  padding: 1.5rem 0.75rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  text-align: center;
}

/* Light theme TOC */
body.light .explorer-editor-with-toc .scratch-toc-panel {
  border-left-color: rgba(0, 0, 0, 0.08);
}

body.light .explorer-editor-with-toc .scratch-toc-title {
  color: rgba(20, 20, 30, 0.35);
}

body.light .explorer-editor-with-toc .scratch-toc-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .explorer-editor-with-toc .scratch-toc-item.scratch-toc-active {
  background: rgba(var(--accent-rgb), 0.12);
  border-left: 2px solid var(--accent);
}

body.light .explorer-editor-with-toc .scratch-toc-item.scratch-toc-active .scratch-toc-text {
  color: var(--accent);
  font-weight: 600;
}

body.light .explorer-editor-with-toc .scratch-toc-item.scratch-toc-in-section {
  background: rgba(var(--accent-rgb), 0.06);
  border-left: 2px solid rgba(var(--accent-rgb), 0.3);
}

body.light .explorer-editor-with-toc .scratch-toc-item.scratch-toc-in-section .scratch-toc-text {
  color: rgba(var(--accent-rgb), 0.85);
}

body.light .explorer-editor-with-toc .scratch-toc-toggle {
  color: rgba(0, 0, 0, 0.3);
}

body.light .explorer-editor-with-toc .scratch-toc-dot {
  background: rgba(0, 0, 0, 0.15);
}

body.light .explorer-editor-with-toc .scratch-toc-text,
body.light .explorer-editor-with-toc .scratch-toc-item.level-1 .scratch-toc-text {
  color: rgba(20, 20, 30, 0.55);
}

body.light .explorer-editor-with-toc .scratch-toc-item.level-1 .scratch-toc-text {
  color: rgba(20, 20, 30, 0.7);
}

body.light .explorer-editor-with-toc .scratch-toc-text:hover {
  color: rgba(20, 20, 30, 0.88);
}

body.light .explorer-editor-with-toc .scratch-toc-children {
  border-left-color: rgba(0, 0, 0, 0.08);
}

body.light .explorer-editor-with-toc .scratch-toc-empty {
  color: rgba(20, 20, 30, 0.35);
}

/* ============================================
   RIGHT PANEL (Tabbed: TOC, Backlinks)
   ============================================ */

.explorer-right-panel {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}

.right-panel-resize-handle {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 10;
}

.right-panel-resize-handle:hover,
.right-panel-resize-handle:active {
  background: rgba(167, 139, 250, 0.3);
}

.right-panel-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.right-panel-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--os-text-hint);
  font-size: 0.68rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 2px solid transparent;
}

.right-panel-tab:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.right-panel-tab.active {
  color: rgba(167, 139, 250, 0.9);
  border-bottom-color: rgba(167, 139, 250, 0.5);
}

.right-panel-tab-count {
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  padding: 0 4px;
  border-radius: 3px;
  min-width: 14px;
  text-align: center;
}

.right-panel-tab.active .right-panel-tab-count {
  color: rgba(167, 139, 250, 0.7);
  background: rgba(167, 139, 250, 0.1);
}

.right-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.right-panel-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--os-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.right-panel-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}
.right-panel-action-btn {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.right-panel-action-btn:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.right-panel-action-btn.active {
  color: var(--accent);
}
.right-panel-search {
  padding: 4px 8px;
  position: relative;
  flex-shrink: 0;
}
.right-panel-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 4px 22px 4px 8px;
  font-size: 0.7rem;
  color: var(--os-text-primary);
  outline: none;
  box-sizing: border-box;
}
.right-panel-search-input:focus {
  border-color: rgba(167, 139, 250, 0.4);
}
.right-panel-search-input::placeholder {
  color: var(--os-text-hint);
}
.right-panel-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}
.right-panel-search-clear:hover {
  color: var(--os-text-muted);
}

.right-panel-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* TOC inside right panel — override standalone TOC constraints */
.explorer-editor-with-toc .explorer-right-panel .scratch-toc-panel,
body.light .explorer-editor-with-toc .explorer-right-panel .scratch-toc-panel {
  border-left: none;
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow-x: hidden;
}

/* Info section in right panel */
.explorer-info-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}

/* Info tree (TOC-style) */
.info-tree {
  padding: 4px 0;
}

.info-tree-node {
  /* nothing special */
}

.info-tree-item {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.info-tree-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.info-tree-branch {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-muted);
}

.info-tree-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, transform 0.15s;
}

.info-tree-toggle:hover {
  color: var(--os-text-secondary);
}

.info-tree-toggle.collapsed {
  transform: rotate(-90deg);
}

.info-tree-icon {
  flex-shrink: 0;
  color: var(--os-text-hint);
}

.info-tree-label {
  flex: 1;
}

.info-tree-count {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--os-text-hint);
  min-width: 14px;
  text-align: center;
}

.info-tree-children {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.info-tree-leaf {
  font-size: 0.68rem;
  color: var(--os-text-muted);
}

.info-tree-leaf:hover {
  color: var(--os-text-primary);
}

.info-tree-dot {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-tree-dot::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.info-tree-file {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-tree-none {
  color: var(--os-text-hint);
  font-style: italic;
}

.info-tree-path {
  font-size: 0.58rem;
  color: rgba(167, 139, 250, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
  flex-shrink: 1;
}

/* Light theme — info tree */
body.light .info-tree-branch {
  color: rgba(0, 0, 0, 0.5);
}

body.light .info-tree-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .info-tree-toggle {
  color: rgba(0, 0, 0, 0.3);
}

body.light .info-tree-toggle:hover {
  color: rgba(0, 0, 0, 0.7);
}

body.light .info-tree-icon {
  color: rgba(0, 0, 0, 0.3);
}

body.light .info-tree-count {
  color: rgba(0, 0, 0, 0.3);
}

body.light .info-tree-children {
  border-left-color: rgba(0, 0, 0, 0.08);
}

body.light .info-tree-leaf {
  color: rgba(0, 0, 0, 0.55);
}

body.light .info-tree-leaf:hover {
  color: rgba(0, 0, 0, 0.9);
}

body.light .info-tree-dot::after {
  background: rgba(0, 0, 0, 0.12);
}

body.light .info-tree-none {
  color: rgba(0, 0, 0, 0.25);
}

body.light .info-tree-path {
  color: rgba(109, 78, 201, 0.45);
}

/* Inline note section */
.info-inline-note {
  padding: 6px 10px;
}

/* Inline tags section */
.info-inline-tags {
  padding: 2px 6px 6px;
}

/* Section divider between about & connections */
.info-connections-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 10px 0;
}

/* Collapsible info groups */
.info-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.info-group:last-child {
  border-bottom: none;
}

.info-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.info-group-header::-webkit-details-marker {
  display: none;
}

.info-group-header svg {
  flex-shrink: 0;
  color: var(--os-text-hint);
}

.info-group-header:hover {
  color: var(--os-text-secondary);
}

.info-group-header:hover svg {
  color: var(--os-text-muted);
}

.info-group-count {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
}

.info-group-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.6);
  margin-left: auto;
}

.info-group-body {
  padding: 0 4px 6px 8px;
}

/* AI Note in info panel */
.info-note-icon {
  color: rgba(167, 139, 250, 0.4);
  margin-top: 2px;
}

.info-note-content {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 0;
}

.info-note-text {
  flex: 1;
  font-size: 0.68rem;
  line-height: 1.45;
  color: rgba(167, 139, 250, 0.7);
  margin: 0;
  font-style: italic;
}

.info-note-edit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: none;
  color: var(--os-text-hint);
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
}

.info-note-edit:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
}

.info-note-add {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 5px 6px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: none;
  color: var(--os-text-hint);
  font-size: 0.63rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.info-note-add:hover {
  border-color: rgba(167, 139, 250, 0.3);
  color: rgba(167, 139, 250, 0.6);
  background: rgba(167, 139, 250, 0.05);
}

/* Tags in info panel */
.info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 4px;
  align-items: center;
}

.info-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.info-tag-pill .backlink-tag {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.info-tag-pill .info-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 3px;
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-left: none;
  border-radius: 0 3px 3px 0;
  background: rgba(74, 222, 128, 0.08);
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
}

.info-tag-pill .info-tag-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.8);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Tag pill without remove button (content tags) — restore full radius */
.info-tag-pill:not(:has(.info-tag-remove)) .backlink-tag {
  border-radius: 3px;
}

.info-tag-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  background: none;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.info-tag-add:hover {
  border-color: rgba(74, 222, 128, 0.4);
  color: rgba(74, 222, 128, 0.7);
  background: rgba(74, 222, 128, 0.08);
}

.backlinks-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
}

.backlinks-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--os-text-hint);
  font-size: 0.75rem;
}

.backlinks-empty-inline {
  padding: 6px 10px;
  color: var(--os-text-hint);
  font-size: 0.65rem;
  font-style: italic;
}

.backlinks-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
}

.backlink-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 500;
  background: rgba(74, 222, 128, 0.12);
  color: rgba(74, 222, 128, 0.8);
  border: 1px solid rgba(74, 222, 128, 0.15);
  cursor: pointer;
  transition: all 0.15s ease;
}

.backlink-tag:hover {
  background: rgba(74, 222, 128, 0.2);
  color: rgba(74, 222, 128, 1);
}

.backlinks-list {
  padding: 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.backlink-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 4px;
}

.backlink-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.backlink-item-header {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.backlink-item-header svg {
  flex-shrink: 0;
  color: var(--os-text-hint);
}

.backlink-item-name {
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--os-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backlink-item:hover .backlink-item-name {
  color: var(--os-text-primary);
}

.backlink-item-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 17px;
}

.backlink-item-path {
  font-size: 0.6rem;
  color: var(--os-text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backlink-item-snippet {
  font-size: 0.6rem;
  color: var(--os-text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}

.backlink-item-tag {
  font-size: 0.6rem;
  color: rgba(74, 222, 128, 0.5);
  flex-shrink: 0;
}

/* Hover tooltip for backlink items */
.backlink-item-wrap {
  position: relative;
}

.backlink-tooltip {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
  padding: 8px 10px;
  background: rgba(15, 15, 25, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  flex-direction: column;
  gap: 5px;
}

.backlink-item-wrap:hover .backlink-tooltip {
  display: flex;
}

.backlink-tooltip-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.backlink-tooltip-path {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(167, 139, 250, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backlink-tooltip-tag {
  font-size: 0.6rem;
  color: rgba(74, 222, 128, 1);
  font-weight: 600;
  background: rgba(74, 222, 128, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.backlink-tooltip-snippet {
  font-size: 0.7rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.backlink-tag-highlight {
  background: rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 1);
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 600;
}

.backlink-type-icon {
  flex-shrink: 0;
  color: rgba(56, 189, 248, 0.45);
}

.backlink-item-score {
  font-size: 0.55rem;
  color: rgba(167, 139, 250, 0.5);
  flex-shrink: 0;
  font-weight: 500;
}

/* Light theme — right panel */
body.light .explorer-right-panel {
  border-left-color: rgba(0, 0, 0, 0.08);
}

body.light .right-panel-resize-handle:hover,
body.light .right-panel-resize-handle:active {
  background: rgba(109, 78, 201, 0.2);
}

body.light .right-panel-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light .right-panel-title {
  color: rgba(0, 0, 0, 0.4);
}
body.light .right-panel-action-btn {
  color: rgba(0, 0, 0, 0.3);
}
body.light .right-panel-action-btn:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.05);
}
body.light .right-panel-action-btn.active {
  color: var(--accent);
}
body.light .right-panel-search-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
body.light .right-panel-search-input:focus {
  border-color: rgba(109, 78, 201, 0.4);
}
body.light .right-panel-search-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}
body.light .right-panel-search-clear {
  color: rgba(0, 0, 0, 0.3);
}
body.light .right-panel-search-clear:hover {
  color: rgba(0, 0, 0, 0.6);
}
body.light .right-panel-tabs {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .right-panel-tab {
  color: rgba(0, 0, 0, 0.35);
}

body.light .right-panel-tab:hover {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.03);
}

body.light .right-panel-tab.active {
  color: rgba(109, 78, 201, 0.9);
  border-bottom-color: rgba(109, 78, 201, 0.5);
}

body.light .right-panel-tab-count {
  color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.06);
}

body.light .right-panel-tab.active .right-panel-tab-count {
  color: rgba(109, 78, 201, 0.7);
  background: rgba(109, 78, 201, 0.1);
}

body.light .info-group {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .info-connections-divider {
  background: rgba(0, 0, 0, 0.06);
}

body.light .info-group-header {
  color: rgba(0, 0, 0, 0.45);
}

body.light .info-group-header svg {
  color: rgba(0, 0, 0, 0.3);
}

body.light .info-group-header:hover {
  color: rgba(0, 0, 0, 0.7);
}

body.light .info-group-header:hover svg {
  color: rgba(0, 0, 0, 0.5);
}

body.light .info-group-count {
  color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.06);
}

body.light .info-group-dot {
  background: rgba(109, 78, 201, 0.5);
}

body.light .info-note-icon {
  color: rgba(109, 78, 201, 0.4);
}

body.light .info-note-text {
  color: rgba(109, 78, 201, 0.7);
}

body.light .info-note-edit {
  color: rgba(0, 0, 0, 0.2);
}

body.light .info-note-edit:hover {
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.06);
}

body.light .info-note-add {
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.25);
}

body.light .info-note-add:hover {
  border-color: rgba(109, 78, 201, 0.3);
  color: rgba(109, 78, 201, 0.6);
  background: rgba(109, 78, 201, 0.05);
}

body.light .info-tag-pill .info-tag-remove {
  border-color: rgba(34, 197, 94, 0.15);
  background: rgba(34, 197, 94, 0.06);
  color: rgba(0, 0, 0, 0.3);
}

body.light .info-tag-pill .info-tag-remove:hover {
  background: rgba(239, 68, 68, 0.12);
  color: rgba(239, 68, 68, 0.8);
  border-color: rgba(239, 68, 68, 0.3);
}

body.light .info-tag-add {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.25);
}

body.light .info-tag-add:hover {
  border-color: rgba(34, 197, 94, 0.4);
  color: rgba(22, 163, 74, 0.7);
  background: rgba(34, 197, 94, 0.06);
}

body.light .backlinks-loading,
body.light .backlinks-empty,
body.light .backlinks-empty-inline {
  color: rgba(0, 0, 0, 0.3);
}

body.light .backlink-tag {
  background: rgba(34, 197, 94, 0.1);
  color: rgba(22, 163, 74, 0.8);
  border-color: rgba(34, 197, 94, 0.15);
}

body.light .backlink-tag:hover {
  background: rgba(34, 197, 94, 0.18);
  color: rgba(22, 163, 74, 1);
}

body.light .backlink-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .backlink-item svg {
  color: rgba(0, 0, 0, 0.3);
}

body.light .backlink-item-name {
  color: rgba(0, 0, 0, 0.7);
}

body.light .backlink-item:hover .backlink-item-name {
  color: rgba(0, 0, 0, 0.9);
}

body.light .backlink-item-tag {
  color: rgba(22, 163, 74, 0.5);
}

body.light .backlink-type-icon {
  color: rgba(37, 99, 235, 0.45);
}

body.light .backlink-item-score {
  color: rgba(109, 78, 201, 0.5);
}

body.light .backlink-item-path {
  color: rgba(0, 0, 0, 0.35);
}

body.light .backlink-item-snippet {
  color: rgba(0, 0, 0, 0.45);
}

body.light .backlink-tooltip {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

body.light .backlink-tooltip-path {
  color: rgba(109, 78, 201, 0.7);
}

body.light .backlink-tooltip-tag {
  color: rgba(22, 163, 74, 0.9);
  background: rgba(22, 163, 74, 0.08);
}

body.light .backlink-tooltip-snippet {
  color: rgba(0, 0, 0, 0.7);
}

body.light .backlink-tag-highlight {
  background: rgba(22, 163, 74, 0.1);
  color: rgba(22, 163, 74, 0.9);
}

/* ── Mode indicator bar ───────────────────────── */
/* Thin gradient bar at top of editor — purple for live, blue for reading */

.explorer-live-mode::before,
.explorer-reading-mode::before {
  content: '';
  display: block;
  height: 2px;
  flex-shrink: 0;
}

.explorer-live-mode::before {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.5), rgba(167, 139, 250, 0.1) 60%, transparent);
}

.explorer-reading-mode::before {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.5), rgba(56, 189, 248, 0.1) 60%, transparent);
}

/* ── Reading mode visual distinction ───────────── */

.explorer-reading-mode .cm-editor {
  cursor: default;
}

.explorer-reading-mode .cm-cursor {
  display: none !important;
}

.explorer-reading-mode .cm-activeLine {
  background: transparent !important;
}

.explorer-reading-mode .cm-table-toolbar {
  display: none !important;
}

.explorer-reading-mode .cm-table-source-toggle {
  display: none !important;
}

/* ── File loading state ────────────────────────── */

.explorer-file-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explorer-file-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: explorer-spin 0.6s linear infinite;
}

body.light .explorer-file-loading-spinner {
  border-color: rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.3);
}

@keyframes explorer-spin {
  to { transform: rotate(360deg); }
}
.excalidraw .Spinner{display:flex;align-items:center;justify-content:center;height:100%;margin-left:auto;margin-right:auto;--spinner-color: var(--icon-fill-color)}.excalidraw .Spinner svg{animation:rotate 1.6s linear infinite;animation-delay:var(--spinner-delay);transform-origin:center center}.excalidraw .Spinner circle{stroke:var(--spinner-color);animation:dash 1.6s linear 0s infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,300;stroke-dashoffset:0}50%{stroke-dasharray:150,300;stroke-dashoffset:-200}to{stroke-dasharray:1,300;stroke-dashoffset:-280}}.excalidraw .ToolIcon{border-radius:var(--border-radius-lg);display:inline-flex;align-items:center;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}.excalidraw .ToolIcon__hidden{display:none!important}.excalidraw .ToolIcon.fillable .ToolIcon_type_radio:checked+.ToolIcon__icon,.excalidraw .ToolIcon.fillable .ToolIcon_type_checkbox:checked+.ToolIcon__icon{--icon-fill-color: var(--color-on-primary-container)}.excalidraw .ToolIcon.fillable .ToolIcon_type_radio:checked+.ToolIcon__icon svg,.excalidraw .ToolIcon.fillable .ToolIcon_type_checkbox:checked+.ToolIcon__icon svg{fill:var(--icon-fill-color)}.excalidraw .ToolIcon .ToolIcon_type_radio:checked+.ToolIcon__icon,.excalidraw .ToolIcon .ToolIcon_type_checkbox:checked+.ToolIcon__icon{background:var(--color-surface-primary-container);--keybinding-color: var(--color-on-primary-container)}.excalidraw .ToolIcon .ToolIcon_type_radio:checked+.ToolIcon__icon svg,.excalidraw .ToolIcon .ToolIcon_type_checkbox:checked+.ToolIcon__icon svg{color:var(--color-on-primary-container)}.excalidraw .ToolIcon .ToolIcon__keybinding{bottom:4px;right:4px}.excalidraw .ToolIcon .ToolIcon__icon:hover{background:var(--button-hover-bg)}.excalidraw .ToolIcon .ToolIcon__icon:active{background:var(--button-hover-bg);border:1px solid var(--button-active-border)}.excalidraw .ToolIcon .ToolIcon__icon:active svg{color:var(--color-on-primary-container)}.excalidraw .ToolIcon .ToolIcon__icon[aria-disabled=true]{background:initial;border:none}.excalidraw .ToolIcon .ToolIcon__icon[aria-disabled=true] svg{color:var(--color-disabled)}.excalidraw .ToolIcon--plain{background-color:transparent}.excalidraw .ToolIcon--plain .ToolIcon__icon{width:2rem;height:2rem}.excalidraw .ToolIcon_type_radio,.excalidraw .ToolIcon_type_checkbox{position:absolute;opacity:0;pointer-events:none}.excalidraw .ToolIcon__icon{box-sizing:border-box;width:var(--default-button-size);height:var(--default-button-size);color:var(--icon-fill-color);display:flex;justify-content:center;align-items:center;border-radius:var(--border-radius-lg)}.excalidraw .ToolIcon__icon+.ToolIcon__label{margin-inline-start:0}.excalidraw .ToolIcon__icon svg{position:relative;width:var(--default-icon-size);height:var(--default-icon-size);color:var(--icon-fill-color)}.excalidraw .ToolIcon__label{display:flex;align-items:center;color:var(--icon-fill-color);font-family:var(--ui-font);margin:0 .8em;text-overflow:ellipsis}.excalidraw .ToolIcon__label .Spinner{margin-left:.6em}.excalidraw .ToolIcon_size_small .ToolIcon__icon{width:2rem;height:2rem;font-size:.8em}.excalidraw .ToolIcon_type_button,.excalidraw .Modal .ToolIcon_type_button{padding:0;border:none;margin:0;font-size:inherit;background-color:initial}.excalidraw .ToolIcon_type_button:focus-visible,.excalidraw .Modal .ToolIcon_type_button:focus-visible{box-shadow:0 0 0 2px var(--focus-highlight-color)}.excalidraw .ToolIcon_type_button.ToolIcon--selected,.excalidraw .Modal .ToolIcon_type_button.ToolIcon--selected{background-color:var(--button-gray-2)}.excalidraw .ToolIcon_type_button.ToolIcon--selected:active,.excalidraw .Modal .ToolIcon_type_button.ToolIcon--selected:active,.excalidraw .ToolIcon_type_button:active,.excalidraw .Modal .ToolIcon_type_button:active{background-color:var(--button-gray-3)}.excalidraw .ToolIcon_type_button:disabled,.excalidraw .Modal .ToolIcon_type_button:disabled{cursor:default}.excalidraw .ToolIcon_type_button:disabled:active,.excalidraw .ToolIcon_type_button:disabled:focus-visible,.excalidraw .ToolIcon_type_button:disabled:hover,.excalidraw .Modal .ToolIcon_type_button:disabled:active,.excalidraw .Modal .ToolIcon_type_button:disabled:focus-visible,.excalidraw .Modal .ToolIcon_type_button:disabled:hover{background-color:initial;border:none;box-shadow:none}.excalidraw .ToolIcon_type_button:disabled svg,.excalidraw .Modal .ToolIcon_type_button:disabled svg{color:var(--color-disabled)}.excalidraw .ToolIcon_type_button--show,.excalidraw .Modal .ToolIcon_type_button--show{visibility:visible}.excalidraw .ToolIcon_type_button--hide,.excalidraw .Modal .ToolIcon_type_button--hide{display:none!important}.excalidraw .ToolIcon_type_floating,.excalidraw .ToolIcon_type_floating:hover,.excalidraw .ToolIcon_type_floating:active{background-color:transparent}.excalidraw .ToolIcon_type_floating .ToolIcon__icon{background-color:var(--button-gray-1);width:2rem;height:2rem}.excalidraw .ToolIcon_type_floating .ToolIcon__icon:hover{background-color:var(--button-gray-2)}.excalidraw .ToolIcon_type_floating .ToolIcon__icon:active{background-color:var(--button-gray-3)}.excalidraw .ToolIcon__keybinding{position:absolute;bottom:2px;right:3px;font-size:.625rem;color:var(--keybinding-color);font-family:var(--ui-font);user-select:none}:root[dir=ltr] .excalidraw .unlocked-icon{left:2px}:root[dir=rtl] .excalidraw .unlocked-icon{right:2px}.excalidraw .App-toolbar-container .ToolIcon__icon{width:var(--lg-button-size);height:var(--lg-button-size)}@media screen and (max-width: 450px){.excalidraw .App-toolbar-container .ToolIcon__icon{width:1.8rem;height:1.8rem}}@media screen and (max-width: 379px){.excalidraw .App-toolbar-container .ToolIcon__icon{width:1.5rem;height:1.5rem}}.excalidraw .App-toolbar-container .ToolIcon__icon svg{width:var(--lg-icon-size);height:var(--lg-icon-size)}.excalidraw .App-toolbar-container .ToolIcon__LaserPointer .ToolIcon__icon,.excalidraw .App-toolbar-container .ToolIcon__MagicButton .ToolIcon__icon{width:var(--default-button-size);height:var(--default-button-size)}.excalidraw button.standalone{display:flex;justify-content:center;align-items:center;padding:.625rem;width:var(--button-width, var(--default-button-size));height:var(--button-height, var(--default-button-size));box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--button-border, var(--default-border-color));border-radius:var(--border-radius-lg);cursor:pointer;background-color:var(--button-bg, var(--island-bg-color));color:var(--button-color, var(--color-on-surface));font-family:var(--ui-font);padding:0}.excalidraw button.standalone svg{width:var(--button-width, var(--lg-icon-size));height:var(--button-height, var(--lg-icon-size))}.excalidraw button.standalone:hover{background-color:var(--button-hover-bg, var(--island-bg-color));border-color:var(--button-hover-border, var(--button-border, var(--default-border-color)));color:var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)))}.excalidraw button.standalone:active{background-color:var(--button-active-bg, var(--island-bg-color));border-color:var(--button-active-border, var(--color-primary-darkest))}.excalidraw button.standalone.active{background-color:var(--button-selected-bg, var(--color-surface-primary-container));border-color:var(--button-selected-border, var(--color-surface-primary-container))}.excalidraw button.standalone.active:hover{background-color:var(--button-selected-hover-bg, var(--color-surface-primary-container))}.excalidraw button.standalone.active svg{color:var(--button-color, var(--color-on-primary-container))}.excalidraw button.standalone svg{width:var(--default-icon-size);height:var(--default-icon-size)}.excalidraw button.standalone>*{pointer-events:none}.excalidraw .excalidraw-eye-dropper-container,.excalidraw .excalidraw-eye-dropper-backdrop{position:absolute;width:100%;height:100%;z-index:var(--zIndex-eyeDropperBackdrop);touch-action:none}.excalidraw .excalidraw-eye-dropper-container{pointer-events:none}.excalidraw .excalidraw-eye-dropper-backdrop{pointer-events:all}.excalidraw .excalidraw-eye-dropper-preview{pointer-events:none;width:3rem;height:3rem;position:fixed;z-index:var(--zIndex-eyeDropperPreview);border-radius:1rem;border:1px solid var(--default-border-color);filter:var(--theme-filter)}.excalidraw .excalidraw-eye-dropper-trigger{width:1.25rem;height:1.25rem;cursor:pointer;padding:4px;margin-right:-4px;margin-left:-2px;border-radius:.5rem;color:var(--icon-fill-color)}.excalidraw .excalidraw-eye-dropper-trigger:hover{background:var(--button-hover-bg)}.excalidraw .excalidraw-eye-dropper-trigger.selected{color:var(--color-primary);background:var(--color-primary-light)}.excalidraw .Island{--padding: 0;box-sizing:border-box;background-color:var(--island-bg-color);box-shadow:var(--shadow-island);border-radius:var(--border-radius-lg);padding:calc(var(--padding) * var(--space-factor));position:relative;transition:box-shadow .5s ease-in-out}.excalidraw .Island.zen-mode{box-shadow:none}.excalidraw .focus-visible-none:focus-visible{outline:none!important}.excalidraw .color-picker__heading{padding:0 .5rem;font-size:.75rem;text-align:left}.excalidraw .color-picker-container{display:grid;grid-template-columns:1fr 20px 1.625rem;padding:.25rem 0px;align-items:center}.excalidraw--mobile.excalidraw .color-picker-container{max-width:11rem}.excalidraw .color-picker__top-picks{display:flex;justify-content:space-between}.excalidraw .color-picker__button{--radius: .25rem;padding:0;margin:0;width:1.35rem;height:1.35rem;border:1px solid var(--color-gray-30);border-radius:var(--radius);filter:var(--theme-filter);background-color:var(--swatch-color);background-position:left center;position:relative;font-family:inherit;box-sizing:border-box}.excalidraw .color-picker__button:hover:after{content:"";position:absolute;inset:-2px;box-shadow:0 0 0 1px var(--color-gray-30);border-radius:calc(var(--radius) + 1px);filter:var(--theme-filter)}.excalidraw .color-picker__button.active .color-picker__button-outline{position:absolute;inset:-2px;box-shadow:0 0 0 1px var(--color-primary-darkest);z-index:1;border-radius:calc(var(--radius) + 1px);filter:var(--theme-filter)}.excalidraw .color-picker__button:focus-visible{outline:none}.excalidraw .color-picker__button:focus-visible:after{content:"";position:absolute;inset:-4px;border:3px solid var(--focus-highlight-color);border-radius:calc(var(--radius) + 1px)}.excalidraw .color-picker__button:focus-visible.active .color-picker__button-outline{display:none}.excalidraw .color-picker__button--large{--radius: .5rem;width:1.875rem;height:1.875rem}.excalidraw .color-picker__button.is-transparent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)}.excalidraw .color-picker__button--no-focus-visible{border:0}.excalidraw .color-picker__button--no-focus-visible:after{display:none}.excalidraw .color-picker__button--no-focus-visible:focus-visible{outline:none!important}.excalidraw .color-picker__button.active-color{border-radius:calc(var(--radius) + 1px);width:1.625rem;height:1.625rem}.excalidraw .color-picker__button__hotkey-label{position:absolute;right:4px;bottom:4px;filter:none;font-size:11px}.excalidraw .color-picker{background:var(--popup-bg-color);border:0 solid rgba(255,255,255,.25);box-shadow:#00000040 0 1px 4px;border-radius:4px;position:absolute}:root[dir=ltr] .excalidraw .color-picker{left:-5.5px}:root[dir=rtl] .excalidraw .color-picker{right:-5.5px}.excalidraw .color-picker-control-container{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.5rem}.excalidraw .color-picker-control-container+.popover{position:static}.excalidraw .color-picker-popover-container{margin-top:-.25rem}:root[dir=ltr] .excalidraw .color-picker-popover-container{margin-left:.5rem}:root[dir=rtl] .excalidraw .color-picker-popover-container{margin-left:-3rem}.excalidraw .color-picker-triangle{width:0;height:0;border-style:solid;border-width:0 9px 10px;border-color:transparent transparent var(--popup-bg-color);position:absolute;top:10px}:root[dir=ltr] .excalidraw .color-picker-triangle{transform:rotate(270deg);left:-14px}:root[dir=rtl] .excalidraw .color-picker-triangle{transform:rotate(90deg);right:-14px}.excalidraw .color-picker-triangle-shadow{border-color:transparent transparent rgba(0,0,0,.1)}:root[dir=ltr] .excalidraw .color-picker-triangle-shadow{left:-14px}:root[dir=rtl] .excalidraw .color-picker-triangle-shadow{right:-16px}.excalidraw .color-picker-content{display:flex;flex-direction:column;gap:.75rem;outline:none}.excalidraw .color-picker-content--default{padding:.5rem;display:grid;grid-template-columns:repeat(5,1.875rem);grid-gap:.25rem;border-radius:4px}.excalidraw .color-picker-content--default:focus{outline:none;box-shadow:0 0 0 2px var(--focus-highlight-color)}.excalidraw .color-picker-content--canvas{display:flex;flex-direction:column;padding:.25rem}.excalidraw .color-picker-content--canvas-title{color:#868e96;font-size:12px;padding:0 .25rem}.excalidraw .color-picker-content--canvas-colors{padding:.5rem 0}.excalidraw .color-picker-content--canvas-colors .color-picker-swatch{margin:0 .25rem}.excalidraw .color-picker-content .color-input-container{grid-column:1/span 5}.excalidraw .color-picker-swatch{position:relative;height:1.875rem;width:1.875rem;cursor:pointer;border-radius:4px;margin:0;box-sizing:border-box;border:1px solid #ddd;background-color:currentColor!important;filter:var(--theme-filter)}.excalidraw .color-picker-swatch:focus{box-shadow:0 0 4px 1px currentColor;border-color:var(--select-highlight-color)}.excalidraw .color-picker-transparent{border-radius:4px;box-shadow:#0000001a 0 0 0 1px inset;position:absolute;inset:0}.excalidraw .color-picker-transparent,.excalidraw .color-picker-label-swatch{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center}.excalidraw .color-picker-hash{height:var(--default-button-size);flex-shrink:0;padding:.5rem .5rem .5rem .75rem;border:1px solid var(--default-border-color);border-right:0;box-sizing:border-box;color:var(--input-label-color);display:flex;align-items:center;justify-content:center;position:relative}:root[dir=ltr] .excalidraw .color-picker-hash{border-radius:var(--border-radius-lg) 0 0 var(--border-radius-lg)}:root[dir=rtl] .excalidraw .color-picker-hash{border-radius:0 var(--border-radius-lg) var(--border-radius-lg) 0;border-right:1px solid var(--default-border-color);border-left:0}.excalidraw .color-input-container{display:flex}.excalidraw .color-input-container:focus-within{box-shadow:0 0 0 1px var(--color-primary-darkest);border-radius:var(--border-radius-lg)}.excalidraw .color-picker__input-label{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;border:1px solid var(--default-border-color);border-radius:8px;padding:0 12px;margin:8px;box-sizing:border-box}.excalidraw .color-picker__input-label:focus-within{box-shadow:0 0 0 1px var(--color-primary-darkest);border-radius:var(--border-radius-lg)}.excalidraw .color-picker__input-hash{padding:0 .25rem}.excalidraw .color-picker-input{box-sizing:border-box;width:100%;margin:0;font-size:.875rem;font-family:inherit;background-color:transparent;color:var(--text-primary-color);border:0;outline:none;height:var(--default-button-size);border:1px solid var(--default-border-color);border-left:0;letter-spacing:.4px;padding:.5rem .5rem .5rem .25rem;appearance:none}:root[dir=ltr] .excalidraw .color-picker-input{border-radius:0 var(--border-radius-lg) var(--border-radius-lg) 0}:root[dir=rtl] .excalidraw .color-picker-input{border-radius:var(--border-radius-lg) 0 0 var(--border-radius-lg);border-left:1px solid var(--default-border-color);border-right:0}.excalidraw .color-picker-input:focus-visible{box-shadow:none}.excalidraw .color-picker-label-swatch-container{border:1px solid var(--default-border-color);border-radius:var(--border-radius-lg);width:var(--default-button-size);height:var(--default-button-size);box-sizing:border-box;overflow:hidden}.excalidraw .color-picker-label-swatch{display:flex;justify-content:center;align-items:center;padding:.625rem;width:var(--button-width, var(--default-button-size));height:var(--button-height, var(--default-button-size));box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--button-border, var(--default-border-color));border-radius:var(--border-radius-lg);cursor:pointer;background-color:var(--button-bg, var(--island-bg-color));color:var(--button-color, var(--color-on-surface));font-family:var(--ui-font);background-color:var(--swatch-color)!important;overflow:hidden;position:relative;filter:var(--theme-filter);border:0!important}.excalidraw .color-picker-label-swatch svg{width:var(--button-width, var(--lg-icon-size));height:var(--button-height, var(--lg-icon-size))}.excalidraw .color-picker-label-swatch:hover{background-color:var(--button-hover-bg, var(--island-bg-color));border-color:var(--button-hover-border, var(--button-border, var(--default-border-color)));color:var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)))}.excalidraw .color-picker-label-swatch:active{background-color:var(--button-active-bg, var(--island-bg-color));border-color:var(--button-active-border, var(--color-primary-darkest))}.excalidraw .color-picker-label-swatch.active{background-color:var(--button-selected-bg, var(--color-surface-primary-container));border-color:var(--button-selected-border, var(--color-surface-primary-container))}.excalidraw .color-picker-label-swatch.active:hover{background-color:var(--button-selected-hover-bg, var(--color-surface-primary-container))}.excalidraw .color-picker-label-swatch.active svg{color:var(--button-color, var(--color-on-primary-container))}.excalidraw .color-picker-label-swatch:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--swatch-color)}.excalidraw .color-picker-keybinding{position:absolute;bottom:2px;font-size:.7em}:root[dir=ltr] .excalidraw .color-picker-keybinding{right:2px}:root[dir=rtl] .excalidraw .color-picker-keybinding{left:2px}.excalidraw--mobile.excalidraw .color-picker-keybinding{display:none}.excalidraw .color-picker-type-canvasBackground .color-picker-keybinding{color:#aaa}.excalidraw .color-picker-type-elementBackground .color-picker-keybinding{color:#fff}.excalidraw .color-picker-swatch[aria-label=transparent] .color-picker-keybinding{color:#aaa}.excalidraw .color-picker-type-elementStroke .color-picker-keybinding{color:#d4d4d4}.excalidraw.theme--dark .color-picker-type-elementBackground .color-picker-keybinding,.excalidraw.theme--dark .color-picker-swatch[aria-label=transparent] .color-picker-keybinding{color:#000}.excalidraw .picker{padding:.5rem;background:var(--popup-bg-color);border:0 solid rgba(255,255,255,.25);box-shadow:var(--shadow-island);border-radius:4px;position:absolute}:root[dir=rtl] .excalidraw .picker{padding:.4rem}.excalidraw .picker-container button,.excalidraw .picker button{position:relative;display:flex;align-items:center;justify-content:center}.excalidraw .picker-container button:focus-visible,.excalidraw .picker button:focus-visible{outline:transparent;background-color:var(--button-gray-2)}.excalidraw .picker-container button:focus-visible svg,.excalidraw .picker button:focus-visible svg{opacity:1}.excalidraw .picker-container button:hover,.excalidraw .picker button:hover{background-color:var(--button-gray-2)}.excalidraw .picker-container button:active,.excalidraw .picker button:active{background-color:var(--button-gray-3)}.excalidraw .picker-container button:disabled,.excalidraw .picker button:disabled{cursor:not-allowed}.excalidraw .picker-container button svg,.excalidraw .picker button svg{margin:0;width:36px;height:18px;pointer-events:none}.excalidraw .picker button{padding:.25rem .28rem .35rem .25rem}.excalidraw .picker-content{display:grid;grid-template-columns:repeat(4,auto);grid-gap:.5rem;border-radius:4px}.excalidraw .picker-collapsible{font-size:.75rem;padding:.5rem 0}.excalidraw .picker-keybinding{position:absolute;bottom:2px;font-size:.7em;color:var(--keybinding-color)}:root[dir=ltr] .excalidraw .picker-keybinding{right:2px}:root[dir=rtl] .excalidraw .picker-keybinding{left:2px}.excalidraw--mobile.excalidraw .picker-keybinding{display:none}.excalidraw .picker-type-canvasBackground .picker-keybinding{color:#aaa}.excalidraw .picker-type-elementBackground .picker-keybinding{color:#fff}.excalidraw .picker-swatch[aria-label=transparent] .picker-keybinding{color:#aaa}.excalidraw .picker-type-elementStroke .picker-keybinding{color:#d4d4d4}.excalidraw.theme--dark .picker-type-elementBackground .picker-keybinding,.excalidraw.theme--dark .picker-swatch[aria-label=transparent] .picker-keybinding{color:#000}.excalidraw{--list-border-color: var(--color-gray-20)}.excalidraw .QuickSearch__wrapper{position:relative;height:2.6rem;border-bottom:1px solid var(--list-border-color)}.excalidraw .QuickSearch__wrapper svg{position:absolute;top:47.5%;transform:translateY(-50%);left:.75rem;width:1.25rem;height:1.25rem;color:var(--color-gray-40);z-index:1}.excalidraw.theme--dark{--list-border-color: var(--color-gray-80)}.excalidraw.theme--dark .QuickSearch__wrapper{border-bottom:none}.excalidraw .QuickSearch__input{position:absolute;top:0;left:0;width:100%;box-sizing:border-box;border:0!important;font-size:.875rem;padding-left:2.5rem!important;padding-right:.75rem!important}.excalidraw .QuickSearch__input::placeholder{color:var(--color-gray-40)}.excalidraw .QuickSearch__input:focus{box-shadow:none!important}.excalidraw .ScrollableList__wrapper{position:static!important;border:none;font-size:.875rem;overflow-y:auto}.excalidraw .ScrollableList__wrapper>.empty,.excalidraw .ScrollableList__wrapper>.hint{display:flex;justify-content:center;align-items:center;padding:.5rem;font-size:.75rem;color:var(--color-gray-60);overflow:hidden;text-align:center;line-height:150%}.excalidraw .FontPicker__container{display:grid;grid-template-columns:calc(1rem + 3 * var(--default-button-size)) 1rem 1fr;align-items:center}.excalidraw--mobile.excalidraw .FontPicker__container{max-width:calc(2rem + 4 * var(--default-button-size))}.excalidraw{--slider-thumb-size: 16px}.excalidraw .range-wrapper{position:relative;padding-top:10px;padding-bottom:30px}.excalidraw .range-input{width:100%;height:4px;-webkit-appearance:none;background:var(--color-slider-track);border-radius:2px;outline:none}.excalidraw .range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);background:var(--color-slider-thumb);border-radius:50%;cursor:pointer;border:none}.excalidraw .range-input::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);background:var(--color-slider-thumb);border-radius:50%;cursor:pointer;border:none}.excalidraw .value-bubble{position:absolute;bottom:0;transform:translate(-50%);font-size:12px;color:var(--text-primary-color)}.excalidraw .zero-label{position:absolute;bottom:0;left:4px;font-size:12px;color:var(--text-primary-color)}.excalidraw-tooltip{--ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;font-family:var(--ui-font);position:fixed;z-index:var(--zIndex-popup);padding:8px;border-radius:6px;box-sizing:border-box;pointer-events:none;word-wrap:break-word;background:#000;line-height:1.5;text-align:center;font-size:13px;font-weight:500;color:#fff;display:none}.excalidraw-tooltip.excalidraw-tooltip--visible{display:block}.excalidraw-tooltip-wrapper{display:flex}.excalidraw-tooltip-icon{width:.9em;height:.9em;margin-left:5px;margin-top:1px;display:flex}.excalidraw--mobile.excalidraw-tooltip-icon{display:none}.excalidraw .TextInput{display:inline-block}.ProjectName{margin:auto;display:flex;align-items:center}.ProjectName .TextInput{height:calc(1rem - 3px);width:200px;overflow:hidden;text-align:center;margin-left:8px;text-overflow:ellipsis}.ProjectName .TextInput--readonly{background:none;border:none;width:auto;max-width:200px;padding-left:2px}.ProjectName .TextInput--readonly:hover{background:none}.excalidraw .Checkbox{margin:4px .3em;display:flex;align-items:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.excalidraw .Checkbox:hover:not(.is-checked) .Checkbox-box:not(:focus){box-shadow:0 0 0 2px #4dabf7}.excalidraw .Checkbox:hover:not(.is-checked) .Checkbox-box:not(:focus) svg{display:block;opacity:.3}.excalidraw .Checkbox:active .Checkbox-box{box-shadow:0 0 2px 1px inset #1c7ed6!important}.excalidraw .Checkbox:hover .Checkbox-box{background-color:#d0ebff33}.excalidraw .Checkbox.is-checked .Checkbox-box{background-color:#d0ebff}.excalidraw .Checkbox.is-checked .Checkbox-box svg{display:block}.excalidraw .Checkbox.is-checked:hover .Checkbox-box{background-color:#a5d8ff}.excalidraw .Checkbox .Checkbox-box{width:22px;height:22px;padding:0;flex:0 0 auto;margin:0 1em;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #1c7ed6;background-color:transparent;border-radius:4px;color:#1c7ed6;border:0}.excalidraw .Checkbox .Checkbox-box:focus{box-shadow:0 0 0 3px #1c7ed6}.excalidraw .Checkbox .Checkbox-box svg{display:none;width:16px;height:16px;stroke-width:3px}.excalidraw .Checkbox .Checkbox-label{display:flex;align-items:center}.excalidraw .Checkbox .excalidraw-tooltip-icon{width:1em;height:1em}.excalidraw .Avatar{width:var(--avatar-size, 1.5rem);height:var(--avatar-size, 1.5rem);position:relative;border-radius:100%;outline-offset:2px;display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:.75rem;font-weight:700;line-height:1;color:var(--color-gray-90);flex:0 0 auto}.excalidraw .Avatar:active{transform:scale(.94)}.excalidraw .Avatar-img{width:100%;height:100%;border-radius:100%}.excalidraw .Avatar:before{content:"";position:absolute;inset:-3px;border-radius:100%}.excalidraw .Avatar.is-followed:before{border-color:var(--color-primary-hover);box-shadow:0 0 0 1px var(--color-primary-hover)}.excalidraw .Avatar.is-current-user{cursor:auto}.excalidraw-hyperlinkContainer{display:flex;align-items:center;justify-content:space-between;position:absolute;box-shadow:0 2px 4px #0000004d;z-index:var(--zIndex-hyperlinkContainer);background:var(--island-bg-color);border-radius:var(--border-radius-md);box-sizing:border-box;min-height:42px}.excalidraw-hyperlinkContainer-input,.excalidraw-hyperlinkContainer button{z-index:100}.excalidraw-hyperlinkContainer-input,.excalidraw-hyperlinkContainer-link{height:24px;padding:0 8px;line-height:24px;font-size:.9rem;font-weight:500;font-family:var(--ui-font)}.excalidraw-hyperlinkContainer-input{width:18rem;background-color:transparent;color:var(--text-primary-color);outline:none;border:none;box-shadow:none!important}.excalidraw-hyperlinkContainer-link{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:15rem}.excalidraw-hyperlinkContainer button{color:#228be6;background-color:transparent!important;font-weight:500}.excalidraw-hyperlinkContainer button.excalidraw-hyperlinkContainer--remove{color:#c92a2a}.excalidraw-hyperlinkContainer--remove .ToolIcon__icon svg{color:#fa5252}.excalidraw-hyperlinkContainer .ToolIcon__icon{width:2rem;height:2rem}.excalidraw-hyperlinkContainer__buttons{flex:0 0 auto}.excalidraw .Dialog{user-select:text;cursor:auto}.excalidraw .Dialog__title{margin:0;text-align:left;font-size:1.25rem;border-bottom:1px solid var(--dialog-border-color);padding:0 0 .75rem;margin-bottom:1.5rem}.excalidraw .Dialog__close{color:var(--color-gray-40);margin:0;position:absolute;top:.75rem;right:.5rem;border:0;background-color:transparent;line-height:0;cursor:pointer}.excalidraw .Dialog__close:hover{color:var(--color-gray-60)}.excalidraw .Dialog__close:active{color:var(--color-gray-40)}.excalidraw .Dialog__close svg{width:1.5rem;height:1.5rem}.excalidraw .Dialog__close+.Dialog__content{--offset: 28px;height:calc(100% - var(--offset))!important;margin-top:var(--offset)!important}.excalidraw .Dialog--fullscreen .Dialog__close{top:1.25rem;right:1.25rem}.excalidraw.excalidraw-modal-container{position:absolute;z-index:var(--zIndex-modal)}.excalidraw .Modal{position:absolute;inset:0;align-items:center;justify-content:center;overflow:auto;padding:calc(var(--space-factor) * 10);display:flex;flex-direction:column}.excalidraw .Modal .Island{padding:2.5rem;border:0;box-shadow:none;border-radius:0}.excalidraw .Modal.animations-disabled .Modal__background{animation:none}.excalidraw .Modal.animations-disabled .Modal__content{animation:none;opacity:1}.excalidraw .Modal__background{position:fixed;inset:0;z-index:1;background-color:#12121233;animation:Modal__background__fade-in .1s linear forwards}.excalidraw .Modal__content{z-index:2;width:100%;max-width:var(--max-width);max-height:100%;opacity:0;transform:translateY(10px);animation:Modal__content_fade-in 25ms ease-out 0s forwards;position:relative;overflow-y:auto;background:var(--island-bg-color);border:1px solid var(--dialog-border-color);box-shadow:var(--modal-shadow);border-radius:.75rem;box-sizing:border-box}.excalidraw .Modal__content:focus{outline:none}@keyframes Modal__background__fade-in{0%{opacity:0}to{opacity:1}}@keyframes Modal__content_fade-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.excalidraw .Modal__close{color:var(--icon-fill-color);margin:0;padding:.375rem;position:absolute;top:1rem;right:1rem;border:0;background-color:transparent;line-height:0;cursor:pointer}.excalidraw .Modal__close svg{width:1.5rem;height:1.5rem}.excalidraw .Dialog--fullscreen .Modal{padding:0}.excalidraw .Dialog--fullscreen .Modal__content{position:absolute;inset:0;max-width:100%;border:0;border-radius:0}.excalidraw .Stack{--gap: 0;display:grid;gap:calc(var(--space-factor) * var(--gap))}.excalidraw .Stack_vertical{grid-template-columns:auto;grid-auto-flow:row;grid-auto-rows:min-content}.excalidraw .Stack_horizontal{grid-template-rows:auto;grid-auto-flow:column;grid-auto-columns:min-content}.excalidraw .confirm-dialog-buttons{display:flex;column-gap:.5rem;justify-content:flex-end}.excalidraw .Dialog__action-button{position:relative;display:flex;column-gap:.5rem;align-items:center;padding:.5rem 1.5rem;border:1px solid var(--default-border-color);background-color:transparent;height:3rem;border-radius:var(--border-radius-lg);letter-spacing:.4px;color:inherit;font-family:inherit;font-size:.875rem;font-weight:600;user-select:none}.excalidraw .Dialog__action-button svg{display:block;width:1rem;height:1rem}.excalidraw .Dialog__action-button--danger{background-color:var(--color-danger);border-color:var(--color-danger);color:#fff}.excalidraw .Dialog__action-button--primary{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.excalidraw.theme--dark .Dialog__action-button--danger,.excalidraw.theme--dark .Dialog__action-button--primary{color:var(--color-gray-100)}.excalidraw .publish-library__fields{display:flex;flex-direction:column}.excalidraw .publish-library__fields label{padding:1em 0;display:flex;justify-content:space-between;align-items:center}.excalidraw .publish-library__fields label span{font-weight:500;font-size:1rem;color:#868e96}.excalidraw .publish-library__fields label input,.excalidraw .publish-library__fields label textarea{width:70%;padding:.6em;font-family:var(--ui-font)}.excalidraw .publish-library__fields label .required{color:#e03131;margin:.2rem}.excalidraw .publish-library__buttons{display:flex;padding:.2rem 0;justify-content:flex-end;gap:.5rem}.excalidraw .publish-library__buttons .ToolIcon__icon{min-width:2.5rem;width:auto;font-size:1rem}.excalidraw .publish-library__buttons .ToolIcon_type_button{margin-left:1rem;padding:0 .5rem}.excalidraw .publish-library__buttons--confirm.ToolIcon_type_button{background-color:#228be6}.excalidraw .publish-library__buttons--confirm.ToolIcon_type_button:hover{background-color:#1971c2}.excalidraw .publish-library__buttons--cancel.ToolIcon_type_button{background-color:#adb5bd}.excalidraw .publish-library__buttons--cancel.ToolIcon_type_button:hover{background-color:#868e96}.excalidraw .publish-library__buttons .ToolIcon__icon{color:#fff}.excalidraw .publish-library__buttons .ToolIcon__icon .Spinner{--spinner-color: #fff}.excalidraw .publish-library__buttons .ToolIcon__icon .Spinner svg{padding:.5rem}.excalidraw .publish-library .selected-library-items{display:flex;flex-wrap:wrap}.excalidraw .publish-library .selected-library-items .single-library-item-wrapper{width:9rem}.excalidraw .publish-library-warning{color:#fa5252}.excalidraw .publish-library-note{padding:1em 0;font-style:italic;font-size:14px;display:block}.excalidraw .single-library-item{position:relative}.excalidraw .single-library-item-status{position:absolute;top:.3rem;left:.3rem;font-size:.7rem;color:#f03e3e;background:#ffffffe6;padding:.1rem .2rem;border-radius:.2rem}.excalidraw .single-library-item__svg{background-color:#fff;padding:.3rem;width:7.5rem;height:7.5rem;border:1px solid var(--button-gray-2)}.excalidraw .single-library-item__svg svg{width:100%;height:100%}.excalidraw .single-library-item .ToolIcon__icon{background-color:#fff;width:auto;height:auto;margin:0 .5rem}.excalidraw .single-library-item .ToolIcon,.excalidraw .single-library-item .ToolIcon_type_button:hover{background-color:#fff}.excalidraw .single-library-item .required,.excalidraw .single-library-item .error{color:#e03131;font-weight:700;font-size:1rem;margin:.2rem}.excalidraw .single-library-item .error{font-weight:500;margin:0;padding:.3em 0}.excalidraw .single-library-item--remove{position:absolute;top:.2rem;right:1rem}.excalidraw .single-library-item--remove .ToolIcon__icon{margin:0}.excalidraw .single-library-item--remove .ToolIcon__icon{background-color:#fa5252}.excalidraw .single-library-item--remove .ToolIcon__icon:hover{background-color:#f03e3e}.excalidraw .single-library-item--remove .ToolIcon__icon:active{background-color:#e03131}.excalidraw .single-library-item--remove svg{color:#fff;padding:.26rem;border-radius:.3em;width:1rem;height:1rem}.excalidraw .dropdown-menu{position:absolute;top:100%;margin-top:.5rem}.excalidraw .dropdown-menu--mobile{left:0;width:100%;row-gap:.75rem}.excalidraw .dropdown-menu--mobile .dropdown-menu-container{padding:8px;box-sizing:border-box;box-shadow:var(--shadow-island);border-radius:var(--border-radius-lg);position:relative;transition:box-shadow .5s ease-in-out}.excalidraw .dropdown-menu--mobile .dropdown-menu-container.zen-mode{box-shadow:none}.excalidraw .dropdown-menu .dropdown-menu-container{background-color:var(--island-bg-color);max-height:calc(100vh - 150px);overflow-y:auto;--gap: 2}.excalidraw .dropdown-menu .dropdown-menu-item-base{display:flex;column-gap:.625rem;font-size:.875rem;color:var(--color-on-surface);width:100%;box-sizing:border-box;font-weight:400;font-family:inherit}.excalidraw .dropdown-menu.manual-hover .dropdown-menu-item:hover{background-color:transparent}.excalidraw .dropdown-menu.manual-hover .dropdown-menu-item--hovered{background-color:var(--button-hover-bg)!important}.excalidraw .dropdown-menu.manual-hover .dropdown-menu-item--selected{background-color:var(--color-primary-light)!important}.excalidraw .dropdown-menu.fonts{margin-top:1rem;max-height:calc(7*(2rem + 2px) + 3.95rem)}@media screen and (min-width: 1921px){.excalidraw .dropdown-menu.fonts{max-height:calc(7*(2.25rem + 2px) + 3.95rem)}}.excalidraw .dropdown-menu.fonts .dropdown-menu-item-base{display:inline-flex}.excalidraw .dropdown-menu.fonts .dropdown-menu-group:not(:first-child){margin-top:1rem}.excalidraw .dropdown-menu.fonts .dropdown-menu-group-title{font-size:.75rem;text-align:left;font-weight:400;margin:0 0 .5rem;line-height:1.3}.excalidraw .dropdown-menu .dropdown-menu-item{height:2rem;margin:1px;padding:0 .5rem;width:calc(100% - 2px);background-color:transparent;border:1px solid transparent;align-items:center;cursor:pointer;border-radius:var(--border-radius-md)}@media screen and (min-width: 1921px){.excalidraw .dropdown-menu .dropdown-menu-item{height:2.25rem}}.excalidraw .dropdown-menu .dropdown-menu-item__text{display:flex;align-items:center;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;gap:.75rem}.excalidraw .dropdown-menu .dropdown-menu-item__shortcut{margin-inline-start:auto;opacity:.5}.excalidraw .dropdown-menu .dropdown-menu-item__shortcut--orphaned{text-align:right;font-size:.875rem;padding:0 .625rem}.excalidraw .dropdown-menu .dropdown-menu-item--selected{background:var(--color-primary-light);--icon-fill-color: var(--color-primary-darker)}.excalidraw .dropdown-menu .dropdown-menu-item:hover{background-color:var(--button-hover-bg);text-decoration:none}.excalidraw .dropdown-menu .dropdown-menu-item:active{background-color:var(--button-hover-bg);border-color:var(--color-brand-active)}.excalidraw .dropdown-menu .dropdown-menu-item svg{width:1rem;height:1rem;display:block}.excalidraw .dropdown-menu .dropdown-menu-item-bare{align-items:center;height:2rem;justify-content:space-between}@media screen and (min-width: 1921px){.excalidraw .dropdown-menu .dropdown-menu-item-bare{height:2.25rem}}.excalidraw .dropdown-menu .dropdown-menu-item-bare svg{width:1rem;height:1rem;display:block}.excalidraw .dropdown-menu .dropdown-menu-item-custom{margin-top:.5rem}.excalidraw .dropdown-menu .dropdown-menu-group-title{font-size:14px;text-align:left;margin:10px 0;font-weight:500}.excalidraw .dropdown-menu-button{display:flex;justify-content:center;align-items:center;padding:.625rem;width:var(--button-width, var(--default-button-size));height:var(--button-height, var(--default-button-size));box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--button-border, var(--default-border-color));border-radius:var(--border-radius-lg);cursor:pointer;background-color:var(--button-bg, var(--island-bg-color));color:var(--button-color, var(--color-on-surface));font-family:var(--ui-font);width:var(--lg-button-size);height:var(--lg-button-size);--background: var(--color-surface-mid);background-color:var(--background)}.excalidraw .dropdown-menu-button svg{width:var(--button-width, var(--lg-icon-size));height:var(--button-height, var(--lg-icon-size))}.excalidraw .dropdown-menu-button:hover{background-color:var(--button-hover-bg, var(--island-bg-color));border-color:var(--button-hover-border, var(--button-border, var(--default-border-color)));color:var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)))}.excalidraw .dropdown-menu-button:active{background-color:var(--button-active-bg, var(--island-bg-color));border-color:var(--button-active-border, var(--color-primary-darkest))}.excalidraw .dropdown-menu-button.active{background-color:var(--button-selected-bg, var(--color-surface-primary-container));border-color:var(--button-selected-border, var(--color-surface-primary-container))}.excalidraw .dropdown-menu-button.active:hover{background-color:var(--button-selected-hover-bg, var(--color-surface-primary-container))}.excalidraw .dropdown-menu-button.active svg{color:var(--button-color, var(--color-on-primary-container))}.excalidraw.theme--dark.excalidraw .dropdown-menu-button{--background: var(--color-surface-high)}.excalidraw.theme--dark.excalidraw .dropdown-menu-button:hover{--background: #363541}.excalidraw .dropdown-menu-button:hover{--background: var(--color-surface-high);background-color:var(--background);text-decoration:none}.excalidraw .dropdown-menu-button:active{border-color:var(--color-primary)}.excalidraw .dropdown-menu-button svg{width:var(--lg-icon-size);height:var(--lg-icon-size)}.excalidraw .dropdown-menu-button--mobile{border:none;margin:0;padding:0;width:var(--default-button-size);height:var(--default-button-size)}.excalidraw .library-unit{align-items:center;border:1px solid transparent;display:flex;justify-content:center;position:relative;width:55px;height:55px;box-sizing:border-box;border-radius:var(--border-radius-lg)}.excalidraw .library-unit svg{pointer-events:none}.excalidraw .library-unit--hover{border-color:var(--color-primary)}.excalidraw .library-unit--selected{border-color:var(--color-primary);border-width:1px}.excalidraw .library-unit--skeleton{opacity:.5;background:linear-gradient(-45deg,var(--color-gray-10),var(--color-gray-20),var(--color-gray-10));background-size:200% 200%;animation:library-unit__skeleton-opacity-animation .2s linear}.excalidraw.theme--dark .library-unit--skeleton{background-image:linear-gradient(-45deg,var(--color-gray-100),var(--color-gray-80),var(--color-gray-100))}.excalidraw .library-unit__dragger{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.excalidraw .library-unit__dragger>svg{filter:var(--theme-filter);flex-grow:1;max-height:100%;max-width:100%}.excalidraw .library-unit__checkbox-container,.excalidraw .library-unit__checkbox-container:hover,.excalidraw .library-unit__checkbox-container:active{align-items:center;background:none;border:none;color:var(--icon-fill-color);display:flex;justify-content:center;margin:0;padding:.5rem;position:absolute;left:2rem;bottom:2rem;cursor:pointer}.excalidraw .library-unit__checkbox-container input,.excalidraw .library-unit__checkbox-container:hover input,.excalidraw .library-unit__checkbox-container:active input{cursor:pointer}.excalidraw .library-unit__checkbox{position:absolute;top:.125rem;right:.125rem;margin:0}.excalidraw .library-unit__checkbox .Checkbox-box{margin:0;width:1rem;height:1rem;border-radius:4px;background-color:var(--color-primary-light);border:1px solid var(--color-primary);box-shadow:none!important;padding:2px}.excalidraw .library-unit__checkbox.Checkbox:hover .Checkbox-box{background-color:var(--color-primary-light)}.excalidraw .library-unit__checkbox.is-checked .Checkbox-box{background-color:var(--color-primary)!important}.excalidraw .library-unit__checkbox.is-checked .Checkbox-box svg{color:var(--color-primary-light)}.excalidraw .library-unit__removeFromLibrary>svg{height:16px;width:16px}.excalidraw .library-unit__adder{transform:scale(1);animation:library-unit__adder-animation 1s ease-in infinite;position:absolute;width:1.5rem;height:1.5rem;background-color:var(--color-primary);border-radius:var(--border-radius-md);display:flex;justify-content:center;align-items:center;pointer-events:none}.excalidraw .library-unit__adder svg{color:var(--color-primary-light);width:1rem;height:1rem}.excalidraw .library-unit:active .library-unit__adder{animation:none;transform:scale(.8)}.excalidraw .library-unit__active{cursor:pointer}@keyframes library-unit__adder-animation{0%{transform:scale(.85)}50%{transform:scale(1)}to{transform:scale(.85)}}@keyframes library-unit__skeleton-opacity-animation{0%{opacity:0}75%{opacity:0}to{opacity:.5}}.excalidraw{--container-padding-y: 1.5rem;--container-padding-x: .75rem}.excalidraw .library-menu-items__no-items{text-align:center;color:var(--color-gray-70);line-height:1.5;font-size:.875rem;width:100%}.excalidraw .library-menu-items__no-items__label{color:var(--color-primary);font-weight:700;font-size:1.125rem;margin-bottom:.75rem}.excalidraw.theme--dark .library-menu-items__no-items{color:var(--color-gray-40)}.excalidraw .library-menu-items-container{width:100%;display:flex;flex-grow:1;flex-shrink:1;flex-basis:0;overflow-y:auto;flex-direction:column;height:100%;justify-content:center;margin:0;position:relative}.excalidraw .library-menu-items-container>div{padding-left:.75rem;padding-right:.75rem}.excalidraw .library-menu-items-container__row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.excalidraw .library-menu-items-container__items{row-gap:.5rem;padding:var(--container-padding-y) 0;flex:1;overflow-y:auto;overflow-x:hidden;margin-bottom:1rem}.excalidraw .library-menu-items-container__header{color:var(--color-primary);font-size:1.125rem;font-weight:700;margin-bottom:.75rem;width:100%;padding-right:4rem;box-sizing:border-box}.excalidraw .library-menu-items-container__header--excal{margin-top:2rem}.excalidraw .library-menu-items-container__grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:1rem}.excalidraw .library-menu-items-container .separator{width:100%;display:flex;align-items:center;font-weight:500;font-size:.9rem;margin:.6em .2em;color:var(--text-primary-color)}.excalidraw .library-menu-items-private-library-container{min-height:3.75rem;width:100%}.excalidraw .layer-ui__library{display:flex;flex-direction:column;flex:1 1 auto}.excalidraw .library-actions-counter{background-color:var(--color-primary);color:var(--color-primary-light);font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;position:absolute;bottom:-.25rem;right:-.25rem;font-size:.625rem;pointer-events:none}.excalidraw .layer-ui__library-message{padding:2rem;min-width:200px;display:flex;flex-direction:column;align-items:center;flex-grow:1;justify-content:center}.excalidraw .layer-ui__library-message span{font-size:.8em}.excalidraw .publish-library-success .Dialog__content{display:flex;flex-direction:column}.excalidraw .publish-library-success-close.ToolIcon_type_button{background-color:#228be6;align-self:flex-end}.excalidraw .publish-library-success-close.ToolIcon_type_button:hover{background-color:#1971c2}.excalidraw .publish-library-success-close.ToolIcon_type_button .ToolIcon__icon{width:auto;font-size:1rem;color:#fff;padding:0 .5rem}.excalidraw .library-menu-control-buttons{display:flex;align-items:center;justify-content:center;gap:.625rem;position:relative}.excalidraw .library-menu-control-buttons--at-bottom:before{content:"";width:calc(100% - 1.5rem);height:1px;position:absolute;top:-1px;background:var(--sidebar-border-color)}.excalidraw .library-menu-browse-button{flex:1;height:var(--lg-button-size);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;border-radius:var(--border-radius-lg);background-color:var(--color-primary);color:#fff;text-align:center;white-space:nowrap;text-decoration:none!important;font-weight:600;font-size:.75rem}.excalidraw .library-menu-browse-button:hover{background-color:var(--color-brand-hover)}.excalidraw .library-menu-browse-button:active{background-color:var(--color-brand-active)}.excalidraw.theme--dark .library-menu-browse-button{color:var(--color-gray-100)}.excalidraw.excalidraw--mobile .library-menu-browse-button{height:var(--default-button-size)}.excalidraw .layer-ui__library .dropdown-menu{width:auto;top:initial;right:0;left:initial;bottom:100%;margin-bottom:.625rem}.excalidraw .layer-ui__library .dropdown-menu .dropdown-menu-container{width:196px;box-shadow:var(--library-dropdown-shadow);border-radius:var(--border-radius-lg);padding:.25rem .5rem}.excalidraw .layer-ui__library .library-menu-dropdown-container{position:relative}.excalidraw .layer-ui__library .library-menu-dropdown-container--in-heading{padding:0;position:absolute;top:1rem;right:.75rem;z-index:1}.excalidraw .layer-ui__library .library-menu-dropdown-container--in-heading .dropdown-menu{top:100%}.excalidraw{--ExcTextField--color: var(--color-on-surface);--ExcTextField--label-color: var(--color-on-surface);--ExcTextField--background: var(--color-surface-low);--ExcTextField--readonly--background: var(--color-surface-high);--ExcTextField--readonly--color: var(--color-on-surface);--ExcTextField--border: var(--color-gray-20);--ExcTextField--readonly--border: var(--color-border-outline-variant);--ExcTextField--border-hover: var(--color-brand-hover);--ExcTextField--border-active: var(--color-brand-active);--ExcTextField--placeholder: var(--color-border-outline-variant)}.excalidraw .ExcTextField{position:relative}.excalidraw .ExcTextField svg{position:absolute;top:50%;transform:translateY(-50%);left:.75rem;width:1.25rem;height:1.25rem;color:var(--color-gray-40);z-index:1}.excalidraw .ExcTextField--fullWidth{width:100%;flex-grow:1}.excalidraw .ExcTextField__label{font-family:Assistant;font-style:normal;font-weight:600;font-size:.875rem;line-height:150%;color:var(--ExcTextField--label-color);margin-bottom:.25rem;user-select:none}.excalidraw .ExcTextField__input{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;height:3rem;background:var(--ExcTextField--background);border:1px solid var(--ExcTextField--border);border-radius:.5rem;padding:0 .75rem}.excalidraw .ExcTextField__input:not(.excalidraw .ExcTextField__input--readonly):hover{border-color:var(--ExcTextField--border-hover)}.excalidraw .ExcTextField__input:not(.excalidraw .ExcTextField__input--readonly):active,.excalidraw .ExcTextField__input:not(.excalidraw .ExcTextField__input--readonly):focus-within{border-color:var(--ExcTextField--border-active)}.excalidraw .ExcTextField__input input{display:flex;align-items:center;border:none;outline:none;padding:0;margin:0;height:1.5rem;color:var(--ExcTextField--color);font-family:Assistant;font-style:normal;font-weight:400;font-size:1rem;line-height:150%;text-overflow:ellipsis;background:transparent;width:100%}.excalidraw .ExcTextField__input input:not(:focus):hover{background-color:initial}.excalidraw .ExcTextField__input input:focus{outline:initial;box-shadow:initial}.excalidraw .ExcTextField__input--readonly{background:var(--ExcTextField--readonly--background);border-color:var(--ExcTextField--readonly--border)}.excalidraw .ExcTextField__input--readonly input{color:var(--ExcTextField--readonly--color)}.excalidraw .ExcTextField--hasIcon .ExcTextField__input{padding-left:2.5rem}.excalidraw .excalidraw-button{display:flex;justify-content:center;align-items:center;padding:.625rem;width:var(--button-width, var(--default-button-size));height:var(--button-height, var(--default-button-size));box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--button-border, var(--default-border-color));border-radius:var(--border-radius-lg);cursor:pointer;background-color:var(--button-bg, var(--island-bg-color));color:var(--button-color, var(--color-on-surface));font-family:var(--ui-font)}.excalidraw .excalidraw-button svg{width:var(--button-width, var(--lg-icon-size));height:var(--button-height, var(--lg-icon-size))}.excalidraw .excalidraw-button:hover{background-color:var(--button-hover-bg, var(--island-bg-color));border-color:var(--button-hover-border, var(--button-border, var(--default-border-color)));color:var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)))}.excalidraw .excalidraw-button:active{background-color:var(--button-active-bg, var(--island-bg-color));border-color:var(--button-active-border, var(--color-primary-darkest))}.excalidraw .excalidraw-button.active{background-color:var(--button-selected-bg, var(--color-surface-primary-container));border-color:var(--button-selected-border, var(--color-surface-primary-container))}.excalidraw .excalidraw-button.active:hover{background-color:var(--button-selected-hover-bg, var(--color-surface-primary-container))}.excalidraw .excalidraw-button.active svg{color:var(--button-color, var(--color-on-primary-container))}.zoom-actions,.undo-redo-buttons{background-color:var(--island-bg-color);border-radius:var(--border-radius-lg);box-shadow:0 0 0 1px var(--color-surface-lowest)}.zoom-button,.undo-redo-buttons button{border-radius:0!important;background-color:var(--color-surface-low)!important;font-size:.875rem!important;width:var(--lg-button-size);height:var(--lg-button-size)}.zoom-button svg,.undo-redo-buttons button svg{width:var(--lg-icon-size)!important;height:var(--lg-icon-size)!important}.zoom-button .ToolIcon__icon,.undo-redo-buttons button .ToolIcon__icon{width:100%;height:100%}.reset-zoom-button{border-left:0!important;border-right:0!important;padding:0 .625rem!important;width:3.75rem!important;justify-content:center;color:var(--text-primary-color)}.zoom-out-button{border-top-left-radius:var(--border-radius-lg)!important;border-bottom-left-radius:var(--border-radius-lg)!important}:root[dir=rtl] .zoom-out-button{transform:scaleX(-1)}.zoom-out-button .ToolIcon__icon{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.zoom-in-button{border-top-right-radius:var(--border-radius-lg)!important;border-bottom-right-radius:var(--border-radius-lg)!important}:root[dir=rtl] .zoom-in-button{transform:scaleX(-1)}.zoom-in-button .ToolIcon__icon{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.undo-redo-buttons .undo-button-container button{border-top-left-radius:var(--border-radius-lg)!important;border-bottom-left-radius:var(--border-radius-lg)!important;border-right:0!important}:root[dir=rtl] .undo-redo-buttons .undo-button-container button{transform:scaleX(-1)}.undo-redo-buttons .undo-button-container button .ToolIcon__icon{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.undo-redo-buttons .redo-button-container button{border-top-right-radius:var(--border-radius-lg)!important;border-bottom-right-radius:var(--border-radius-lg)!important}:root[dir=rtl] .undo-redo-buttons .redo-button-container button{transform:scaleX(-1)}.undo-redo-buttons .redo-button-container button .ToolIcon__icon{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.excalidraw .command-palette-dialog{user-select:none}.excalidraw .command-palette-dialog .Modal__content{height:auto;max-height:100%}@media screen and (min-width: 861px){.excalidraw .command-palette-dialog .Modal__content{max-height:750px;height:100%}}.excalidraw .command-palette-dialog .Modal__content .Island{height:100%;padding:1.5rem}.excalidraw .command-palette-dialog .Modal__content .Dialog__content{height:100%;display:flex;flex-direction:column}.excalidraw .command-palette-dialog .shortcuts-wrapper{display:flex;justify-content:center;align-items:center;margin-top:12px;gap:1.5rem}.excalidraw .command-palette-dialog .shortcut{display:flex;justify-content:center;align-items:center;height:16px;font-size:10px;gap:.25rem}.excalidraw .command-palette-dialog .shortcut .shortcut-wrapper{display:flex}.excalidraw .command-palette-dialog .shortcut .shortcut-plus{margin:0 4px}.excalidraw .command-palette-dialog .shortcut .shortcut-key{padding:0 4px;height:16px;border-radius:4px;display:flex;justify-content:center;align-items:center;background-color:var(--color-primary-light)}.excalidraw .command-palette-dialog .shortcut .shortcut-desc{margin-left:4px;color:var(--color-gray-50)}.excalidraw .command-palette-dialog .commands{overflow-y:auto;box-sizing:border-box;margin-top:12px;color:var(--popup-text-color);user-select:none}.excalidraw .command-palette-dialog .commands .command-category{display:flex;flex-direction:column;padding:12px 0;margin-right:.25rem}.excalidraw .command-palette-dialog .commands .command-category-title{font-size:1rem;font-weight:600;margin-bottom:6px;display:flex;align-items:center}.excalidraw .command-palette-dialog .commands .command-item{color:var(--popup-text-color);height:2.5rem;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:0 .5rem;border-radius:var(--border-radius-lg);cursor:pointer}.excalidraw .command-palette-dialog .commands .command-item:active{background-color:var(--color-surface-low)}.excalidraw .command-palette-dialog .commands .command-item .name{display:flex;align-items:center;gap:.25rem}.excalidraw .command-palette-dialog .commands .item-selected{background-color:var(--color-surface-mid)}.excalidraw .command-palette-dialog .commands .item-disabled{opacity:.3;cursor:not-allowed}.excalidraw .command-palette-dialog .commands .no-match{display:flex;justify-content:center;align-items:center;margin-top:36px}.excalidraw .command-palette-dialog .icon{width:16px;height:16px;margin-right:6px}.excalidraw .popover{position:absolute;z-index:10;padding:5px 0;outline:none}.excalidraw .context-menu{position:relative;border-radius:4px;box-shadow:0 3px 10px #0003;padding:0;list-style:none;user-select:none;margin:-.25rem 0 0 .125rem;padding:.5rem 0;background-color:var(--popup-secondary-bg-color);border:1px solid var(--button-gray-3);cursor:default}.excalidraw .context-menu button{color:var(--popup-text-color)}.excalidraw .context-menu-item{position:relative;width:100%;min-width:9.5rem;margin:0;padding:.25rem 1rem .25rem 1.25rem;text-align:start;border-radius:0;background-color:transparent;border:none;white-space:nowrap;font-family:inherit;display:grid;grid-template-columns:1fr .2fr;align-items:center}.excalidraw .context-menu-item.checkmark:before{position:absolute;left:6px;margin-bottom:1px;content:"\2713"}.excalidraw .context-menu-item.dangerous .context-menu-item__label{color:#f03e3e}.excalidraw .context-menu-item .context-menu-item__label{justify-self:start;margin-inline-end:20px}.excalidraw .context-menu-item .context-menu-item__shortcut{justify-self:end;opacity:.6;font-family:inherit;font-size:.7rem}.excalidraw .context-menu-item:hover{color:var(--popup-bg-color);background-color:var(--select-highlight-color)}.excalidraw .context-menu-item:hover.dangerous{background-color:#fa5252}.excalidraw .context-menu-item:hover.dangerous .context-menu-item__label{color:var(--popup-bg-color)}.excalidraw .context-menu-item:focus{z-index:1}.excalidraw--mobile.excalidraw .context-menu-item{display:block}.excalidraw--mobile.excalidraw .context-menu-item .context-menu-item__label{margin-inline-end:0}.excalidraw--mobile.excalidraw .context-menu-item .context-menu-item__shortcut{display:none}.excalidraw .context-menu-item-separator{border:none;border-top:1px solid #adb5bd}.excalidraw{--RadioGroup-background: var(--island-bg-color);--RadioGroup-border: var(--color-surface-high);--RadioGroup-choice-color-off: var(--color-primary);--RadioGroup-choice-color-off-hover: var(--color-brand-hover);--RadioGroup-choice-background-off: var(--island-bg-color);--RadioGroup-choice-background-off-active: var(--color-surface-high);--RadioGroup-choice-color-on: var(--color-surface-lowest);--RadioGroup-choice-background-on: var(--color-primary);--RadioGroup-choice-background-on-hover: var(--color-brand-hover);--RadioGroup-choice-background-on-active: var(--color-brand-active)}.excalidraw .RadioGroup{box-sizing:border-box;display:flex;flex-direction:row;align-items:flex-start;padding:3px;border-radius:10px;background:var(--RadioGroup-background);border:1px solid var(--RadioGroup-border)}.excalidraw .RadioGroup__choice{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:24px;color:var(--RadioGroup-choice-color-off);background:var(--RadioGroup-choice-background-off);border-radius:8px;font-family:Assistant;font-style:normal;font-weight:600;font-size:.75rem;line-height:100%;user-select:none;letter-spacing:.4px;transition:all 75ms ease-out}.excalidraw .RadioGroup__choice:hover{color:var(--RadioGroup-choice-color-off-hover)}.excalidraw .RadioGroup__choice:active{background:var(--RadioGroup-choice-background-off-active)}.excalidraw .RadioGroup__choice.active{color:var(--RadioGroup-choice-color-on);background:var(--RadioGroup-choice-background-on)}.excalidraw .RadioGroup__choice.active:hover{background:var(--RadioGroup-choice-background-on-hover)}.excalidraw .RadioGroup__choice.active:active{background:var(--RadioGroup-choice-background-on-active)}.excalidraw .RadioGroup__choice input{z-index:1;position:absolute;width:100%;height:100%;margin:0;padding:0;border-radius:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.excalidraw{--Switch-disabled-color: var(--color-border-outline);--Switch-disabled-toggled-background: var(--color-border-outline-variant);--Switch-disabled-border: var(--color-border-outline-variant);--Switch-track-background: var(--island-bg-color);--Switch-thumb-background: var(--color-on-surface);--Switch-hover-background: var(--color-brand-hover);--Switch-active-background: var(--color-brand-active)}.excalidraw .Switch{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:12px;transition-property:background,border;transition-duration:.15s;transition-timing-function:ease-out;background:var(--Switch-track-background);border:1px solid var(--Switch-disabled-color)}.excalidraw .Switch:hover{background:var(--Switch-track-background);border:1px solid var(--Switch-hover-background)}.excalidraw .Switch:active{border:1px solid var(--Switch-active-background)}.excalidraw .Switch.toggled{background:var(--color-primary);border:1px solid var(--color-primary)}.excalidraw .Switch.toggled:hover{background:var(--color-primary-darker);border:1px solid var(--color-primary-darker)}.excalidraw .Switch.disabled{background:var(--Switch-track-background);border:1px solid var(--Switch-disabled-border)}.excalidraw .Switch.disabled.toggled{background:var(--Switch-disabled-toggled-background);border:1px solid var(--Switch-disabled-toggled-background)}.excalidraw .Switch:before{content:"";box-sizing:border-box;display:block;pointer-events:none;position:absolute;border-radius:100%;transition:all .15s ease-out;width:10px;height:10px;top:4px;left:4px;background:var(--Switch-thumb-background)}.excalidraw .Switch:active:before{width:12px}.excalidraw .Switch.toggled:before{width:14px;height:14px;left:22px;top:2px;background:var(--Switch-track-background)}.excalidraw .Switch.toggled:active:before{width:16px;left:20px}.excalidraw .Switch.disabled:before{background:var(--Switch-disabled-color)}.excalidraw .Switch.disabled.toggled:before{background:var(--Switch-disabled-color)}.excalidraw .Switch input{width:100%;height:100%;margin:0;border-radius:12px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.excalidraw .Switch input:disabled{cursor:unset}.excalidraw{--ImageExportModal-preview-border: #d6d6d6}.excalidraw.theme--dark{--ImageExportModal-preview-border: #5c5c5c}.excalidraw .ImageExportModal{display:flex;flex-direction:row;justify-content:space-between;user-select:none}.excalidraw .ImageExportModal h3{font-family:Assistant;font-style:normal;font-weight:700;font-size:1.313rem;line-height:130%;padding:0;margin:0}.excalidraw--mobile.excalidraw .ImageExportModal h3{display:none}.excalidraw .ImageExportModal>h3{display:none}.excalidraw--mobile.excalidraw .ImageExportModal>h3{display:block}.excalidraw--mobile.excalidraw .ImageExportModal{flex-direction:column;height:calc(100vh - 5rem)}.excalidraw .ImageExportModal__preview{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;height:360px;width:55%;margin-right:1.5rem}.excalidraw--mobile.excalidraw .ImageExportModal__preview{max-width:unset;margin-right:unset;width:100%;height:unset;flex-grow:1}.excalidraw .ImageExportModal__preview__filename>input{margin-top:1rem}.excalidraw .ImageExportModal__preview__canvas{box-sizing:border-box;width:100%;height:100%;display:flex;flex-grow:1;justify-content:center;align-items:center;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;border:1px solid var(--ImageExportModal-preview-border);border-radius:12px;overflow:hidden;padding:1rem}.excalidraw .ImageExportModal__preview__canvas>canvas{max-width:calc(100% - 2rem);max-height:calc(100% - 2rem);filter:none!important}.excalidraw--mobile.excalidraw .ImageExportModal__preview__canvas>canvas{max-height:100%}.excalidraw--mobile.excalidraw .ImageExportModal__preview__canvas{margin-top:24px;max-width:unset}.excalidraw .ImageExportModal__settings{display:flex;flex-direction:column;flex-wrap:wrap;gap:18px}.excalidraw--mobile.excalidraw .ImageExportModal__settings{margin-left:unset;margin-top:1rem;flex-direction:row;gap:6px 34px;align-content:flex-start}.excalidraw .ImageExportModal__settings__setting{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.excalidraw--mobile.excalidraw .ImageExportModal__settings__setting{flex-direction:column;align-items:start;justify-content:unset;height:52px}.excalidraw .ImageExportModal__settings__setting__label{display:flex;flex-direction:row;align-items:center;font-family:Assistant;font-weight:600;font-size:1rem;line-height:150%}.excalidraw .ImageExportModal__settings__setting__label svg{width:20px;height:20px;margin-left:10px}.excalidraw .ImageExportModal__settings__setting__content{display:flex;height:100%;align-items:center}.excalidraw .ImageExportModal__settings__buttons{flex-grow:1;flex-wrap:wrap;display:flex;flex-direction:row;gap:11px;align-items:flex-end;align-content:flex-end}.excalidraw--mobile.excalidraw .ImageExportModal__settings__buttons{padding-top:32px;flex-basis:100%;justify-content:center}@keyframes successStatusAnimation{0%{transform:scale(.35)}50%{transform:scale(1.25)}to{transform:scale(1)}}.excalidraw .ExcButton{--text-color: transparent;--border-color: transparent;--back-color: transparent;color:var(--text-color);background-color:var(--back-color);border-color:var(--border-color);border-radius:.5rem;border-width:1px;border-style:solid;font-family:var(--font-family);user-select:none}.excalidraw .ExcButton:hover{transition:all .15s ease-out}.excalidraw .ExcButton .Spinner{--spinner-color: var(--color-surface-lowest)}.excalidraw .ExcButton .ExcButton__statusIcon{visibility:visible;position:absolute;width:1.2rem;height:1.2rem;animation:successStatusAnimation .5s cubic-bezier(.3,1,.6,1)}.excalidraw .ExcButton.ExcButton--status-loading,.excalidraw .ExcButton.ExcButton--status-success{pointer-events:none}.excalidraw .ExcButton.ExcButton--status-loading .ExcButton__contents,.excalidraw .ExcButton.ExcButton--status-success .ExcButton__contents{visibility:hidden}.excalidraw .ExcButton[disabled]{pointer-events:none}.excalidraw .ExcButton,.excalidraw .ExcButton__contents{display:flex;justify-content:center;align-items:center;flex-shrink:0;flex-wrap:nowrap;position:relative}.excalidraw .ExcButton--color-primary.ExcButton--variant-filled{--text-color: var(--color-surface-lowest);--back-color: var(--color-primary)}.excalidraw .ExcButton--color-primary.ExcButton--variant-filled .Spinner{--spinner-color: var(--text-color)}.excalidraw .ExcButton--color-primary.ExcButton--variant-filled:hover{--back-color: var(--color-brand-hover)}.excalidraw .ExcButton--color-primary.ExcButton--variant-filled:active{--back-color: var(--color-brand-active)}.excalidraw .ExcButton--color-primary.ExcButton--variant-outlined,.excalidraw .ExcButton--color-primary.ExcButton--variant-icon{--text-color: var(--color-primary);--border-color: var(--color-primary);--back-color: transparent}.excalidraw .ExcButton--color-primary.ExcButton--variant-outlined .Spinner,.excalidraw .ExcButton--color-primary.ExcButton--variant-icon .Spinner{--spinner-color: var(--text-color)}.excalidraw .ExcButton--color-primary.ExcButton--variant-outlined:hover,.excalidraw .ExcButton--color-primary.ExcButton--variant-icon:hover{--text-color: var(--color-brand-hover);--border-color: var(--color-brand-hover)}.excalidraw .ExcButton--color-primary.ExcButton--variant-outlined:active,.excalidraw .ExcButton--color-primary.ExcButton--variant-icon:active{--text-color: var(--color-brand-active);--border-color: var(--color-brand-active)}.excalidraw .ExcButton--color-danger.ExcButton--variant-filled{--text-color: var(--color-danger-text);--back-color: var(--color-danger-dark)}.excalidraw .ExcButton--color-danger.ExcButton--variant-filled .Spinner{--spinner-color: var(--text-color)}.excalidraw .ExcButton--color-danger.ExcButton--variant-filled:hover{--back-color: var(--color-danger-darker)}.excalidraw .ExcButton--color-danger.ExcButton--variant-filled:active{--back-color: var(--color-danger-darkest)}.excalidraw .ExcButton--color-danger.ExcButton--variant-outlined,.excalidraw .ExcButton--color-danger.ExcButton--variant-icon{--text-color: var(--color-danger);--border-color: var(--color-danger);--back-color: transparent}.excalidraw .ExcButton--color-danger.ExcButton--variant-outlined .Spinner,.excalidraw .ExcButton--color-danger.ExcButton--variant-icon .Spinner{--spinner-color: var(--text-color)}.excalidraw .ExcButton--color-danger.ExcButton--variant-outlined:hover,.excalidraw .ExcButton--color-danger.ExcButton--variant-icon:hover{--text-color: var(--color-danger-darkest);--border-color: var(--color-danger-darkest)}.excalidraw .ExcButton--color-danger.ExcButton--variant-outlined:active,.excalidraw .ExcButton--color-danger.ExcButton--variant-icon:active{--text-color: var(--color-danger-darker);--border-color: var(--color-danger-darker)}.excalidraw .ExcButton--color-success.ExcButton--variant-filled{--text-color: var(--color-success-text);--back-color: var(--color-success)}.excalidraw .ExcButton--color-success.ExcButton--variant-filled .Spinner{--spinner-color: var(--color-success)}.excalidraw .ExcButton--color-success.ExcButton--variant-filled:hover{--back-color: var(--color-success-darker)}.excalidraw .ExcButton--color-success.ExcButton--variant-filled:active{--back-color: var(--color-success-darkest)}.excalidraw .ExcButton--color-success.ExcButton--variant-outlined,.excalidraw .ExcButton--color-success.ExcButton--variant-icon{--text-color: var(--color-success-contrast);--border-color: var(--color-success-contrast);--back-color: transparent}.excalidraw .ExcButton--color-success.ExcButton--variant-outlined .Spinner,.excalidraw .ExcButton--color-success.ExcButton--variant-icon .Spinner{--spinner-color: var(--color-success-contrast)}.excalidraw .ExcButton--color-success.ExcButton--variant-outlined:hover,.excalidraw .ExcButton--color-success.ExcButton--variant-icon:hover{--text-color: var(--color-success-contrast-hover);--border-color: var(--color-success-contrast-hover)}.excalidraw .ExcButton--color-success.ExcButton--variant-outlined:active,.excalidraw .ExcButton--color-success.ExcButton--variant-icon:active{--text-color: var(--color-success-contrast-active);--border-color: var(--color-success-contrast-active)}.excalidraw .ExcButton--color-muted.ExcButton--variant-filled{--text-color: var(--island-bg-color);--back-color: var(--color-gray-50)}.excalidraw .ExcButton--color-muted.ExcButton--variant-filled .Spinner{--spinner-color: var(--text-color)}.excalidraw .ExcButton--color-muted.ExcButton--variant-filled:hover{--back-color: var(--color-gray-60)}.excalidraw .ExcButton--color-muted.ExcButton--variant-filled:active{--back-color: var(--color-gray-80)}.excalidraw .ExcButton--color-muted.ExcButton--variant-outlined,.excalidraw .ExcButton--color-muted.ExcButton--variant-icon{--text-color: var(--color-muted-background);--border-color: var(--color-muted);--back-color: var(--island-bg-color)}.excalidraw .ExcButton--color-muted.ExcButton--variant-outlined .Spinner,.excalidraw .ExcButton--color-muted.ExcButton--variant-icon .Spinner{--spinner-color: var(--text-color)}.excalidraw .ExcButton--color-muted.ExcButton--variant-outlined:hover,.excalidraw .ExcButton--color-muted.ExcButton--variant-icon:hover{--text-color: var(--color-muted-background-darker);--border-color: var(--color-muted-darker)}.excalidraw .ExcButton--color-muted.ExcButton--variant-outlined:active,.excalidraw .ExcButton--color-muted.ExcButton--variant-icon:active{--text-color: var(--color-muted-background-darker);--border-color: var(--color-muted-darkest)}.excalidraw .ExcButton--color-warning.ExcButton--variant-filled{--text-color: black;--back-color: var(--color-warning-dark)}.excalidraw .ExcButton--color-warning.ExcButton--variant-filled .Spinner{--spinner-color: var(--text-color)}.excalidraw .ExcButton--color-warning.ExcButton--variant-filled:hover{--back-color: var(--color-warning-darker)}.excalidraw .ExcButton--color-warning.ExcButton--variant-filled:active{--back-color: var(--color-warning-darkest)}.excalidraw .ExcButton--color-warning.ExcButton--variant-outlined,.excalidraw .ExcButton--color-warning.ExcButton--variant-icon{--text-color: var(--color-warning-dark);--border-color: var(--color-warning-dark);--back-color: var(--input-bg-color)}.excalidraw .ExcButton--color-warning.ExcButton--variant-outlined .Spinner,.excalidraw .ExcButton--color-warning.ExcButton--variant-icon .Spinner{--spinner-color: var(--text-color)}.excalidraw .ExcButton--color-warning.ExcButton--variant-outlined:hover,.excalidraw .ExcButton--color-warning.ExcButton--variant-icon:hover{--text-color: var(--color-warning-darker);--border-color: var(--color-warning-darker)}.excalidraw .ExcButton--color-warning.ExcButton--variant-outlined:active,.excalidraw .ExcButton--color-warning.ExcButton--variant-icon:active{--text-color: var(--color-warning-darkest);--border-color: var(--color-warning-darkest)}.excalidraw .ExcButton--size-large{font-weight:600;font-size:.875rem;min-height:3rem;padding:.5rem 1.5rem;letter-spacing:.4px}.excalidraw .ExcButton--size-large .ExcButton__contents{gap:.75rem}.excalidraw .ExcButton--size-medium{font-weight:600;font-size:.75rem;min-height:2.5rem;padding:.5rem 1rem;letter-spacing:normal}.excalidraw .ExcButton--size-medium .ExcButton__contents{gap:.5rem}.excalidraw .ExcButton--variant-icon{padding:.5rem .75rem;width:3rem}.excalidraw .ExcButton--fullWidth{width:100%}.excalidraw .ExcButton__icon{width:1.25rem;height:1.25rem}.excalidraw .FixedSideContainer{position:absolute;pointer-events:none}.excalidraw .FixedSideContainer>*{pointer-events:var(--ui-pointerEvents)}.excalidraw .FixedSideContainer_side_top{left:var(--editor-container-padding);top:var(--editor-container-padding);right:var(--editor-container-padding);bottom:var(--editor-container-padding)}.excalidraw .FixedSideContainer_side_top.zen-mode{right:42px}.excalidraw .HintViewer{pointer-events:none;box-sizing:border-box;position:absolute;display:flex;flex-direction:column;justify-content:center;left:0;top:100%;max-width:100%;width:100%;margin-top:.5rem;text-align:center;color:var(--color-gray-40);font-size:.75rem}.excalidraw--mobile.excalidraw .HintViewer{position:static;padding-right:2rem}.excalidraw .HintViewer>span{padding:.25rem}.excalidraw.theme--dark .HintViewer{color:var(--color-gray-60)}.excalidraw--mobile.excalidraw .PasteChartDialog .Island{display:flex;flex-direction:column}.excalidraw .PasteChartDialog .container{display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap}.excalidraw--mobile.excalidraw .PasteChartDialog .container{flex-direction:column;justify-content:center}.excalidraw .PasteChartDialog .ChartPreview{margin:8px;text-align:center;width:192px;height:128px;border-radius:2px;padding:1px;border:1px solid #ced4da;display:flex;align-items:center;justify-content:center;background:transparent}.excalidraw .PasteChartDialog .ChartPreview div{display:inline-block}.excalidraw .PasteChartDialog .ChartPreview svg{max-height:120px;max-width:186px}.excalidraw .PasteChartDialog .ChartPreview:hover{padding:0;border:2px solid #339af0}.excalidraw .HelpDialog .Modal__content{max-width:960px}.excalidraw .HelpDialog h3{margin:1.5rem 0;font-weight:700;font-size:1.125rem}.excalidraw .HelpDialog__header{display:flex;flex-wrap:wrap;gap:.75rem}.excalidraw .HelpDialog__btn{--background: var(--color-surface-mid);display:flex;column-gap:.5rem;align-items:center;background-color:var(--background);padding:.625rem 1rem;border:1px solid var(--background);border-radius:var(--border-radius-lg);color:var(--text-primary-color);font-weight:600;font-size:.75rem;letter-spacing:.4px}.excalidraw.theme--dark.excalidraw .HelpDialog__btn{--background: var(--color-surface-high)}.excalidraw.theme--dark.excalidraw .HelpDialog__btn:hover{--background: #363541}.excalidraw .HelpDialog__btn:hover{--background: var(--color-surface-high);text-decoration:none}.excalidraw .HelpDialog__btn:active{border-color:var(--color-primary)}.excalidraw .HelpDialog__link-icon{line-height:0}.excalidraw .HelpDialog__link-icon svg{width:1rem;height:1rem}.excalidraw .HelpDialog__islands-container{display:grid;grid-column-gap:1.5rem;grid-row-gap:2rem}@media screen and (min-width: 1024px){.excalidraw .HelpDialog__islands-container{grid-template-columns:1fr 1fr}}@media screen and (min-width: 1024px){.excalidraw .HelpDialog__island--tools{grid-area:1/1/2/2}.excalidraw .HelpDialog__island--view{grid-area:2/1/3/2}.excalidraw .HelpDialog__island--editor{grid-area:1/2/3/3}}.excalidraw .HelpDialog__island h4{font-size:1rem;font-weight:700;margin:0;margin-bottom:.625rem}.excalidraw .HelpDialog__island-content{border:1px solid var(--dialog-border-color);border-radius:var(--border-radius-lg)}.excalidraw .HelpDialog__shortcut{border-bottom:1px solid var(--dialog-border-color);padding:.375rem .75rem;display:flex;justify-content:space-between;align-items:center;font-size:.875rem;column-gap:.5rem}.excalidraw .HelpDialog__shortcut:last-child{border-bottom:none}.excalidraw .HelpDialog__key-container{display:flex;align-items:center;column-gap:.25rem;flex-shrink:0}.excalidraw .HelpDialog__key{display:flex;box-sizing:border-box;font-size:.625rem;background-color:var(--color-primary-light);border-radius:var(--border-radius-md);padding:.5rem;word-break:keep-all;align-items:center;font-family:inherit;line-height:1}.excalidraw{--avatar-size: 1.75rem;--avatarList-gap: .625rem;--userList-padding: var(--space-factor);--userlist-hint-bg-color: var(--color-gray-10);--userlist-hint-heading-color: var(--color-gray-80);--userlist-hint-text-color: var(--color-gray-60);--userlist-collaborators-border-color: var(--color-gray-20)}.excalidraw .UserList__wrapper{display:flex;width:100%;justify-content:flex-end;align-items:center;pointer-events:none!important}.excalidraw .UserList{pointer-events:none;padding:var(--userList-padding);display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--avatarList-gap);box-sizing:border-box;--max-size: calc( var(--avatar-size) * var(--max-avatars, 2) + var(--avatarList-gap) * (var(--max-avatars, 2) - 1) + var(--userList-padding) * 2 );max-height:var(--max-size);max-width:var(--max-size)}.excalidraw .UserList>*{pointer-events:var(--ui-pointerEvents)}.excalidraw .UserList_mobile{padding:0;justify-content:normal;margin:.5rem 0;max-width:none;max-height:none}.excalidraw .UserList__more{width:var(--avatar-size, 1.5rem);height:var(--avatar-size, 1.5rem);position:relative;border-radius:100%;outline-offset:2px;display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:.75rem;line-height:1;color:var(--color-gray-90);flex:0 0 auto;background-color:var(--color-gray-20);border:0!important;font-size:.625rem;font-weight:400;flex-shrink:0;color:var(--color-gray-100);font-weight:700}.excalidraw .UserList__more:active{transform:scale(.94)}.excalidraw .UserList__more-img{width:100%;height:100%;border-radius:100%}.excalidraw .UserList__more:before{content:"";position:absolute;inset:-3px;border-radius:100%}.excalidraw .UserList__more.is-followed:before{border-color:var(--color-primary-hover);box-shadow:0 0 0 1px var(--color-primary-hover)}.excalidraw .UserList__more.is-current-user{cursor:auto}.excalidraw .UserList__collaborator-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.excalidraw .UserList__collaborator--avatar-only{position:relative;display:flex;flex:0 0 auto}.excalidraw .UserList__collaborator--avatar-only .UserList__collaborator-status-icon{--size: 14px;position:absolute;display:flex;flex:0 0 auto;bottom:-.25rem;right:-.25rem;width:var(--size);height:var(--size)}.excalidraw .UserList__collaborator--avatar-only .UserList__collaborator-status-icon svg{flex:0 0 auto;width:var(--size);height:var(--size)}.excalidraw .UserList__collaborator-status-icons{margin-left:auto;flex:0 0 auto;min-width:2.25rem;gap:.25rem;justify-content:flex-end;display:flex}.excalidraw .UserList__collaborator.is-muted .UserList__collaborator-status-icon-microphone-muted{color:var(--color-danger);filter:drop-shadow(0px 0px 0px rgba(0,0,0,.5))}.excalidraw .UserList__collaborator-status-icon-speaking-indicator{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;width:1rem;padding:0 3px;box-sizing:border-box}.excalidraw .UserList__collaborator-status-icon-speaking-indicator div{width:.125rem;height:.4rem;background-color:#a2f1a6}.excalidraw .UserList__collaborator-status-icon-speaking-indicator div:nth-of-type(1){animation:speaking-indicator-anim 1s -.45s ease-in-out infinite}.excalidraw .UserList__collaborator-status-icon-speaking-indicator div:nth-of-type(2){animation:speaking-indicator-anim 1s -.9s ease-in-out infinite}.excalidraw .UserList__collaborator-status-icon-speaking-indicator div:nth-of-type(3){animation:speaking-indicator-anim 1s -.15s ease-in-out infinite}@keyframes speaking-indicator-anim{0%,to{transform:scaleY(1)}50%{transform:scaleY(2)}}.excalidraw.theme--dark{--userlist-hint-bg-color: var(--color-gray-90);--userlist-hint-heading-color: var(--color-gray-30);--userlist-hint-text-color: var(--color-gray-40);--userlist-collaborators-border-color: var(--color-gray-80)}.excalidraw .UserList__collaborators{top:auto;max-height:50vh}.excalidraw .Card{display:flex;flex-direction:column;align-items:center;max-width:290px;margin:1em;text-align:center}.excalidraw .Card .Card-icon{font-size:2.6em;display:flex;flex:0 0 auto;padding:1.4rem;border-radius:50%;background:var(--card-color);color:#fff}.excalidraw .Card .Card-icon svg{width:2.8rem;height:2.8rem}.excalidraw .Card .Card-details{font-size:.96em;min-height:90px;padding:0 1em;margin-bottom:auto}.excalidraw .Card .Card-button.ToolIcon_type_button{height:2.5rem;margin-top:1em;margin-bottom:.3em;background-color:var(--card-color)}.excalidraw .Card .Card-button.ToolIcon_type_button:hover{background-color:var(--card-color-darker)}.excalidraw .Card .Card-button.ToolIcon_type_button:active{background-color:var(--card-color-darkest)}.excalidraw .Card .Card-button.ToolIcon_type_button .ToolIcon__label{color:#fff}.excalidraw .Card .Card-button.ToolIcon_type_button .Spinner{--spinner-color: #fff}.excalidraw .ExportDialog__preview{--preview-padding: calc(var(--space-factor) * 4);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;text-align:center;padding:var(--preview-padding);margin-bottom:calc(var(--space-factor) * 3);display:flex;justify-content:center;align-items:center}.excalidraw .ExportDialog__preview canvas{max-width:calc(100% - var(--preview-padding) * 2);max-height:25rem}.excalidraw.theme--dark .ExportDialog__preview canvas{filter:none}.excalidraw .ExportDialog__actions{width:100%;display:flex;grid-gap:calc(var(--space-factor) * 2);align-items:top;justify-content:space-between}.excalidraw--mobile.excalidraw .ExportDialog{display:flex;flex-direction:column}.excalidraw--mobile.excalidraw .ExportDialog__actions{flex-direction:column;align-items:center}.excalidraw--mobile.excalidraw .ExportDialog__actions>*{margin-bottom:calc(var(--space-factor) * 3)}.excalidraw--mobile.excalidraw .ExportDialog__preview canvas{max-height:30vh}.excalidraw--mobile.excalidraw .ExportDialog__dialog,.excalidraw--mobile.excalidraw .ExportDialog__dialog .Island{height:100%;box-sizing:border-box}.excalidraw--mobile.excalidraw .ExportDialog__dialog .Island{overflow-y:auto}.excalidraw .ExportDialog--json .ExportDialog-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));justify-items:center;row-gap:2em}@media (max-width: 460px){.excalidraw .ExportDialog--json .ExportDialog-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.excalidraw .ExportDialog--json .ExportDialog-cards .Card-details{min-height:40px}}.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName{width:fit-content;margin:1em auto;align-items:flex-start;flex-direction:column}.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName .TextInput{width:auto}.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName-label{margin:.625em 0;font-weight:700}.excalidraw button.ExportDialog-imageExportButton{border:0;width:5rem;height:5rem;margin:0 .2em;padding:0;display:flex;align-items:center;justify-content:center;border-radius:1rem;background-color:var(--button-color);box-shadow:0 3px 5px -1px #00000047,0 6px 10px #00000024;font-family:Cascadia;font-size:1.8em;color:#fff}.excalidraw button.ExportDialog-imageExportButton:hover{background-color:var(--button-color-darker)}.excalidraw button.ExportDialog-imageExportButton:active{background-color:var(--button-color-darkest);box-shadow:none}.excalidraw button.ExportDialog-imageExportButton svg{width:.9em}.excalidraw .sidebar-trigger{justify-content:center;padding:.625rem;width:var(--button-width, var(--default-button-size));height:var(--button-height, var(--default-button-size));box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--button-border, var(--default-border-color));border-radius:var(--border-radius-lg);cursor:pointer;background-color:var(--button-bg, var(--island-bg-color));color:var(--button-color, var(--color-on-surface));font-family:var(--ui-font);border:none;box-shadow:0 0 0 1px var(--color-surface-lowest);background-color:var(--color-surface-low);width:auto;height:var(--lg-button-size);display:flex;align-items:center;gap:.5rem;line-height:0;font-size:.75rem;letter-spacing:.4px}.excalidraw .sidebar-trigger svg{width:var(--button-width, var(--lg-icon-size));height:var(--button-height, var(--lg-icon-size))}.excalidraw .sidebar-trigger:hover{background-color:var(--button-hover-bg, var(--island-bg-color));border-color:var(--button-hover-border, var(--button-border, var(--default-border-color)));color:var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)))}.excalidraw .sidebar-trigger:active{background-color:var(--button-active-bg, var(--island-bg-color));border-color:var(--button-active-border, var(--color-primary-darkest))}.excalidraw .sidebar-trigger.active{background-color:var(--button-selected-bg, var(--color-surface-primary-container));border-color:var(--button-selected-border, var(--color-surface-primary-container))}.excalidraw .sidebar-trigger.active:hover{background-color:var(--button-selected-hover-bg, var(--color-surface-primary-container))}.excalidraw .sidebar-trigger.active svg{color:var(--button-color, var(--color-on-primary-container))}.excalidraw .sidebar-trigger:active{box-shadow:0 0 0 1px var(--color-brand-active)}.excalidraw .sidebar-trigger svg{width:var(--lg-icon-size);height:var(--lg-icon-size)}.excalidraw .sidebar-trigger__label-element{align-self:flex-start}.excalidraw .default-sidebar-trigger .sidebar-trigger__label{display:block;white-space:nowrap}.excalidraw.excalidraw--mobile .default-sidebar-trigger .sidebar-trigger__label{display:none}.excalidraw .sidebar{display:flex;flex-direction:column;position:absolute;top:0;bottom:0;right:0;z-index:5;margin:0;padding:0;box-sizing:border-box;background-color:var(--sidebar-bg-color);box-shadow:var(--sidebar-shadow);pointer-events:var(--ui-pointerEvents);overflow:hidden;border-radius:0;width:calc(var(--right-sidebar-width) - var(--space-factor) * 2);border-left:1px solid var(--sidebar-border-color)}:root[dir=rtl] .excalidraw .sidebar{left:0;right:auto}.excalidraw .sidebar--docked{box-shadow:none}:root[dir=rtl] .excalidraw .sidebar{border-right:1px solid var(--sidebar-border-color);border-left:0}.excalidraw .sidebar__header{box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem .75rem;position:relative}.excalidraw .sidebar__header:after{content:"";width:calc(100% - 1.5rem);height:1px;background:var(--sidebar-border-color);position:absolute;bottom:-1px}.excalidraw .sidebar__header__buttons{gap:0;display:flex;align-items:center;margin-left:auto}.excalidraw .sidebar__header__buttons button{display:flex;justify-content:center;align-items:center;padding:.625rem;width:var(--button-width, var(--default-button-size));height:var(--button-height, var(--default-button-size));box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--button-border, var(--default-border-color));border-radius:var(--border-radius-lg);cursor:pointer;background-color:var(--button-bg, var(--island-bg-color));color:var(--button-color, var(--color-on-surface));font-family:var(--ui-font);--button-bg: transparent;border:0!important;width:var(--lg-button-size);height:var(--lg-button-size);padding:0}.excalidraw .sidebar__header__buttons button svg{width:var(--button-width, var(--lg-icon-size));height:var(--button-height, var(--lg-icon-size))}.excalidraw .sidebar__header__buttons button:hover{background-color:var(--button-hover-bg, var(--island-bg-color));border-color:var(--button-hover-border, var(--button-border, var(--default-border-color)));color:var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)))}.excalidraw .sidebar__header__buttons button:active{background-color:var(--button-active-bg, var(--island-bg-color));border-color:var(--button-active-border, var(--color-primary-darkest))}.excalidraw .sidebar__header__buttons button.active{background-color:var(--button-selected-bg, var(--color-surface-primary-container));border-color:var(--button-selected-border, var(--color-surface-primary-container))}.excalidraw .sidebar__header__buttons button.active:hover{background-color:var(--button-selected-hover-bg, var(--color-surface-primary-container))}.excalidraw .sidebar__header__buttons button.active svg{color:var(--button-color, var(--color-on-primary-container))}.excalidraw .sidebar__header__buttons button svg{width:var(--lg-icon-size);height:var(--lg-icon-size)}.excalidraw .sidebar__header__buttons button:hover{background:var(--button-hover-bg, var(--island-bg-color))}.excalidraw .sidebar__header__buttons .sidebar__dock.selected svg{stroke:var(--color-primary);fill:var(--color-primary)}.excalidraw .sidebar-tabs-root{display:flex;flex-direction:column;flex:1 1 auto;padding:1rem 0}.excalidraw .sidebar-tabs-root [role=tabpanel]{flex:1;flex:1 1 auto;display:flex;flex-direction:column;outline:none}.excalidraw .sidebar-tabs-root [role=tabpanel][data-state=inactive]{display:none!important}.excalidraw .sidebar-tabs-root [role=tablist]{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.excalidraw .sidebar-tabs-root>.sidebar__header{padding-top:0;padding-bottom:1rem}.excalidraw .sidebar-tab-trigger{--button-width: auto;--button-bg: transparent;--button-hover-bg: transparent;--button-active-bg: var(--color-primary);--button-hover-color: var(--color-primary);--button-hover-border: var(--color-primary)}.excalidraw .sidebar-tab-trigger[data-state=active]{--button-bg: var(--color-primary);--button-hover-bg: var(--color-primary-darker);--button-hover-color: var(--color-icon-white);--button-border: var(--color-primary);color:var(--color-icon-white)}.excalidraw .default-sidebar{display:flex;flex-direction:column}.excalidraw .default-sidebar .sidebar-triggers{display:flex;gap:0;padding:2px;margin-top:-3px;margin-bottom:-3px;border:1px solid var(--sidebar-border-color);background:var(--default-bg-color);border-radius:.625rem}.excalidraw .default-sidebar .sidebar-triggers .sidebar-tab-trigger{height:var(--lg-button-size);width:var(--lg-button-size);border:none}.excalidraw .ActiveFile .ActiveFile__fileName{display:flex;align-items:center}.excalidraw .ActiveFile .ActiveFile__fileName span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:9.3em}.excalidraw .ActiveFile .ActiveFile__fileName svg{width:1.15em;margin-inline-end:.3em;transform:scaleY(.9)}.excalidraw .OverwriteConfirm{display:flex;flex-direction:column;align-items:center;gap:.75rem;isolation:isolate}.excalidraw .OverwriteConfirm h3{margin:0;font-weight:700;font-size:1.3125rem;line-height:130%;align-self:flex-start;color:var(--text-primary-color)}.excalidraw .OverwriteConfirm__Description{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;width:100%;gap:1rem;padding:2.5rem;background:var(--color-danger-background);border-radius:.5rem;font-family:Assistant;font-style:normal;font-weight:400;font-size:1rem;line-height:150%;color:var(--color-danger-color)}.excalidraw--mobile.excalidraw .OverwriteConfirm__Description{flex-direction:column;text-align:center}.excalidraw .OverwriteConfirm__Description__spacer{flex-grow:1}.excalidraw .OverwriteConfirm__Description__icon{box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:2.5rem;background:var(--color-danger-icon-background);width:3.5rem;height:3.5rem;padding:.75rem}.excalidraw .OverwriteConfirm__Description__icon svg{color:var(--color-danger-icon-color);width:1.5rem;height:1.5rem}.excalidraw .OverwriteConfirm__Description.OverwriteConfirm__Description--color-warning{background:var(--color-warning-background);color:var(--color-warning-color)}.excalidraw .OverwriteConfirm__Description.OverwriteConfirm__Description--color-warning .OverwriteConfirm__Description__icon{background:var(--color-warning-icon-background);flex:0 0 auto}.excalidraw .OverwriteConfirm__Description.OverwriteConfirm__Description--color-warning .OverwriteConfirm__Description__icon svg{color:var(--color-warning-icon-color)}.excalidraw .OverwriteConfirm__Actions{display:flex;flex-direction:row;align-items:stretch;justify-items:stretch;justify-content:center;gap:1.5rem}.excalidraw--mobile.excalidraw .OverwriteConfirm__Actions{flex-direction:column}.excalidraw .OverwriteConfirm__Actions__Action{display:flex;flex-direction:column;align-items:center;padding:1.5rem;gap:.75rem;flex-basis:50%;flex-grow:0}.excalidraw .OverwriteConfirm__Actions__Action__content{height:100%;font-size:.875rem;text-align:center}.excalidraw .OverwriteConfirm__Actions__Action h4{font-weight:700;font-size:1.125rem;line-height:130%;margin:0;color:var(--text-primary-color)}.excalidraw .layer-ui__search{flex:1 0 auto;display:flex;flex-direction:column;padding:8px 0 0}.excalidraw .layer-ui__search-header{display:flex;justify-content:space-between;align-items:center;padding:0 .75rem}.excalidraw .layer-ui__search-header .ExcTextField{flex:1 0 auto}.excalidraw .layer-ui__search-header .ExcTextField__input{background-color:#f5f5f9;border-radius:var(--border-radius-md);border:0}.excalidraw.theme--dark.excalidraw .layer-ui__search-header .ExcTextField__input{background-color:#31303b}.excalidraw .layer-ui__search-header .ExcTextField__input input::placeholder{font-size:.9rem}.excalidraw .layer-ui__search-count{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 0;margin:0 .75rem .25rem;font-size:.8em}.excalidraw .layer-ui__search-count .result-nav{display:flex}.excalidraw .layer-ui__search-count .result-nav .result-nav-btn{width:36px;height:36px;--button-border: transparent}.excalidraw .layer-ui__search-count .result-nav .result-nav-btn:active{background-color:var(--color-surface-high)}.excalidraw .layer-ui__search-count .result-nav .result-nav-btn:first-child{margin-right:4px}.excalidraw .layer-ui__search-result-container{overflow-y:auto;flex:1 1 0;display:flex;flex-direction:column;gap:.125rem}.excalidraw .layer-ui__result-item{display:flex;align-items:center;min-height:2rem;flex:0 0 auto;padding:.25rem .75rem;cursor:pointer;border:1px solid transparent;outline:none;margin:0 .75rem;border-radius:var(--border-radius-md)}.excalidraw .layer-ui__result-item .text-icon{width:1rem;height:1rem;margin-right:.75rem}.excalidraw .layer-ui__result-item .preview-text{flex:1;max-height:48px;line-height:24px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.excalidraw .layer-ui__result-item:hover{background-color:var(--color-surface-high)}.excalidraw .layer-ui__result-item:active{border-color:var(--color-primary)}.excalidraw .layer-ui__result-item.active{background-color:var(--color-surface-high)}.excalidraw .dialog-mermaid-title{margin-block:.25rem;font-size:1.25rem;font-weight:700;padding-inline:2.5rem}.excalidraw .Modal.Dialog.ttd-dialog{padding:1.25rem}.excalidraw .Modal.Dialog.ttd-dialog.Dialog--fullscreen{margin-top:0}.excalidraw .Modal.Dialog.ttd-dialog .Island{padding-inline:0!important;height:100%;display:flex;flex-direction:column;flex:1 1 auto;box-shadow:none}.excalidraw .Modal.Dialog.ttd-dialog .Modal__content{height:auto;max-height:100%}@media screen and (min-width: 861px){.excalidraw .Modal.Dialog.ttd-dialog .Modal__content{max-height:750px;height:100%}}.excalidraw .Modal.Dialog.ttd-dialog .Dialog__content{flex:1 1 auto}.excalidraw .ttd-dialog-desc{font-size:15px;font-style:italic;font-weight:500;margin-bottom:1.5rem}.excalidraw .ttd-dialog-tabs-root{width:100%;height:100%;display:flex;flex-direction:column}.excalidraw .ttd-dialog-tab-trigger{color:var(--color-on-surface);font-size:.875rem;margin:0;padding:0 1rem;background-color:transparent;border:0;height:2.875rem;font-weight:600;font-family:inherit;letter-spacing:.4px}.excalidraw .ttd-dialog-tab-trigger[data-state=active]{border-bottom:2px solid var(--color-primary)}.excalidraw .ttd-dialog-triggers{border-bottom:1px solid var(--color-surface-high);margin-bottom:1.5rem;padding-inline:2.5rem}.excalidraw .ttd-dialog-content{padding-inline:2.5rem;height:100%;display:flex;flex-direction:column}.excalidraw .ttd-dialog-content[hidden]{display:none}.excalidraw .ttd-dialog-input{width:auto;height:10rem;resize:none;border-radius:var(--border-radius-lg);border:1px solid var(--dialog-border-color);white-space:pre-wrap;padding:.85rem;box-sizing:border-box;font-family:monospace}@media screen and (min-width: 861px){.excalidraw .ttd-dialog-input{width:100%;height:100%}}.excalidraw .ttd-dialog-output-wrapper{display:flex;align-items:center;justify-content:center;padding:.85rem;box-sizing:border-box;flex-grow:1;position:relative;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;border-radius:var(--border-radius-lg);border:1px solid var(--dialog-border-color);height:400px;width:auto}@media screen and (min-width: 861px){.excalidraw .ttd-dialog-output-wrapper{width:100%;height:200px}}.excalidraw .ttd-dialog-output-wrapper canvas{max-width:100%;max-height:100%}.excalidraw .ttd-dialog-output-canvas-container{display:flex;width:100%;height:100%;align-items:center;justify-content:center;flex-grow:1}.excalidraw .ttd-dialog-output-error{color:red;font-weight:700;font-size:30px;word-break:break-word;overflow:auto;max-height:100%;height:100%;width:100%;text-align:center;position:absolute;z-index:10}.excalidraw .ttd-dialog-output-error p{font-weight:500;font-family:Cascadia;text-align:left;white-space:pre-wrap;font-size:.875rem;padding:0 10px}.excalidraw .ttd-dialog-panels{height:100%}@media screen and (min-width: 861px){.excalidraw .ttd-dialog-panels{display:grid;grid-template-columns:1fr 1fr;gap:4rem}}.excalidraw .ttd-dialog-panel{display:flex;flex-direction:column;width:100%}.excalidraw .ttd-dialog-panel__header{display:flex;margin:0 4px 4px;align-items:center;gap:1rem}.excalidraw .ttd-dialog-panel__header label{font-size:14px;font-style:normal;font-weight:600}.excalidraw .ttd-dialog-panel:first-child .ttd-dialog-panel-button-container:not(.invisible){margin-bottom:4rem}@media screen and (min-width: 861px){.excalidraw .ttd-dialog-panel .ttd-dialog-panel-button-container:not(.invisible){margin-bottom:.5rem!important}}.excalidraw .ttd-dialog-panel textarea{height:100%;resize:none;border-radius:var(--border-radius-lg);border:1px solid var(--dialog-border-color);white-space:pre-wrap;padding:.85rem;box-sizing:border-box;width:100%;font-family:monospace}@media screen and (max-width: 861px){.excalidraw .ttd-dialog-panel textarea{width:auto;height:10rem}}.excalidraw .ttd-dialog-panel-button-container{margin-top:1rem;margin-bottom:.5rem}.excalidraw .ttd-dialog-panel-button-container.invisible .ttd-dialog-panel-button{display:none}@media screen and (min-width: 861px){.excalidraw .ttd-dialog-panel-button-container.invisible .ttd-dialog-panel-button{display:block;visibility:hidden}}.excalidraw .ttd-dialog-panel-button{position:relative}.excalidraw .ttd-dialog-panel-button.excalidraw-button{font-family:inherit;font-weight:600;height:2.5rem;font-size:12px;color:#fff;background-color:var(--color-primary);width:100%}.excalidraw .ttd-dialog-panel-button.excalidraw-button:hover{background-color:var(--color-primary-darker)}.excalidraw .ttd-dialog-panel-button.excalidraw-button:active{background-color:var(--color-primary-darkest)}.excalidraw .ttd-dialog-panel-button.excalidraw-button:disabled{opacity:.5;cursor:not-allowed}.excalidraw .ttd-dialog-panel-button.excalidraw-button:disabled:hover{background-color:var(--color-primary)}@media screen and (min-width: 861px){.excalidraw .ttd-dialog-panel-button.excalidraw-button{width:auto;min-width:7.5rem}}.excalidraw.theme--dark.excalidraw .ttd-dialog-panel-button.excalidraw-button{color:var(--color-gray-100)}.excalidraw .ttd-dialog-panel-button div{display:contents}.excalidraw .ttd-dialog-panel-button div.invisible{visibility:hidden}.excalidraw .ttd-dialog-panel-button div.Spinner{display:flex!important;position:absolute;inset:0;--spinner-color: white}.excalidraw.theme--dark.excalidraw .ttd-dialog-panel-button div.Spinner{--spinner-color: var(--color-gray-100)}.excalidraw .ttd-dialog-panel-button div span{padding-left:.5rem;display:flex}.excalidraw .ttd-dialog-submit-shortcut{margin-inline-start:.5rem;font-size:.625rem;opacity:.6;display:flex;gap:.125rem}.excalidraw .ttd-dialog-submit-shortcut__key{border:1px solid gray;padding:2px 3px;border-radius:4px}.excalidraw .drag-input-container{display:flex;width:100%}.excalidraw .drag-input-container:focus-within{box-shadow:0 0 0 1px var(--color-primary-darkest);border-radius:var(--border-radius-md)}.excalidraw .disabled{opacity:.5;pointer-events:none}.excalidraw .drag-input-label{flex-shrink:0;border:1px solid var(--default-border-color);border-right:0;padding:0 .5rem 0 .75rem;min-width:1rem;height:2rem;box-sizing:border-box;color:var(--popup-text-color);display:flex;align-items:center;justify-content:center;position:relative}:root[dir=ltr] .excalidraw .drag-input-label{border-radius:var(--border-radius-md) 0 0 var(--border-radius-md)}:root[dir=rtl] .excalidraw .drag-input-label{border-radius:0 var(--border-radius-md) var(--border-radius-md) 0;border-right:1px solid var(--default-border-color);border-left:0}.excalidraw .drag-input{box-sizing:border-box;width:100%;margin:0;font-size:.875rem;font-family:inherit;background-color:transparent;color:var(--text-primary-color);border:0;outline:none;height:2rem;border:1px solid var(--default-border-color);border-left:0;letter-spacing:.4px;padding:.5rem .5rem .5rem .25rem;appearance:none}:root[dir=ltr] .excalidraw .drag-input{border-radius:0 var(--border-radius-md) var(--border-radius-md) 0}:root[dir=rtl] .excalidraw .drag-input{border-radius:var(--border-radius-md) 0 0 var(--border-radius-md);border-left:1px solid var(--default-border-color);border-right:0}.excalidraw .drag-input:focus-visible{box-shadow:none}.exc-stats{width:204px;position:absolute;top:60px;font-size:12px;z-index:var(--zIndex-layerUI);pointer-events:var(--ui-pointerEvents)}:root[dir=rtl] .exc-stats{left:12px;right:initial}.exc-stats h2{font-size:1.5em;margin-block-start:.83em;margin-block-end:.83em;font-weight:700}.exc-stats h3{white-space:nowrap;font-size:1.17em;margin:0;font-weight:700}.exc-stats__rows{display:flex;flex-direction:column;gap:.3125rem}.exc-stats__row{display:flex;justify-content:space-between;align-items:center;display:grid;gap:4px}.exc-stats__row div+div{text-align:right}.exc-stats__row--heading{text-align:center;font-weight:700;margin:.25rem 0}.exc-stats .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.exc-stats .title h2{margin:0}.exc-stats .close{height:16px;width:16px;cursor:pointer}.exc-stats .close svg{width:100%;height:100%}.excalidraw .ElementLinkDialog{position:absolute;top:var(--editor-container-padding);left:var(--editor-container-padding);z-index:var(--zIndex-modal);border-radius:10px;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-island);background-color:var(--island-bg-color)}.excalidraw--mobile.excalidraw .ElementLinkDialog{left:0;margin-left:.5rem;margin-right:.5rem;width:calc(100% - 1rem);box-sizing:border-box;z-index:5}.excalidraw .ElementLinkDialog .ElementLinkDialog__header{margin-bottom:1.5rem}.excalidraw .ElementLinkDialog .ElementLinkDialog__header h2{margin-top:0;margin-bottom:.5rem}.excalidraw--mobile.excalidraw .ElementLinkDialog .ElementLinkDialog__header h2{font-size:1.25rem}.excalidraw .ElementLinkDialog .ElementLinkDialog__header p{margin:0}.excalidraw--mobile.excalidraw .ElementLinkDialog .ElementLinkDialog__header p{font-size:.875rem}.excalidraw--mobile.excalidraw .ElementLinkDialog .ElementLinkDialog__header{margin-bottom:1rem}.excalidraw .ElementLinkDialog .ElementLinkDialog__input{display:flex}.excalidraw .ElementLinkDialog .ElementLinkDialog__input .ElementLinkDialog__input-field{flex:1}.excalidraw .ElementLinkDialog .ElementLinkDialog__input .ElementLinkDialog__remove{color:#c92a2a;margin-left:1rem}.excalidraw .ElementLinkDialog .ElementLinkDialog__input .ElementLinkDialog__remove .ToolIcon__icon{width:2rem;height:2rem}.excalidraw .ElementLinkDialog .ElementLinkDialog__input .ElementLinkDialog__remove .ToolIcon__icon svg{color:#fa5252}.excalidraw .ElementLinkDialog .ElementLinkDialog__actions{display:flex;justify-content:flex-end;margin-top:1.5rem}.excalidraw--mobile.excalidraw .ElementLinkDialog .ElementLinkDialog__actions{font-size:.875rem;margin-top:1rem}.excalidraw .layer-ui__wrapper.animate{transition:width .1s ease-in-out}.excalidraw .layer-ui__wrapper{position:absolute;width:100%;height:100%;pointer-events:none;z-index:var(--zIndex-layerUI)}.excalidraw .layer-ui__wrapper__top-right{display:flex;width:100%;justify-content:flex-end;gap:.75rem;pointer-events:none!important}.excalidraw .layer-ui__wrapper__top-right>*{pointer-events:var(--ui-pointerEvents)}.excalidraw .layer-ui__wrapper__footer{width:100%}.excalidraw .layer-ui__wrapper__footer-right{z-index:100;display:flex}.excalidraw .layer-ui__wrapper .zen-mode-transition{transition:transform .5s ease-in-out}:root[dir=ltr] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-left{transform:translate(-999px)}:root[dir=ltr] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-right{transform:translate(999px)}:root[dir=rtl] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-left{transform:translate(999px)}:root[dir=rtl] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-right{transform:translate(-999px)}.excalidraw .layer-ui__wrapper .zen-mode-transition.layer-ui__wrapper__footer-left--transition-bottom{transform:translateY(92px)}.excalidraw .layer-ui__wrapper .disable-zen-mode{padding:10px;position:absolute;bottom:0;opacity:0;visibility:hidden;transition:visibility 0s linear 0s,opacity .5s;font-family:var(--ui-font);font-size:.75rem;font-weight:500;line-height:1;border-radius:var(--border-radius-lg);border:1px solid var(--default-border-color);background-color:var(--island-bg-color);color:var(--text-primary-color)}[dir=ltr] .excalidraw .layer-ui__wrapper .disable-zen-mode{right:1rem}[dir=rtl] .excalidraw .layer-ui__wrapper .disable-zen-mode{left:1rem}.excalidraw .layer-ui__wrapper .disable-zen-mode:hover{background-color:var(--button-hover-bg)}.excalidraw .layer-ui__wrapper .disable-zen-mode:active{border-color:var(--color-primary)}.excalidraw .layer-ui__wrapper .disable-zen-mode--visible{opacity:1;visibility:visible;transition:visibility 0s linear .3s,opacity .5s;transition-delay:.8s;pointer-events:var(--ui-pointerEvents)}.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-left>*,.excalidraw .layer-ui__wrapper .footer-center>*,.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-right>*{pointer-events:var(--ui-pointerEvents)}.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-right{margin-top:auto;margin-bottom:auto}.excalidraw .App-toolbar.zen-mode .ToolIcon__keybinding,.excalidraw .App-toolbar.zen-mode .HintViewer{display:none}.excalidraw .App-toolbar__divider{width:1px;height:1.5rem;align-self:center;background-color:var(--default-border-color);margin:0 .25rem}.excalidraw--mobile.excalidraw .App-toolbar__divider{margin:0}.excalidraw .App-toolbar__extra-tools-trigger{box-shadow:none;border:0;background-color:transparent}.excalidraw .App-toolbar__extra-tools-trigger:active{background-color:var(--button-hover-bg);box-shadow:0 0 0 1px var(--button-active-border, var(--color-primary-darkest)) inset}.excalidraw .App-toolbar__extra-tools-trigger--selected,.excalidraw .App-toolbar__extra-tools-trigger--selected:hover{background:var(--color-primary-light);color:var(--color-primary)}.excalidraw .App-toolbar__extra-tools-dropdown{margin-top:.375rem;right:0;min-width:11.875rem;z-index:1}.excalidraw .Toast{animation:fade-in .5s;background-color:var(--button-gray-1);border-radius:4px;bottom:10px;box-sizing:border-box;cursor:default;left:50%;margin-left:-150px;padding:4px 0;position:absolute;text-align:center;width:300px;z-index:999999}.excalidraw .Toast .Toast__message{padding:0 1.6rem;color:var(--popup-text-color);white-space:pre-wrap}.excalidraw .Toast .close{position:absolute;top:0;right:0;padding:.4rem}.excalidraw .Toast .close .ToolIcon__icon{width:1.2rem;height:1.2rem}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.excalidraw .SVGLayer{pointer-events:none;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:var(--zIndex-svgLayer)}.excalidraw .SVGLayer svg{image-rendering:auto;overflow:visible;position:absolute;width:100%;height:100%;top:0;left:0}.excalidraw .excalidraw-canvas-buttons{position:absolute;box-shadow:0 2px 4px #0000004d;z-index:var(--zIndex-canvasButtons);background:var(--island-bg-color);border-radius:var(--border-radius-lg);display:flex;flex-direction:column;gap:.375rem}.excalidraw .follow-mode{position:absolute;box-sizing:border-box;pointer-events:none;border:2px solid var(--color-primary-hover);z-index:9999;display:flex;align-items:flex-end;justify-content:center}.excalidraw .follow-mode__badge{background-color:var(--color-primary-hover);color:var(--color-primary-light);padding:.25rem .5rem;margin-bottom:.5rem;border-radius:.5rem;pointer-events:all;font-size:.75rem;display:flex;gap:.5rem;align-items:center}.excalidraw .follow-mode__badge__label{display:flex;white-space:pre-wrap;line-height:1}.excalidraw .follow-mode__badge__username{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}.excalidraw .follow-mode__disconnect-btn{all:unset;cursor:pointer;border-radius:.25rem}.excalidraw .follow-mode__disconnect-btn:hover{background-color:var(--color-primary-darker)}.excalidraw .follow-mode__disconnect-btn:active{background-color:var(--color-primary-darkest)}.excalidraw .follow-mode__disconnect-btn svg{display:block;width:1rem;height:1rem}.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;user-select:none}.LoadingMessage{position:absolute;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.LoadingMessage .Spinner{font-size:2.8em}.LoadingMessage .LoadingMessage-text{margin-top:1em;font-size:.8em}.LoadingMessage--dark{background-color:#121212;color:#ced4da}.excalidraw{--theme-filter: none;--button-destructive-bg-color: #ffe3e3;--button-destructive-color: #c92a2a;--button-gray-1: #e9ecef;--button-gray-2: #ced4da;--button-gray-3: #adb5bd;--button-special-active-bg-color: #ebfbee;--dialog-border-color: var(--color-gray-20);--dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');--focus-highlight-color: #a5d8ff;--icon-fill-color: var(--color-on-surface);--icon-green-fill-color: #2b8a3e;--default-bg-color: #ffffff;--input-bg-color: #ffffff;--input-border-color: #ced4da;--input-hover-bg-color: #f1f3f5;--input-label-color: #495057;--island-bg-color: #ffffff;--keybinding-color: var(--color-gray-40);--link-color: #1c7ed6;--overlay-bg-color: rgba(255, 255, 255, .88);--popup-bg-color: var(--island-bg-color);--popup-secondary-bg-color: #f1f3f5;--popup-text-color: #000000;--popup-text-inverted-color: #ffffff;--select-highlight-color: #339af0;--shadow-island: 0px 0px .9310142993927002px 0px rgba(0, 0, 0, .17), 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, .08), 0px 7px 14px 0px rgba(0, 0, 0, .05);--button-hover-bg: var(--color-surface-high);--button-active-bg: var(--color-surface-high);--button-active-border: var(--color-brand-active);--default-border-color: var(--color-surface-high);--default-button-size: 2rem;--default-icon-size: 1rem;--lg-button-size: 2.25rem;--lg-icon-size: 1rem;--editor-container-padding: 1rem;--scrollbar-thumb: var(--button-gray-2);--scrollbar-thumb-hover: var(--button-gray-3);--color-slider-track: hsl(240, 100%, 90%);--color-slider-thumb: var(--color-gray-80);--modal-shadow: 0px 100px 80px rgba(0, 0, 0, .07), 0px 41.7776px 33.4221px rgba(0, 0, 0, .0503198), 0px 22.3363px 17.869px rgba(0, 0, 0, .0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, .035), 0px 6.6501px 5.32008px rgba(0, 0, 0, .0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, .0196802);--avatar-border-color: var(--color-gray-20);--sidebar-shadow: 0px 100px 80px rgba(0, 0, 0, .07), 0px 41.7776px 33.4221px rgba(0, 0, 0, .0503198), 0px 22.3363px 17.869px rgba(0, 0, 0, .0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, .035), 0px 6.6501px 5.32008px rgba(0, 0, 0, .0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, .0196802);--sidebar-border-color: var(--color-surface-high);--sidebar-bg-color: var(--island-bg-color);--library-dropdown-shadow: 0px 15px 6px rgba(0, 0, 0, .01), 0px 8px 5px rgba(0, 0, 0, .05), 0px 4px 4px rgba(0, 0, 0, .09), 0px 1px 2px rgba(0, 0, 0, .1), 0px 0px 0px rgba(0, 0, 0, .1);--space-factor: .25rem;--text-primary-color: var(--color-on-surface);--color-selection: #6965db;--color-icon-white: #ffffff;--color-primary: #6965db;--color-primary-darker: #5b57d1;--color-primary-darkest: #4a47b1;--color-primary-light: #e3e2fe;--color-primary-light-darker: #d7d5ff;--color-primary-hover: #5753d0;--color-gray-10: #f5f5f5;--color-gray-20: #ebebeb;--color-gray-30: #d6d6d6;--color-gray-40: #b8b8b8;--color-gray-50: #999999;--color-gray-60: #7a7a7a;--color-gray-70: #5c5c5c;--color-gray-80: #3d3d3d;--color-gray-85: #242424;--color-gray-90: #1e1e1e;--color-gray-100: #121212;--color-disabled: var(--color-gray-40);--color-warning: #fceeca;--color-warning-dark: #f5c354;--color-warning-darker: #f3ab2c;--color-warning-darkest: #ec8b14;--color-text-warning: var(--text-primary-color);--color-danger: #db6965;--color-danger-dark: #db6965;--color-danger-darker: #d65550;--color-danger-darkest: #d1413c;--color-danger-text: black;--color-danger-background: #fff0f0;--color-danger-icon-background: #ffdad6;--color-danger-color: #700000;--color-danger-icon-color: #700000;--color-warning-background: var(--color-warning);--color-warning-icon-background: var(--color-warning-dark);--color-warning-color: var(--text-primary-color);--color-warning-icon-color: var(--text-primary-color);--color-muted: var(--color-gray-30);--color-muted-darker: var(--color-gray-60);--color-muted-darkest: var(--color-gray-100);--color-muted-background: var(--color-gray-80);--color-muted-background-darker: var(--color-gray-100);--color-promo: var(--color-primary);--color-success: #cafccc;--color-success-darker: #bafabc;--color-success-darkest: #a5eba8;--color-success-text: #268029;--color-success-contrast: #65bb6a;--color-success-contrast-hover: #6bcf70;--color-success-contrast-active: #6edf74;--color-logo-icon: var(--color-primary);--color-logo-text: #190064;--border-radius-md: .375rem;--border-radius-lg: .5rem;--color-surface-high: #f1f0ff;--color-surface-mid: #f2f2f7;--color-surface-low: #ececf4;--color-surface-lowest: #ffffff;--color-on-surface: #1b1b1f;--color-brand-hover: #5753d0;--color-on-primary-container: #030064;--color-brand-active: #4440bf;--color-border-outline: #767680;--color-border-outline-variant: #c5c5d0;--color-surface-primary-container: #e0dfff;--color-badge: #0b6513;--background-color-badge: #d3ffd2}@media screen and (min-device-width: 1921px){.excalidraw{--lg-button-size: 2.5rem;--lg-icon-size: 1.25rem;--default-button-size: 2.25rem;--default-icon-size: 1.25rem}}.excalidraw.theme--dark.theme--dark-background-none{background:none}.excalidraw.theme--dark{--theme-filter: invert(93%) hue-rotate(180deg);--button-destructive-bg-color: #5a0000;--button-destructive-color: #ffa8a8;--button-gray-1: #363636;--button-gray-2: #272727;--button-gray-3: #222;--button-special-active-bg-color: #204624;--dialog-border-color: var(--color-gray-80);--dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');--focus-highlight-color: #228be6;--icon-green-fill-color: #69db7c;--default-bg-color: #121212;--input-bg-color: #121212;--input-border-color: #2e2e2e;--input-hover-bg-color: #181818;--input-label-color: #e9ecef;--island-bg-color: #232329;--keybinding-color: var(--color-gray-60);--link-color: #4dabf7;--overlay-bg-color: rgba(52, 58, 64, .12);--popup-secondary-bg-color: #222;--popup-text-color: #ced4da;--popup-text-inverted-color: #2c2c2c;--select-highlight-color: #4dabf7;--shadow-island: 0px 0px .9310142993927002px 0px rgba(0, 0, 0, .17), 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, .08), 0px 7px 14px 0px rgba(0, 0, 0, .05);--modal-shadow: 0px 100px 80px rgba(0, 0, 0, .07), 0px 41.7776px 33.4221px rgba(0, 0, 0, .0503198), 0px 22.3363px 17.869px rgba(0, 0, 0, .0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, .035), 0px 6.6501px 5.32008px rgba(0, 0, 0, .0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, .0196802);--avatar-border-color: var(--color-gray-85);--scrollbar-thumb: #343a40;--scrollbar-thumb-hover: #495057;--color-slider-track: hsl(244, 23%, 39%);--color-selection: #3530c4;--color-icon-white: var(--color-gray-90);--color-primary: #a8a5ff;--color-primary-darker: #b2aeff;--color-primary-darkest: #beb9ff;--color-primary-light: #4f4d6f;--color-primary-light-darker: #43415e;--color-primary-hover: #bbb8ff;--color-disabled: var(--color-gray-70);--color-text-warning: var(--color-gray-80);--color-danger: #ffa8a5;--color-danger-dark: #672120;--color-danger-darker: #8f2625;--color-danger-darkest: #ac2b29;--color-danger-text: #fbcbcc;--color-danger-background: #fbcbcc;--color-danger-icon-background: #672120;--color-danger-color: #261919;--color-danger-icon-color: #fbcbcc;--color-warning-background: var(--color-warning);--color-warning-icon-background: var(--color-warning-dark);--color-warning-color: var(--color-gray-80);--color-warning-icon-color: var(--color-gray-80);--color-muted: var(--color-gray-80);--color-muted-darker: var(--color-gray-60);--color-muted-darkest: var(--color-gray-20);--color-muted-background: var(--color-gray-40);--color-muted-background-darker: var(--color-gray-20);--color-logo-text: #e2dfff;--color-surface-high: hsl(245, 10%, 21%);--color-surface-low: hsl(240, 8%, 15%);--color-surface-mid: hsl(240 6% 10%);--color-surface-lowest: hsl(0, 0%, 7%);--color-on-surface: #e3e3e8;--color-brand-hover: #bbb8ff;--color-on-primary-container: #e0dfff;--color-brand-active: #d0ccff;--color-border-outline: #8e8d9c;--color-border-outline-variant: #46464f;--color-surface-primary-container: #403e6a}:root{--zIndex-canvas: 1;--zIndex-interactiveCanvas: 2;--zIndex-svgLayer: 3;--zIndex-wysiwyg: 3;--zIndex-canvasButtons: 3;--zIndex-layerUI: 4;--zIndex-eyeDropperBackdrop: 5;--zIndex-eyeDropperPreview: 6;--zIndex-hyperlinkContainer: 7;--zIndex-modal: 1000;--zIndex-popup: 1001;--zIndex-toast: 999999;--sab: env(safe-area-inset-bottom);--sal: env(safe-area-inset-left);--sar: env(safe-area-inset-right);--sat: env(safe-area-inset-top)}body.excalidraw-cursor-resize,body.excalidraw-cursor-resize a:hover,body.excalidraw-cursor-resize *{cursor:ew-resize}.excalidraw{--ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;font-family:var(--ui-font);position:relative;overflow:hidden;color:var(--text-primary-color);display:flex;inset:0;height:100%;width:100%;user-select:none}.excalidraw button{cursor:pointer;user-select:none}.excalidraw:focus{outline:none}.excalidraw .excalidraw-link,.excalidraw a{font-weight:500;text-decoration:none;color:var(--link-color);user-select:none;cursor:pointer}.excalidraw .excalidraw-link:hover,.excalidraw a:hover{text-decoration:underline}.excalidraw .excalidraw-link:active,.excalidraw a:active{text-decoration:none}.excalidraw canvas{touch-action:none;image-rendering:pixelated;image-rendering:-moz-crisp-edges;z-index:var(--zIndex-canvas)}.excalidraw canvas.interactive{z-index:var(--zIndex-interactiveCanvas)}.excalidraw__canvas-wrapper,.excalidraw__canvas.static{pointer-events:none}.excalidraw__canvas{position:absolute}.excalidraw__embeddable{width:100%;height:100%;border:0}.excalidraw__embeddable-container{position:absolute;z-index:2;transform-origin:top left;pointer-events:none}.excalidraw.theme--dark canvas{filter:var(--theme-filter)}.excalidraw .FixedSideContainer{padding-top:var(--sat, 0);padding-right:var(--sar, 0);padding-bottom:var(--sab, 0);padding-left:var(--sal, 0)}.excalidraw .panelRow{display:flex;justify-content:space-between}.excalidraw .panelColumn{display:flex;flex-direction:column;row-gap:.75rem}.excalidraw .panelColumn h3,.excalidraw .panelColumn legend,.excalidraw .panelColumn .control-label{margin:0;margin-bottom:.25rem;font-size:.75rem;color:var(--text-primary-color);font-weight:400;display:block}.excalidraw .panelColumn .control-label input{display:block;width:100%}.excalidraw .panelColumn legend{padding:0}.excalidraw .panelColumn .iconSelectList{flex-wrap:wrap;position:relative}.excalidraw .panelColumn .buttonList{flex-wrap:wrap;display:flex;column-gap:.5rem;row-gap:.5rem}.excalidraw .panelColumn .buttonList label{font-size:.75rem}.excalidraw .panelColumn .buttonList input[type=radio],.excalidraw .panelColumn .buttonList input[type=button]{opacity:0;position:absolute;pointer-events:none}.excalidraw .panelColumn .buttonList .iconRow{margin-top:8px}.excalidraw .panelColumn fieldset{margin:0;padding:0;border:none}.excalidraw .divider{width:1px;background-color:#e9ecef;margin:1px}.excalidraw .welcome-screen-menu-item:focus-visible,.excalidraw .dropdown-menu-item:focus-visible,.excalidraw button:focus-visible,.excalidraw .buttonList label:focus-within,.excalidraw input:focus-visible{outline:transparent;box-shadow:0 0 0 1px var(--color-brand-hover)}.excalidraw .buttonList .ToolIcon__icon{all:unset!important;display:flex!important}.excalidraw .buttonList button{background-color:transparent}.excalidraw .buttonList label,.excalidraw .buttonList button,.excalidraw .buttonList .zIndexButton{display:flex;justify-content:center;align-items:center;padding:.625rem;width:var(--button-width, var(--default-button-size));height:var(--button-height, var(--default-button-size));box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--button-border, var(--default-border-color));border-radius:var(--border-radius-lg);cursor:pointer;background-color:var(--button-bg, var(--island-bg-color));color:var(--button-color, var(--color-on-surface));font-family:var(--ui-font);padding:0}.excalidraw .buttonList label svg,.excalidraw .buttonList button svg,.excalidraw .buttonList .zIndexButton svg{width:var(--button-width, var(--lg-icon-size));height:var(--button-height, var(--lg-icon-size))}.excalidraw .buttonList label:hover,.excalidraw .buttonList button:hover,.excalidraw .buttonList .zIndexButton:hover{background-color:var(--button-hover-bg, var(--island-bg-color));border-color:var(--button-hover-border, var(--button-border, var(--default-border-color)));color:var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)))}.excalidraw .buttonList label:active,.excalidraw .buttonList button:active,.excalidraw .buttonList .zIndexButton:active{background-color:var(--button-active-bg, var(--island-bg-color));border-color:var(--button-active-border, var(--color-primary-darkest))}.excalidraw .buttonList label.active,.excalidraw .buttonList button.active,.excalidraw .buttonList .zIndexButton.active{background-color:var(--button-selected-bg, var(--color-surface-primary-container));border-color:var(--button-selected-border, var(--color-surface-primary-container))}.excalidraw .buttonList label.active:hover,.excalidraw .buttonList button.active:hover,.excalidraw .buttonList .zIndexButton.active:hover{background-color:var(--button-selected-hover-bg, var(--color-surface-primary-container))}.excalidraw .buttonList label.active svg,.excalidraw .buttonList button.active svg,.excalidraw .buttonList .zIndexButton.active svg{color:var(--button-color, var(--color-on-primary-container))}.excalidraw .buttonList label svg,.excalidraw .buttonList button svg,.excalidraw .buttonList .zIndexButton svg{width:var(--default-icon-size);height:var(--default-icon-size)}.excalidraw .App-top-bar{z-index:var(--zIndex-layerUI);display:flex;flex-direction:column;align-items:center}.excalidraw .App-bottom-bar{position:absolute;inset:0;--bar-padding: calc(4 * var(--space-factor));padding-top:max(var(--bar-padding),var(--sat,0));padding-right:var(--sar, 0);padding-bottom:var(--sab, 0);padding-left:var(--sal, 0);z-index:4;display:flex;align-items:flex-end;pointer-events:none}.excalidraw .App-bottom-bar>.Island{width:100%;max-width:100%;min-width:100%;box-sizing:border-box;max-height:100%;display:flex;flex-direction:column;pointer-events:var(--ui-pointerEvents)}.excalidraw .App-bottom-bar>.Island .panelColumn{padding:8px 8px 0}.excalidraw .App-toolbar{width:100%}.excalidraw .App-toolbar .eraser.ToolIcon:hover{--icon-fill-color: #fff;--keybinding-color: #fff}.excalidraw .App-toolbar .eraser.active{background-color:var(--color-primary)}.excalidraw .App-toolbar-content{display:flex;align-items:center;justify-content:space-between;padding:8px}.excalidraw .App-toolbar-content .dropdown-menu--mobile{bottom:55px;top:auto}.excalidraw .App-mobile-menu{width:100%;overflow-x:visible;overflow-y:auto;box-sizing:border-box;margin-bottom:var(--bar-padding)}.excalidraw .App-menu{display:grid;color:var(--icon-fill-color)}.excalidraw .shapes-section{display:flex;justify-content:center;pointer-events:none!important}.excalidraw .shapes-section>*{pointer-events:var(--ui-pointerEvents)}.excalidraw .App-menu_top{grid-template-columns:1fr 2fr 1fr;grid-gap:2rem;align-items:flex-start;cursor:default;pointer-events:none!important}.excalidraw .App-menu_top>*{pointer-events:var(--ui-pointerEvents)}@media (min-width: 1536px){.excalidraw .App-menu_top{grid-template-columns:1fr 1fr 1fr;grid-gap:3rem}}.excalidraw .App-menu_top>*:first-child{justify-self:flex-start}.excalidraw .App-menu_top>*:last-child{justify-self:flex-end}.excalidraw .App-menu_bottom{position:absolute;bottom:1rem;display:flex;justify-content:space-between;align-items:flex-start;cursor:default;pointer-events:none!important;box-sizing:border-box;padding:0 1rem}.excalidraw .App-menu_bottom--transition-left section{width:185px}.excalidraw .App-menu_bottom section{display:flex}.excalidraw .App-menu_bottom>*:first-child{justify-self:flex-start}.excalidraw .App-menu_bottom>*:last-child{justify-self:flex-end}.excalidraw .App-menu_left{grid-template-rows:1fr auto 1fr;height:100%}.excalidraw .App-menu_right{grid-template-rows:1fr;height:100%}.excalidraw .App-menu__left{overflow-y:auto;padding:.75rem;width:12.5rem;box-sizing:border-box;position:absolute}.excalidraw .dropdown-select{height:1.5rem;padding:0;padding-inline-start:.5rem;padding-inline-end:1.5rem;color:var(--icon-fill-color);background-color:var(--button-gray-1);border-radius:var(--space-factor);border:1px solid var(--button-gray-2);font-size:.8rem;font-family:inherit;outline:none;appearance:none;background-image:var(--dropdown-icon);background-repeat:no-repeat;background-position:right .7rem top 50%,0 0;background-size:.65em auto,100%}:root[dir=rtl] .excalidraw .dropdown-select{background-position:left .7rem top 50%,0 0}.excalidraw .dropdown-select:focus{box-shadow:0 0 0 2px var(--focus-highlight-color)}.excalidraw .dropdown-select:hover,.excalidraw .dropdown-select:active{background-color:var(--button-gray-2)}.excalidraw .dropdown-select__language{height:2rem;background-color:var(--island-bg-color);border-color:var(--default-border-color)!important;cursor:pointer}.excalidraw .dropdown-select__language:hover{background-color:var(--island-bg-color)}.excalidraw .scroll-back-to-content{border-radius:var(--border-radius-lg);background-color:var(--island-bg-color);color:var(--icon-fill-color);border:1px solid var(--default-border-color);padding:10px 20px;position:absolute;left:50%;bottom:30px;transform:translate(-50%);pointer-events:var(--ui-pointerEvents);font-family:inherit}.excalidraw .scroll-back-to-content:hover{background-color:var(--button-hover-bg)}.excalidraw .scroll-back-to-content:active{border:1px solid var(--button-active-border)}.excalidraw .help-icon{display:flex;justify-content:center;align-items:center;padding:.625rem;width:var(--button-width, var(--default-button-size));height:var(--button-height, var(--default-button-size));box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--button-border, var(--default-border-color));border-radius:var(--border-radius-lg);cursor:pointer;background-color:var(--button-bg, var(--island-bg-color));color:var(--button-color, var(--color-on-surface));font-family:var(--ui-font);border:none;box-shadow:0 0 0 1px var(--color-surface-lowest);background-color:var(--color-surface-low);width:var(--lg-button-size);height:var(--lg-button-size)}.excalidraw .help-icon svg{width:var(--button-width, var(--lg-icon-size));height:var(--button-height, var(--lg-icon-size))}.excalidraw .help-icon:hover{background-color:var(--button-hover-bg, var(--island-bg-color));border-color:var(--button-hover-border, var(--button-border, var(--default-border-color)));color:var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)))}.excalidraw .help-icon:active{background-color:var(--button-active-bg, var(--island-bg-color));border-color:var(--button-active-border, var(--color-primary-darkest))}.excalidraw .help-icon.active{background-color:var(--button-selected-bg, var(--color-surface-primary-container));border-color:var(--button-selected-border, var(--color-surface-primary-container))}.excalidraw .help-icon.active:hover{background-color:var(--button-selected-hover-bg, var(--color-surface-primary-container))}.excalidraw .help-icon.active svg{color:var(--button-color, var(--color-on-primary-container))}.excalidraw .help-icon:active{box-shadow:0 0 0 1px var(--color-brand-active)}.excalidraw .help-icon svg{width:var(--lg-icon-size);height:var(--lg-icon-size)}.excalidraw .reset-zoom-button{font-family:var(--ui-font)}.excalidraw .finalize-button{display:grid;grid-auto-flow:column;gap:.4em;margin-top:auto;margin-bottom:auto;margin-inline-start:.6em}.excalidraw .undo-redo-buttons,.excalidraw .eraser-buttons{display:grid;grid-auto-flow:column;margin-top:auto;margin-bottom:auto;margin-inline-start:.6em}.excalidraw--mobile.excalidraw aside{display:none}.excalidraw--mobile.excalidraw .scroll-back-to-content{bottom:calc(80px + var(--sab, 0));z-index:-1}:root[dir=rtl] .excalidraw .rtl-mirror{transform:scaleX(-1)}.excalidraw .zen-mode-visibility{visibility:visible;opacity:1;height:auto;width:auto;transition:opacity .5s}.excalidraw .zen-mode-visibility.zen-mode-visibility--hidden{visibility:hidden;opacity:0;height:0;width:0;transition:opacity .5s}.excalidraw .disable-pointerEvents{pointer-events:none!important}.excalidraw.excalidraw--view-mode .App-menu{display:flex;justify-content:space-between}.excalidraw input.is-redacted{-webkit-text-security:disc}.excalidraw input[type=text],.excalidraw textarea:not(.excalidraw-wysiwyg){color:var(--text-primary-color);border:1.5px solid var(--input-border-color);padding:.75rem;white-space:nowrap;border-radius:var(--space-factor);background-color:var(--input-bg-color)}.excalidraw input[type=text]:not(:focus):hover,.excalidraw textarea:not(.excalidraw-wysiwyg):not(:focus):hover{border-color:var(--color-brand-hover)}.excalidraw input[type=text]:focus,.excalidraw textarea:not(.excalidraw-wysiwyg):focus{outline:none;border-color:var(--color-brand-hover)}@media print{.excalidraw .App-bottom-bar,.excalidraw .FixedSideContainer,.excalidraw .layer-ui__wrapper{display:none}}.excalidraw ::-webkit-scrollbar{width:4px;height:3px}.excalidraw select::-webkit-scrollbar{width:10px}.excalidraw ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:10px}.excalidraw ::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.excalidraw ::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb)}.excalidraw .mobile-misc-tools-container{position:absolute;top:calc(5rem - var(--editor-container-padding));right:calc(var(--editor-container-padding) * -1);display:flex;flex-direction:column;border:1px solid var(--sidebar-border-color);border-top-left-radius:var(--border-radius-lg);border-bottom-left-radius:var(--border-radius-lg);border-right:0;overflow:hidden;background-color:var(--island-bg-color)}.excalidraw .mobile-misc-tools-container .ToolIcon__icon{width:2rem;height:2rem;border-radius:0}.excalidraw .mobile-misc-tools-container .default-sidebar-trigger{border:0}.excalidraw .App-toolbar--mobile{overflow:visible;max-width:98vw}.excalidraw .App-toolbar--mobile .ToolIcon__keybinding{display:none}.excalidraw .UserList-Wrapper{margin:0;padding:0;border:none;text-align:left}.excalidraw .UserList-Wrapper legend{display:block;font-size:.75rem;font-weight:400;margin:0 0 .25rem;padding:0}.excalidraw .main-menu-trigger{border:none;box-shadow:0 0 0 1px var(--color-surface-lowest);background-color:var(--color-surface-low)}.excalidraw .main-menu-trigger:active{box-shadow:0 0 0 1px var(--color-brand-active)}.excalidraw .App-mobile-menu,.excalidraw .App-menu__left{--button-border: transparent;--button-bg: var(--color-surface-mid)}.excalidraw.theme--dark.excalidraw .App-mobile-menu,.excalidraw.theme--dark.excalidraw .App-menu__left{--button-hover-bg: #363541;--button-bg: var(--color-surface-high)}.excalidraw .App-menu__left .buttonList{padding:.25rem 0}.excalidraw .excalidraw__paragraph{margin:1rem 0}.excalidraw .Modal__content .excalidraw__paragraph:first-child{margin-top:0}.excalidraw .Modal__content .excalidraw__paragraph+.excalidraw__paragraph{margin-top:0rem}.ErrorSplash.excalidraw{min-height:100vh;padding:20px 0;overflow:auto;display:flex;align-items:center;justify-content:center;user-select:text}.ErrorSplash.excalidraw .ErrorSplash-messageContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;background-color:#ffe3e3;border:3px solid #c92a2a}.ErrorSplash.excalidraw .ErrorSplash-paragraph{margin:15px 0;max-width:600px}.ErrorSplash.excalidraw .ErrorSplash-paragraph.align-center{text-align:center}.ErrorSplash.excalidraw .bigger,.ErrorSplash.excalidraw .bigger button{font-size:1.1em}.ErrorSplash.excalidraw .smaller,.ErrorSplash.excalidraw .smaller button{font-size:.9em}.ErrorSplash.excalidraw .ErrorSplash-details{display:flex;flex-direction:column;align-items:flex-start}.ErrorSplash.excalidraw .ErrorSplash-details textarea{width:100%;margin:10px 0;font-family:Cascadia;font-size:.8em}.excalidraw__embeddable-container .excalidraw__embeddable-container__inner{overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:var(--embeddable-radius)}.excalidraw__embeddable-container .excalidraw__embeddable__outer{width:100%;height:100%}.excalidraw__embeddable-container .excalidraw__embeddable__outer>*{border-radius:var(--embeddable-radius)}.excalidraw__embeddable-container .excalidraw__embeddable-hint{position:absolute;z-index:1;background:#00000080;padding:1rem 1.6rem;border-radius:12px;color:#fff;font-weight:700;letter-spacing:.6px;font-family:Assistant}@font-face{font-family:Assistant;src:url("/assets/Assistant-Regular-DVxZuzxb.woff2") format("woff2");font-weight:400;style:normal;display:swap}@font-face{font-family:Assistant;src:url("/assets/Assistant-Medium-DrcxCXg3.woff2") format("woff2");font-weight:500;style:normal;display:swap}@font-face{font-family:Assistant;src:url("/assets/Assistant-SemiBold-SCI4bEL9.woff2") format("woff2");font-weight:600;style:normal;display:swap}@font-face{font-family:Assistant;src:url("/assets/Assistant-Bold-gm-uSS1B.woff2") format("woff2");font-weight:700;style:normal;display:swap}.footer-center{pointer-events:none;display:flex;width:100%;justify-content:flex-start;margin-inline-end:.6rem}.footer-center>*{pointer-events:var(--ui-pointerEvents)}.excalidraw .ExcalidrawLogo{--logo-icon--xs: 2rem;--logo-text--xs: 1.5rem;--logo-icon--small: 2.5rem;--logo-text--small: 1.75rem;--logo-icon--normal: 3rem;--logo-text--normal: 2.2rem;--logo-icon--large: 90px;--logo-text--large: 65px;display:flex;align-items:center}.excalidraw .ExcalidrawLogo svg{flex:0 0 auto}.excalidraw .ExcalidrawLogo .ExcalidrawLogo-icon{width:auto;color:var(--color-logo-icon)}.excalidraw .ExcalidrawLogo .ExcalidrawLogo-text{margin-left:.75rem;width:auto;color:var(--color-logo-text)}.excalidraw .ExcalidrawLogo.is-xs .ExcalidrawLogo-icon{height:var(--logo-icon--xs)}.excalidraw .ExcalidrawLogo.is-xs .ExcalidrawLogo-text{height:var(--logo-text--xs)}.excalidraw .ExcalidrawLogo.is-small .ExcalidrawLogo-icon{height:var(--logo-icon--small)}.excalidraw .ExcalidrawLogo.is-small .ExcalidrawLogo-text{height:var(--logo-text--small)}.excalidraw .ExcalidrawLogo.is-normal .ExcalidrawLogo-icon{height:var(--logo-icon--normal)}.excalidraw .ExcalidrawLogo.is-normal .ExcalidrawLogo-text{height:var(--logo-text--normal)}.excalidraw .ExcalidrawLogo.is-large .ExcalidrawLogo-icon{height:var(--logo-icon--large)}.excalidraw .ExcalidrawLogo.is-large .ExcalidrawLogo-text{height:var(--logo-text--large)}.excalidraw .excalifont{font-family:Excalifont,Xiaolai}.excalidraw .welcome-screen-decor{pointer-events:none;color:var(--color-gray-40)}.excalidraw .welcome-screen-decor a{--color: var(--color-primary);color:var(--color);text-decoration:none;margin-bottom:-6px}.excalidraw.theme--dark .welcome-screen-decor{color:var(--color-gray-60)}@media (max-height: 599px){.excalidraw .welcome-screen-decor-hint{display:none!important}}@media (max-width: 1024px),(max-width: 800px){.excalidraw .welcome-screen-decor-hint .welcome-screen-decor--help,.excalidraw .welcome-screen-decor-hint .welcome-screen-decor--menu{display:none}}.excalidraw .welcome-screen-decor-hint--help{display:flex;position:absolute;right:0;bottom:100%}:root[dir=rtl] .excalidraw .welcome-screen-decor-hint--help{left:0;right:auto}.excalidraw .welcome-screen-decor-hint--help svg{margin-top:.5rem;width:85px;height:71px;transform:scaleX(-1) rotate(80deg)}:root[dir=rtl] .excalidraw .welcome-screen-decor-hint--help svg{transform:rotate(80deg)}.excalidraw .welcome-screen-decor-hint--toolbar{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:2.5rem;display:flex;align-items:baseline}.excalidraw .welcome-screen-decor-hint--toolbar .welcome-screen-decor-hint__label{width:120px;position:relative;top:-.5rem}.excalidraw .welcome-screen-decor-hint--toolbar svg{width:38px;height:78px}:root[dir=rtl] .excalidraw .welcome-screen-decor-hint--toolbar svg{transform:scaleX(-1)}.excalidraw .welcome-screen-decor-hint--menu{position:absolute;width:320px;font-size:1rem;top:100%;margin-top:.25rem;margin-inline-start:.6rem;display:flex;align-items:flex-end;gap:.5rem}.excalidraw .welcome-screen-decor-hint--menu svg{width:41px;height:94px}:root[dir=rtl] .excalidraw .welcome-screen-decor-hint--menu svg{transform:scaleX(-1)}@media (max-width: 860px){.excalidraw .welcome-screen-decor-hint--menu .welcome-screen-decor-hint__label{max-width:160px}}.excalidraw .welcome-screen-center{display:flex;flex-direction:column;gap:2rem;justify-content:center;align-items:center;position:absolute;pointer-events:none;inset:1rem}.excalidraw .welcome-screen-center__logo{display:flex;align-items:center;column-gap:.75rem;font-size:2.25rem}.excalidraw .welcome-screen-center__heading{font-size:1.125rem;text-align:center}.excalidraw .welcome-screen-menu{display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:center}.excalidraw .welcome-screen-menu-item{box-sizing:border-box;pointer-events:var(--ui-pointerEvents);color:var(--color-gray-50);font-size:.875rem;width:100%;min-width:300px;max-width:400px;display:grid;align-items:center;justify-content:space-between;background:none;border:1px solid transparent;padding:.75rem;border-radius:var(--border-radius-md);grid-template-columns:calc(var(--default-icon-size) + .5rem) 1fr 3rem}.excalidraw .welcome-screen-menu-item__text{display:flex;align-items:center;margin-right:auto;text-align:left;column-gap:.5rem}.excalidraw .welcome-screen-menu-item__icon{width:var(--default-icon-size);height:var(--default-icon-size)}.excalidraw .welcome-screen-menu-item__shortcut{margin-left:auto;color:var(--color-gray-40);font-size:.75rem}.excalidraw .welcome-screen-menu-item:hover{text-decoration:none;background:var(--button-hover-bg)}.excalidraw .welcome-screen-menu-item:hover .welcome-screen-menu-item__shortcut,.excalidraw .welcome-screen-menu-item:hover .welcome-screen-menu-item__icon,.excalidraw .welcome-screen-menu-item:hover .welcome-screen-menu-item__text{color:var(--color-gray-100)}.excalidraw .welcome-screen-menu-item:active{background:var(--button-hover-bg);border-color:var(--color-brand-active)}.excalidraw .welcome-screen-menu-item:active .welcome-screen-menu-item__shortcut,.excalidraw .welcome-screen-menu-item:active .welcome-screen-menu-item__icon,.excalidraw .welcome-screen-menu-item:active .welcome-screen-menu-item__text{color:var(--color-gray-100)}.excalidraw.theme--dark .welcome-screen-menu-item,.excalidraw.theme--dark .welcome-screen-menu-item__shortcut{color:var(--color-gray-60)}.excalidraw.theme--dark .welcome-screen-menu-item:hover{background-color:var(--color-surface-low)}.excalidraw.theme--dark .welcome-screen-menu-item:hover .welcome-screen-menu-item__icon,.excalidraw.theme--dark .welcome-screen-menu-item:hover .welcome-screen-menu-item__shortcut,.excalidraw.theme--dark .welcome-screen-menu-item:hover .welcome-screen-menu-item__text,.excalidraw.theme--dark .welcome-screen-menu-item:active .welcome-screen-menu-item__icon,.excalidraw.theme--dark .welcome-screen-menu-item:active .welcome-screen-menu-item__shortcut,.excalidraw.theme--dark .welcome-screen-menu-item:active .welcome-screen-menu-item__text{color:var(--color-gray-10)}@media (max-height: 599px){.excalidraw .welcome-screen-center{margin-top:4rem}}@media (min-height: 600px) and (max-height: 900px){.excalidraw .welcome-screen-center{margin-top:8rem}}@media (max-height: 500px),(max-width: 320px){.excalidraw .welcome-screen-center{display:none}}.excalidraw .collab-button{--button-bg: var(--color-primary);--button-color: var(--color-surface-lowest);--button-border: var(--color-primary);--button-width: var(--lg-button-size);--button-height: var(--lg-button-size);--button-hover-bg: var(--color-primary-darker);--button-hover-border: var(--color-primary-darker);--button-active-bg: var(--color-primary-darker);box-shadow:0 0 0 1px var(--color-surface-lowest);flex-shrink:0}.excalidraw .collab-button.active.active{background-color:#0fb884;border-color:#0fb884}.excalidraw .collab-button.active.active svg{color:#fff}.excalidraw .collab-button.active.active:hover,.excalidraw .collab-button.active.active:active{background-color:#0fb884;border-color:#0fb884}.excalidraw .CollabButton.is-collaborating{background-color:var(--button-special-active-bg-color)}.excalidraw .CollabButton.is-collaborating .ToolIcon__icon svg,.excalidraw .CollabButton.is-collaborating .ToolIcon__label{color:var(--icon-green-fill-color)}.excalidraw .CollabButton-collaborators{min-width:1em;min-height:1em;line-height:1;position:absolute;bottom:-5px;padding:3px;border-radius:50%;background-color:#b2f2bb;color:#2b8a3e;font-size:.6rem;font-family:Cascadia}:root[dir=ltr] .excalidraw .CollabButton-collaborators{right:-5px}:root[dir=rtl] .excalidraw .CollabButton-collaborators{left:-5px}
/* Drawing App - Excalidraw wrapper */

.drawing-app {
  display: flex;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

/* Sidebar */
.drawing-sidebar {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: width 0.2s ease, opacity 0.2s ease;
  overflow: hidden;
}

.drawing-sidebar.collapsed {
  width: 0;
  border-right: none;
}

.drawing-sidebar.collapsed .drawing-sidebar-header,
.drawing-sidebar.collapsed .drawing-list {
  opacity: 0;
  pointer-events: none;
}

.drawing-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drawing-sidebar-title {
  white-space: nowrap;
}

.drawing-sidebar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.drawing-new-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 6px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawing-new-btn:hover {
  background: rgba(var(--accent-rgb), 0.5);
}

.drawing-collapse-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawing-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.drawing-toolbar-btn.expand-btn {
  font-size: 16px;
  padding: 6px 10px;
}

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

.drawing-empty {
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}

.drawing-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
  background: transparent;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.drawing-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.drawing-item.active {
  background: rgba(var(--accent-rgb), 0.25);
}

.drawing-item-name {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.drawing-item:hover .drawing-item-name,
.drawing-item.active .drawing-item-name {
  color: white;
}

.drawing-item-delete {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.drawing-item:hover .drawing-item-delete {
  opacity: 1;
}

.drawing-item-delete:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Main area */
.drawing-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Toolbar */
.drawing-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.drawing-toolbar-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawing-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.drawing-filename {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.drawing-saving {
  color: rgba(74, 222, 128, 0.8);
  font-weight: 400;
}

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

/* Canvas */
.drawing-canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Excalidraw container must have explicit dimensions */
.drawing-canvas .excalidraw-wrapper,
.drawing-canvas > div {
  width: 100% !important;
  height: 100% !important;
}

.drawing-canvas .excalidraw {
  width: 100% !important;
  height: 100% !important;
}


/* Placeholder */
.drawing-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: transparent;
}

.drawing-placeholder-content {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.drawing-placeholder-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.drawing-placeholder-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.drawing-placeholder-content p {
  margin: 0 0 24px;
  font-size: 14px;
}

.drawing-placeholder-btn {
  padding: 10px 20px;
  background: rgba(var(--accent-rgb), 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawing-placeholder-btn:hover {
  background: rgba(var(--accent-rgb), 0.5);
}

/* Dialog */
.drawing-dialog-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 100;
}

.drawing-dialog {
  width: 320px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.drawing-dialog h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.drawing-dialog-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  outline: none;
  transition: all 0.15s ease;
}

.drawing-dialog-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.drawing-dialog-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.drawing-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.drawing-dialog-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawing-dialog-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.drawing-dialog-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.drawing-dialog-btn.primary {
  background: rgba(var(--accent-rgb), 0.8);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  color: white;
}

.drawing-dialog-btn.primary:hover {
  background: rgba(var(--accent-rgb), 0.95);
}

.drawing-dialog-btn.danger {
  background: rgba(239, 68, 68, 0.8);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: white;
}

.drawing-dialog-btn.danger:hover {
  background: rgba(239, 68, 68, 0.95);
}

.drawing-dialog-message {
  margin: 0 0 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* Sidebar scrollbar */
.drawing-list::-webkit-scrollbar {
  width: 6px;
}

.drawing-list::-webkit-scrollbar-track {
  background: transparent;
}

.drawing-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.drawing-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* Canvas App Styles */

.canvas-app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--os-glass-bg-solid); /* Canvas needs solid — content is pinboard items */
  color: var(--os-text-primary);
  overflow: hidden;
  touch-action: none; /* Prevent browser pinch-to-zoom */
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================
   Canvas List View
   ============================================ */

.canvas-list-view {
  padding: 1.5rem;
}

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

.canvas-list-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.canvas-new-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 8px;
  color: rgba(var(--accent-rgb), 1);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.canvas-new-btn:hover {
  background: rgba(var(--accent-rgb), 0.3);
}

.canvas-new-input {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.canvas-new-input input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 0.9rem;
}

.canvas-new-input input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.canvas-new-input button {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.canvas-new-input button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.canvas-new-input button:first-of-type {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: white;
}

/* New pinboard creation form */
.canvas-new-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem;
}

.canvas-new-form-name {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
}

.canvas-new-form-name:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.canvas-new-form-field {
  padding: 0.45rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
}

.canvas-new-form-field:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}

.canvas-new-form-field::placeholder,
.canvas-new-form-name::placeholder {
  color: var(--os-text-hint);
}

.canvas-new-form-preview {
  border-radius: 6px;
  overflow: hidden;
  max-height: 200px;
  background: rgba(0, 0, 0, 0.2);
}

.canvas-new-form-preview img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  display: none;
}

.canvas-new-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.canvas-new-form-actions button {
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.canvas-new-form-actions button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.canvas-new-form-create {
  background: rgba(var(--accent-rgb), 0.3) !important;
  border-color: rgba(var(--accent-rgb), 0.4) !important;
  color: white !important;
}

.canvas-new-form-create:disabled {
  opacity: 0.4;
  cursor: default;
}

.canvas-new-form-create:not(:disabled):hover {
  background: rgba(var(--accent-rgb), 0.4) !important;
}

.canvas-loading,
.canvas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem;
  color: var(--os-text-muted);
  text-align: center;
}

.canvas-empty p {
  margin: 0;
}

/* Old list style - kept for reference */
.canvas-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.canvas-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.canvas-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.canvas-list-item svg {
  color: rgba(var(--accent-rgb), 0.7);
}

.canvas-list-item-name {
  flex: 1;
  font-size: 0.9rem;
}

.canvas-list-item-delete {
  padding: 0.25rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-hint);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.canvas-list-item:hover .canvas-list-item-delete {
  opacity: 1;
}

.canvas-list-item-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.9);
}

/* Tiles Grid View */
.canvas-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  padding: 0.5rem 0;
}

.canvas-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.canvas-tile:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.canvas-tile-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
}

.canvas-tile-preview.has-cover {
  background: transparent;
}

.canvas-tile-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canvas-tile-preview svg {
  color: rgba(var(--accent-rgb), 0.5);
}

.canvas-tile:hover .canvas-tile-preview svg {
  color: rgba(var(--accent-rgb), 0.8);
}

.canvas-tile-info {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.canvas-tile-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.canvas-tile-description {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.canvas-tile-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.canvas-tile-modified {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.canvas-tile-modified svg {
  opacity: 0.6;
}

.canvas-tile-pins {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.canvas-tile-pins svg {
  opacity: 0.6;
}

/* Tile action buttons */
.canvas-tile-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.canvas-tile:hover .canvas-tile-actions {
  opacity: 1;
}

.canvas-tile-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.canvas-tile-action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--os-text-primary);
}

.canvas-tile-action.canvas-tile-delete:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
  color: rgba(239, 68, 68, 0.9);
}

/* Delete Confirmation Modal */
.canvas-delete-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.15s ease;
}

.canvas-delete-modal {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.canvas-delete-modal-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  color: rgba(239, 68, 68, 0.9);
}

.canvas-delete-modal h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.canvas-delete-modal p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

.canvas-delete-modal p strong {
  color: var(--os-text-primary);
}

.canvas-delete-modal-warning {
  font-size: 0.8rem !important;
  color: rgba(239, 68, 68, 0.8) !important;
  margin-bottom: 1.25rem !important;
}

.canvas-delete-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.canvas-delete-modal-btn {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.canvas-delete-modal-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--os-text-secondary);
}

.canvas-delete-modal-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-primary);
}

.canvas-delete-modal-btn.delete {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}

.canvas-delete-modal-btn.delete:hover {
  background: rgba(239, 68, 68, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Cover Image Modal */
.canvas-cover-modal {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: scaleIn 0.2s ease;
}

.canvas-cover-modal-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  color: rgba(var(--accent-rgb), 0.9);
}

.canvas-cover-modal h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.canvas-cover-modal p {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--os-text-muted);
}

.canvas-cover-modal-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease;
}

.canvas-cover-modal-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}

.canvas-details-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.canvas-cover-modal-input::placeholder {
  color: var(--os-text-hint);
}

.canvas-cover-modal-preview {
  margin-top: 1rem;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  max-height: 150px;
}

.canvas-cover-modal-preview img {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: cover;
  display: none;
}

/* Canvas Tile Context Menu */
.canvas-tile-context-menu {
  position: fixed;
  min-width: 160px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  animation: contextMenuIn 0.12s ease;
}

@keyframes contextMenuIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.canvas-tile-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s ease;
}

.canvas-tile-context-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.canvas-tile-context-item svg {
  opacity: 0.7;
}

.canvas-tile-context-item.danger {
  color: rgba(239, 68, 68, 0.9);
}

.canvas-tile-context-item.danger:hover {
  background: rgba(239, 68, 68, 0.15);
}

.canvas-tile-context-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 8px;
}

/* Rename input */
.canvas-tile-rename-input {
  width: 100%;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--os-text-primary);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 4px;
  outline: none;
}

.canvas-tile-rename-input:focus {
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}

.canvas-tile.renaming {
  outline: 2px solid rgba(var(--accent-rgb), 0.3);
  outline-offset: 2px;
}

/* ============================================
   Canvas Toolbar
   ============================================ */

.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.canvas-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.canvas-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.canvas-toolbar-btn.canvas-toolbar-add {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
}

.canvas-toolbar-btn.canvas-toolbar-add:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: rgba(var(--accent-rgb), 1);
}

.canvas-toolbar-title {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--os-text-secondary);
}

.canvas-toolbar-zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.canvas-toolbar-zoom button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.canvas-toolbar-zoom button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.canvas-toolbar-zoom span {
  min-width: 48px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

/* ============================================
   Canvas Settings
   ============================================ */

.canvas-toolbar-settings {
  position: relative;
}

.canvas-toolbar-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(var(--accent-rgb), 1);
}

.canvas-settings-popover {
  width: 320px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 0;
  background: rgba(22, 22, 22, 0.97);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 999999;
}

.settings-section {
  padding: 0.75rem 1.25rem;
}

.settings-section:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-section-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--os-text-muted);
  margin-bottom: 0.5rem;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-label {
  font-size: 0.8rem;
  color: var(--os-text-secondary);
}

.settings-toggle {
  width: 36px;
  height: 20px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-toggle.active {
  background: rgba(var(--accent-rgb), 0.5);
}

.settings-toggle-knob {
  display: block;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.settings-toggle.active .settings-toggle-knob {
  transform: translateX(16px);
}

.settings-presets {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.settings-preset-btn {
  flex: 1;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-preset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.settings-preset-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(var(--accent-rgb), 1);
}

/* Color grid for background presets */
.settings-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.settings-color-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-color-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.settings-color-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.settings-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.settings-color-label {
  font-size: 0.6rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.settings-color-btn.active .settings-color-label {
  color: rgba(var(--accent-rgb), 0.9);
}

/* Custom color picker */
.settings-color-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
}

.settings-color-picker {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}

.settings-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.settings-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

/* Wallpaper settings */
.settings-wallpaper-content {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.settings-wallpaper-options {
  display: flex;
  gap: 6px;
}

.settings-wallpaper-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-wallpaper-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.settings-wallpaper-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: rgba(var(--accent-rgb), 1);
}

.settings-wallpaper-btn svg {
  opacity: 0.7;
}

.settings-wallpaper-btn.active svg {
  opacity: 1;
}

.settings-wallpaper-opacity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.settings-opacity-label {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  min-width: 50px;
}

.settings-opacity-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
}

.settings-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: rgba(var(--accent-rgb), 1);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.settings-opacity-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.settings-opacity-value {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  min-width: 32px;
  text-align: right;
}

.settings-wallpaper-url {
  margin-top: 4px;
}

.settings-url-input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.75rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  outline: none;
  transition: border-color 0.15s ease;
}

.settings-url-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.settings-url-input::placeholder {
  color: var(--os-text-hint);
}

/* ============================================
   Canvas Viewport
   ============================================ */

.canvas-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  contain: layout style;
  transition: background-color 0.2s ease;
  touch-action: none; /* Prevent browser gestures */
}

/* Wallpaper layer */
.canvas-wallpaper {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}

.canvas-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  will-change: transform;
}

.canvas-grid {
  --grid-opacity: 0.03;
  position: absolute;
  left: -20000px;
  top: -20000px;
  width: 40000px;
  height: 40000px;
  background-image:
    linear-gradient(rgba(255, 255, 255, var(--grid-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, var(--grid-opacity)) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

.canvas-grid.light {
  background-image:
    linear-gradient(rgba(0, 0, 0, max(var(--grid-opacity), 0.08)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, max(var(--grid-opacity), 0.08)) 1px, transparent 1px);
}

/* ============================================
   Canvas Pins - Matches Desktop Sticky Notes
   ============================================ */

.canvas-pin {
  position: absolute;
  background: var(--pin-bg);
  border: 1px solid var(--pin-border);
  border-radius: 2px;
  color: var(--pin-text);
  transform: rotate(var(--pin-rotation, 0deg));
  box-shadow:
    2px 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08);
  cursor: grab;
  user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: visible;
  z-index: 1;
  /* Reduce flicker — isolate each pin's paint and layout */
  contain: layout style;
  will-change: transform;
}

/* Top shadow effect for paper-like appearance */
.canvas-pin::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  height: 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent);
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}

/* Invisible hover buffer zone - makes the hover area bigger than the visible pin
   so connection points stay visible when moving slightly beyond the pin edge */
.canvas-pin::after {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  pointer-events: auto;
  cursor: grab;
  /* Debug: uncomment to see hover area */
  /* background: rgba(255, 0, 0, 0.1); */
}

/* Transparent pins - minimal styling */
.canvas-pin.transparent {
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
}

.canvas-pin.transparent::before {
  display: none;
}

.canvas-pin:hover {
  transform: rotate(var(--pin-rotation, 0deg)) scale(1.02);
  box-shadow:
    3px 5px 15px rgba(0, 0, 0, 0.35),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08);
}

.canvas-pin.transparent:hover {
  transform: rotate(var(--pin-rotation, 0deg)) scale(1.02);
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.2);
}

.canvas-pin.selected {
  outline: 2px dashed rgba(255, 255, 255, 0.6);
  outline-offset: 6px;
}

.canvas-pin.dragging {
  cursor: grabbing;
  transform: rotate(var(--pin-rotation, 0deg)) scale(1.05);
  box-shadow:
    8px 12px 30px rgba(0, 0, 0, 0.45),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  transition: none;
}

.canvas-pin.transparent.dragging {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Media pins (video, spotify, image) - no paper effect */
.canvas-pin.video,
.canvas-pin.image {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Spotify and embed pins - transparent background to blend with iframe content */
.canvas-pin.spotify,
.canvas-pin.embed {
  border-radius: 12px;
  background: transparent !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  /* Keep overflow visible for connection points - content clipping handled by inner container */
  overflow: visible;
}

.canvas-pin.video::before,
.canvas-pin.spotify::before,
.canvas-pin.image::before,
.canvas-pin.embed::before {
  display: none;
}

.canvas-pin.video:hover,
.canvas-pin.image:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.canvas-pin.spotify:hover,
.canvas-pin.embed:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.canvas-pin.video.dragging,
.canvas-pin.spotify.dragging,
.canvas-pin.image.dragging,
.canvas-pin.embed.dragging {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* Text pin */
.canvas-pin-text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  overflow: hidden;
}

.canvas-pin-text textarea {
  width: 100%;
  flex: 1;
  background: transparent;
  border: none;
  color: var(--pin-text);
  font-size: 0.9rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
}

.canvas-pin-text-content {
  width: 100%;
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--pin-text);
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.canvas-pin-source-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--pin-text);
  opacity: 0.6;
  text-decoration: none;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transition: opacity 0.15s ease;
}

.canvas-pin-source-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Image pin */
.canvas-pin-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.canvas-pin-image {
  width: 100%;
  flex: 1;
  object-fit: cover;
  border-radius: 2px;
  min-height: 0;
}

/* Annotation bar for images and media */
.canvas-pin-annotation {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  border-radius: 0 0 6px 6px;
  min-height: 28px;
}

.canvas-pin-annotation-text {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--os-text-primary);
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}

.canvas-pin-annotation-text:empty::before,
.canvas-pin.selected .canvas-pin-annotation-text:not(:empty)::before {
  content: none;
}

.canvas-pin.selected .canvas-pin-annotation-text:empty {
  color: var(--os-text-muted);
  font-style: italic;
}

.canvas-pin-annotation-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: white;
  outline: none;
}

.canvas-pin-annotation-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.canvas-pin-annotation-input::placeholder {
  color: var(--os-text-muted);
}

/* Annotation bar for media pins (video, spotify, embed) */
.canvas-pin-image-wrapper .canvas-pin-annotation.media,
.canvas-pin-video .canvas-pin-annotation.media,
.canvas-pin-spotify .canvas-pin-annotation.media,
.canvas-pin-embed-container .canvas-pin-annotation.media {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 8px 8px;
  padding: 8px 12px;
  margin-top: -2px;
  flex-shrink: 0;
  z-index: 10;
}

/* Override text badge for media pins - just text, no background */
.canvas-pin-annotation.media .canvas-pin-annotation-text {
  background: none;
  border: none;
  padding: 0;
}

/* Iframe wrapper - takes remaining flex space and contains the scaled iframe */
.canvas-pin-iframe-wrapper {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

/* Video/Spotify iframe - scaled to fit while showing full content */
.canvas-pin-iframe {
  position: absolute;
  top: 0;
  left: 0;
  /* Render at fixed size, then scale to fit container */
  width: var(--iframe-native-width, 640px);
  height: var(--iframe-native-height, 360px);
  border: none;
  display: block;
  transform-origin: top left;
  /* Scale is calculated via JS and set as CSS variable */
  transform: scale(var(--iframe-scale, 1));
}

/* When annotation exists, iframe wrapper should not have bottom radius */
.canvas-pin-video:has(.canvas-pin-annotation) .canvas-pin-iframe-wrapper,
.canvas-pin-spotify:has(.canvas-pin-annotation) .canvas-pin-iframe-wrapper,
.canvas-pin-embed-container:has(.canvas-pin-annotation) .canvas-pin-iframe-wrapper {
  border-radius: 0;
}

/* Video/Spotify/Embed container */
.canvas-pin-video,
.canvas-pin-spotify,
.canvas-pin-embed-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
}

/* Give internal containers dark backgrounds to match their embeds */
.canvas-pin-video {
  background: #000;
}

.canvas-pin-spotify {
  background: #121212; /* Spotify's dark background */
}

.canvas-pin-embed-container {
  background: #1e1e1e;
}

/* Pin Titlebar */
.canvas-pin-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 8px;
  background: rgba(30, 30, 30, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px 12px 0 0;
  cursor: grab;
  flex-shrink: 0;
}

.canvas-pin-titlebar.spotify {
  background: rgba(18, 18, 18, 0.95);
  border-bottom-color: rgba(30, 215, 96, 0.2);
}

.canvas-pin-titlebar.embed {
  background: rgba(30, 30, 30, 0.95);
  border-bottom-color: rgba(251, 146, 60, 0.2);
}

.canvas-pin-drag-handle {
  color: var(--os-text-muted);
  flex-shrink: 0;
}

.canvas-pin-type-label {
  flex: 1;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--os-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.canvas-pin-titlebar.spotify .canvas-pin-type-label {
  color: rgba(30, 215, 96, 0.8);
}

.canvas-pin-titlebar.embed .canvas-pin-type-label {
  color: rgba(251, 146, 60, 0.8);
}

.canvas-pin-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.canvas-pin-close:hover {
  background: rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 1);
}

.canvas-pin-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.canvas-pin-open:hover {
  background: rgba(56, 189, 248, 0.24);
  color: rgba(125, 211, 252, 1);
}

/* Overlay to capture scroll/gesture events for pan/zoom */
/* Positioned below titlebar so titlebar remains interactive */
.canvas-pin.video::after,
/* Overlay for spotify/embed to block iframe interactions + extended hover buffer */
.canvas-pin.spotify::after,
.canvas-pin.embed::after {
  content: '';
  position: absolute;
  /* Extended bounds for hover buffer zone */
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  background: transparent;
  z-index: 5;
  cursor: grab;
  pointer-events: auto;
}

/* Inner overlay to block iframe interactions (separate from hover buffer) */
.canvas-pin.video .canvas-pin-iframe-wrapper::before,
.canvas-pin.spotify .canvas-pin-iframe-wrapper::before,
.canvas-pin.embed .canvas-pin-embed-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  cursor: grab;
  border-radius: 0 0 12px 12px;
  pointer-events: auto;
}

/* In interaction mode (double-click to toggle), allow interaction with embed */
.canvas-pin.video.interaction-mode::after,
.canvas-pin.spotify.interaction-mode::after,
.canvas-pin.embed.interaction-mode::after {
  pointer-events: none;
}

.canvas-pin.video.interaction-mode .canvas-pin-iframe-wrapper::before,
.canvas-pin.spotify.interaction-mode .canvas-pin-iframe-wrapper::before,
.canvas-pin.embed.interaction-mode .canvas-pin-embed-container::before {
  pointer-events: none;
}

/* Show visual indicator when in interaction mode */
.canvas-pin.video.interaction-mode,
.canvas-pin.spotify.interaction-mode,
.canvas-pin.embed.interaction-mode {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Keep overlay during drag/resize to prevent iframe from capturing events */
.canvas-pin.video.dragging::after,
.canvas-pin.spotify.dragging::after,
.canvas-pin.embed.dragging::after,
.canvas-pin.video.resizing::after,
.canvas-pin.spotify.resizing::after,
.canvas-pin.embed.resizing::after {
  pointer-events: auto;
  cursor: grabbing;
}

/* Resize/Rotate handles for video/spotify/embed pins */
.canvas-pin.video .canvas-pin-resize,
.canvas-pin.spotify .canvas-pin-resize,
.canvas-pin.embed .canvas-pin-resize {
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.canvas-pin.video:hover .canvas-pin-resize,
.canvas-pin.spotify:hover .canvas-pin-resize,
.canvas-pin.embed:hover .canvas-pin-resize,
.canvas-pin.video.selected .canvas-pin-resize,
.canvas-pin.spotify.selected .canvas-pin-resize,
.canvas-pin.embed.selected .canvas-pin-resize {
  opacity: 1;
}

.canvas-pin.spotify .canvas-pin-resize::before {
  border-color: rgba(30, 215, 96, 0.7);
}

.canvas-pin.embed .canvas-pin-resize::before {
  border-color: rgba(251, 146, 60, 0.7);
}

.canvas-pin.video .canvas-pin-rotate,
.canvas-pin.spotify .canvas-pin-rotate,
.canvas-pin.embed .canvas-pin-rotate {
  z-index: 10;
  background: rgba(30, 30, 30, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
}

.canvas-pin.video:hover .canvas-pin-rotate,
.canvas-pin.spotify:hover .canvas-pin-rotate,
.canvas-pin.embed:hover .canvas-pin-rotate,
.canvas-pin.video.selected .canvas-pin-rotate,
.canvas-pin.spotify.selected .canvas-pin-rotate,
.canvas-pin.embed.selected .canvas-pin-rotate {
  opacity: 1;
}

.canvas-pin.spotify .canvas-pin-rotate {
  background: rgba(18, 18, 18, 0.9);
  border-color: rgba(30, 215, 96, 0.3);
}

.canvas-pin.spotify .canvas-pin-rotate svg {
  color: rgba(30, 215, 96, 0.7);
}

.canvas-pin.embed .canvas-pin-rotate {
  background: rgba(30, 30, 30, 0.9);
  border-color: rgba(251, 146, 60, 0.3);
}

.canvas-pin.embed .canvas-pin-rotate svg {
  color: rgba(251, 146, 60, 0.7);
}

/* Embed pin content (inside container) */
.canvas-pin-embed {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgba(30, 30, 30, 1);
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

.canvas-pin-embed-thumb {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
}

.canvas-pin-embed-placeholder {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(var(--accent-rgb), 0.1));
  color: var(--os-text-hint);
}

.canvas-pin-embed-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.5);
}

.canvas-pin-embed-site {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(251, 146, 60, 0.9);
  text-transform: uppercase;
}

.canvas-pin-embed-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Resize handle */
.canvas-pin-resize {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

.canvas-pin-resize::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}

.canvas-pin:hover .canvas-pin-resize {
  opacity: 1;
}

.canvas-pin-resize:hover {
  background: rgba(var(--accent-rgb), 0.4);
  border-color: rgba(var(--accent-rgb), 0.6);
}

.canvas-pin-resize:hover::before {
  border-color: white;
}

/* Rotation handle */
.canvas-pin-rotate {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%) rotate(calc(-1 * var(--pin-rotation, 0deg)));
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}

/* Line connecting rotation handle to pin */
.canvas-pin-rotate::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}

.canvas-pin-rotate svg {
  color: var(--os-text-secondary);
}

.canvas-pin:hover .canvas-pin-rotate {
  opacity: 1;
}

.canvas-pin-rotate:hover {
  background: rgba(var(--accent-rgb), 0.4);
  border-color: rgba(var(--accent-rgb), 0.6);
  transform: translateX(-50%) rotate(calc(-1 * var(--pin-rotation, 0deg))) scale(1.1);
}

.canvas-pin-rotate:hover svg {
  color: white;
}

.canvas-pin-rotate:active {
  cursor: grabbing;
}

/* ============================================
   Border Color Picker
   ============================================ */

/* Pin toolbar (color picker + annotation) */
.canvas-pin-toolbar {
  position: absolute;
  /* Position and transform calculated in JS to account for rotation */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 100;
}

.canvas-pin-border-picker {
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.border-picker-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}

.border-color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.border-color-btn.none {
  border-style: dashed;
}

.border-color-btn.annotation-btn {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(var(--accent-rgb), 0.9);
}

.border-color-btn.annotation-btn:hover {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.6);
}

.border-color-btn.annotation-btn.has-annotation {
  background: rgba(var(--accent-rgb), 0.4);
  border-color: rgba(var(--accent-rgb), 0.8);
  color: white;
}

.border-color-btn.delete-btn {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: rgba(239, 68, 68, 0.9);
}

.border-color-btn.delete-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: rgba(239, 68, 68, 0.6);
  color: white;
}

/* Annotation popover below toolbar */
.canvas-pin-annotation-popover {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  min-width: 220px;
}

.canvas-pin-annotation-popover .canvas-pin-annotation-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: white;
  outline: none;
  resize: vertical;
  min-height: 60px;
  max-height: 150px;
  font-family: inherit;
  line-height: 1.4;
}

.canvas-pin-annotation-popover .canvas-pin-annotation-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.canvas-pin-annotation-popover .canvas-pin-annotation-input::placeholder {
  color: var(--os-text-muted);
}

.border-color-btn.none svg {
  color: var(--os-text-muted);
}

.border-color-btn:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.5);
}

.border-color-btn.active {
  border-color: white;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Pin with border color */
.canvas-pin.has-border-color {
  border: 2px solid var(--pin-accent-color) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--pin-accent-color) 40%, transparent),
              0 4px 16px rgba(0, 0, 0, 0.3);
}

.canvas-pin.has-border-color.selected {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.6),
              0 0 16px color-mix(in srgb, var(--pin-accent-color) 50%, transparent),
              0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ============================================
   Edge Labels
   ============================================ */

.edge-label-input {
  width: 180px;
  text-align: center;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: white;
  font-size: 13px;
  padding: 6px 12px;
  outline: none;
  margin: 0 auto;
  display: block;
}

.edge-label-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

.edge-label {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  cursor: grab;
  padding: 6px 14px;
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  white-space: nowrap;
  display: inline-block;
  margin: 0 auto;
  width: fit-content;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  user-select: none;
}

.edge-label:hover {
  background: rgba(50, 50, 50, 0.95);
  border-color: rgba(255, 255, 255, 0.25);
}

.edge-label:active {
  cursor: grabbing;
}

/* ============================================
   Alignment Guides
   ============================================ */

.alignment-guide {
  stroke: rgba(var(--accent-rgb), 0.7);
  stroke-width: 1;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

.alignment-guide.horizontal {
  stroke: rgba(56, 189, 248, 0.7);
}

.alignment-guide.vertical {
  stroke: rgba(251, 113, 133, 0.7);
}

/* ============================================
   Groups / Areas
   ============================================ */

.canvas-group {
  position: absolute;
  background: color-mix(in srgb, var(--group-color) 8%, transparent);
  border: 2px dashed color-mix(in srgb, var(--group-color) 40%, transparent);
  border-radius: 12px;
  z-index: 0;
  overflow: visible;
  cursor: grab;
}


.canvas-group:hover {
  background: color-mix(in srgb, var(--group-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--group-color) 60%, transparent);
}

.canvas-group.selected {
  border-style: solid;
  border-color: var(--group-color);
  background: color-mix(in srgb, var(--group-color) 15%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--group-color) 30%, transparent);
}

.canvas-group-label {
  position: absolute;
  top: -28px;
  left: 8px;
  pointer-events: auto;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--group-color) 90%, black);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.canvas-group-label input {
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 12px;
  font-weight: 600;
  width: 150px;
  padding: 0;
}

.canvas-group-label input::placeholder {
  color: var(--os-text-muted);
}

.canvas-group-label span {
  opacity: 0.9;
}

/* Group toolbar (color picker + description button) */
.canvas-group-toolbar {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

.canvas-group-color-picker {
  display: flex;
  gap: 4px;
}

.canvas-group-description-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-left: 4px;
}

.canvas-group-description-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-secondary);
}

.canvas-group-description-btn.has-description {
  color: rgba(74, 222, 128, 0.8);
  border-color: rgba(74, 222, 128, 0.3);
}

/* Group description popover */
.canvas-group-description-popover {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  padding: 8px;
  background: rgba(30, 30, 30, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  z-index: 101;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.canvas-group-description-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  padding: 8px;
  resize: none;
  font-family: inherit;
}

.canvas-group-description-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.canvas-group-description-input::placeholder {
  color: var(--os-text-hint);
}

/* Group description preview (shown at bottom of group) */
.canvas-group-description-preview {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  cursor: text;
  pointer-events: auto;
  max-height: 80px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  transition: background 0.15s ease;
}

.canvas-group-description-preview:hover {
  background: rgba(0, 0, 0, 0.7);
  color: var(--os-text-primary);
}

.group-color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  padding: 0;
}

.group-color-btn:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.5);
}

.group-color-btn.active {
  border-color: white;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Group resize handles */
.canvas-group-resize {
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border: 2px solid var(--group-color);
  border-radius: 3px;
  z-index: 10;
  pointer-events: auto;
}

.canvas-group-resize.nw {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}

.canvas-group-resize.ne {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}

.canvas-group-resize.sw {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}

.canvas-group-resize.se {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}

.canvas-group-resize:hover {
  background: var(--group-color);
}

/* Group connection points (edge anchors) */
.canvas-group-connection-point {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(var(--accent-rgb), 0.6);
  border: 2px solid rgba(var(--accent-rgb), 1);
  border-radius: 50%;
  cursor: crosshair;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: auto;
}

.canvas-group:hover .canvas-group-connection-point,
.canvas-group.selected .canvas-group-connection-point {
  opacity: 1;
}

.canvas-group-connection-point:hover {
  transform: scale(1.3);
  background: rgba(var(--accent-rgb), 0.9);
}

.canvas-group-connection-point.top {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.canvas-group-connection-point.top:hover {
  transform: translateX(-50%) scale(1.3);
}

.canvas-group-connection-point.bottom {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.canvas-group-connection-point.bottom:hover {
  transform: translateX(-50%) scale(1.3);
}

.canvas-group-connection-point.left {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
}

.canvas-group-connection-point.left:hover {
  transform: translateY(-50%) scale(1.3);
}

.canvas-group-connection-point.right {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
}

.canvas-group-connection-point.right:hover {
  transform: translateY(-50%) scale(1.3);
}

/* ============================================
   Selection Box
   ============================================ */

.canvas-selection-box {
  position: absolute;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px dashed rgba(var(--accent-rgb), 0.5);
  pointer-events: none;
  z-index: 10000;
}

/* ============================================
   Minimap
   ============================================ */

.canvas-minimap {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 150px;
  height: 100px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  z-index: 100;
  transition: opacity 0.2s ease;
}

.canvas-minimap:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.canvas-minimap:active,
.canvas-minimap.dragging {
  cursor: grabbing;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.minimap-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.minimap-pin {
  position: absolute;
  border-radius: 2px;
  opacity: 0.65;
  min-width: 3px;
  min-height: 3px;
}

.minimap-viewport {
  position: absolute;
  border: 1.5px solid rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 2px;
  pointer-events: none;
}

/* ============================================
   Add Menu
   ============================================ */

.canvas-add-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.canvas-add-menu {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 10001;
  min-width: 140px;
}

.canvas-add-menu button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.canvas-add-menu button:hover {
  background: rgba(var(--accent-rgb), 0.2);
  color: white;
}

.canvas-add-menu button svg {
  color: rgba(var(--accent-rgb), 0.7);
}

.canvas-add-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

/* ============================================
   URL Input Modal
   ============================================ */

.canvas-url-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
}

.canvas-url-modal {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
  width: 400px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.canvas-url-modal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--os-text-primary);
  font-size: 0.95rem;
  font-weight: 500;
}

.canvas-url-modal-header svg {
  color: rgba(var(--accent-rgb), 0.8);
}

.canvas-url-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease;
}

.canvas-url-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.canvas-url-input::placeholder {
  color: var(--os-text-hint);
}

.canvas-url-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.canvas-url-modal-actions button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.canvas-url-modal-actions button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.canvas-url-modal-actions button.primary {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: white;
}

.canvas-url-modal-actions button.primary:hover {
  background: rgba(var(--accent-rgb), 0.4);
}

/* ============================================
   Pin Modal (matching desktop sticky notes)
   ============================================ */

.canvas-pin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100003;
  touch-action: none;
}

.canvas-pin-modal {
  width: 90%;
  max-width: 700px;
  height: 80vh;
  max-height: 80vh;
  background: rgba(25, 25, 30, 0.98);
  border: 2px solid var(--modal-accent-color, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--modal-accent-bg, rgba(255, 255, 255, 0.05));
  animation: canvasPinModalAppear 0.25s ease-out;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.canvas-pin-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
  font-size: 0.95rem;
  font-weight: 500;
  flex-shrink: 0;
}

.canvas-pin-modal-header svg {
  opacity: 0.6;
}

.canvas-pin-modal-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.canvas-pin-modal-close:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.1);
}

.canvas-pin-modal-close svg {
  opacity: 1;
}

/* Type Selector */
.canvas-pin-type-selector {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.canvas-pin-type-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.canvas-pin-type-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.canvas-pin-type-btn.active {
  background: var(--modal-accent-bg, rgba(var(--accent-rgb), 0.2));
  border-color: var(--modal-accent-color, rgba(var(--accent-rgb), 0.5));
  color: var(--os-text-primary);
}

.canvas-pin-type-btn svg {
  opacity: 0.7;
}

.canvas-pin-type-btn.active svg {
  opacity: 1;
}

/* Note Editor in modal */
.canvas-pin-modal .note-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.canvas-pin-modal .note-editor-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.canvas-pin-modal .note-editor-input {
  flex: 1;
  min-height: 200px;
}

/* Video Input */
.canvas-pin-video-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.canvas-pin-video-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.canvas-pin-video-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--os-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  justify-content: center;
}

.canvas-pin-video-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.canvas-pin-video-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--os-text-primary);
}

.canvas-pin-video-preview {
  flex: 1;
  min-height: 200px;
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.canvas-pin-video-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.canvas-pin-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--os-text-hint);
}

.canvas-pin-video-placeholder svg {
  opacity: 0.5;
}

/* Video Search */
.canvas-pin-video-search-input {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  flex-shrink: 0;
}

.canvas-pin-video-search-input input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--os-text-primary);
  font-size: 0.9rem;
  outline: none;
}

.canvas-pin-video-search-input input::placeholder {
  color: var(--os-text-hint);
}

.canvas-pin-video-search-results {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.canvas-pin-video-search-result {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  flex-shrink: 0;
}

.canvas-pin-video-search-result:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.canvas-pin-video-search-result.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.search-result-thumbnail {
  position: relative;
  width: 120px;
  min-width: 120px;
  height: 68px;
  min-height: 68px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  overflow: hidden;
}

.search-result-thumbnail img {
  width: 120px;
  height: 68px;
  object-fit: cover;
}

.search-result-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-hint);
}

.search-result-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  font-size: 0.65rem;
  color: white;
}

.search-result-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.search-result-title {
  font-size: 0.85rem;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search-result-channel {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.canvas-pin-video-no-results,
.canvas-pin-video-search-prompt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--os-text-hint);
}

.canvas-pin-video-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Common button styles */
.canvas-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.canvas-pin-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.canvas-pin-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}

.canvas-pin-btn.save {
  background: rgba(var(--accent-rgb), 0.9);
  color: white;
}

.canvas-pin-btn.save:hover {
  background: rgba(var(--accent-rgb), 1);
}

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

/* Common URL input */
.canvas-pin-url-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 0.9rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  outline: none;
  transition: border-color 0.15s ease;
}

.canvas-pin-url-input:focus {
  border-color: var(--modal-accent-color, rgba(var(--accent-rgb), 0.5));
}

.canvas-pin-url-input::placeholder {
  color: var(--os-text-hint);
}

/* Image/Sticker Input */
.canvas-pin-image-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.canvas-pin-sticker-tabs {
  display: flex;
  gap: 6px;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.canvas-pin-sticker-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--os-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  justify-content: center;
}

.canvas-pin-sticker-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.canvas-pin-sticker-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--os-text-primary);
}

.canvas-pin-sticker-tab .tab-count {
  font-size: 0.7rem;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  opacity: 0.7;
}

.canvas-pin-sticker-tab.active .tab-count {
  background: rgba(var(--accent-rgb), 0.3);
  opacity: 1;
}

.canvas-pin-stickers-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

.canvas-pin-stickers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
}

.canvas-pin-sticker-btn {
  width: 90px;
  height: 90px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.canvas-pin-sticker-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}

.canvas-pin-sticker-btn.selected {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.6);
}

.canvas-pin-sticker-btn img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.canvas-pin-custom-url-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
}

.canvas-pin-image-preview {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
}

.canvas-pin-image-preview img {
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.canvas-pin-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--os-text-hint);
}

.canvas-pin-image-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Embed Input */
.canvas-pin-embed-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.canvas-pin-embed-preview {
  flex: 1;
  min-height: 200px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.canvas-pin-embed-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.canvas-pin-embed-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--os-text-muted);
}

.canvas-pin-embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--os-text-hint);
  text-align: center;
}

.canvas-pin-embed-placeholder .embed-hint {
  font-size: 0.75rem;
  opacity: 0.6;
  max-width: 300px;
}

.canvas-pin-embed-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(239, 68, 68, 0.8);
  text-align: center;
}

.canvas-pin-embed-error .embed-hint {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.canvas-pin-embed-iframely {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.iframely-preview-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.iframely-preview-thumbnail {
  flex: 1;
  width: 100%;
  object-fit: cover;
}

.iframely-preview-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(var(--accent-rgb), 0.1));
  color: var(--os-text-hint);
}

.iframely-preview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.5);
}

.iframely-preview-site {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(251, 146, 60, 0.9);
  text-transform: uppercase;
}

.iframely-preview-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--os-text-primary);
}

.iframely-preview-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  line-height: 1.4;
}

.iframely-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: var(--os-text-muted);
}

.iframely-powered {
  color: rgba(251, 146, 60, 0.8);
}

.iframely-site {
  font-weight: 500;
}

.iframely-ready {
  margin-left: auto;
  color: rgba(34, 197, 94, 0.8);
}

.canvas-pin-embed-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Game Input */
.canvas-pin-game-input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.canvas-pin-games-filters {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.canvas-pin-games-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.canvas-pin-games-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--os-text-primary);
  font-size: 0.9rem;
  outline: none;
}

.canvas-pin-games-search input::placeholder {
  color: var(--os-text-hint);
}

.canvas-pin-games-category {
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--os-text-primary);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
}

.canvas-pin-games-category:focus {
  border-color: rgba(168, 85, 247, 0.4);
}

.canvas-pin-games-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 0.5rem 0;
  align-content: start;
}

.canvas-pin-game-item {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  height: fit-content;
}

.canvas-pin-game-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.canvas-pin-game-item.selected {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.5);
}

.game-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.game-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-hint);
}

.game-info {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.game-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--os-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-category {
  font-size: 0.65rem;
  color: rgba(168, 85, 247, 0.8);
  text-transform: uppercase;
}

.canvas-pin-games-loading,
.canvas-pin-games-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--os-text-hint);
}

.canvas-pin-game-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Spin animation for loaders */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* ============================================
   Canvas Edges Layer
   ============================================ */

.canvas-edges-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  z-index: 100;
  /* SVG background passes through, only edge paths are clickable */
  pointer-events: none;
}

/* Edge groups need pointer-events enabled for clicking */
.canvas-edge {
  pointer-events: auto;
}

/* The invisible hit area for clicking edges */
.canvas-edge path:first-of-type {
  pointer-events: stroke;
  cursor: pointer;
}

.canvas-edges-layer path {
  transition: stroke-width 0.15s ease, filter 0.15s ease;
}

/* Hover effect for edges */
.canvas-edge:hover path:last-of-type {
  stroke-width: 3px;
  filter: drop-shadow(0 0 6px currentColor);
}

/* Selected edge styling - more prominent */
.canvas-edge.selected path:last-of-type {
  stroke-width: 4px;
  filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 12px currentColor);
}

/* Add selection indicators at endpoints for selected edges */
.canvas-edge.selected circle.edge-endpoint {
  fill: currentColor;
  opacity: 0.8;
}

/* Draggable control point for reshaping edges */
.canvas-edge.selected circle.edge-control-point {
  cursor: grab;
  transition: transform 0.1s ease, filter 0.15s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.canvas-edge.selected circle.edge-control-point:hover {
  transform-origin: center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.canvas-edge.selected circle.edge-control-point:active {
  cursor: grabbing;
}

/* ============================================
   Pin Connection Points
   ============================================ */

/* Connection points wrapper - always allow pointer events to pass through to children */
.canvas-pin-connection-points {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.canvas-pin-connection-point {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(var(--accent-rgb), 1);
  border: 2px solid white;
  border-radius: 50%;
  cursor: crosshair;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  pointer-events: auto;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
}

/* Larger invisible hit area for easier clicking */
.canvas-pin-connection-point::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Uncomment to debug hit area: background: rgba(255,0,0,0.2); */
}

/* Show connection points on pin hover or when selected (via wrapper .visible class) */
.canvas-pin:hover .canvas-pin-connection-point,
.canvas-pin-connection-points.visible .canvas-pin-connection-point {
  opacity: 1;
}

/* Keep connection point visible when directly hovering it (even if outside pin bounds) */
.canvas-pin-connection-point:hover {
  opacity: 1 !important;
  background: rgba(var(--accent-rgb), 1);
}

/* Also keep ALL connection points visible when ANY connection point is hovered */
.canvas-pin-connection-points:hover .canvas-pin-connection-point {
  opacity: 1;
}

/* Position connection points on each edge */
.canvas-pin-connection-point.top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.canvas-pin-connection-point.top:hover {
  transform: translate(-50%, -50%) scale(1.3);
}

.canvas-pin-connection-point.right {
  top: 50%;
  right: 0;
  left: auto;
  transform: translate(50%, -50%);
}

.canvas-pin-connection-point.right:hover {
  transform: translate(50%, -50%) scale(1.3);
}

.canvas-pin-connection-point.bottom {
  bottom: 0;
  top: auto;
  left: 50%;
  transform: translate(-50%, 50%);
}

.canvas-pin-connection-point.bottom:hover {
  transform: translate(-50%, 50%) scale(1.3);
}

.canvas-pin-connection-point.left {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.canvas-pin-connection-point.left:hover {
  transform: translate(-50%, -50%) scale(1.3);
}

/* When dragging to create edge, highlight potential drop targets */
.canvas-pin.edge-target {
  box-shadow:
    2px 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08),
    0 0 0 2px rgba(74, 222, 128, 0.6),
    0 0 20px rgba(74, 222, 128, 0.3);
}

.canvas-pin.edge-target .canvas-pin-connection-point {
  opacity: 1;
}

/* Highlight the specific connection point being targeted */
.canvas-pin.edge-target[data-target-side="top"] .canvas-pin-connection-point.top,
.canvas-pin.edge-target[data-target-side="right"] .canvas-pin-connection-point.right,
.canvas-pin.edge-target[data-target-side="bottom"] .canvas-pin-connection-point.bottom,
.canvas-pin.edge-target[data-target-side="left"] .canvas-pin-connection-point.left {
  background: rgba(74, 222, 128, 1);
  box-shadow: 0 0 12px rgba(74, 222, 128, 1);
  transform-origin: center;
  animation: pulse-snap 0.6s ease-in-out infinite;
}

@keyframes pulse-snap {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* Adjust for right side which uses different translate values */
.canvas-pin.edge-target[data-target-side="right"] .canvas-pin-connection-point.right {
  animation: pulse-snap-right 0.6s ease-in-out infinite;
}

@keyframes pulse-snap-right {
  0%, 100% {
    transform: translate(50%, -50%) scale(1.3);
  }
  50% {
    transform: translate(50%, -50%) scale(1.5);
  }
}

/* Adjust for bottom side */
.canvas-pin.edge-target[data-target-side="bottom"] .canvas-pin-connection-point.bottom {
  animation: pulse-snap-bottom 0.6s ease-in-out infinite;
}

@keyframes pulse-snap-bottom {
  0%, 100% {
    transform: translate(-50%, 50%) scale(1.3);
  }
  50% {
    transform: translate(-50%, 50%) scale(1.5);
  }
}

/* ============================================
   File Browser (Pin Modal)
   ============================================ */

.canvas-pin-file-browser {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 350px;
}

.canvas-file-browser-path {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  flex-wrap: wrap;
}

.canvas-file-browser-path-btn {
  background: none;
  border: none;
  color: var(--os-text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.canvas-file-browser-path-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.canvas-file-browser-path-segment {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--os-text-muted);
}

.canvas-file-browser-content {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.canvas-file-browser-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.canvas-file-browser-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: var(--os-text-secondary);
  font-size: 0.85rem;
  transition: all 0.15s ease;
}

.canvas-file-browser-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.canvas-file-browser-item.selected {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.canvas-file-browser-item.folder {
  color: rgba(251, 191, 36, 0.9);
}

.canvas-file-browser-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-file-browser-empty {
  padding: 24px;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.85rem;
}

.canvas-file-browser-preview {
  width: 200px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.canvas-file-browser-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}

.canvas-file-browser-preview-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-file-browser-preview-content {
  flex: 1;
  overflow: auto;
  padding: 12px;
}

.canvas-file-browser-preview-content pre {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--os-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}

.canvas-file-browser-preview-content .loading {
  color: var(--os-text-muted);
  font-size: 0.8rem;
}

.canvas-file-browser-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   File Card Pin
   ============================================ */

.canvas-pin-file-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(20, 20, 25, 0.95);
}

.canvas-pin-titlebar.file {
  background: rgba(var(--accent-rgb), 0.15);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
}

.canvas-pin-file-content {
  flex: 1;
  overflow: auto;
  padding: 12px;
  min-height: 0;
}

.canvas-pin-file-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--os-text-muted);
  font-size: 0.85rem;
}

.canvas-pin-file-markdown {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}

.canvas-pin-file-markdown h1 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--os-text-primary);
}

.canvas-pin-file-markdown h2 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 12px 0 6px 0;
  color: var(--os-text-primary);
}

.canvas-pin-file-markdown h3 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 10px 0 4px 0;
  color: var(--os-text-secondary);
}

.canvas-pin-file-markdown p {
  margin: 0 0 8px 0;
}

.canvas-pin-file-markdown li {
  margin: 0 0 4px 16px;
  list-style-type: disc;
}

.canvas-pin-file-markdown code {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.85em;
}

.canvas-pin-file-markdown strong {
  font-weight: 600;
  color: var(--os-text-primary);
}

.canvas-pin-file-markdown em {
  font-style: italic;
  color: var(--os-text-secondary);
}

/* Add file container to annotation selector */
.canvas-pin-file-container .canvas-pin-annotation.media {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 8px 8px;
  padding: 8px 12px;
  margin-top: -2px;
  flex-shrink: 0;
  z-index: 10;
}

/* ============================================
   Presentation Mode
   ============================================ */

.canvas-app.presentation-mode .canvas-toolbar {
  display: none;
}

.canvas-app.presentation-mode .canvas-minimap {
  display: none;
}

.canvas-app.presentation-mode .canvas-pin-connection-points {
  display: none;
}

.canvas-app.presentation-mode .canvas-pin-resize-handle {
  display: none;
}

.canvas-app.presentation-mode .canvas-selection-box {
  display: none;
}

/* Hide pin close buttons in presentation mode */
.canvas-app.presentation-mode .canvas-pin-close {
  display: none;
}

/* Hide edge controls in presentation mode */
.canvas-app.presentation-mode .edge-control-point,
.canvas-app.presentation-mode .edge-endpoint {
  display: none;
}

/* Disable selection highlighting on pins */
.canvas-app.presentation-mode .canvas-pin.selected {
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08);
}

/* Remove pointer events from interactive elements */
.canvas-app.presentation-mode .canvas-pin-titlebar {
  pointer-events: none;
}

/* Presentation indicator */
.canvas-presentation-indicator {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: fadeInUp 0.3s ease forwards, fadeOut 2s ease forwards 2s;
}

.canvas-presentation-indicator kbd {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

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

/* Pin Notes Panel */
.pin-notes-panel {
  position: absolute;
  top: 42px;
  left: 0;
  width: 380px;
  height: calc(100% - 42px);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 12px 0;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 100;
}

.pin-notes-panel.open {
  transform: translateX(0);
}

.pin-notes-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 8px;
}

.pin-notes-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.pin-notes-panel-title span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.pin-notes-panel-close {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pin-notes-panel-close:hover {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.pin-notes-panel-body {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* NoteEditor overrides for pin notes panel */
.pin-notes-panel-body .note-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pin-notes-panel-body .note-editor-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.pin-notes-panel-body .note-editor-input {
  flex: 1;
  min-height: 120px;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 1rem;
  border-radius: 8px;
}

.pin-notes-panel-body .note-editor-footer {
  flex-wrap: wrap;
  padding: 8px 12px 12px;
  gap: 8px;
}

.pin-notes-panel-body .note-editor-footer-left {
  display: none;
}

.pin-notes-panel-body .note-editor-actions {
  flex: 1;
  justify-content: flex-end;
}

.pin-notes-panel-body .note-editor-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
}

/* Light theme - Pin Notes Panel */
body.light .pin-notes-panel {
  background: rgba(250, 250, 250, 0.97);
  border-right-color: rgba(0, 0, 0, 0.1);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body.light .pin-notes-panel-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light .pin-notes-panel-title {
  color: rgba(20, 20, 30, 0.85);
}
body.light .pin-notes-panel-close {
  color: rgba(20, 20, 30, 0.4);
}
body.light .pin-notes-panel-close:hover {
  color: rgba(20, 20, 30, 0.8);
  background: rgba(0, 0, 0, 0.06);
}
body.light .pin-notes-panel-body .note-editor-input {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 30, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .pin-notes-panel-body .note-editor-input::placeholder {
  color: rgba(20, 20, 30, 0.3);
}
body.light .pin-notes-panel-body .note-editor-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
  background: transparent;
}
body.light .pin-notes-panel-body .note-editor-btn {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.7);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .pin-notes-panel-body .note-editor-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.9);
}
body.light .pin-notes-panel-body .note-editor-btn.primary {
  background: #6d28d9;
  color: #fff;
  border-color: transparent;
}

/* Notes indicator on pin titlebars */
.canvas-pin-notes-indicator {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: 4px;
  z-index: 10;
  position: relative;
}

.canvas-pin-notes-indicator:hover {
  color: rgba(var(--accent-rgb), 1);
  background: rgba(var(--accent-rgb), 0.15);
}

.canvas-pin-notes-indicator.has-notes {
  color: rgba(var(--accent-rgb), 1);
}

.canvas-pin-notes-indicator.has-notes::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

/* Floating notes indicator for image pins (no titlebar) */
.canvas-pin-notes-indicator.floating {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px;
  border-radius: 4px;
}

.canvas-pin-notes-indicator.floating:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* ============================================
   Light Theme Overrides (body.light)
   ============================================ */

body.light .canvas-app {
  background: #f0f0f0;
  color: rgba(20, 20, 30, 0.9);
}

/* List view background */
body.light .canvas-app.canvas-list-view,
body.light .canvas-list-view {
  background: #f5f5f7;
}

/* Header title */
body.light .canvas-list-header h2 {
  color: rgba(20, 20, 30, 0.88);
}

/* New pinboard button */
body.light .canvas-new-btn {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 1);
}
body.light .canvas-new-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
}

/* New pinboard form inputs */
body.light .canvas-new-form-name,
body.light .canvas-new-form-field {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(20, 20, 30, 0.88);
}
body.light .canvas-new-form-name::placeholder,
body.light .canvas-new-form-field::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

/* Tile cards */
body.light .canvas-tile {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
body.light .canvas-tile:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Tile preview section */
body.light .canvas-tile-preview {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

/* Tile text */
body.light .canvas-tile-name {
  color: rgba(20, 20, 30, 0.88);
}
body.light .canvas-tile-description {
  color: rgba(40, 40, 55, 0.55);
}
body.light .canvas-tile-meta,
body.light .canvas-tile-modified,
body.light .canvas-tile-pins {
  color: rgba(60, 60, 80, 0.5);
}

/* Tile action buttons (edit/delete on hover) */
body.light .canvas-tile-action {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(40, 40, 55, 0.55);
  backdrop-filter: blur(4px);
}
body.light .canvas-tile-action:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(20, 20, 30, 0.85);
}
body.light .canvas-tile-action.canvas-tile-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 0.8);
}

/* Empty / loading state */
body.light .canvas-loading,
body.light .canvas-empty {
  color: rgba(60, 60, 80, 0.45);
}

/* Toolbar */
body.light .canvas-toolbar {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.light .canvas-toolbar-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(40, 40, 55, 0.65);
}
body.light .canvas-toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}
body.light .canvas-toolbar-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: rgba(var(--accent-rgb), 1);
}
body.light .canvas-toolbar-title {
  color: rgba(20, 20, 30, 0.75);
}
body.light .canvas-toolbar-zoom {
  background: rgba(0, 0, 0, 0.04);
}
body.light .canvas-toolbar-zoom button {
  color: rgba(40, 40, 55, 0.55);
}
body.light .canvas-toolbar-zoom button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.8);
}
body.light .canvas-toolbar-zoom span {
  color: rgba(60, 60, 80, 0.55);
}

/* Settings popover */
/* Minimap */
body.light .canvas-minimap {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light .canvas-minimap:hover {
  border-color: rgba(0, 0, 0, 0.22);
}
body.light .minimap-viewport {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.08);
}

body.light .canvas-settings-popover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  color: rgba(20, 20, 30, 0.88);
}
body.light .settings-section:not(:last-child) {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
body.light .settings-section-label {
  color: rgba(60, 60, 80, 0.5);
}
body.light .settings-label {
  color: rgba(20, 20, 30, 0.8);
}
body.light .settings-toggle {
  background: rgba(0, 0, 0, 0.1);
}
body.light .settings-presets {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .settings-preset-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(40, 40, 55, 0.65);
}
body.light .settings-preset-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(20, 20, 30, 0.85);
}
body.light .settings-preset-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(var(--accent-rgb), 1);
}
body.light .settings-color-grid {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
body.light .settings-color-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light .settings-color-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.18);
}
body.light .settings-color-btn.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.5);
}
body.light .settings-color-swatch {
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .settings-color-label {
  color: rgba(40, 40, 55, 0.5);
}
body.light .settings-color-btn.active .settings-color-label {
  color: rgba(var(--accent-rgb), 1);
}
body.light .settings-color-picker {
  border-color: rgba(0, 0, 0, 0.15);
}
body.light .settings-wallpaper-content {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}
body.light .settings-wallpaper-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(40, 40, 55, 0.65);
}
body.light .settings-wallpaper-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: rgba(20, 20, 30, 0.85);
}
body.light .settings-wallpaper-btn.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: rgba(var(--accent-rgb), 1);
}
body.light .settings-toggle-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(40, 40, 55, 0.65);
}
body.light .settings-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
body.light .settings-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 1);
}
body.light .settings-opacity-label {
  color: rgba(40, 40, 55, 0.6);
}
body.light .settings-opacity-slider {
  background: rgba(0, 0, 0, 0.1);
}

/* Delete modal */
body.light .canvas-delete-modal {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(20, 20, 30, 0.88);
}
body.light .canvas-delete-modal h3 {
  color: rgba(20, 20, 30, 0.9);
}
body.light .canvas-delete-modal p {
  color: rgba(60, 60, 80, 0.65);
}
body.light .canvas-delete-modal-btn:not(.delete) {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(40, 40, 55, 0.7);
}
body.light .canvas-delete-modal-btn:not(.delete):hover {
  background: rgba(0, 0, 0, 0.09);
}
/**
 * Music Studio App Styles
 *
 * Winamp/cliamp-inspired retro aesthetic — compact zones, monospace, spectrum
 */

/* ─── Root ─────────────────────────────────────────────────────────────────── */

.music-studio-app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  background: var(--os-glass-bg-solid);
  color: #00e5a0;
  user-select: none;
}

/* ─── Title Bar (Zone 1) ────────────────────────────────────────────────────── */

.ms-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(90deg, #2a2a2a 0%, #1e1e1e 100%);
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

.ms-titlebar-logo {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #00e5a0;
  opacity: 0.7;
}

.ms-titlebar-title {
  flex: 1;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.ms-status-dot.playing {
  background: #00e5a0;
  box-shadow: 0 0 6px #00e5a0;
  animation: ms-pulse 1.8s ease-in-out infinite;
}

@keyframes ms-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── Track Display (Zone 2) ────────────────────────────────────────────────── */

.ms-track-display {
  background: #111;
  border-bottom: 1px solid #2a2a2a;
  padding: 0.6rem 0.75rem 0.5rem;
  flex-shrink: 0;
}

.ms-track-marquee-wrap {
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 0.3rem;
}

.ms-track-marquee {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #f0c040;
  letter-spacing: 0.02em;
}

.ms-track-marquee.scrolling {
  animation: ms-marquee 14s linear infinite;
}

@keyframes ms-marquee {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(0); }
  80%  { transform: translateX(calc(-100% + 220px)); }
  100% { transform: translateX(calc(-100% + 220px)); }
}

.ms-track-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ms-track-num {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.25);
  min-width: 2.5ch;
}

.ms-track-artist {
  flex: 1;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-bitrate {
  font-size: 0.55rem;
  color: #00e5a0;
  opacity: 0.5;
  letter-spacing: 0.08em;
}

/* ─── Visualizer (Zone 3) ────────────────────────────────────────────────────── */

.ms-visualizer {
  flex-shrink: 0;
  height: 60px;
  background: #0a0a0a;
  border-bottom: 1px solid #1e1e1e;
  display: flex;
  align-items: flex-end;
  padding: 4px 4px 2px;
  gap: 2px;
  box-sizing: border-box;
}

.ms-bar {
  flex: 1;
  min-width: 0;
  border-radius: 1px 1px 0 0;
  transition: height 0.08s linear;
  position: relative;
}

/* default idle state */
.ms-bar {
  height: 3px;
  background: #1e3a2e;
}

/* active bar colours — multi-stop like classic Winamp */
.ms-bar.active {
  background: linear-gradient(
    to top,
    #00e5a0 0%,
    #00c87a 35%,
    #ffe040 70%,
    #ff4040 100%
  );
}

/* peak dot */
.ms-bar::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff6060;
  border-radius: 1px;
  opacity: 0;
}

.ms-bar.active::after {
  opacity: 0.7;
}

/* ─── Controls (Zone 4) ────────────────────────────────────────────────────── */

.ms-controls {
  display: flex;
  align-items: center;
  gap: 0;
  background: #1e1e1e;
  border-bottom: 1px solid #2a2a2a;
  padding: 0.4rem 0.5rem;
  flex-shrink: 0;
}

.ms-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s;
  flex-shrink: 0;
}

.ms-btn:hover {
  color: #00e5a0;
  background: rgba(0, 229, 160, 0.08);
}

.ms-btn:active {
  color: #fff;
  background: rgba(0, 229, 160, 0.15);
  transform: translateY(1px);
}

.ms-btn.active {
  color: #00e5a0;
}

.ms-btn.dislike.active {
  color: #ff4040;
}

.ms-btn-play {
  width: 40px;
  height: 32px;
  color: #00e5a0;
  border-radius: 4px;
}

.ms-btn-play:hover {
  background: rgba(0, 229, 160, 0.12);
}

.ms-btn-play.playing {
  color: #ffe040;
}

.ms-btn-play.playing:hover {
  background: rgba(255, 224, 64, 0.12);
  color: #ffe040;
}

.ms-controls-spacer {
  flex: 1;
}

/* ─── Toolbar (Zone 5) ───────────────────────────────────────────────────────── */

.ms-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #191919;
  border-bottom: 1px solid #2a2a2a;
  padding: 0.25rem 0.5rem;
  flex-shrink: 0;
}

.ms-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: rgba(255,255,255,0.4);
  font-family: inherit;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}

.ms-toolbar-btn:hover {
  color: #00e5a0;
  border-color: rgba(0, 229, 160, 0.2);
  background: rgba(0, 229, 160, 0.05);
}

.ms-toolbar-btn.active {
  color: #00e5a0;
  border-color: rgba(0, 229, 160, 0.3);
  background: rgba(0, 229, 160, 0.08);
}

.ms-toolbar-btn.active-warn {
  color: #ff4040;
  border-color: rgba(255, 64, 64, 0.3);
  background: rgba(255, 64, 64, 0.08);
}

.ms-toolbar-spacer { flex: 1; }

.ms-playlist-select {
  background: transparent;
  border: 1px solid #333;
  border-radius: 2px;
  color: rgba(255,255,255,0.4);
  font-family: inherit;
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  max-width: 140px;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
}

.ms-playlist-select:hover,
.ms-playlist-select:focus {
  border-color: rgba(0, 229, 160, 0.3);
  color: rgba(255,255,255,0.6);
  outline: none;
}

/* ─── Panel (tracks / favorites) ────────────────────────────────────────────── */

.ms-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #111;
  min-height: 0;
}

.ms-panel-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid #222;
  background: #181818;
  flex-shrink: 0;
}

.ms-panel-title {
  flex: 1;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
}

.ms-panel-count {
  font-size: 0.6rem;
  color: rgba(0, 229, 160, 0.5);
}

.ms-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  border-radius: 2px;
}

.ms-panel-close:hover {
  color: #ff4040;
  background: rgba(255,64,64,0.1);
}

.ms-track-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.ms-track-list::-webkit-scrollbar {
  width: 4px;
}

.ms-track-list::-webkit-scrollbar-track {
  background: #0a0a0a;
}

.ms-track-list::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}

.ms-track-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.3rem 0.6rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.ms-track-item:hover {
  background: rgba(0, 229, 160, 0.05);
}

.ms-track-item.current {
  background: rgba(0, 229, 160, 0.08);
}

.ms-track-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ms-track-idx {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.2);
  min-width: 2.5ch;
  text-align: right;
  font-family: inherit;
}

.ms-track-item.current .ms-track-idx {
  color: #00e5a0;
}

.ms-track-name {
  flex: 1;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}

.ms-track-item.current .ms-track-name {
  color: #00e5a0;
}

.ms-track-playing-icon {
  color: #00e5a0;
  opacity: 0.7;
  animation: ms-pulse 1.5s ease-in-out infinite;
}

/* ─── Empty state ────────────────────────────────────────────────────────────── */

.ms-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: rgba(255,255,255,0.2);
  font-size: 0.65rem;
  text-align: center;
}

/* ─── No-playlist banner ─────────────────────────────────────────────────────── */

.ms-no-playlist {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 200, 50, 0.06);
  border-top: 1px solid rgba(255, 200, 50, 0.12);
  color: rgba(255, 200, 50, 0.6);
  font-size: 0.6rem;
  flex-shrink: 0;
}

/* ─── Default idle panel ─────────────────────────────────────────────────────── */

.ms-idle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #0e0e0e;
  min-height: 0;
}

.ms-idle-art {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 229, 160, 0.25);
  background: radial-gradient(circle at 40% 35%, #1e1e1e, #0a0a0a);
  box-shadow: 0 0 0 6px rgba(0, 229, 160, 0.04);
}

.ms-idle-art.spinning {
  animation: ms-spin 4s linear infinite;
  border-color: #1e3a2e;
  color: rgba(0, 229, 160, 0.5);
  box-shadow: 0 0 0 6px rgba(0, 229, 160, 0.06), 0 0 20px rgba(0, 229, 160, 0.1);
}

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

.ms-idle-hint {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.2);
  text-align: center;
  letter-spacing: 0.05em;
}
/* Calculator App - Multi-mode design */

.sandbox-app-calculator {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 380px;
  min-width: 380px;
  max-height: 600px;
  margin: 0 auto;
  background: linear-gradient(145deg, rgba(25, 25, 30, 0.98), rgba(15, 15, 20, 0.98));
  border-radius: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  user-select: none;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* When in a window, center with minimal padding */
.app-window-body .sandbox-app-calculator,
.sandbox-window-body .sandbox-app-calculator {
  margin: 0.25rem auto;
  height: calc(100% - 0.5rem);
}

/* Mode Tabs */
.calc-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  background: rgba(0, 0, 0, 0.2);
}

.calc-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-radius: 10px 10px 0 0;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.calc-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

.calc-tab.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.calc-tab .tab-icon {
  font-size: 18px;
  line-height: 1;
}

.calc-tab .tab-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Display Section */
.calc-display-container {
  padding: 16px 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 90px;
  background: rgba(0, 0, 0, 0.15);
}

.calc-history {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.calc-display {
  font-size: 44px;
  font-weight: 300;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scientific Row */
.calc-scientific-row {
  display: flex;
  gap: 1px;
  padding: 1px;
  background: rgba(60, 60, 65, 0.2);
}

.calc-sci-btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  background: rgba(80, 80, 85, 0.6);
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  transition: all 0.15s ease;
}

.calc-sci-btn:hover {
  background: rgba(100, 100, 105, 0.7);
}

.calc-sci-btn:active {
  background: rgba(120, 120, 125, 0.8);
  transform: scale(0.98);
}

/* Keypad */
.calc-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 1px;
  flex: 1;
  background: rgba(60, 60, 65, 0.2);
}

/* Button Base */
.calc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 400;
  border: none;
  cursor: pointer;
  transition: all 0.1s ease;
  background: rgba(55, 55, 60, 0.9);
  color: #fff;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.calc-btn:hover {
  background: rgba(75, 75, 80, 0.95);
}

.calc-btn:active {
  background: rgba(90, 90, 95, 1);
  transform: scale(0.98);
}

/* Number buttons */
.calc-btn:not(.func):not(.op) {
  background: rgba(70, 70, 75, 0.9);
}

.calc-btn:not(.func):not(.op):hover {
  background: rgba(90, 90, 95, 0.95);
}

/* Function buttons (AC, ±, %) */
.calc-btn.func {
  background: rgba(100, 100, 105, 0.85);
  color: #fff;
  font-size: 20px;
}

.calc-btn.func:hover {
  background: rgba(120, 120, 125, 0.9);
}

.calc-btn.func:active {
  background: rgba(140, 140, 145, 0.95);
}

/* Operator buttons */
.calc-btn.op {
  background: linear-gradient(145deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 28px;
  font-weight: 500;
}

.calc-btn.op:hover {
  background: linear-gradient(145deg, #fbbf24, #f59e0b);
}

.calc-btn.op:active {
  background: linear-gradient(145deg, #fcd34d, #fbbf24);
}

.calc-btn.op.active {
  background: #fff;
  color: #f59e0b;
}

.calc-btn.op.equals {
  background: linear-gradient(145deg, #22c55e, #16a34a);
}

.calc-btn.op.equals:hover {
  background: linear-gradient(145deg, #4ade80, #22c55e);
}

/* Zero button spans 2 columns */
.calc-btn.zero {
  grid-column: span 2;
  justify-content: flex-start;
  padding-left: 28px;
}

/* Ripple effect on click */
.calc-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.calc-btn:active::after {
  width: 120%;
  height: 120%;
}

/* ============================================
   CONVERTER STYLES (Units & Currency)
   ============================================ */

.calc-converter {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
}

/* Category Pills */
.converter-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  justify-content: center;
}

.category-btn {
  padding: 8px 12px;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.category-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.category-btn.active {
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

/* Converter Content */
.converter-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.converter-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.converter-select {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 10.5l-5-5h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: all 0.2s ease;
}

.converter-select:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.converter-select:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.converter-select option {
  background: #1a1a1f;
  color: #fff;
  padding: 8px;
}

.converter-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 24px;
  font-weight: 300;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #fff;
  outline: none;
  text-align: right;
  transition: all 0.2s ease;
  font-family: inherit;
}

.converter-input:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.converter-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.converter-result {
  width: 100%;
  padding: 14px 16px;
  font-size: 24px;
  font-weight: 400;
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 14px;
  color: #4ade80;
  text-align: right;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.converter-result.currency-result {
  font-size: 22px;
  font-weight: 500;
}

/* Swap Button */
.converter-swap {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 4px 0;
}

.converter-swap:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: rotate(180deg);
}

.converter-swap:active {
  transform: rotate(180deg) scale(0.95);
}

/* Formula Display */
.converter-formula {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.converter-rate {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* Loading & Error States */
.converter-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.converter-loading::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  margin-right: 10px;
  animation: spin 0.8s linear infinite;
}

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

.converter-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(248, 113, 113, 0.9);
  font-size: 14px;
}

.retry-btn {
  padding: 8px 16px;
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 8px;
  color: #f87171;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.retry-btn:hover {
  background: rgba(248, 113, 113, 0.25);
}

/* Responsive adjustments */
@media (max-width: 320px) {
  .calc-display {
    font-size: 36px;
  }

  .calc-btn {
    font-size: 20px;
  }

  .calc-btn.op {
    font-size: 24px;
  }

  .converter-input,
  .converter-result {
    font-size: 20px;
    padding: 12px 14px;
  }

  .category-btn {
    padding: 6px 10px;
    font-size: 16px;
  }
}

/* Scrollbar for converter */
.calc-converter::-webkit-scrollbar {
  width: 4px;
}

.calc-converter::-webkit-scrollbar-track {
  background: transparent;
}

.calc-converter::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.calc-converter::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
/**
 * Weather App — Scene on top, data below
 */

.weather-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.92);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  overflow: hidden;
  position: relative;
}

/* ── Toolbar ── */
.weather-app .weather-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.weather-app .weather-toolbar-location {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.weather-app .weather-toolbar-location:hover { color: white; }

.weather-app .weather-toolbar-country {
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.weather-app .weather-toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.weather-app .weather-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.weather-app .weather-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.weather-app .weather-unit-toggle {
  font-size: 0.7rem;
  font-weight: 600;
  width: auto;
  padding: 0 0.5rem;
}

/* ── Search Overlay ── */
.weather-app .weather-search-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: rgba(15, 15, 20, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.weather-app .weather-search-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: white;
  outline: none;
  box-sizing: border-box;
}

.weather-app .weather-search-input:focus { border-color: rgba(56, 189, 248, 0.4); }
.weather-app .weather-search-input::placeholder { color: rgba(255, 255, 255, 0.3); }

.weather-app .weather-search-results {
  margin-top: 0.4rem;
  background: rgba(25, 25, 32, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.weather-app .weather-search-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: white;
  cursor: pointer;
  text-align: left;
}

.weather-app .weather-search-result:last-child { border-bottom: none; }
.weather-app .weather-search-result:hover { background: rgba(56, 189, 248, 0.08); }
.weather-app .weather-search-city { font-size: 0.8rem; font-weight: 500; }
.weather-app .weather-search-country { font-size: 0.65rem; color: rgba(255, 255, 255, 0.35); }

/* ── Error ── */
.weather-app .weather-error p {
  color: rgba(248, 113, 113, 0.9);
  background: rgba(248, 113, 113, 0.08);
  padding: 0.6rem 1rem;
  margin: 1rem;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.15);
  font-size: 0.8rem;
  text-align: center;
}

/* ── Loading ── */
.weather-app .weather-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.5rem;
}

.weather-app .weather-loading-icon { font-size: 2.5rem; }
.weather-app .weather-loading p { color: rgba(255, 255, 255, 0.35); font-size: 0.8rem; }

/* ── Body ── */
.weather-app .weather-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.weather-app .weather-body::-webkit-scrollbar { width: 4px; }
.weather-app .weather-body::-webkit-scrollbar-track { background: transparent; }
.weather-app .weather-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

/* ── Hero: scene image on top + temp overlay ── */
.weather-app .weather-hero {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 120px;
}

/* When scene is loaded, hero is taller to show the image */
.weather-app .weather-hero.has-scene {
  min-height: 240px;
}

.weather-app .weather-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.weather-app .weather-hero-image.loaded {
  opacity: 1;
}

/* Gradient at bottom of scene for text readability */
.weather-app .weather-hero.has-scene::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Shimmer placeholder while generating */
.weather-app .weather-hero.generating {
  min-height: 200px;
  background: linear-gradient(135deg, rgba(120, 120, 140, 0.15) 0%, rgba(160, 160, 180, 0.08) 50%, rgba(120, 120, 140, 0.15) 100%);
  background-size: 200% 200%;
  animation: weather-shimmer 2s ease infinite;
}

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

.weather-app .weather-scene-generating {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.weather-app .weather-scene-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: weather-spin 0.8s linear infinite;
}

.weather-app .weather-scene-generating-text {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

/* Weather info overlay at bottom of hero */
.weather-app .weather-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1rem 1rem 0.75rem;
  width: 100%;
}

.weather-app .weather-hero-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.1rem;
}

.weather-app .weather-hero-temp {
  font-size: 4rem;
  font-weight: 100;
  line-height: 1;
  color: white;
  letter-spacing: -2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.weather-app .weather-hero.has-scene .weather-hero-temp {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.weather-app .weather-hero-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.2rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.weather-app .weather-hero.has-scene .weather-hero-desc {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.weather-app .weather-hero-range {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.1rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.weather-app .weather-hero.has-scene .weather-hero-range {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* ── Data section below hero ── */
.weather-app .weather-data {
  flex: 1;
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Details Row ── */
.weather-app .weather-details-row {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  flex-wrap: wrap;
}

.weather-app .weather-detail-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  min-width: 58px;
}

.weather-app .weather-detail-label {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.weather-app .weather-detail-val {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Forecast ── */
.weather-app .weather-forecast {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}

.weather-app .weather-forecast-row {
  display: grid;
  grid-template-columns: 5.5rem 1.8rem 2.5rem 1fr;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.01);
  gap: 0.4rem;
}

.weather-app .weather-forecast-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.weather-app .weather-forecast-row.today {
  background: rgba(56, 189, 248, 0.04);
}

.weather-app .forecast-day {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.weather-app .forecast-icon { font-size: 1rem; text-align: center; }

.weather-app .forecast-rain {
  font-size: 0.65rem;
  color: rgba(56, 189, 248, 0.6);
  text-align: right;
}

.weather-app .forecast-temps {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.weather-app .forecast-lo {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  width: 2rem;
  text-align: right;
}

.weather-app .forecast-hi {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  width: 2rem;
}

.weather-app .forecast-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  min-width: 40px;
}

.weather-app .forecast-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.5), rgba(248, 113, 113, 0.5));
}

/* ── Footer ── */
.weather-app .weather-footer {
  text-align: center;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.12);
  padding: 0.25rem 0 0.5rem;
  flex-shrink: 0;
}

/* ── Refresh indicator ── */
.weather-app .weather-refreshing {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(56, 189, 248, 0.2);
  border-top-color: rgba(56, 189, 248, 0.8);
  border-radius: 50%;
  animation: weather-spin 0.7s linear infinite;
  z-index: 3;
}

/* ── Fullscreen scene overlay ── */
.weather-app .weather-scene-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: weather-fade-in 0.3s ease;
}

.weather-app .weather-scene-fullscreen img {
  max-width: 90%;
  max-height: 85%;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.weather-app .weather-scene-fullscreen-label {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  white-space: nowrap;
}

@keyframes weather-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes weather-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════ */

body.light .weather-app {
  color: rgba(0, 0, 0, 0.85);
}

body.light .weather-app .weather-toolbar {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .weather-app .weather-toolbar-location {
  color: rgba(0, 0, 0, 0.8);
}

body.light .weather-app .weather-toolbar-location:hover {
  color: rgba(0, 0, 0, 1);
}

body.light .weather-app .weather-toolbar-country {
  color: rgba(0, 0, 0, 0.4);
}

body.light .weather-app .weather-toolbar-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

body.light .weather-app .weather-toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}

/* Hero text stays white (over scene image or dark bg) */
body.light .weather-app .weather-hero-temp {
  color: white;
}

/* Without scene, use dark text */
body.light .weather-app .weather-hero:not(.has-scene) .weather-hero-temp {
  color: rgba(0, 0, 0, 0.85);
  text-shadow: none;
}

body.light .weather-app .weather-hero:not(.has-scene) .weather-hero-desc {
  color: rgba(0, 0, 0, 0.5);
  text-shadow: none;
}

body.light .weather-app .weather-hero:not(.has-scene) .weather-hero-range {
  color: rgba(0, 0, 0, 0.35);
  text-shadow: none;
}

/* Data section in light theme */
body.light .weather-app .weather-detail-chip {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .weather-app .weather-detail-label {
  color: rgba(0, 0, 0, 0.4);
}

body.light .weather-app .weather-detail-val {
  color: rgba(0, 0, 0, 0.8);
}

body.light .weather-app .weather-forecast {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .weather-app .weather-forecast-row {
  background: transparent;
}

body.light .weather-app .weather-forecast-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .weather-app .weather-forecast-row.today {
  background: rgba(56, 189, 248, 0.06);
}

body.light .weather-app .forecast-day {
  color: rgba(0, 0, 0, 0.8);
}

body.light .weather-app .forecast-lo {
  color: rgba(0, 0, 0, 0.35);
}

body.light .weather-app .forecast-hi {
  color: rgba(0, 0, 0, 0.8);
}

body.light .weather-app .forecast-bar {
  background: rgba(0, 0, 0, 0.06);
}

body.light .weather-app .forecast-rain {
  color: rgba(56, 189, 248, 0.7);
}

body.light .weather-app .weather-footer {
  color: rgba(0, 0, 0, 0.12);
}

body.light .weather-app .weather-loading p {
  color: rgba(0, 0, 0, 0.4);
}

body.light .weather-app .weather-scene-spinner {
  border-color: rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.3);
}

body.light .weather-app .weather-scene-generating-text {
  color: rgba(0, 0, 0, 0.3);
}

body.light .weather-app .weather-hero.generating {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 100%);
  background-size: 200% 200%;
  animation: weather-shimmer 2s ease infinite;
}

/* Search overlay light */
body.light .weather-app .weather-search-overlay {
  background: rgba(240, 240, 245, 0.96);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .weather-app .weather-search-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}

body.light .weather-app .weather-search-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

body.light .weather-app .weather-search-results {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .weather-app .weather-search-result {
  color: rgba(0, 0, 0, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .weather-app .weather-search-country {
  color: rgba(0, 0, 0, 0.4);
}
/* Collect App */

.collect-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.95);
  overflow: hidden;
  background: var(--os-glass-bg-solid);
}

/* === Body Layout (sidebar + main) === */

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

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

/* === Sidebar === */

.collect-sidebar {
  width: 232px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.collect-sidebar-section {}

.collect-sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  margin-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.35);
  user-select: none;
}

.collect-sidebar-section-header.clickable {
  cursor: pointer;
}

.collect-sidebar-section-header.clickable:hover {
  color: rgba(255, 255, 255, 0.5);
}

.collect-sidebar-add-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 2px;
  display: flex;
  border-radius: 4px;
}

.collect-sidebar-add-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

.collect-sidebar-boards {
  display: flex;
  flex-direction: column;
}

.collect-sidebar-board {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 0.79rem;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.12s;
  position: relative;
}

.collect-sidebar-board:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.collect-sidebar-board.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08));
  color: var(--accent-light);
  border-left: 2px solid rgba(196, 181, 253, 0.85);
  padding-left: 10px;
}

.collect-sidebar-board-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collect-sidebar-board-count {
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.3);
  min-width: 16px;
  text-align: right;
}

.collect-sidebar-board-delete {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 2px;
  display: none;
  border-radius: 3px;
}

.collect-sidebar-board:hover .collect-sidebar-board-delete {
  display: flex;
}

.collect-sidebar-board-delete:hover {
  color: rgba(239, 68, 68, 0.8);
  background: rgba(239, 68, 68, 0.1);
}

.collect-sidebar-rename-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
  padding: 2px 6px;
  outline: none;
}

.collect-sidebar-new-board {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.4);
}

.collect-sidebar-new-board-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
  padding: 4px 8px;
  outline: none;
}

.collect-sidebar-new-board-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.collect-sidebar-new-board-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

/* Sidebar Tags */

.collect-sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px;
}

.collect-sidebar-tag {
  font-size: 0.6rem;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.12s;
}

.collect-sidebar-tag:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.collect-sidebar-tag.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* Sidebar Toggle */

.collect-sidebar-toggle {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  display: flex;
  border-radius: 5px;
}

.collect-sidebar-toggle:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

/* === Toolbar === */

.collect-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background: rgba(9, 12, 22, 0.72);
  backdrop-filter: blur(20px);
}

.collect-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collect-toolbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.collect-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.collect-add-buttons {
  display: flex;
  gap: 6px;
}

.collect-add-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.77rem;
  cursor: pointer;
  transition: all 0.15s;
}

.collect-add-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
}

.collect-active-board-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Search */

.collect-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  width: 100%;
  max-width: 340px;
}

.collect-search input {
  flex: 1;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.83rem;
  outline: none;
  min-width: 0;
}

.collect-search input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.collect-search-clear {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 2px;
  display: flex;
}

.collect-search-clear:hover {
  color: rgba(255, 255, 255, 0.7);
}

.collect-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.3);
}

.collect-zoom input[type="range"] {
  width: 60px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.collect-zoom input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.collect-zoom input[type="range"]::-webkit-slider-thumb:hover {
  background: rgba(255, 255, 255, 0.9);
}

.collect-refresh-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px;
  display: flex;
  border-radius: 5px;
}

.collect-refresh-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

.collect-count {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

/* === Loading / Empty === */

.collect-loading,
.collect-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
  gap: 12px;
}

.collect-empty p {
  margin: 0;
  font-size: 0.9rem;
}

.collect-empty-hint {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.2) !important;
}

/* === Card Grid (Masonry) === */

.collect-grid {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 18px;
}

.collect-grid-inner {
  min-height: 100%;
}

/* === Card === */

.collect-card {
  border-radius: 18px;
  border: none;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  will-change: transform;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.collect-card:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

/* Cards with body content get a background */
.collect-card-has-body {
  background: linear-gradient(180deg, rgba(26, 29, 44, 0.82), rgba(18, 21, 33, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Link card thumbnail */

.collect-card-thumbnail {
  width: 100%;
  position: relative;
}

.collect-card-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

.collect-card-thumbnail-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.36) 100%);
  pointer-events: none;
  opacity: 0.9;
}

/* Card body */

.collect-card-body {
  padding: 11px 12px 12px;
}

/* Image-only cards: hide empty body */
.collect-card-body-empty {
  display: none;
}


.collect-card-site {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.67rem;
  color: rgba(255, 255, 255, 0.52);
  margin-bottom: 6px;
}

.collect-card-favicon {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.collect-card-title {
  font-size: 0.9rem;
  font-weight: 650;
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collect-card-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collect-card-url-fallback {
  word-break: break-all;
  font-size: 0.7rem;
  opacity: 0.6;
}

.collect-card-note {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-style: italic;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.collect-card-text {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Text cards always get a background */
.collect-card-text-card {
  background: linear-gradient(180deg, rgba(37, 39, 56, 0.9), rgba(24, 27, 39, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.collect-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  margin-top: 2px;
}

.collect-card-domain {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 85%;
}

/* Board badges on cards */

.collect-card-boards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.collect-card-board-badge {
  font-size: 0.6rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.17);
  color: rgba(210, 195, 255, 0.9);
}

/* Tags */

.collect-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.collect-card-tag {
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.1s;
}

.collect-card-tag:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

/* Hover actions */

.collect-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  opacity: 0;
  animation: collectFadeIn 0.1s forwards;
}

@keyframes collectFadeIn {
  to { opacity: 1; }
}

.collect-card-actions button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
}

.collect-card-actions button:hover {
  background: rgba(0, 0, 0, 0.8);
  color: rgba(255, 255, 255, 1);
}

.collect-card-action-delete:hover {
  background: rgba(239, 68, 68, 0.6) !important;
}

/* === Add Card Dialog === */

.collect-add-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  z-index: 100;
}

.collect-add-dialog {
  width: 100%;
  max-width: 460px;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.collect-add-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.collect-add-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.collect-add-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  display: flex;
}

.collect-add-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

.collect-add-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collect-add-type-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.collect-add-type-tabs button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.collect-add-type-tabs button.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.collect-add-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  outline: none;
  box-sizing: border-box;
}

.collect-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.collect-add-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.collect-add-textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  outline: none;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}

.collect-add-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.collect-add-textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.collect-add-textarea-main {
  min-height: 100px;
}

/* Color picker */

.collect-add-colors {
  display: flex;
  gap: 6px;
}

.collect-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.1s;
}

.collect-color-dot:hover {
  transform: scale(1.15);
}

.collect-color-dot.active {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

/* Footer */

.collect-add-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.collect-add-cancel {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  cursor: pointer;
}

.collect-add-cancel:hover {
  color: rgba(255, 255, 255, 0.8);
}

.collect-add-save {
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.collect-add-save:hover {
  background: var(--accent-light);
}

.collect-add-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Board assignment in AddCard */

.collect-add-boards {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.collect-add-boards-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  padding-top: 4px;
  flex-shrink: 0;
}

.collect-add-boards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.collect-add-board-chip {
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.12s;
}

.collect-add-board-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.collect-add-board-chip.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* Tag filter badge in toolbar */

.collect-tag-filter-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: 0.68rem;
  cursor: pointer;
  transition: all 0.12s;
}

.collect-tag-filter-badge:hover {
  background: rgba(var(--accent-rgb), 0.2);
}

/* === Right-click Context Menu === */

.collect-context-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.collect-context-menu {
  position: fixed;
  z-index: 201;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.collect-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.1s;
}

.collect-context-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

/* === Drag and Drop === */

.collect-card-dragging {
  pointer-events: none;
}

.collect-card-drag-over {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26), 0 12px 26px rgba(0, 0, 0, 0.24);
}

.collect-card img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Card context menu */
.collect-card-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 170px;
  background: rgba(24, 24, 32, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
}

.collect-card-context-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border: none;
  border-radius: 7px;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
  white-space: nowrap;
}

.collect-card-context-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.collect-card-context-item.danger {
  color: rgba(239, 68, 68, 0.9);
}

.collect-card-context-item.danger:hover {
  background: rgba(239, 68, 68, 0.12);
}

.collect-card-context-item.board-item {
  color: rgba(255, 255, 255, 0.7);
  padding-left: 0.8rem;
}

.collect-card-context-item.board-item.pinned {
  color: rgba(var(--accent-rgb), 0.95);
}

.collect-card-context-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.2rem 0.4rem;
}

.collect-card-context-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem 0.15rem;
}

/* Board context menu */
.collect-board-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 140px;
  background: rgba(24, 24, 32, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
}

.collect-board-context-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 7px;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}

.collect-board-context-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.collect-board-context-item.danger {
  color: rgba(239, 68, 68, 0.9);
}

.collect-board-context-item.danger:hover {
  background: rgba(239, 68, 68, 0.12);
}

/* Delete confirmation dialog */
.collect-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.collect-confirm-dialog {
  width: 320px;
  background: rgba(24, 24, 32, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.collect-confirm-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.collect-confirm-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

.collect-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.collect-confirm-btn {
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.15s ease;
}

.collect-confirm-btn.cancel {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.collect-confirm-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.11);
}

.collect-confirm-btn.delete {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.36);
  color: rgba(239, 68, 68, 0.95);
}

.collect-confirm-btn.delete:hover {
  background: rgba(239, 68, 68, 0.28);
}

/* === Pull to refresh === */

.collect-pull-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  flex-shrink: 0;
}

.collect-pull-spin {
  animation: collect-spin 0.8s linear infinite;
}

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

/* === Drop Zone Overlay === */

.collect-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.collect-drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 60px;
  border-radius: 20px;
  border: 2px dashed rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.08);
  color: rgba(var(--accent-rgb), 0.9);
  font-size: 0.9rem;
  font-weight: 600;
}

/* === File Card Styles === */

.collect-card-file-doc {
  background: linear-gradient(180deg, rgba(37, 39, 56, 0.9), rgba(24, 27, 39, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.collect-card-file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.7);
}

.collect-card-file-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  word-break: break-word;
}

.collect-card-file-ext {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

/* === File Picker in AddCard === */

.collect-file-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 20px;
  border-radius: 10px;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.collect-file-picker-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.06);
  color: rgba(var(--accent-rgb), 0.8);
}

.collect-file-preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.collect-file-preview-img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
  background: rgba(0, 0, 0, 0.3);
}

.collect-file-preview-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}

.collect-file-change-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.1s;
}

.collect-file-change-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  color: rgba(255, 255, 255, 1);
}

/* === File Picker Row (Upload + Browse) === */

.collect-file-picker-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* === Folder Selection Preview === */

.collect-folder-selection-preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.collect-folder-selection-thumbs {
  display: flex;
  gap: 4px;
  padding: 8px;
  overflow-x: auto;
}

.collect-folder-selection-thumbs img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.collect-folder-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* === Folder Browser === */

.collect-folder-browser {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  max-height: 300px;
  overflow: hidden;
}

.collect-folder-browser-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.collect-folder-browser-path {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collect-folder-browser-close,
.collect-folder-browser-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.collect-folder-browser-close:hover,
.collect-folder-browser-back:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.collect-folder-browser-confirm {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.collect-folder-browser-confirm:hover {
  background: #9171f0;
}

.collect-folder-browser-list,
.collect-folder-browser-contents {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

.collect-folder-browser-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
}

.collect-folder-browser-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.collect-folder-chevron {
  margin-left: auto;
  opacity: 0.3;
}

.collect-folder-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 4px;
  padding: 4px;
}

.collect-folder-browser-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
}

.collect-folder-browser-thumb:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.collect-folder-browser-thumb.selected {
  border-color: var(--accent);
}

.collect-folder-browser-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collect-folder-browser-check {
  position: absolute;
  top: 3px;
  left: 3px;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.15s;
}

.collect-folder-browser-thumb:hover .collect-folder-browser-check,
.collect-folder-browser-thumb.selected .collect-folder-browser-check {
  opacity: 1;
}

.collect-folder-browser-thumb.selected .collect-folder-browser-check {
  color: var(--accent);
}

.collect-folder-browser-loading,
.collect-folder-browser-empty {
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
}

/* === Mobile / Narrow Responsive === */

@media (max-width: 600px) {
  .collect-sidebar {
    display: none;
  }

  .collect-toolbar {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .collect-toolbar-left {
    gap: 6px;
  }

  .collect-sidebar-toggle {
    display: none;
  }

  .collect-active-board-chip {
    display: none;
  }

  .collect-add-btn span {
    display: none;
  }

  .collect-add-btn {
    padding: 7px 9px;
  }

  .collect-search {
    max-width: none;
  }

  .collect-toolbar-right {
    gap: 6px;
  }

  .collect-zoom {
    display: none;
  }

  .collect-grid {
    padding: 4px 6px 18px;
  }

  .collect-card {
    border-radius: 12px;
  }
}
/**
 * Browser App Styles
 */

.sandbox-app-browser {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #1a1a1f;
  overflow: hidden;
  position: relative;
}

/* Toolbar */
.browser-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.browser-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.browser-btn:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

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

.browser-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.browser-btn-block:hover {
  background: rgba(255, 100, 100, 0.15);
  border-color: rgba(255, 100, 100, 0.3);
  color: #ff6b6b;
}

.browser-url-form {
  flex: 1;
  display: flex;
  gap: 0.5rem;
}

.browser-url-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 0.85rem;
  outline: none;
}

.browser-url-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.browser-url-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Bookmarks bar */
.browser-bookmarks {
  display: flex;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  overflow-x: auto;
}

.browser-bookmark {
  padding: 0.25rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}

.browser-bookmark:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

/* Loading bar */
.browser-loading-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-dark));
  background-size: 200% 100%;
  animation: loadingSlide 1s linear infinite;
}

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

/* Content area */
.browser-content {
  flex: 1;
  position: relative;
  background: white;
  overflow: hidden;
}

.browser-webview {
  width: 100%;
  height: 100%;
  border: none;
}

/* Home page */
.browser-home {
  position: absolute;
  inset: 0;
  background: #1a1a1f;
  display: flex;
  justify-content: center;
  overflow-y: auto;
}

.browser-home-inner {
  max-width: 600px;
  width: 100%;
  padding: 48px 24px 24px;
}

.browser-home-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  cursor: text;
  transition: all 0.15s;
  margin-bottom: 32px;
}

.browser-home-search:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.search-icon {
  font-size: 1rem;
  opacity: 0.5;
}

.search-placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
}

.browser-home-section {
  margin-bottom: 28px;
}

.section-label {
  display: block;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.quick-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

.quick-link-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
}

.quick-link-name {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
}

.bookmarks-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bookmark-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  width: 100%;
}

.bookmark-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.bookmark-icon {
  font-size: 1rem;
}

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

.bookmark-name {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
}

.bookmark-domain {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
}

/* Blocked overlay */
.browser-blocked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 31, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.blocked-content {
  text-align: center;
  padding: 48px;
}

.blocked-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 16px;
}

.blocked-content h2 {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.5rem;
  margin: 0 0 8px;
}

.blocked-domain {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  margin: 0 0 8px;
}

.blocked-message {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  margin: 0 0 24px;
}

.blocked-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.blocked-btn {
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}

.blocked-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.blocked-btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.blocked-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Blocked sites manager panel */
.browser-blocked-manager {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: rgba(20, 20, 25, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 30;
}

.blocked-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.blocked-manager-title {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-weight: 600;
}

.blocked-manager-add {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.blocked-manager-input {
  flex: 1;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 0.75rem;
  outline: none;
}

.blocked-manager-input:focus {
  border-color: rgba(255, 100, 100, 0.5);
}

.blocked-manager-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.blocked-manager-add-btn {
  padding: 6px 12px;
  background: rgba(255, 100, 100, 0.15);
  border: 1px solid rgba(255, 100, 100, 0.3);
  border-radius: 6px;
  color: #ff6b6b;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.blocked-manager-add-btn:hover {
  background: rgba(255, 100, 100, 0.25);
}

.blocked-manager-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.blocked-manager-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  transition: background 0.1s;
}

.blocked-manager-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.blocked-site-icon {
  font-size: 0.75rem;
  opacity: 0.6;
}

.blocked-site-name {
  flex: 1;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}

.blocked-remove-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
}

.blocked-manager-item:hover .blocked-remove-btn {
  opacity: 1;
}

.blocked-remove-btn:hover {
  background: rgba(255, 100, 100, 0.15);
  color: #ff6b6b;
}

/* Session timer */
.browser-session-bar {
  padding: 3px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.65rem;
  background: transparent;
  transition: all 0.3s;
}

.browser-session-bar.warning {
  background: rgba(255, 100, 100, 0.1);
  color: #ff6b6b;
  font-weight: 600;
}

/* Fallback */
.browser-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1a1a1f;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 2rem;
  z-index: 10;
}
/**
 * Text Selection Popup Styles
 */

.text-selection-popup {
  position: fixed;
  z-index: 10000;
  background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  padding: 0.75rem;
  min-width: 220px;
  max-width: 360px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 20px rgba(var(--accent-rgb), 0.1);
  animation: popupAppear 0.2s ease-out;
  backdrop-filter: blur(12px);
}

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

/* Preview section */
.popup-preview {
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.preview-quote {
  color: rgba(var(--accent-rgb), 0.6);
  font-size: 1.2rem;
  font-family: Georgia, serif;
  line-height: 1;
}

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

/* Note input */
.popup-note-input {
  margin-bottom: 0.75rem;
}

.popup-note-input input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 0.8rem;
  outline: none;
  transition: border-color 0.15s;
}

.popup-note-input input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.popup-note-input input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Actions */
.popup-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.popup-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.popup-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  transform: translateY(-1px);
}

.popup-btn:active {
  transform: translateY(0);
}

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

.btn-icon {
  font-size: 0.9rem;
}

.btn-label {
  font-weight: 500;
}

/* Save button - primary action */
.save-btn {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.3));
  border-color: rgba(var(--accent-rgb), 0.4);
}

.save-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.5));
  border-color: rgba(var(--accent-rgb), 0.6);
}

/* Note button */
.note-btn {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
}

.note-btn:hover {
  background: rgba(251, 191, 36, 0.25);
  border-color: rgba(251, 191, 36, 0.5);
}

/* Copy button */
.copy-btn {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
}

.copy-btn:hover {
  background: rgba(52, 211, 153, 0.25);
  border-color: rgba(52, 211, 153, 0.5);
}

/* Close button */
.close-btn {
  margin-left: auto;
  padding: 0.4rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
}

.close-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
}

.close-btn .btn-icon {
  font-size: 0.8rem;
}

/* Saved state */
.popup-saved {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  color: #34d399;
  font-weight: 500;
  animation: savedPulse 0.3s ease-out;
}

@keyframes savedPulse {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.saved-icon {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(52, 211, 153, 0.2);
  border-radius: 50%;
}

/* Vibe Studio App */

.vibe-studio {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--os-glass-bg-solid);
  color: rgba(255, 255, 255, 0.9);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
}

/* Header */
.vibe-studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.vibe-studio-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vibe-studio-title svg {
  color: var(--accent);
}

.vibe-studio-title h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vibe-studio-create-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.2));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-studio-create-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.3));
  border-color: rgba(var(--accent-rgb), 0.5);
  transform: translateY(-1px);
}

/* Tabs */
.vibe-studio-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vibe-studio-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-studio-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.vibe-studio-tab.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.vibe-studio-tab-count {
  padding: 0.15rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.vibe-studio-tab.active .vibe-studio-tab-count {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-light);
}

/* Content */
.vibe-studio-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

/* Empty State */
.vibe-studio-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.4);
}

.vibe-studio-empty svg {
  opacity: 0.3;
}

.vibe-studio-empty p {
  margin: 0;
  font-size: 0.95rem;
}

.vibe-studio-empty button {
  padding: 0.5rem 1rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-studio-empty button:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

/* Grid */
.vibe-studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.875rem;
}

/* Card */
.vibe-studio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-studio-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.vibe-studio-card.selected {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}

.vibe-studio-card.draft {
  border-style: dashed;
}

.vibe-studio-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  border-radius: 10px;
  color: var(--accent);
}

.vibe-studio-card-info h3 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.vibe-studio-card-info p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vibe-studio-card-actions {
  display: flex;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.vibe-studio-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-studio-card-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.vibe-studio-card-action.publish:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.vibe-studio-card-action.delete:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}

.vibe-studio-card-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.2rem 0.5rem;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Modal */
.vibe-studio-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.vibe-studio-modal {
  width: 90%;
  max-width: 420px;
  background: linear-gradient(145deg, rgba(30, 30, 35, 0.98), rgba(20, 20, 25, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.vibe-studio-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vibe-studio-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.vibe-studio-modal-header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-studio-modal-header button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.vibe-studio-modal-content {
  padding: 1.25rem;
}

.vibe-studio-type-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.vibe-studio-type-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-studio-type-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}

.vibe-studio-type-btn.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}

.vibe-studio-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
}

.vibe-studio-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.vibe-studio-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.vibe-studio-input-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

.vibe-studio-input-hint code {
  padding: 0.15rem 0.4rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-family: 'SF Mono', monospace;
  color: var(--accent);
}

.vibe-studio-modal-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.vibe-studio-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-studio-btn.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.vibe-studio-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.vibe-studio-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border: none;
  color: white;
}

.vibe-studio-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #9d7af8, #818cf8);
  transform: translateY(-1px);
}

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

/* Loading */
.vibe-studio-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.5);
}

.vibe-studio-loading .spin {
  animation: spin 1s linear infinite;
}

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

/* Tip */
.vibe-studio-tip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.08);
  border-top: 1px solid rgba(var(--accent-rgb), 0.15);
  font-size: 0.8rem;
  color: rgba(var(--accent-rgb), 0.8);
}

.vibe-studio-tip svg {
  flex-shrink: 0;
}

/* Scrollbar */
.vibe-studio-content::-webkit-scrollbar {
  width: 6px;
}

.vibe-studio-content::-webkit-scrollbar-track {
  background: transparent;
}

.vibe-studio-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.vibe-studio-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Editor View Styles
   ============================================ */

.vibe-studio-editor {
  display: flex;
  flex-direction: column;
}

/* Editor Header */
.vibe-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.vibe-editor-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vibe-editor-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-editor-back:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.vibe-editor-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}

.vibe-editor-breadcrumb svg:first-child {
  color: var(--accent);
}

.vibe-editor-breadcrumb .breadcrumb-sep {
  color: rgba(255, 255, 255, 0.3);
}

.vibe-editor-breadcrumb .breadcrumb-file {
  color: rgba(255, 255, 255, 0.6);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 0.8rem;
}

.vibe-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vibe-editor-unsaved {
  padding: 0.25rem 0.625rem;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 4px;
  font-size: 0.75rem;
  color: #fbbf24;
}

/* Draft badge - shows we're working on a copy */
.vibe-editor-draft-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vibe-editor-draft-badge svg {
  opacity: 0.8;
}

.vibe-editor-save,
.vibe-editor-preview,
.vibe-editor-publish {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vibe-editor-save {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.vibe-editor-save:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.vibe-editor-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Publish/Save button - prominent green */
.vibe-editor-publish {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
  border: none;
  color: white;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
}

.vibe-editor-publish:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 1), rgba(5, 150, 105, 1));
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.vibe-editor-preview {
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.vibe-editor-preview:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

/* Editor Body */
.vibe-editor-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* File Tree Sidebar */
.vibe-editor-sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.vibe-editor-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vibe-editor-files {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.vibe-editor-folder-header,
.vibe-editor-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vibe-editor-folder-header {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.vibe-editor-folder-header svg {
  color: #fbbf24;
}

.vibe-editor-file:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
}

.vibe-editor-file.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-light);
}

.vibe-editor-file.active svg {
  color: var(--accent);
}

.vibe-editor-file svg {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.vibe-editor-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Main Editor Area */
.vibe-editor-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(0, 0, 0, 0.3);
}

.vibe-editor-loading,
.vibe-editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.vibe-editor-loading svg,
.vibe-editor-empty svg {
  opacity: 0.4;
}

.vibe-editor-loading p,
.vibe-editor-empty p {
  margin: 0;
  font-size: 0.9rem;
}

/* Code Editor Textarea */
.vibe-editor-textarea {
  flex: 1;
  width: 100%;
  padding: 1rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: none;
  outline: none;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}

.vibe-editor-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Scrollbars for editor */
.vibe-editor-files::-webkit-scrollbar,
.vibe-editor-textarea::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.vibe-editor-files::-webkit-scrollbar-track,
.vibe-editor-textarea::-webkit-scrollbar-track {
  background: transparent;
}

.vibe-editor-files::-webkit-scrollbar-thumb,
.vibe-editor-textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.vibe-editor-files::-webkit-scrollbar-thumb:hover,
.vibe-editor-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Preview button active state */
.vibe-editor-preview.active {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}

.vibe-editor-preview.active:hover {
  background: rgba(248, 113, 113, 0.25);
}

/* ============================================
   Preview Panel - Floating over editor
   ============================================ */

.vibe-editor-body {
  position: relative;
}

.vibe-preview-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 400px;
  max-width: calc(100% - 240px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, rgba(25, 25, 30, 0.98), rgba(15, 15, 20, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 100;
  overflow: hidden;
  /* Contain app elements within preview - prevents z-index escaping */
  isolation: isolate;
  contain: layout style paint;
}

.vibe-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.vibe-preview-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.vibe-preview-title svg {
  color: var(--accent);
}

.vibe-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.vibe-preview-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.vibe-preview-action:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.vibe-preview-action.close:hover {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}

.vibe-preview-content {
  flex: 1;
  overflow: auto;
  background: rgba(0, 0, 0, 0.2);
  /* Contain app elements within preview - prevents z-index escaping */
  isolation: isolate;
  contain: layout style paint;
  position: relative;
}

/* Make preview content fill the panel */
.vibe-preview-content > * {
  height: 100%;
}

/* Resize editor main when preview is open */
.vibe-editor-body.with-preview .vibe-editor-main {
  margin-right: 420px;
}

/* ============================================
   Workspace View Styles
   ============================================ */

.vibe-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Workspace Header */
.vibe-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  gap: 1rem;
}

.vibe-workspace-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.vibe-workspace-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.vibe-workspace-back:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.vibe-workspace-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  min-width: 0;
}

.vibe-workspace-title svg {
  color: var(--accent);
  flex-shrink: 0;
}

.vibe-workspace-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* View Mode Toggle */
.vibe-workspace-view-toggle {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.vibe-view-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vibe-view-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
}

.vibe-view-btn.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
}

.vibe-view-btn svg {
  flex-shrink: 0;
}

/* Workspace Actions */
.vibe-workspace-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vibe-workspace-refresh,
.vibe-workspace-external {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.vibe-workspace-refresh:hover,
.vibe-workspace-external:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

/* Workspace Body */
.vibe-workspace-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* Code Panel */
.vibe-code-panel {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Preview Main - Full height preview area */
.vibe-preview-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  /* Contain app elements within preview - prevents z-index escaping */
  isolation: isolate;
  contain: layout style paint;
  position: relative;
  /* Prevent scroll/zoom from affecting parent */
  overscroll-behavior: contain;
}

.vibe-preview-main > * {
  flex: 1;
  min-height: 0;
}

/* View mode layouts */
.vibe-workspace-preview .vibe-workspace-body {
  flex-direction: column;
}

.vibe-workspace-preview .vibe-preview-main {
  flex: 1;
}

.vibe-workspace-code .vibe-code-panel {
  flex: 1;
}

.vibe-workspace-split .vibe-workspace-body {
  flex-direction: row;
}

.vibe-workspace-split .vibe-code-panel {
  flex: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.vibe-workspace-split .vibe-preview-main {
  flex: 1;
}

/* Preview Error Display */
.vibe-preview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  background: linear-gradient(145deg, rgba(220, 38, 38, 0.1), rgba(185, 28, 28, 0.05));
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 12px;
  margin: 1rem;
}

.vibe-preview-error-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 113, 113, 0.15);
  border-radius: 50%;
  margin-bottom: 1rem;
}

.vibe-preview-error-icon svg {
  color: #f87171;
}

.vibe-preview-error h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f87171;
  margin: 0 0 0.75rem 0;
}

.vibe-preview-error-message {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-family: 'SF Mono', Monaco, 'Fira Code', monospace;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 1rem 0;
}

.vibe-preview-error-details {
  width: 100%;
  max-width: 500px;
  text-align: left;
  margin-bottom: 1rem;
}

.vibe-preview-error-details summary {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  padding: 0.5rem;
}

.vibe-preview-error-details summary:hover {
  color: rgba(255, 255, 255, 0.8);
}

.vibe-preview-error-details pre {
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.75rem;
  border-radius: 6px;
  overflow-x: auto;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.5rem 0 0 0;
  max-height: 150px;
  overflow-y: auto;
}

.vibe-preview-error-hint {
  font-size: 0.85rem;
  color: rgba(var(--accent-rgb), 0.9);
  margin: 0 0 1rem 0;
  font-style: italic;
}

.vibe-preview-error-retry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: rgba(248, 113, 113, 0.2);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 8px;
  color: #f87171;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vibe-preview-error-retry:hover {
  background: rgba(248, 113, 113, 0.3);
  border-color: rgba(248, 113, 113, 0.6);
}
.claude-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0d0d0d;
  color: #e4e4e7;
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  overflow: hidden;
}

/* Loading state */
.claude-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
}

.claude-loading .spinning {
  animation: spin 1s linear infinite;
}

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

/* Not available state */
.claude-not-available {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 32px;
  text-align: center;
}

.claude-not-available-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 20px;
  color: #ef4444;
}

.claude-not-available h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.claude-not-available p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.claude-install-instructions {
  margin-top: 16px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.claude-install-instructions h3 {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.claude-install-instructions code {
  display: block;
  padding: 12px 16px;
  background: #1a1a1a;
  border-radius: 8px;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 13px;
  color: var(--accent);
}

.claude-note {
  margin: 12px 0 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.claude-retry-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.claude-retry-btn:hover {
  background: rgba(var(--accent-rgb), 0.3);
}

.claude-error-detail {
  margin-top: 8px;
  font-size: 12px;
  color: #ef4444;
}

/* Header */
.claude-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.claude-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
}

.claude-title {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}

.claude-session-badge {
  padding: 3px 8px;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 4px;
  font-size: 11px;
  color: #4ade80;
}

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

.claude-cwd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.claude-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.claude-header-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Output area */
.claude-output {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scroll-behavior: smooth;
}

/* Custom scrollbar */
.claude-output::-webkit-scrollbar {
  width: 8px;
}

.claude-output::-webkit-scrollbar-track {
  background: transparent;
}

.claude-output::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.claude-output::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Welcome screen */
.claude-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 32px;
}

.claude-welcome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.2));
  border-radius: 16px;
  color: var(--accent);
  margin-bottom: 16px;
}

.claude-welcome h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.claude-welcome > p {
  margin: 0 0 24px 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  max-width: 400px;
  line-height: 1.5;
}

.claude-welcome-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.claude-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.claude-tip svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Messages */
.claude-message {
  margin-bottom: 16px;
}

.claude-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
}

.claude-message-user .claude-message-header {
  color: #60a5fa;
}

.claude-message-assistant .claude-message-header {
  color: var(--accent);
}

.claude-streaming-indicator {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;
}

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

.claude-message-content {
  padding: 12px 16px;
  border-radius: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.claude-message-user .claude-message-content {
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.claude-message-assistant .claude-message-content {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
}

.claude-thinking {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* ANSI color classes */
.ansi-bold { font-weight: 700; }
.ansi-italic { font-style: italic; }
.ansi-underline { text-decoration: underline; }

.ansi-black { color: #3f3f46; }
.ansi-red { color: #ef4444; }
.ansi-green { color: #22c55e; }
.ansi-yellow { color: #eab308; }
.ansi-blue { color: #3b82f6; }
.ansi-magenta { color: #a855f7; }
.ansi-cyan { color: #06b6d4; }
.ansi-white { color: #e4e4e7; }

.ansi-bright-black { color: #71717a; }
.ansi-bright-red { color: #f87171; }
.ansi-bright-green { color: #4ade80; }
.ansi-bright-yellow { color: #facc15; }
.ansi-bright-blue { color: #60a5fa; }
.ansi-bright-magenta { color: #c084fc; }
.ansi-bright-cyan { color: #22d3ee; }
.ansi-bright-white { color: #fafafa; }

/* Error message */
.claude-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #f87171;
  font-size: 13px;
  margin-top: 8px;
}

/* Input area */
.claude-input-container {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.claude-input {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.claude-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.claude-input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.claude-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.claude-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.claude-send-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

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

.claude-send-btn:active:not(:disabled) {
  transform: scale(0.95);
}
.ai-chat-command-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  width: auto;
  max-width: min(900px, 96vw);
  background: rgba(18, 18, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  overflow: hidden;
  z-index: 1000;
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}

.ai-chat-command-menu.ai-chat-command-menu-portal {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
}

.ai-chat-command-menu * {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}

.ai-chat-command-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
}

.ai-chat-command-search {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
}

.ai-chat-command-list {
  max-height: 220px;
  overflow: auto;
  padding: 0.25rem;
  direction: ltr !important;
}

.ai-chat-command-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  text-align: left;
  overflow: visible !important;
  direction: ltr !important;
}

.ai-chat-command-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.ai-chat-command-icon svg {
  display: block;
  color: rgba(255, 255, 255, 0.8);
}

.ai-chat-command-content {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.ai-chat-command-item:hover,
.ai-chat-command-item.selected {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.ai-chat-command-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  white-space: nowrap;
  font-variant-ligatures: none;
  direction: ltr !important;
  unicode-bidi: isolate-override !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 auto;
  min-width: 140px;
}

.ai-chat-command-desc {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  line-height: 1.25;
  padding-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-chat-command-hint {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
}

.ai-chat-command-hint span {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}
/* ============================================================
   AGENTS APP - Partner & Companion Chat
   ============================================================ */

.agents-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--os-glass-bg-solid);
  color: #e4e4e7;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   HEADER
   ============================================================ */

.agents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #27282c;
  border-bottom: 1px solid #3f4046;
  gap: 1rem;
}

.agents-header-left,
.agents-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.agents-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.agents-model-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid #3f4046;
  border-radius: 20px;
  color: #a1a1aa;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.agents-model-display:hover {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-model-display svg:last-child {
  opacity: 0.5;
}

/* Mode tabs */
.agents-mode-tabs {
  display: flex;
  background: #27282c;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.agents-mode-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #71717a;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.agents-mode-tab:hover {
  color: #a1a1aa;
}

.agents-mode-tab.active {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-mode-tab.active svg {
  color: var(--accent);
}

/* Model selector */
.agents-model-selector {
  position: relative;
}

.agents-model-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  background: transparent;
  border: 1px solid #3f4046;
  border-radius: 8px;
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.75rem;
}

.agents-model-btn:hover {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-model-label {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon buttons */
.agents-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid #3f4046;
  border-radius: 8px;
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.15s;
}

.agents-icon-btn:hover {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-icon-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent-dark);
  color: var(--accent);
}

/* Dropdowns */
.agents-dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9998;
}

.agents-dropdown {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 280px;
  max-width: 90vw;
  max-height: 70vh;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow-y: auto;
}

.agents-model-dropdown {
  /* Same as base - centered modal */
}

.agents-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #3f4046;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: #27282c;
  z-index: 1;
}

.agents-dropdown-header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #71717a;
  cursor: pointer;
}

.agents-dropdown-header button:hover {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: #e4e4e7;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.agents-dropdown-item:hover {
  background: #3f4046;
}

.agents-dropdown-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.agents-dropdown-item svg {
  margin-left: auto;
  flex-shrink: 0;
}

.agents-dropdown-item-name {
  font-weight: 500;
}

.agents-dropdown-item-desc {
  font-size: 0.75rem;
  color: #71717a;
}

/* Model groups */
.agents-model-group {
  padding: 0.5rem 0;
  border-bottom: 1px solid #3f4046;
}

.agents-model-group:last-child {
  border-bottom: none;
}

.agents-model-group-header {
  padding: 0.5rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.agents-model-group .agents-dropdown-item {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* ============================================================
   BODY LAYOUT (Sidebar + Main)
   ============================================================ */

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

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

/* ============================================================
   THREAD SIDEBAR (Collapsible)
   ============================================================ */

.agents-thread-sidebar {
  width: 240px;
  background: #27282c;
  border-right: 1px solid #3f4046;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.2s ease, margin 0.2s ease;
}

.agents-thread-sidebar.collapsed {
  width: 0;
  margin-left: -1px;
  overflow: hidden;
}

.agents-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #3f4046;
  font-weight: 500;
  flex-shrink: 0;
}

.agents-thread-header-actions {
  display: flex;
  gap: 0.375rem;
}

.agents-thread-header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #3f4046;
  border: none;
  border-radius: 6px;
  color: #e4e4e7;
  cursor: pointer;
}

.agents-thread-header button:hover {
  background: #52525b;
}

.agents-thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.agents-thread-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #71717a;
  font-size: 0.875rem;
}

.agents-thread-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  background: none;
  border: none;
  border-radius: 8px;
  text-align: left;
  transition: background 0.15s;
}

.agents-thread-item:hover {
  background: #3f4046;
}

.agents-thread-item.active {
  background: rgba(var(--accent-rgb), 0.15);
}

.agents-thread-item-content {
  flex: 1;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0;
  min-width: 0;
  color: inherit;
  font: inherit;
}

.agents-thread-item-name {
  color: #e4e4e7;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agents-thread-item-meta {
  font-size: 0.75rem;
  color: #71717a;
  margin-top: 0.25rem;
}

.agents-thread-item-rename {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 4px;
  color: #71717a;
  cursor: pointer;
  flex-shrink: 0;
}

.agents-thread-item:hover .agents-thread-item-rename {
  display: flex;
}

.agents-thread-item-rename:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}

.agents-thread-edit {
  flex: 1;
}

.agents-thread-edit input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  background: #1a1b1e;
  border: 1px solid var(--accent-dark);
  border-radius: 6px;
  color: #e4e4e7;
  font-size: 0.875rem;
  outline: none;
}

/* ============================================================
   MESSAGES
   ============================================================ */

.agents-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Welcome screen */
.agents-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #71717a;
  gap: 1rem;
}

.agents-welcome svg {
  opacity: 0.5;
}

.agents-welcome h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #e4e4e7;
  margin: 0;
}

.agents-welcome p {
  font-size: 1rem;
  max-width: 300px;
  margin: 0;
}

/* Messages */
.agents-message {
  max-width: 85%;
  animation: messageIn 0.2s ease-out;
}

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

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

.agents-message.assistant {
  align-self: flex-start;
}

.agents-message-content {
  padding: 0.875rem 1rem;
  border-radius: 16px;
  line-height: 1.5;
}

.agents-message.user .agents-message-content {
  background: var(--accent-dark);
  color: white;
  border-bottom-right-radius: 4px;
}

.agents-message.assistant .agents-message-content {
  background: #27282c;
  border: 1px solid #3f4046;
  border-bottom-left-radius: 4px;
}

.agents-message.streaming .agents-message-content {
  border-color: var(--accent-dark);
}

/* Message attachments */
.agents-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

.agents-message-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Message editing */
.agents-message.editing {
  max-width: 100%;
}

.agents-message-edit {
  width: 100%;
}

.agents-message-edit-input {
  width: 100%;
  min-height: 80px;
  padding: 0.75rem;
  background: #1a1b1e;
  border: 1px solid var(--accent-dark);
  border-radius: 12px;
  color: #e4e4e7;
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  font-family: inherit;
}

.agents-message-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.agents-message-edit-actions button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.agents-message-edit-actions button:first-child {
  background: transparent;
  border: 1px solid #3f4046;
  color: #a1a1aa;
}

.agents-message-edit-actions button:first-child:hover {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-message-edit-actions button.primary {
  background: var(--accent-dark);
  border: none;
  color: white;
}

.agents-message-edit-actions button.primary:hover {
  background: var(--accent-dark);
}

/* Message actions */
.agents-message-actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.375rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

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

.agents-message-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #71717a;
  cursor: pointer;
  transition: all 0.15s ease;
}

.agents-message-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}

.agents-message-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.agents-message.user .agents-message-actions {
  justify-content: flex-end;
}

/* Markdown in messages */
.agents-message .chat-markdown {
  line-height: 1.6;
}

.agents-message .chat-markdown strong {
  font-weight: 600;
}

.agents-message .chat-markdown em {
  font-style: italic;
}

.agents-message .chat-markdown .chat-inline-code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.875em;
}

.agents-message .chat-markdown .chat-code-block {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  overflow-x: auto;
}

.agents-message .chat-markdown .chat-code-block code {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre;
}

.agents-message .chat-markdown .chat-h2,
.agents-message .chat-markdown .chat-h3,
.agents-message .chat-markdown .chat-h2,
.agents-message .chat-markdown .chat-h3,
.agents-message .chat-markdown .chat-h4 {
  font-weight: 600;
  margin: 0.5rem 0 0.25rem 0;
}

.agents-message .chat-markdown .chat-h2 {
  font-size: 1.125rem;
}

.agents-message .chat-markdown .chat-h3 {
  font-size: 1rem;
}

.agents-message .chat-markdown .chat-h4 {
  font-size: 0.9375rem;
}

.agents-message .chat-markdown .chat-hr {
  border: none;
  border-top: 1px solid #3f4046;
  margin: 0.5rem 0;
}

.agents-message .chat-markdown .chat-ul,
.agents-message .chat-markdown .chat-ol {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
  list-style: none;
}

.agents-message .chat-markdown .chat-li,
.agents-message .chat-markdown .chat-li-num {
  margin: 0.125rem 0;
  position: relative;
}

.agents-message .chat-markdown .chat-li::before {
  content: '•';
  position: absolute;
  left: -1rem;
  color: #71717a;
}

.agents-message .chat-markdown .chat-ol {
  counter-reset: list-counter;
}

.agents-message .chat-markdown .chat-li-num {
  counter-increment: list-counter;
}

.agents-message .chat-markdown .chat-li-num::before {
  content: counter(list-counter) '.';
  position: absolute;
  left: -1.25rem;
  color: #71717a;
  font-size: 0.875em;
}

/* Status indicator */
.agents-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #71717a;
  font-size: 0.875rem;
}

.agents-status-dots {
  display: flex;
  gap: 4px;
}

.agents-status-dots span {
  width: 6px;
  height: 6px;
  background: var(--accent-dark);
  border-radius: 50%;
  animation: dotPulse 1.4s ease-in-out infinite;
}

.agents-status-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.agents-status-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotPulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================================
   ERROR BANNER
   ============================================================ */

.agents-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(239, 68, 68, 0.15);
  border-top: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  font-size: 0.875rem;
}

.agents-error span {
  flex: 1;
}

.agents-error button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: #fca5a5;
  cursor: pointer;
  opacity: 0.7;
}

.agents-error button:hover {
  opacity: 1;
}

/* ============================================================
   INPUT AREA
   ============================================================ */

.agents-input-area {
  padding: 1rem;
  background: #1a1b1e;
  border-top: 1px solid #3f4046;
}

.agents-input-container {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 16px;
  padding: 0.5rem;
  transition: border-color 0.15s;
}

.agents-input-with-menu {
  position: relative;
  flex: 1;
}

.agents-input-container:focus-within {
  border-color: var(--accent-dark);
}

.agents-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #e4e4e7;
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 0.375rem 0.5rem;
  resize: none;
  min-height: 24px;
  max-height: 150px;
}

.agents-input::placeholder {
  color: #52525b;
}

.agents-voice-btn,
.agents-send-btn,
.agents-stop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.agents-voice-btn {
  background: transparent;
  color: #71717a;
}

.agents-voice-btn:hover {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-voice-btn.recording {
  background: #ef4444;
  color: white;
  animation: recordPulse 1s ease-in-out infinite;
}

@keyframes recordPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

.agents-voice-btn.transcribing {
  background: #3f4046;
  color: #71717a;
}

.agents-voice-btn.transcribing svg {
  animation: spin 1s linear infinite;
}

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

.agents-send-btn {
  background: var(--accent-dark);
  color: white;
}

.agents-send-btn:hover:not(:disabled) {
  background: var(--accent-dark);
}

.agents-send-btn:disabled {
  background: #3f4046;
  color: #52525b;
  cursor: not-allowed;
}

.agents-stop-btn {
  background: #ef4444;
  color: white;
}

.agents-stop-btn:hover {
  background: #dc2626;
}

/* Speaking indicator */
.agents-speaking {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 20px;
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
}

.agents-speaking:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.agents-speaking svg:first-child {
  animation: speakPulse 1s ease-in-out infinite;
}

@keyframes speakPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ============================================================
   ATTACHMENTS
   ============================================================ */

.agents-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.agents-attachment-chip {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 16px;
  color: var(--accent);
  font-size: 0.75rem;
}

.agents-attachment-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  opacity: 0.7;
  border-radius: 50%;
}

.agents-attachment-chip button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.agents-attach-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 50%;
  color: #71717a;
  cursor: pointer;
  transition: all 0.15s ease;
}

.agents-attach-btn:hover {
  background: #3f4046;
  color: #e4e4e7;
}

/* ============================================================
   FILE BROWSER MODAL
   ============================================================ */

.agents-file-browser {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-width: 90vw;
  max-height: 70vh;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.agents-file-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #3f4046;
  font-weight: 600;
}

.agents-file-browser-header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: #71717a;
  cursor: pointer;
  border-radius: 6px;
}

.agents-file-browser-header button:hover {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-file-browser-path {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: #1a1b1e;
  border-bottom: 1px solid #3f4046;
  font-size: 0.8125rem;
}

.agents-file-browser-home,
.agents-file-browser-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 6px;
  color: #71717a;
  cursor: pointer;
}

.agents-file-browser-home:hover:not(:disabled),
.agents-file-browser-up:hover {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-file-browser-home:disabled {
  opacity: 0.4;
  cursor: default;
}

.agents-file-browser-current {
  flex: 1;
  color: #a1a1aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agents-file-browser-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  min-height: 200px;
  max-height: 350px;
}

.agents-file-browser-loading,
.agents-file-browser-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: #71717a;
  font-size: 0.875rem;
}

.agents-file-browser-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  background: none;
  border: none;
  border-radius: 6px;
  color: #e4e4e7;
  font-size: 0.8125rem;
  text-align: left;
}

.agents-file-browser-item:hover {
  background: #3f4046;
}

.agents-file-browser-item.attached {
  background: rgba(34, 197, 94, 0.15);
}

.agents-file-browser-item .folder-toggle,
.agents-file-browser-item .file-select {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

.agents-file-browser-item .folder-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #71717a;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.agents-file-browser-item:hover .folder-add-btn {
  opacity: 1;
}

.agents-file-browser-item .folder-add-btn:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.agents-file-browser-item .folder-arrow {
  color: #71717a;
  flex-shrink: 0;
}

.agents-file-browser-item.folder .folder-toggle > svg:nth-child(2) {
  color: #fbbf24;
}

.agents-file-browser-item.file .file-select > svg:first-child {
  color: #71717a;
}

.agents-file-browser-item span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agents-file-browser-item .attached-check {
  color: #22c55e;
  flex-shrink: 0;
}

.agents-file-browser-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
}

.agents-file-browser-item .file-select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent-dark);
  cursor: pointer;
}

.agents-file-browser-item .file-select input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.agents-file-browser-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid #3f4046;
  font-size: 0.8125rem;
  color: #71717a;
}

.agents-file-browser-actions {
  display: flex;
  gap: 0.5rem;
}

.agents-file-browser-footer button {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  color: #e4e4e7;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.agents-file-browser-footer button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.agents-file-browser-footer button.attach-btn {
  background: var(--accent-dark);
  color: white;
}

.agents-file-browser-footer button.attach-btn:hover {
  background: var(--accent-dark);
}

.agents-file-browser-footer button.clear-btn {
  background: transparent;
  color: #71717a;
}

.agents-file-browser-footer button.clear-btn:hover {
  color: #e4e4e7;
}

.agents-file-browser-footer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   COUNCIL MODE
   ============================================================ */

/* Toggle button */
.agents-council-toggle-wrapper {
  position: relative;
}

.agents-council-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: #71717a;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.agents-council-toggle:hover {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-council-toggle.active {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

.agents-council-count {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: var(--accent-dark);
  color: white;
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Council model picker dropdown */
.agents-council-picker {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  max-width: 90vw;
  max-height: 50vh;
  background: #27282c;
  border: 1px solid #3f4046;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow-y: auto;
}

.agents-council-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #3f4046;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: #27282c;
  z-index: 1;
}

.agents-council-picker-header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #71717a;
  cursor: pointer;
}

.agents-council-picker-header button:hover {
  background: #3f4046;
  color: #e4e4e7;
}

.agents-council-picker .agents-dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* Council member list */
.agents-council-member-list {
  padding: 0.5rem 0;
}

.agents-council-member-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  color: #a1a1aa;
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.agents-council-member-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e4e4e7;
}

.agents-council-member-item.active {
  background: rgba(255, 255, 255, 0.07);
  color: #e4e4e7;
}

.agents-council-member-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.agents-council-member-name {
  flex: 1;
  font-weight: 500;
}

.agents-council-member-model {
  font-size: 0.7rem;
  color: #52525b;
  font-family: monospace;
}

.agents-council-member-check {
  color: var(--accent);
  flex-shrink: 0;
}

/* Council card member dot (replaces provider Icon) */
.agents-council-member-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.agents-council-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid #3f4046;
  position: sticky;
  bottom: 0;
  background: #27282c;
}

.agents-council-picker-footer button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #71717a;
}

.agents-council-picker-footer button:hover {
  color: #e4e4e7;
}

.agents-council-picker-footer button.primary {
  background: var(--accent-dark);
  color: white;
}

.agents-council-picker-footer button.primary:hover {
  background: var(--accent-dark);
}

/* Send button council state */
.agents-send-btn.council-active {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}

/* Council card */
.agents-message.council {
  max-width: 90%;
}

.agents-council-card {
  background: #27282c;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 16px;
  overflow: hidden;
}

.agents-council-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}

.agents-council-card-model {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--accent);
}

.agents-council-card-position {
  font-size: 0.75rem;
  color: #71717a;
}

.agents-council-card-body {
  padding: 0.875rem 1rem;
  line-height: 1.5;
  max-height: 400px;
  overflow-y: auto;
}

.agents-council-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  border-top: 1px solid #3f4046;
  background: rgba(0, 0, 0, 0.15);
}

.agents-council-card-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.agents-council-card-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.15s;
}

.agents-council-card-nav button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}

.agents-council-card-nav button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.agents-council-card-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.agents-council-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3f4046;
  cursor: pointer;
  transition: all 0.15s;
}

.agents-council-dot.active {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}

.agents-council-dot:hover:not(.active) {
  background: #52525b;
}

.agents-council-pick-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: var(--accent-dark);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.agents-council-pick-btn:hover {
  background: var(--accent-dark);
}

/* Provider-specific card borders */
.agents-council-card.provider-claude {
  border-color: rgba(232, 160, 72, 0.4);
}
.agents-council-card.provider-claude .agents-council-card-header {
  background: rgba(232, 160, 72, 0.08);
  border-bottom-color: rgba(232, 160, 72, 0.15);
}
.agents-council-card.provider-claude .agents-council-card-model {
  color: #e8a048;
}

.agents-council-card.provider-openai {
  border-color: rgba(16, 163, 127, 0.4);
}
.agents-council-card.provider-openai .agents-council-card-header {
  background: rgba(16, 163, 127, 0.08);
  border-bottom-color: rgba(16, 163, 127, 0.15);
}
.agents-council-card.provider-openai .agents-council-card-model {
  color: #10a37f;
}

.agents-council-card.provider-gemini {
  border-color: rgba(66, 133, 244, 0.4);
}
.agents-council-card.provider-gemini .agents-council-card-header {
  background: rgba(66, 133, 244, 0.08);
  border-bottom-color: rgba(66, 133, 244, 0.15);
}
.agents-council-card.provider-gemini .agents-council-card-model {
  color: #4285f4;
}

.agents-council-card.provider-deepseek {
  border-color: rgba(0, 191, 255, 0.4);
}
.agents-council-card.provider-deepseek .agents-council-card-header {
  background: rgba(0, 191, 255, 0.08);
  border-bottom-color: rgba(0, 191, 255, 0.15);
}
.agents-council-card.provider-deepseek .agents-council-card-model {
  color: #00bfff;
}

/* Provider-colored navigation dots */
.agents-council-dot.dot-claude {
  background: rgba(232, 160, 72, 0.3);
}
.agents-council-dot.dot-claude.active {
  background: #e8a048;
  box-shadow: 0 0 6px rgba(232, 160, 72, 0.5);
}

.agents-council-dot.dot-openai {
  background: rgba(16, 163, 127, 0.3);
}
.agents-council-dot.dot-openai.active {
  background: #10a37f;
  box-shadow: 0 0 6px rgba(16, 163, 127, 0.5);
}

.agents-council-dot.dot-gemini {
  background: rgba(66, 133, 244, 0.3);
}
.agents-council-dot.dot-gemini.active {
  background: #4285f4;
  box-shadow: 0 0 6px rgba(66, 133, 244, 0.5);
}

.agents-council-dot.dot-deepseek {
  background: rgba(0, 191, 255, 0.3);
}
.agents-council-dot.dot-deepseek.active {
  background: #00bfff;
  box-shadow: 0 0 6px rgba(0, 191, 255, 0.5);
}

/* Council badge on picked messages */
.agents-council-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  font-size: 0.6875rem;
  color: var(--accent);
}

.agents-council-badge-model {
  color: #71717a;
}

/* Council streaming state */
.agents-council-streaming {
  padding: 1rem;
  animation: messageIn 0.2s ease-out;
}

.agents-council-streaming-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.agents-council-streaming-models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.agents-council-streaming-model {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 0.75rem;
  color: #a1a1aa;
}

.agents-council-streaming-model.active {
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.agents-council-streaming-model.done {
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.agents-council-streaming-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.agents-council-streaming-model.active .agents-council-streaming-dot {
  animation: dotPulse 1.4s ease-in-out infinite;
}

.agents-council-spinner {
  animation: spin 1s linear infinite;
}

/* ============================================================
   LIGHT THEME OVERRIDES
   Using OS theme variables for consistency with desktop theme
   ============================================================ */

body.light .agents-app {
  background: transparent !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-header {
  background: var(--os-glass-bg, rgba(255, 255, 255, 0.78)) !important;
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}

body.light .agents-mode-tabs {
  background: rgba(0, 0, 0, 0.05) !important;
}

body.light .agents-mode-tab {
  color: var(--os-text-muted, #71717a) !important;
}

body.light .agents-mode-tab:hover {
  color: var(--os-text-secondary, #3f3f46) !important;
}

body.light .agents-mode-tab.active {
  background: #fff !important;
  color: var(--os-text-primary, #1a1a1a) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

body.light .agents-model-display,
body.light .agents-model-btn {
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--os-text-secondary, #52525b) !important;
}

body.light .agents-model-display:hover,
body.light .agents-model-btn:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-icon-btn {
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--os-text-muted, #71717a) !important;
}

body.light .agents-icon-btn:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

/* Thread sidebar */
body.light .agents-thread-sidebar {
  background: rgba(255, 255, 255, 0.9) !important;
  border-right-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}

body.light .agents-thread-header {
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}

body.light .agents-thread-header button {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}

body.light .agents-thread-header button:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

body.light .agents-thread-item:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
}

body.light .agents-thread-item-name {
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-thread-item-meta {
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-thread-item-rename {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--os-text-muted, #71717a) !important;
}

body.light .agents-thread-item-rename:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-thread-edit input {
  background: #fff !important;
  border-color: var(--accent) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-thread-empty {
  color: var(--os-text-muted, #a1a1aa) !important;
}

/* Messages */
body.light .agents-welcome h2 {
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-welcome p,
body.light .agents-welcome {
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-message-content {
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-message.assistant .agents-message-content {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-message.user .agents-message-content {
  color: #fff !important;
}

body.light .agents-message.streaming .agents-message-content {
  border-color: var(--accent) !important;
}

body.light .agents-message .chat-markdown .chat-inline-code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-message .chat-markdown .chat-code-block {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-message .chat-markdown .chat-hr {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}

body.light .agents-message .chat-markdown .chat-li::before,
body.light .agents-message .chat-markdown .chat-li-num::before {
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-message-action {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-message-action:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}

body.light .agents-message-attachment {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Status */
body.light .agents-status {
  color: var(--os-text-muted, #a1a1aa) !important;
}

/* Error */
body.light .agents-error {
  background: rgba(239, 68, 68, 0.08) !important;
  border-top-color: rgba(239, 68, 68, 0.2) !important;
  color: #dc2626 !important;
}

body.light .agents-error button {
  color: #dc2626 !important;
}

/* Input */
body.light .agents-input-area {
  background: transparent !important;
  border-top-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}

body.light .agents-input-container {
  background: #fff !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
}

body.light .agents-input-container:focus-within {
  border-color: var(--accent) !important;
}

body.light .agents-input {
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-input::placeholder {
  color: var(--os-text-hint, #a1a1aa) !important;
}

body.light .agents-voice-btn {
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-voice-btn:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}

body.light .agents-send-btn:disabled {
  background: #e4e4e7 !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-attach-btn {
  background: #fff !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-attach-btn:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}

/* Dropdowns & Modals */
body.light .agents-dropdown,
body.light .agents-council-picker {
  background: #fff !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

body.light .agents-dropdown-backdrop {
  background: rgba(0, 0, 0, 0.15) !important;
}

body.light .agents-dropdown-header,
body.light .agents-council-picker-header {
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  background: #fff !important;
}

body.light .agents-dropdown-header button,
body.light .agents-council-picker-header button {
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-dropdown-header button:hover,
body.light .agents-council-picker-header button:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-dropdown-item {
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-dropdown-item:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
}

body.light .agents-dropdown-item-desc {
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-model-group {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

body.light .agents-model-group-header {
  color: var(--os-text-muted, #a1a1aa) !important;
}

/* Message editing */
body.light .agents-message-edit-input {
  background: #fff !important;
  border-color: var(--accent) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-message-edit-actions button:first-child {
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--os-text-muted, #71717a) !important;
}

body.light .agents-message-edit-actions button:first-child:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

/* File browser */
body.light .agents-file-browser {
  background: #fff !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
}

body.light .agents-file-browser-header {
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}

body.light .agents-file-browser-header button {
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-file-browser-header button:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-file-browser-path {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
}

body.light .agents-file-browser-home,
body.light .agents-file-browser-up {
  background: #fff !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.12)) !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-file-browser-home:hover:not(:disabled),
body.light .agents-file-browser-up:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}

body.light .agents-file-browser-current {
  color: var(--os-text-muted, #71717a) !important;
}

body.light .agents-file-browser-item {
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-file-browser-item:hover {
  background: var(--os-hover-bg, rgba(0, 0, 0, 0.05)) !important;
}

body.light .agents-file-browser-item .folder-arrow {
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-file-browser-item.file .file-select > svg:first-child {
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-file-browser-loading,
body.light .agents-file-browser-empty {
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-file-browser-footer {
  border-top-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-file-browser-footer button {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-secondary, #3f3f46) !important;
}

body.light .agents-file-browser-footer button:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}

body.light .agents-file-browser-footer button.clear-btn {
  background: transparent !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}

body.light .agents-file-browser-footer button.clear-btn:hover {
  color: var(--os-text-secondary, #3f3f46) !important;
}

/* Council cards */
body.light .agents-council-card {
  background: #fff !important;
}

body.light .agents-council-card-footer {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

body.light .agents-council-card-nav button {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, #71717a) !important;
}

body.light .agents-council-card-nav button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, #1a1a1a) !important;
}

body.light .agents-council-dot {
  background: #d4d4d8 !important;
}

body.light .agents-council-dot:hover:not(.active) {
  background: #a1a1aa !important;
}

body.light .agents-council-picker-footer {
  border-top-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  background: #fff !important;
}

body.light .agents-council-picker-footer button {
  color: var(--os-text-muted, #71717a) !important;
}

body.light .agents-council-picker-footer button:hover {
  color: var(--os-text-primary, #1a1a1a) !important;
}

/* Council streaming */
body.light .agents-council-streaming-model {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, #71717a) !important;
}

body.light .agents-file-browser-item .folder-add-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, #a1a1aa) !important;
}
/* ============================================
   FILE PICKER MODAL
   ============================================ */

.fp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fp-fade-in 0.15s ease;
}

@keyframes fp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fp-modal {
  width: 420px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  background: rgba(20, 15, 35, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  animation: fp-slide-in 0.15s ease;
  overflow: hidden;
}

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

.fp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}

.fp-header h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.fp-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}

.fp-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Tree Container */
.fp-tree-container {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
  max-height: 350px;
  padding: 0.5rem 0;
}

.fp-tree-container::-webkit-scrollbar {
  width: 6px;
}

.fp-tree-container::-webkit-scrollbar-track {
  background: transparent;
}

.fp-tree-container::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 3px;
}

.fp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

/* Tree Items */
.fp-tree-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0.75rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.fp-tree-item:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

.fp-tree-item.fp-selected {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-light);
}

.fp-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  transition: transform 0.15s ease;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.fp-chevron.fp-expanded {
  transform: rotate(90deg);
}

.fp-chevron-spacer {
  width: 14px;
  flex-shrink: 0;
}

.fp-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selected Path Display */
.fp-selected-path {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(var(--accent-rgb), 0.08);
  border-top: 1px solid rgba(var(--accent-rgb), 0.1);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.fp-selected-path span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Footer */
.fp-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(var(--accent-rgb), 0.15);
}

.fp-btn {
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.fp-btn-cancel {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}

.fp-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.fp-btn-confirm {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent-dark) 100%);
  color: white;
}

.fp-btn-confirm:hover {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
}

.fp-btn-confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Create File / Folder */
.fp-create-section {
  padding: 0.5rem 1rem;
  border-top: 1px solid rgba(var(--accent-rgb), 0.1);
}

.fp-create-buttons {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fp-create-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: rgba(var(--accent-rgb), 0.8);
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fp-create-btn:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent-light);
}

.fp-create-context {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  margin-left: auto;
}

.fp-create-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
}

.fp-create-input input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-family: inherit;
  min-width: 0;
}

.fp-create-input input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.fp-create-location {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.fp-create-cancel {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  flex-shrink: 0;
}

.fp-create-cancel:hover {
  color: rgba(255, 255, 255, 0.7);
}
.becoming-app {
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: var(--os-glass-bg-solid);
  color: var(--os-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Sidebar Navigation */
.becoming-sidebar {
  width: 140px;
  display: flex;
  flex-direction: column;
  background: var(--os-sidebar-bg);
  border-right: 1px solid var(--os-sidebar-border);
  flex-shrink: 0;
}

.becoming-sidebar.collapsed {
  width: 40px;
}

.becoming-app .sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  flex: 1;
  overflow: hidden;
}

.becoming-app .sidebar-nav-item {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  height: 30px;
  padding-left: 8px;
  border-left: 2px solid transparent;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.becoming-sidebar.collapsed .sidebar-nav-item {
  grid-template-columns: 24px;
  padding-left: 6px;
}

.becoming-app .sidebar-nav-item:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.03);
}

.becoming-app .sidebar-nav-item.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-primary);
  border-left-color: rgba(var(--accent-rgb), 0.6);
}

.becoming-app .sidebar-nav-icon {
  font-size: 14px;
  line-height: 1;
  width: 24px;
  text-align: center;
}

.becoming-app .sidebar-nav-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.becoming-sidebar.collapsed .sidebar-nav-label {
  display: none;
}

/* Toggle button at top of sidebar */
.becoming-app .sidebar-toggle {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 6px 0 2px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.becoming-app .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-secondary);
}

.becoming-sidebar.collapsed .sidebar-toggle-chevron {
  transform: rotate(180deg);
}

/* Main Content Area */
.becoming-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}

/* Top Filter Bar */
.becoming-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* Split layout below the top bar */
.becoming-split {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Resizing state */
.becoming-app.resizing {
  cursor: col-resize;
  user-select: none;
}

.becoming-app.resizing * {
  pointer-events: none;
}

.becoming-app.resizing .becoming-resize-handle {
  pointer-events: auto;
}

/* Resize Handle */
.becoming-resize-handle {
  width: 8px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-hint);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.becoming-resize-handle:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-muted);
}

.becoming-app.resizing .becoming-resize-handle {
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(var(--accent-rgb), 0.7);
}

/* Tree Panel */
.becoming-tree-panel {
  min-width: 160px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  overflow: hidden;
  container-type: inline-size;
  container-name: becoming-tree;
}

/* Hide type badges when tree panel is narrow */
@container becoming-tree (max-width: 240px) {
  .tree-node-type-badge {
    display: none;
  }
  .tree-node-row {
    padding: 0.375rem 0.5rem;
    gap: 0.375rem;
  }
  .tree-node-name {
    font-size: 0.8rem;
  }
}


.becoming-total-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: normal;
}

.becoming-filter-tabs {
  display: flex;
  gap: 0.125rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 2px;
}

.becoming-filter-tab {
  padding: 0.25rem 0.5rem;
  border: none;
  background: none;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.becoming-filter-tab:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

.becoming-filter-tab.active {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.becoming-filter-count {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  font-weight: 400;
}

/* Evolution view */
.evolution-list {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.evolution-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.evolution-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.evolution-row.active {
  background: rgba(var(--accent-rgb), 0.12);
}

.evolution-part,
.evolution-facet {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.evolution-part {
  flex: 1;
}

.evolution-facet {
  flex: 1;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
}

.evolution-facet:hover {
  background: rgba(255, 255, 255, 0.06);
}

.evolution-emoji {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.evolution-name {
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.evolution-arrow {
  color: rgba(var(--accent-rgb), 0.5);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.evolution-empty {
  color: var(--os-text-hint);
  font-size: 0.75rem;
  text-align: center;
  padding: 2rem 0;
}

.becoming-tree-actions {
  display: flex;
  gap: 0.25rem;
}

.becoming-tree-actions button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.becoming-tree-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.becoming-tree-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

/* Tree Node */
.tree-node {
  user-select: none;
}

.tree-node-row {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  gap: 0.5rem;
  transition: background 0.15s ease;
}

.tree-node-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tree-node-row.selected {
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.tree-node-row.throne {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
}

.tree-node-row.throne.selected {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(251, 191, 36, 0.15));
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.tree-expand-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--os-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.tree-expand-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.tree-expand-spacer {
  width: 20px;
}

.tree-node-icon {
  font-size: 1.1rem;
}

.tree-node-name {
  flex: 1;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-node-count {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

.tree-node-type-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.tree-node-type-badge.facet-badge {
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.tree-node-type-badge.part-badge {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.tree-node-children {
  margin-left: 1.25rem;
}

/* Detail Panel */
.becoming-detail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.becoming-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--os-text-muted);
  gap: 1rem;
}

.becoming-detail-empty-icon {
  font-size: 4rem;
  opacity: 0.5;
}

.becoming-detail-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.becoming-detail-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.becoming-detail-title-section {
  flex: 1;
}

.becoming-detail-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.becoming-detail-cluster {
  font-size: 0.875rem;
  color: var(--os-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.becoming-detail-cluster-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

.becoming-detail-type-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.type-badge-facet {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.type-badge-part {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.type-badge-cluster {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Cluster member list */
.cluster-members-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cluster-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.cluster-member-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cluster-member-emoji {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.cluster-member-name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}

.becoming-detail-facet-section h4 {
  color: var(--accent-light);
}

.becoming-detail-source {
  color: var(--os-text-secondary);
  font-style: italic;
}

.becoming-detail-vows {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.becoming-detail-vow-tag {
  padding: 0.1875rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.becoming-detail-evolution {
  border-left: 2px solid rgba(var(--accent-rgb), 0.3);
  padding-left: 0.75rem !important;
}

.becoming-detail-evolution h4 {
  color: var(--accent);
}

.becoming-detail-evolves-link {
  color: var(--accent-light);
  font-weight: 500;
}

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

.becoming-detail-actions button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.becoming-detail-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.becoming-detail-actions button.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
}

.becoming-detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.becoming-detail-section {
  margin-bottom: 1.5rem;
}

.becoming-detail-section h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.becoming-detail-description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}

.becoming-detail-wants {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  font-style: italic;
}

.becoming-detail-color {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.becoming-detail-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.becoming-detail-color-value {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}

.becoming-detail-shadow {
  color: rgba(239, 68, 68, 0.9);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.becoming-detail-needs,
.becoming-detail-activated,
.becoming-detail-gifts {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--os-text-secondary);
}

.becoming-detail-throne-line {
  font-size: 1rem;
  font-style: italic;
  color: rgba(251, 191, 36, 0.9);
  padding: 0.75rem 1rem;
  background: rgba(251, 191, 36, 0.1);
  border-left: 3px solid rgba(251, 191, 36, 0.5);
  border-radius: 0 6px 6px 0;
}

.becoming-detail-protocol {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
  white-space: pre-wrap;
}

.becoming-detail-somatic {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  font-style: italic;
}

.becoming-detail-relationships {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.becoming-detail-allies,
.becoming-detail-opposition {
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}

.relationship-label {
  font-weight: 600;
  color: var(--os-text-muted);
  margin-right: 0.5rem;
}

.becoming-detail-allies .relationship-label {
  color: rgba(74, 222, 128, 0.8);
}

.becoming-detail-opposition .relationship-label {
  color: rgba(239, 68, 68, 0.8);
}

.becoming-detail-warning {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 1rem;
}

.becoming-detail-warning h4 {
  color: rgba(239, 68, 68, 0.9);
}

.becoming-detail-non-negotiable {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.9);
}

/* Edit Mode */
.becoming-edit-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  overflow-y: auto;
}

.becoming-edit-form label {
  display: block;
  margin-bottom: 1.25rem;
}

.becoming-edit-form label span {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.becoming-edit-form input,
.becoming-edit-form textarea,
.becoming-edit-form select {
  width: 100%;
  padding: 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
  font-size: 0.9375rem;
  font-family: inherit;
}

.becoming-edit-form input:focus,
.becoming-edit-form textarea:focus,
.becoming-edit-form select:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.1);
}

.becoming-edit-form textarea {
  min-height: 100px;
  resize: vertical;
}

.becoming-edit-form select option {
  background: #1a1a2e;
}

.becoming-edit-actions {
  display: flex;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
}

.becoming-edit-actions button {
  padding: 0.625rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.becoming-edit-actions .save-btn {
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.becoming-edit-actions .save-btn:hover {
  background: rgba(var(--accent-rgb), 0.3);
}

.becoming-edit-actions .cancel-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.becoming-edit-actions .cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Loading state */
.becoming-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-muted);
}

/* Cluster specific colors */
.cluster-grounding { --cluster-color: #34d399; }
.cluster-sacredFire { --cluster-color: #f97316; }
.cluster-motion { --cluster-color: var(--accent); }
.cluster-love { --cluster-color: #ec4899; }
.cluster-social { --cluster-color: #06b6d4; }
.cluster-wisdom { --cluster-color: #fbbf24; }
.cluster-collapse { --cluster-color: #6b7280; }
.cluster-craving { --cluster-color: #ef4444; }
.cluster-escape { --cluster-color: #94a3b8; }
.cluster-performance { --cluster-color: #f472b6; }
.cluster-overthinking { --cluster-color: #60a5fa; }
.cluster-hypervigilance { --cluster-color: #fcd34d; }
.cluster-wounded { --cluster-color: #fb923c; }

.tree-node-row[data-cluster] {
  border-left: 3px solid var(--cluster-color, transparent);
  padding-left: calc(0.75rem - 3px);
}

/* Council Chat */
.council-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.council-chat-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  gap: 0.25rem;
}

.council-chat-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.council-app-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-muted);
  letter-spacing: 0.02em;
}

.council-mode-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 2px;
}

.council-mode-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.council-mode-tab:hover {
  color: var(--os-text-secondary);
}

.council-mode-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
  box-shadow: 0 1px 8px rgba(var(--accent-rgb), 0.12);
}

.council-mode-tab span {
  font-size: 0.875rem;
}

.council-icon {
  font-size: 1.5rem;
}

.council-chat-title h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}


.council-chat-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.council-model-select {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  cursor: pointer;
  min-width: 160px;
}

.council-model-select:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.council-model-select option,
.council-model-select optgroup {
  background: #1a1a2e;
}

.council-model-select optgroup {
  font-weight: 600;
  color: var(--os-text-muted);
}

.council-clear-btn {
  padding: 0 0.625rem;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.council-clear-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.14);
}

.council-clear-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}

/* Context panel within Council */
.council-context-panel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.council-context-panel .context-view {
  height: 100%;
}

/* Chat body with sidebar */
.council-chat-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Thread Sidebar */
.council-thread-sidebar {
  width: 220px;
  min-width: 220px;
  background: rgba(0, 0, 0, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  order: 2;
}

.council-thread-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.council-new-thread-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.council-new-thread-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.council-new-session-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: rgba(167, 139, 250, 0.9);
  transition: all 0.15s ease;
  letter-spacing: 0;
  text-transform: none;
}

.council-new-session-btn:hover {
  background: rgba(167, 139, 250, 0.25);
  border-color: rgba(167, 139, 250, 0.5);
  color: rgba(167, 139, 250, 1);
}

.council-new-session-btn.ending {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.25);
  color: rgba(74, 222, 128, 0.85);
}

.council-new-session-btn.ending:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.45);
}

.council-thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.council-thread-empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
}

.council-thread-item {
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 0.25rem;
  transition: all 0.15s ease;
}

.council-thread-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.council-thread-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-left: 2px solid rgba(var(--accent-rgb), 0.6);
  padding-left: calc(0.75rem - 2px);
}

.council-thread-name {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.session-rename-input {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  width: 100%;
  outline: none;
  margin-bottom: 0.25rem;
}
.session-rename-input:focus {
  border-color: rgba(167, 139, 250, 0.5);
}
body.light .becoming-app .session-rename-input {
  color: rgba(30, 30, 50, 0.9);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(100, 80, 200, 0.25);
}

.council-thread-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.session-item-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.session-item-name-row .council-thread-name {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.session-analyze-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.5rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(167, 139, 250, 0.7);
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.18);
  transition: all 0.15s;
  flex-shrink: 0;
}

.session-analyze-btn:hover {
  color: rgba(167, 139, 250, 1);
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.35);
}

/* Session Analysis Dialog */
/* ── Session Analysis Dialog ─────────────────────────────────── */
/* Theme-aware: uses variables so dark + light both look right   */

.session-analysis-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-analysis-dialog {
  --sa-bg: rgba(14, 12, 22, 0.98);
  --sa-border: rgba(255, 255, 255, 0.1);
  --sa-divider: rgba(255, 255, 255, 0.07);
  --sa-text: rgba(255, 255, 255, 0.88);
  --sa-text-muted: rgba(255, 255, 255, 0.35);
  --sa-text-dim: rgba(255, 255, 255, 0.55);
  --sa-label: rgba(255, 255, 255, 0.28);
  --sa-surface: rgba(255, 255, 255, 0.05);
  --sa-surface-accent: rgba(167, 139, 250, 0.07);
  --sa-border-accent: rgba(167, 139, 250, 0.18);
  --sa-accent: rgba(167, 139, 250, 0.85);
  --sa-accent-dim: rgba(167, 139, 250, 0.45);
  --sa-green: rgba(74, 222, 128, 0.82);
  --sa-green-bg: rgba(74, 222, 128, 0.06);
  --sa-green-border: rgba(74, 222, 128, 0.15);
  --sa-scroll-thumb: rgba(167, 139, 250, 0.22);
  --sa-shadow: 0 32px 80px rgba(0, 0, 0, 0.65);
  --sa-transcript-user-bg: rgba(167, 139, 250, 0.1);
  --sa-transcript-user-border: rgba(167, 139, 250, 0.2);
  --sa-transcript-companion-bg: rgba(255, 255, 255, 0.04);
  --sa-transcript-companion-border: rgba(255, 255, 255, 0.08);

  width: 960px;
  max-width: 94vw;
  max-height: 85vh;
  background: var(--sa-bg);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--sa-border);
  border-radius: 18px;
  box-shadow: var(--sa-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--sa-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Light theme overrides */
body.light .session-analysis-dialog {
  --sa-bg: rgba(255, 255, 255, 0.98);
  --sa-border: rgba(0, 0, 0, 0.1);
  --sa-divider: rgba(0, 0, 0, 0.07);
  --sa-text: rgba(20, 20, 30, 0.9);
  --sa-text-muted: rgba(20, 20, 30, 0.4);
  --sa-text-dim: rgba(20, 20, 30, 0.6);
  --sa-label: rgba(20, 20, 30, 0.35);
  --sa-surface: rgba(0, 0, 0, 0.04);
  --sa-surface-accent: rgba(var(--accent-rgb), 0.06);
  --sa-border-accent: rgba(var(--accent-rgb), 0.2);
  --sa-accent: rgba(var(--accent-rgb), 0.85);
  --sa-accent-dim: rgba(var(--accent-rgb), 0.5);
  --sa-green: rgba(22, 163, 74, 0.85);
  --sa-green-bg: rgba(22, 163, 74, 0.06);
  --sa-green-border: rgba(22, 163, 74, 0.18);
  --sa-scroll-thumb: rgba(var(--accent-rgb), 0.2);
  --sa-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  --sa-transcript-user-bg: rgba(var(--accent-rgb), 0.08);
  --sa-transcript-user-border: rgba(var(--accent-rgb), 0.18);
  --sa-transcript-companion-bg: rgba(0, 0, 0, 0.03);
  --sa-transcript-companion-border: rgba(0, 0, 0, 0.08);
}

.session-analysis-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--sa-divider);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
  flex-shrink: 0;
}

.session-analysis-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sa-text);
  padding-right: 2.5rem;
}

.session-analysis-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.72rem;
  color: var(--sa-text-muted);
  align-items: center;
}

.session-analysis-model-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  background: var(--sa-surface-accent);
  border: 1px solid var(--sa-border-accent);
  color: var(--sa-accent);
}

.session-analysis-close {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sa-text-muted);
  transition: color 0.15s, background 0.15s;
}

.session-analysis-close:hover {
  color: var(--sa-text);
  background: var(--sa-surface);
}

.session-analysis-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.75rem;
  color: var(--sa-text-muted);
  font-size: 0.875rem;
}

.session-analysis-error {
  padding: 1.5rem 1.75rem;
  color: rgba(248, 113, 113, 0.8);
  font-size: 0.875rem;
}

/* Two-panel layout */
.session-analysis-panels {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* LEFT — session notes */
.session-analysis-notes {
  width: 42%;
  flex-shrink: 0;
  padding: 1.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  overflow-y: auto;
  border-right: 1px solid var(--sa-divider);
  scrollbar-width: thin;
  scrollbar-color: var(--sa-scroll-thumb) transparent;
}

.session-analysis-notes::-webkit-scrollbar { width: 4px; }
.session-analysis-notes::-webkit-scrollbar-track { background: transparent; }
.session-analysis-notes::-webkit-scrollbar-thumb { background: var(--sa-scroll-thumb); border-radius: 4px; }

/* RIGHT — transcript reader */
.session-analysis-transcript {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sa-scroll-thumb) transparent;
}

.session-analysis-transcript::-webkit-scrollbar { width: 4px; }
.session-analysis-transcript::-webkit-scrollbar-track { background: transparent; }
.session-analysis-transcript::-webkit-scrollbar-thumb { background: var(--sa-scroll-thumb); border-radius: 4px; }

.session-analysis-transcript-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sa-label);
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.session-analysis-transcript-empty {
  font-size: 0.82rem;
  color: var(--sa-text-muted);
  font-style: italic;
}

/* Transcript messages */
.sa-transcript-msg {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1.1rem;
}

.sa-transcript-speaker {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sa-label);
}

.sa-transcript-msg.user .sa-transcript-speaker {
  color: var(--sa-accent-dim);
}

.sa-transcript-bubble {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--sa-text);
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.sa-transcript-msg.user .sa-transcript-bubble {
  background: var(--sa-transcript-user-bg);
  border: 1px solid var(--sa-transcript-user-border);
  border-radius: 10px 10px 2px 10px;
  color: var(--sa-text);
}

.sa-transcript-msg.companion .sa-transcript-bubble {
  background: var(--sa-transcript-companion-bg);
  border: 1px solid var(--sa-transcript-companion-border);
  border-radius: 10px 10px 10px 2px;
  color: var(--sa-text-dim);
}

.session-analysis-section-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sa-label);
  margin-bottom: 0.55rem;
}

.session-analysis-essence {
  background: var(--sa-surface-accent);
  border: 1px solid var(--sa-border-accent);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}

.session-analysis-essence-text {
  font-size: 0.975rem;
  color: var(--sa-text);
  line-height: 1.6;
  font-style: italic;
}

.session-analysis-arc {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.session-analysis-arc-text {
  font-size: 0.88rem;
  color: var(--sa-accent);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.session-analysis-section {
  display: flex;
  flex-direction: column;
}

.session-analysis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.session-analysis-chip {
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  color: var(--sa-text-dim);
}

.session-analysis-chip.vow {
  background: var(--sa-green-bg);
  border-color: var(--sa-green-border);
  color: var(--sa-green);
}

.session-analysis-insights {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.session-analysis-insight {
  font-size: 0.855rem;
  color: var(--sa-text-dim);
  line-height: 1.55;
  padding-left: 0.8rem;
  border-left: 2px solid var(--sa-accent-dim);
  font-style: italic;
}

.session-analysis-parts {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.session-analysis-part {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.session-analysis-part-emoji {
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0.05rem;
}

.session-analysis-part-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sa-text);
}

.session-analysis-part-note {
  font-size: 0.775rem;
  color: var(--sa-text-muted);
  margin-top: 0.15rem;
  line-height: 1.4;
}

/* .session-analysis-columns removed — notes panel is now single-column */

/* Takeaways — numbered list */
.session-analysis-takeaways {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.session-analysis-takeaway {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.845rem;
  color: var(--sa-text-dim);
  line-height: 1.5;
}

.session-analysis-takeaway-num {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--sa-accent);
  background: var(--sa-surface-accent);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Decisions — checkmark list */
.session-analysis-decisions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.session-analysis-decision {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.845rem;
  color: var(--sa-text-dim);
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  background: var(--sa-green-bg);
  border: 1px solid var(--sa-green-border);
  border-radius: 8px;
}

.session-analysis-decision-icon {
  color: var(--sa-green);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.council-thread-item.archived {
  opacity: 0.6;
}

.council-thread-item.archived:hover {
  opacity: 0.8;
}

.council-thread-rename-input {
  width: 100%;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 4px;
  color: var(--os-text-primary);
  font-size: 0.8125rem;
  outline: none;
}

.council-thread-rename-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}

/* ── Session Calendar (scal-*) ────────────────────────────── */

.scal-container {
  padding: 0.5rem 0.5rem 0.25rem;
  border-bottom: 1px solid var(--os-divider);
}

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

.scal-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.scal-nav {
  all: unset;
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 1rem;
  color: var(--os-text-muted);
  transition: all 0.12s ease;
}

.scal-nav:hover:not(:disabled) {
  background: var(--os-hover-bg);
  color: var(--os-text-secondary);
}

.scal-nav:disabled {
  opacity: 0.2;
  cursor: default;
}

.scal-nav-year {
  font-size: 0.8rem;
  color: var(--os-text-hint);
}

.scal-nav-year:hover:not(:disabled) {
  color: var(--os-text-secondary);
}

.scal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 0.15rem;
}

.scal-wd {
  text-align: center;
  font-size: 0.575rem;
  font-weight: 600;
  color: var(--os-text-hint);
  padding: 0.1rem 0;
}

.scal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.scal-day {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 5px;
  font-size: 0.6rem;
  color: var(--os-text-hint);
  cursor: default;
  position: relative;
  transition: all 0.12s ease;
  box-sizing: border-box;
}

.scal-day.blank { pointer-events: none; }

.scal-day.has-content {
  color: var(--os-text-secondary);
  cursor: pointer;
}

.scal-day.has-content:hover {
  background: rgba(255, 255, 255, 0.08);
}

.scal-day.has-session {
  color: var(--os-text-secondary);
}

/* dot indicator */
.scal-day.has-content::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.scal-day.has-session::after {
  background: rgba(167, 139, 250, 0.7);
}

.scal-day.today {
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: rgba(167, 139, 250, 0.9);
}

.scal-day.today.has-content::after {
  background: rgba(167, 139, 250, 0.6);
}

.scal-day.selected {
  background: rgba(167, 139, 250, 0.2);
  color: rgba(167, 139, 250, 1);
}

/* Period reflection row */
.scal-reflect-row {
  display: flex;
  gap: 0;
  padding: 0.5rem 0.5rem 0;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.scal-reflect-btn {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  padding: 0.35rem 0 0.3rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.12s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.scal-reflect-btn:hover {
  color: rgba(167, 139, 250, 0.8);
}

.scal-reflect-btn.active {
  color: rgba(167, 139, 250, 1);
  border-bottom-color: rgba(167, 139, 250, 0.7);
  font-weight: 600;
}

/* Day detail list */
.scal-day-detail {
  flex: 1;
  overflow-y: auto;
  padding: 0.35rem 0.25rem;
}

.scal-day-detail-header {
  padding: 0.2rem 0.5rem 0.3rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scal-day-empty {
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  text-align: center;
}

/* ── Period Header (calendar filter) ──────────────────────── */

.scal-period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem 0.35rem;
}

.scal-period-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-text-muted);
}

body.light .scal-period-label {
  color: rgba(20, 15, 40, 0.45);
}

.scal-period-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.scal-reflect-icon-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(167, 139, 250, 0.95);
  background: rgba(167, 139, 250, 0.12);
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  transition: all 0.12s ease;
  letter-spacing: 0.02em;
}

.scal-reflect-icon-btn:hover {
  color: rgba(167, 139, 250, 1);
  background: rgba(167, 139, 250, 0.18);
}

body.light .scal-reflect-icon-btn {
  color: rgba(109, 40, 217, 0.8);
  background: rgba(109, 40, 217, 0.08);
}

body.light .scal-reflect-icon-btn:hover {
  color: rgba(109, 40, 217, 1);
  background: rgba(109, 40, 217, 0.14);
}

.scal-period-close {
  all: unset;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  padding: 0.2rem 0.35rem;
  border-radius: 3px;
  line-height: 1;
  transition: color 0.12s ease;
}

.scal-period-close:hover { color: var(--os-text-muted); }

body.light .scal-period-close { color: rgba(20, 15, 40, 0.2); }
body.light .scal-period-close:hover { color: rgba(20, 15, 40, 0.55); }

/* ── Arc Panel (legacy) ─────────────────────────────────────── */

.arc-open-btn {
  all: unset;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(167, 139, 250, 0.55);
  padding: 0.18rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  transition: all 0.12s ease;
  white-space: nowrap;
}

.arc-open-btn:hover {
  color: rgba(167, 139, 250, 1);
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.1);
}

.arc-close-period {
  all: unset;
  cursor: pointer;
  font-size: 0.65rem;
  color: var(--os-text-hint);
  padding: 0.1rem 0.25rem;
  border-radius: 3px;
  line-height: 1;
}

.arc-close-period:hover { color: var(--os-text-muted); }

/* ── Arc Dialog ─────────────────────────────────────────────── */

.arc-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.arc-dialog {
  --ad-bg: rgba(10, 8, 20, 0.98);
  --ad-border: rgba(167, 139, 250, 0.2);
  --ad-divider: rgba(255, 255, 255, 0.07);
  --ad-text: rgba(255, 255, 255, 0.88);
  --ad-text-muted: rgba(255, 255, 255, 0.45);
  --ad-label: rgba(255, 255, 255, 0.28);
  --ad-accent: rgba(167, 139, 250, 0.9);
  --ad-accent-dim: rgba(167, 139, 250, 0.35);
  --ad-close: rgba(255, 255, 255, 0.3);
  --ad-close-hover-bg: rgba(255, 255, 255, 0.08);
  --ad-close-hover: rgba(255, 255, 255, 0.8);
  --ad-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);

  width: 580px;
  max-width: 92vw;
  max-height: 80vh;
  background: var(--ad-bg);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid var(--ad-border);
  border-radius: 16px;
  box-shadow: var(--ad-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ad-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.light .arc-dialog {
  --ad-bg: rgba(255, 255, 255, 0.98);
  --ad-border: rgba(139, 92, 246, 0.2);
  --ad-divider: rgba(0, 0, 0, 0.07);
  --ad-text: rgba(20, 15, 40, 0.9);
  --ad-text-muted: rgba(20, 15, 40, 0.5);
  --ad-label: rgba(20, 15, 40, 0.35);
  --ad-accent: rgba(109, 40, 217, 0.85);
  --ad-accent-dim: rgba(109, 40, 217, 0.3);
  --ad-close: rgba(20, 15, 40, 0.35);
  --ad-close-hover-bg: rgba(0, 0, 0, 0.06);
  --ad-close-hover: rgba(20, 15, 40, 0.8);
  --ad-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

body.light .arc-dialog-overlay {
  background: rgba(0, 0, 0, 0.25);
}

.arc-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem 0.9rem;
  border-bottom: 1px solid var(--ad-divider);
  flex-shrink: 0;
}

.arc-dialog-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.arc-dialog-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ad-accent);
  opacity: 0.75;
}

.arc-dialog-period {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ad-text-muted);
}

.arc-dialog-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.arc-dialog-refresh {
  all: unset;
  cursor: pointer;
  color: var(--ad-close);
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: 6px;
  transition: all 0.12s ease;
}

.arc-dialog-refresh:hover {
  color: var(--ad-accent);
  background: var(--ad-close-hover-bg);
}

.arc-dialog-close {
  all: unset;
  cursor: pointer;
  color: var(--ad-close);
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: 6px;
  transition: all 0.12s ease;
}

.arc-dialog-close:hover {
  color: var(--ad-close-hover);
  background: var(--ad-close-hover-bg);
}

.arc-dialog-body {
  padding: 1.5rem 1.6rem 1.8rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.arc-dialog-texture {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ad-accent);
  line-height: 1.65;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--ad-accent-dim);
  opacity: 0.92;
}

.arc-dialog-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.arc-dialog-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.arc-dialog-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ad-accent);
  opacity: 0.7;
}

.arc-dialog-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.arc-dialog-list li {
  font-size: 0.9rem;
  color: var(--ad-text);
  line-height: 1.55;
  padding-left: 1.1rem;
  position: relative;
}

.arc-dialog-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ad-accent-dim);
  font-size: 0.75rem;
  top: 0.1em;
}

.arc-dialog-moved {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ad-text);
  line-height: 1.7;
}

.arc-dialog-list--decisions li::before {
  content: '◆';
  font-size: 0.5rem;
  top: 0.45em;
  color: var(--ad-accent);
}

.arc-dialog-list--takeaways li::before {
  content: '✦';
  font-size: 0.55rem;
  top: 0.4em;
  color: var(--ad-accent);
}

.arc-dialog-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  font-size: 0.85rem;
  color: var(--ad-text-muted);
}

.arc-dialog-error {
  padding: 2rem 1.5rem;
  font-size: 0.85rem;
  color: rgba(220, 80, 80, 0.8);
  text-align: center;
}

.arc-dialog-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.arc-dialog-empty p {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  color: var(--ad-text-muted);
}

.arc-dialog-hint {
  font-size: 0.78rem !important;
  color: var(--ad-label) !important;
}

/* ── End Arc Dialog ─────────────────────────────────────────── */

/* ── End Session Calendar ──────────────────────────────────── */

/* ── Calendar Sidebar ─────────────────────────────────────── */

.cal-week-group {
  margin-bottom: 0;
}

/* Week divider: thin line + label */
.cal-week-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem 0.35rem;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--os-text-hint);
  letter-spacing: 0.04em;
}

.cal-week-header::before {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.cal-week-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.cal-day-group {
  margin-bottom: 0.1rem;
}

/* Day header: short label, left-aligned, subdued */
.cal-day-header {
  padding: 0.3rem 0.75rem 0.1rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Day grouping in period/recent views */
.cal-day-group {
  margin-bottom: 0.1rem;
}

.cal-day-group-header {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--os-text-hint);
  padding: 0.45rem 0.5rem 0.15rem;
}

body.light .cal-day-group-header {
  color: rgba(20, 15, 40, 0.3);
}

.cal-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.4rem 0.3rem 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s ease;
  min-height: 24px;
}

.cal-session-item,
.cal-fragment-item {
  /* inherits from .cal-row */
}

.cal-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cal-session-item:hover {
  background: rgba(167, 139, 250, 0.07);
}

.cal-dot {
  font-size: 0.45rem;
  flex-shrink: 0;
  line-height: 1;
}

.session-dot {
  color: rgba(167, 139, 250, 0.85);
}

.fragment-dot {
  color: var(--os-text-hint);
}

.cal-row-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cal-row-exchg {
  font-size: 0.58rem;
  color: var(--os-text-hint);
  white-space: nowrap;
}

body.light .cal-row-exchg {
  color: rgba(20, 15, 40, 0.25);
}

.cal-row-name {
  font-size: 0.7rem;
  color: var(--os-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  flex: 1;
  min-width: 0;
}

.cal-row-name.fragment-name {
  color: var(--os-text-muted);
  font-size: 0.68rem;
}

.cal-row-meta {
  font-size: 0.6rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
  white-space: nowrap;
}

.cal-session-item .session-analyze-btn {
  opacity: 0;
  transition: opacity 0.12s ease;
  flex-shrink: 0;
  padding: 0.1rem 0.25rem;
}

.cal-session-item:hover .session-analyze-btn {
  opacity: 0.7;
}

/* ── Keepback for old cal-item-* if still referenced ── */
.cal-item-body { flex: 1; min-width: 0; }
.cal-item-name { font-size: 0.7rem; color: var(--os-text-secondary); }
.cal-item-meta { font-size: 0.6rem; color: var(--os-text-hint); }

/* ── End Calendar Sidebar ─────────────────────────────────── */

/* Archive Section */
.council-thread-archive-section {
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 0.5rem;
}

.council-thread-archive-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
}

.council-thread-archive-toggle:hover {
  color: var(--os-text-secondary);
}

/* Context Menu */
.council-thread-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 140px;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.council-thread-context-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}

.council-thread-context-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.council-thread-context-menu button.danger {
  color: #f87171;
}

.council-thread-context-menu button.danger:hover {
  background: rgba(248, 113, 113, 0.15);
}

/* Message Context Menu */
.council-msg-context-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}

.council-message-context-menu {
  position: fixed;
  z-index: 1000000;
  min-width: 120px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.council-message-context-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}

.council-message-context-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.council-message-context-menu button.danger {
  color: #f87171;
}

.council-message-context-menu button.danger:hover {
  background: rgba(248, 113, 113, 0.15);
}

.council-orphan-hint {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

body.light .council-orphan-hint {
  color: rgba(0, 0, 0, 0.3);
}

.council-orphan-retry {
  background: none;
  border: 1px solid var(--os-text-hint);
  border-radius: 4px;
  color: var(--os-text-hint);
  font-size: 0.7rem;
  font-style: italic;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}

.council-orphan-retry:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.council-context-timestamp {
  padding: 0.35rem 0.625rem;
  font-size: 0.7rem;
  color: var(--os-text-hint);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.council-context-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.25rem 0;
}

body.light .council-context-divider {
  background: rgba(0, 0, 0, 0.07);
}

/* Edit bar above input when editing a message */
.council-edit-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
  margin-bottom: 0.25rem;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 10px;
  font-size: 0.6875rem;
  color: var(--accent-light);
  letter-spacing: 0.01em;
}

.council-edit-bar span {
  opacity: 0.85;
}

.council-edit-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 0;
  margin-left: 0.125rem;
}

.council-edit-bar button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

/* Settings Dropdown */
.council-settings-dropdown {
  position: relative;
}

.council-settings-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.5rem 0 0.625rem;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.council-settings-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
  border-color: rgba(255, 255, 255, 0.14);
}

.council-settings-btn.council-active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.council-settings-btn.council-active:hover {
  background: rgba(var(--accent-rgb), 0.2);
}

.council-settings-btn .tts-indicator {
  color: var(--accent);
  opacity: 0.8;
}

.council-settings-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 240px;
  max-height: 400px;
  overflow-y: auto;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 100;
  padding: 0.5rem 0;
}

.settings-section-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.settings-current-model {
  padding: 0.25rem 0.75rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  font-weight: 500;
}

.settings-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0.5rem 0;
}

/* Model Provider Groups */
.settings-provider-group {
  margin: 0.125rem 0;
}

.settings-provider-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-provider-header:hover {
  background: rgba(255, 255, 255, 0.06);
}

.settings-provider-header.has-selection {
  color: var(--accent);
}

.settings-provider-models {
  padding: 0.25rem 0 0.25rem 0.75rem;
}

.settings-model-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.settings-model-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.settings-model-option.selected {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

/* Voice Toggle */
.settings-toggle-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-toggle-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.settings-council-toggle-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-council-toggle-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.settings-council-toggle-row .settings-toggle {
  margin-left: auto;
}

.settings-council-members {
  padding: 0.375rem 0.75rem 0.5rem;
}

.settings-council-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0.375rem;
}

.settings-council-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 0.675rem;
  color: var(--os-text-secondary);
}

.settings-council-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.settings-council-manage {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(var(--accent-rgb), 0.12);
  border: none;
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.675rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-council-manage:hover {
  background: rgba(var(--accent-rgb), 0.2);
}

.settings-toggle {
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  position: relative;
  transition: background 0.2s ease;
}

.settings-toggle.on {
  background: rgba(var(--accent-rgb), 0.5);
}

.settings-toggle-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}

.settings-toggle.on .settings-toggle-thumb {
  transform: translateX(16px);
}

/* Voice Selection */
.settings-voice-select {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-voice-select:hover {
  background: rgba(255, 255, 255, 0.06);
}

.settings-voice-list {
  padding: 0.25rem 0.5rem;
  max-height: 180px;
  overflow-y: auto;
}

.settings-voice-option {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
  text-align: left;
}

.settings-voice-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.settings-voice-option.selected {
  background: rgba(var(--accent-rgb), 0.15);
}

.settings-voice-option .voice-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.settings-voice-option .voice-name {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}

.settings-voice-option.selected .voice-name {
  color: var(--accent);
}

.settings-voice-option .voice-desc {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.settings-hint {
  padding: 0.5rem 0.75rem;
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.25rem;
}

/* Message Hover Actions */
.council-message {
  position: relative;
}

/* Time gap divider between messages */
.msg-time-gap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  color: var(--os-text-hint);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

.msg-time-gap::before,
.msg-time-gap::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

body.light .msg-time-gap {
  color: rgba(20, 15, 40, 0.25);
}

body.light .msg-time-gap::before,
body.light .msg-time-gap::after {
  background: rgba(20, 15, 40, 0.07);
}

/* Timestamp tooltip on hover */


/* Main Chat Area */
.council-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.council-chat-intro {
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.council-chat-intro p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  line-height: 1.5;
}

.council-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
  padding: 1.25rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.council-messages-spacer {
  flex: 1;
}

.council-load-earlier {
  align-self: center;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.council-load-earlier:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.council-undo-toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 1rem 0.5rem;
  border-radius: 8px;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.3);
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  animation: council-undo-slide-in 0.2s ease-out;
}

@keyframes council-undo-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.council-undo-toast span {
  flex: 1;
}

.council-undo-toast button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(234, 179, 8, 0.25);
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: #eab308;
  cursor: pointer;
}

.council-undo-toast button:hover {
  background: rgba(234, 179, 8, 0.35);
}

.council-undo-dismiss {
  background: transparent !important;
  border: none !important;
  color: var(--os-text-muted) !important;
  font-size: 1rem !important;
  padding: 0 0.25rem !important;
}

.council-undo-dismiss:hover {
  color: var(--os-text-secondary) !important;
}

.council-message {
  display: flex;
  max-width: min(72ch, 90%);
}

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

.council-message.assistant {
  align-self: flex-start;
}


.council-msg-model-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-text-hint);
  padding: 0 0.875rem 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.council-message:hover .council-msg-model-label {
  opacity: 1;
}

body.light .becoming-app .council-msg-model-label {
  color: rgba(20, 20, 30, 0.4) !important;
}

.council-message-content {
  padding: 0.5rem 0.875rem;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  user-select: text;
  -webkit-user-select: text;
}

.council-message.user .council-message-content {
  background: rgba(var(--accent-rgb), 0.12);
  border: none;
  color: var(--os-text-primary);
  border-bottom-right-radius: 4px;
}

.council-message.assistant .council-message-content {
  background: transparent;
  border: none;
  color: var(--os-text-secondary);
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

/* Incognito message styling */
.council-message.incognito.user .council-message-content {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.council-message.incognito.assistant .council-message-content {
  border-left: 2px solid rgba(239, 68, 68, 0.25);
}

/* Markdown styling — conversational, warm, not clinical */
.council-message-content .markdown-text {
  line-height: 1.65;
}

.council-message-content .markdown-text p {
  margin: 0 0 0.6em 0;
}

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

.council-message-content .markdown-text p:last-child {
  margin-bottom: 0;
}

.council-message-content .markdown-text ul,
.council-message-content .markdown-text ol {
  margin: 0.5em 0;
  padding-left: 1.25rem;
}

.council-message-content .markdown-text li {
  margin: 0.2em 0;
}

.council-message-content .markdown-text li p {
  margin: 0.2em 0;
}

.council-message-content .markdown-text li > p:first-child { margin-top: 0; }
.council-message-content .markdown-text li > p:last-child { margin-bottom: 0; }

.council-message-content .md-bold {
  font-weight: 600;
  color: var(--os-text-primary);
}

.council-message-content .md-italic {
  font-style: italic;
  color: var(--os-text-secondary);
}

.council-message-content .md-code {
  background: rgba(255, 255, 255, 0.07);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.85em;
}

.council-message-content .md-h1,
.council-message-content .md-h2,
.council-message-content .md-h3 {
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0.8em 0 0.3em 0;
}

.council-message-content .md-h1 { font-size: 1.05rem; }
.council-message-content .md-h2 { font-size: 1rem; }
.council-message-content .md-h3 { font-size: 0.9375rem; }

.council-message-content .md-hr,
.council-message-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0.75em 0;
}

.council-message-content h1,
.council-message-content h2,
.council-message-content h3,
.council-message-content h4 {
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0.8em 0 0.3em 0;
  line-height: 1.35;
}

.council-message-content h1:first-child,
.council-message-content h2:first-child,
.council-message-content h3:first-child {
  margin-top: 0;
}

.council-message-content h1 { font-size: 1.05rem; }
.council-message-content h2 { font-size: 1rem; }
.council-message-content h3 { font-size: 0.9375rem; }
.council-message-content h4 { font-size: 0.9375rem; font-weight: 500; }

.council-message-content pre {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.75rem;
  margin: 0.5em 0;
  overflow-x: auto;
}

.council-message-content pre code {
  background: none;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--os-text-secondary);
}

.council-message-content code {
  background: rgba(255, 255, 255, 0.07);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 0.85em;
}

.council-message-content blockquote {
  border-left: 2px solid rgba(var(--accent-rgb), 0.35);
  margin: 0.5em 0;
  padding: 0.15em 0 0.15em 0.75rem;
  color: var(--os-text-secondary);
  font-style: italic;
}

.council-message-content ul,
.council-message-content ol {
  margin: 0.5em 0;
  padding-left: 1.25rem;
}

.council-message-content li {
  margin: 0.2em 0;
  line-height: 1.6;
}

.council-message-content li > ul,
.council-message-content li > ol {
  margin: 0.25em 0;
}

.council-message-content ul > li::marker {
  color: var(--os-text-hint);
}

.council-message-content ol > li::marker {
  color: var(--os-text-muted);
  font-variant-numeric: tabular-nums;
}

.council-message-content a {
  color: rgba(var(--accent-rgb), 0.85);
  text-decoration: none;
}

.council-message-content a:hover {
  text-decoration: underline;
  color: var(--accent);
}

.council-message-content strong {
  font-weight: 600;
  color: var(--os-text-primary);
}

.council-message-content em {
  font-style: italic;
  color: var(--os-text-secondary);
}

/* Override briefing-text drop cap and newspaper styles */
.council-message-content .briefing-text p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
}

.council-message-content .briefing-text h2 {
  background: none;
  padding: 0;
  display: block;
  font-size: 1.0625rem;
  text-transform: none;
  letter-spacing: normal;
}

.council-message-content .briefing-text h3 {
  background: none;
  padding: 0;
  display: block;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--os-text-primary);
}

.council-message.loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  color: var(--os-text-muted);
  font-size: 0.875rem;
}

.council-message.loading .spin {
  animation: spin 1s linear infinite;
}

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

.council-last-message-time {
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Companion Status Bar (merged info + controls) --- */

.companion-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  min-height: 32px;
}

.companion-status-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.companion-last-msg {
  font-size: 0.7rem;
  color: var(--os-text-hint);
}

.companion-session-time {
  font-size: 0.65rem;
  color: rgba(74, 222, 128, 0.5);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.companion-status-right {
  display: flex;
  align-items: center;
  gap: 3px;
}

.council-input-form {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0;
  padding: 0.625rem 1rem 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  position: relative;
}

.council-input-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

/* ── Companion idle CTA — shown at bottom of messages list ── */
.council-begin-session-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 0.5rem;
}

/* ── Begin Session Button (shown when no session active) ── */
.session-begin-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: rgba(74, 222, 128, 0.85);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.session-begin-btn:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.5);
  color: rgba(74, 222, 128, 1);
}

body.light .session-begin-btn {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.3);
  color: rgba(22, 163, 74, 0.85);
}

body.light .session-begin-btn:hover {
  background: rgba(22, 163, 74, 0.15);
  border-color: rgba(22, 163, 74, 0.5);
  color: rgba(22, 163, 74, 1);
}

/* ── Session Dial ── */

.session-dial-float {
  position: relative;
  display: flex;
  align-items: center;
}

/* The clickable ring */
.session-dial-ring-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s;
}

.session-dial-ring-wrap:hover {
  background: rgba(255, 255, 255, 0.06);
}

.session-dial-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.session-dial-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2;
}

.session-dial-progress {
  fill: none;
  stroke: rgba(74, 222, 128, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 2s linear;
}

.session-dial-float.active .session-dial-ring-wrap:hover .session-dial-progress {
  stroke: rgba(239, 68, 68, 0.65);
}

/* Complete state — ring filled, gentle gold pulse */
.session-dial-float.complete .session-dial-progress {
  stroke: rgba(251, 191, 36, 0.8);
  animation: sdial-complete-pulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}

.session-dial-float.complete .session-dial-label {
  color: rgba(251, 191, 36, 0.9);
  font-size: 0.42rem;
}

@keyframes sdial-complete-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.session-dial-idle-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s, stroke 0.2s;
}

.session-dial-float.idle .session-dial-ring-wrap:hover .session-dial-idle-ring {
  stroke: rgba(74, 222, 128, 0.5);
  stroke-dashoffset: 53 !important;
}

.session-dial-saving-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 2;
  stroke-linecap: round;
  animation: sdial-spin 1.1s linear infinite;
}

@keyframes sdial-spin {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -107; }
}

/* Label (minutes or ▶) */
.session-dial-label {
  position: relative;
  z-index: 1;
  font-size: 0.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: rgba(74, 222, 128, 0.85);
  pointer-events: none;
}

.session-dial-float.idle .session-dial-label {
  color: var(--os-text-hint);
  font-size: 0.55rem;
}

.session-dial-float.active .session-dial-ring-wrap:hover .session-dial-label {
  color: rgba(239, 68, 68, 0.75);
}

/* ── Popover ── */

.session-dial-popover {
  position: fixed;
  width: 320px;
  background: rgba(20, 20, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  animation: sdp-in 0.15s ease;
}

@keyframes sdp-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.sdp-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sdp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sdp-dot.active {
  background: rgba(74, 222, 128, 0.85);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
  animation: sdp-pulse 2s ease-in-out infinite;
}

.sdp-dot.idle {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes sdp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.sdp-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  flex: 1;
}

.sdp-elapsed {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(74, 222, 128, 0.9);
  font-variant-numeric: tabular-nums;
}

.sdp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sdp-key {
  font-size: 0.62rem;
  color: var(--os-text-hint);
}

.sdp-val {
  font-size: 0.62rem;
  color: var(--os-text-muted);
}

.sdp-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 0.1rem 0;
}

.sdp-stats-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.sdp-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sdp-stat-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--os-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.sdp-stat-key {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sdp-summary-area {
  min-height: 36px;
}

.sdp-summary {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--os-text-secondary);
  margin: 0;
}

.sdp-summary.muted {
  color: var(--os-text-hint);
  font-style: italic;
}

.sdp-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.sdp-topic {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(167, 139, 250, 0.9);
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 5px;
  padding: 0.25rem 0.6rem;
}

.sdp-loading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  color: var(--os-text-hint);
}

.sdp-end-btn {
  all: unset;
  box-sizing: border-box;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(239, 68, 68, 0.6);
  cursor: pointer;
  text-align: center;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  width: 100%;
}

.sdp-end-btn:hover {
  color: rgba(239, 68, 68, 1);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
}

.sdp-begin-btn {
  all: unset;
  box-sizing: border-box;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(74, 222, 128, 0.75);
  cursor: pointer;
  text-align: center;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(74, 222, 128, 0.25);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  width: 100%;
}

.sdp-begin-btn:hover {
  color: rgba(74, 222, 128, 1);
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.5);
}

.council-input-with-menu {
  position: relative;
  flex: 1;
}

.council-input-form textarea {
  flex: 1;
  width: 100%;
  padding: 0.5rem 0.875rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
  font-size: 0.9375rem;
  font-family: inherit;
  resize: none;
  line-height: 1.5;
  min-height: 40px;
  max-height: 200px;
  overflow-y: hidden;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, height 0.1s ease;
}

.council-input-form textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06), 0 2px 12px rgba(var(--accent-rgb), 0.08);
}

.council-input-form textarea::placeholder {
  color: var(--os-text-hint);
}

.council-input-form textarea::-webkit-scrollbar {
  width: 4px;
}

.council-input-form textarea::-webkit-scrollbar-track {
  background: transparent;
}

.council-input-form textarea::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.25);
  border-radius: 2px;
}

.council-input-form button {
  width: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid transparent;
  color: rgba(var(--accent-rgb), 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  align-self: stretch;
}

.council-input-form button:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}

.council-input-form button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Stop button */
.council-stop-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid transparent;
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  align-self: flex-end;
}

.council-stop-btn:hover {
  background: rgba(239, 68, 68, 0.25);
}

.council-stop-icon {
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 2px;
}

/* Council input buttons wrapper */
.council-input-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.council-input-form .council-input-buttons button {
  /* inherits from .council-input-form button */
}


/* Icon button group — pill container */
.council-header-icon-group {
  display: flex;
  align-items: center;
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px;
  gap: 1px;
}

/* Council toggle button (in header) */
.council-chat-controls .council-toggle-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.council-chat-controls .council-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-secondary);
}

.council-chat-controls .council-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

/* Incognito mode */
.council-chat-controls .council-toggle-btn.incognito-active {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.9);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3), 0 0 16px rgba(239, 68, 68, 0.15);
  animation: incognito-pulse 2s ease-in-out infinite;
}

@keyframes incognito-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.3), 0 0 16px rgba(239, 68, 68, 0.15); }
  50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), 0 0 24px rgba(239, 68, 68, 0.25); }
}

/* Scroll to bottom button */
.council-scroll-down-btn {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(30, 30, 35, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.council-scroll-down-btn:hover {
  background: rgba(40, 40, 50, 0.95);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Incognito input area */
.council-input-form.incognito {
  border-top-color: rgba(239, 68, 68, 0.2);
}

.council-input-form.incognito textarea {
  border-color: rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2), 0 0 12px rgba(239, 68, 68, 0.08);
}

.council-input-form.incognito textarea:focus {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3), 0 0 20px rgba(239, 68, 68, 0.12);
}

.council-input-form.incognito textarea::placeholder {
  color: rgba(239, 130, 130, 0.55);
}

.council-input-form.incognito button:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.85);
}

.council-input-form.incognito button:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.25);
  color: rgba(239, 68, 68, 1);
}

.council-input-form.incognito button[type="submit"].council-send {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.2));
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
  color: rgba(239, 68, 68, 0.9);
}

.council-toggle-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  -webkit-text-fill-color: #fff;
}

/* Council send button glow */
.council-input-form button[type="submit"].council-send {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.3));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* Council multi-model picker */
.council-multi-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.01);
}

.council-multi-picker {
  position: fixed;
  width: 340px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 25, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  overflow: hidden;
}

.council-multi-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  flex-shrink: 0;
}

.council-multi-picker-header button {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}

.council-multi-picker-header button:hover {
  color: var(--os-text-secondary);
}

.council-multi-picker-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.council-multi-picker-body::-webkit-scrollbar {
  width: 4px;
}

.council-multi-picker-body::-webkit-scrollbar-track {
  background: transparent;
}

.council-multi-picker-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.council-multi-picker-group {
  padding: 0;
}

.council-multi-picker-group + .council-multi-picker-group {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.council-multi-picker-provider {
  padding: 0.4rem 0.75rem 0.2rem;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.council-multi-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.council-multi-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.council-multi-picker-item.selected {
  background: var(--council-accent-bg, rgba(167, 139, 250, 0.1));
  color: var(--council-accent-text, #c4b5fd);
}

.council-multi-picker-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}

.council-multi-picker-item.selected input[type="checkbox"] {
  background: var(--council-accent-text, #7c3aed);
  border-color: var(--council-accent-text, #7c3aed);
}

.council-multi-picker-item.selected input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 7px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.council-member-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  transition: background 0.15s;
}

.council-member-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.council-member-picker-item.selected {
  background: rgba(167, 139, 250, 0.1);
  color: #c4b5fd;
}

.council-multi-picker-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-text-hint);
  padding: 0.4rem 0.75rem 0.2rem;
}

.council-member-picker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.council-member-picker-name {
  font-weight: 500;
  flex: 1;
}

.council-member-picker-model {
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  font-family: monospace;
}

.council-member-picker-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
}

.council-member-picker-item.selected input[type="checkbox"] {
  background: #7c3aed;
  border-color: #7c3aed;
}

.council-member-picker-item.selected input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 7px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.council-member-picker-empty {
  padding: 1rem 0.75rem;
  color: var(--os-text-hint);
  font-size: 0.8125rem;
  text-align: center;
}

.council-multi-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.council-multi-picker-footer button {
  padding: 0.3rem 0.625rem;
  border-radius: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--os-text-muted);
  transition: all 0.15s;
}

.council-multi-picker-footer button:hover {
  color: var(--os-text-secondary);
}

.council-multi-picker-footer button.primary {
  background: var(--accent-dark);
  color: white;
}

.council-multi-picker-footer button.primary:hover {
  background: var(--accent-dark);
}

/* ─── Council Studio ────────────────────────────────────────────── */
.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-modal {
  width: 460px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  background: rgba(14, 14, 20, 0.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: width 0.2s ease, max-height 0.2s ease;
  margin: auto;
}
.cs-modal--edit {
  width: min(820px, 90vw);
  max-height: 88vh;
}

/* Header */
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.cs-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}
.cs-close {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 5px;
  transition: all 0.15s;
}
.cs-close:hover { color: var(--os-text-secondary); background: rgba(255,255,255,0.06); }

/* On/Off toggle */
.cs-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: auto;
  margin-right: 4px;
}

.cs-toggle-track {
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  position: relative;
  transition: background 0.2s;
}

.cs-toggle-btn.on .cs-toggle-track {
  background: #4ade80;
}

.cs-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}

.cs-toggle-btn.on .cs-toggle-thumb {
  left: 14px;
}

.cs-toggle-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-toggle-btn.on .cs-toggle-label {
  color: #4ade80;
}

/* Body — scrollable */
.cs-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0.75rem 0;
}
.cs-modal--edit .cs-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.cs-modal--edit .cs-edit-wrap {
  flex: 1;
  min-height: 0;
  padding: 0;
  gap: 0;
}
.cs-body::-webkit-scrollbar { width: 4px; }
.cs-body::-webkit-scrollbar-track { background: transparent; }
.cs-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* State: Room (who's in) */
.cs-room {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.25rem 1.125rem 0.875rem;
}

.cs-room-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem 0.3rem 0.6rem;
  border-radius: 20px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
}
.cs-room-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cs-room-chip-remove {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0 2px;
  margin-left: 2px;
  border-radius: 3px;
  transition: color 0.12s;
}
.cs-room-chip-remove:hover { color: var(--os-text-secondary); }

.cs-room-empty {
  color: var(--os-text-hint);
  font-size: 0.8125rem;
  padding: 0.25rem 0;
}
.cs-speed-hint {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  line-height: 1.4;
}
.cs-speed-warning {
  color: rgba(251, 191, 36, 0.75);
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.2);
}
.cs-speed-badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}
.cs-speed-fast { color: rgba(74, 222, 128, 0.7); }
.cs-speed-slow { color: rgba(148, 163, 184, 0.6); }

/* Add button — shown at end of room chips */
.cs-add-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  border: 1px dashed rgba(255,255,255,0.15);
  background: none;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.cs-add-btn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),0.4); background: rgba(var(--accent-rgb),0.06); }

/* State: Picker (add someone) */
.cs-picker {
  display: flex;
  flex-direction: column;
}

.cs-picker-back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1.125rem 0.625rem;
  background: none;
  border: none;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.cs-picker-back:hover { color: var(--os-text-secondary); }

/* Shared row style for picker list */
.cs-row {
  display: flex;
  align-items: center;
  width: 100%;
  transition: background 0.12s;
}
.cs-row:hover { background: rgba(255,255,255,0.04); }
.cs-row-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.125rem;
  background: none;
  border: none;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.cs-row-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cs-row-name { font-weight: 500; flex-shrink: 0; }
.cs-row-sub-model {
  font-size: 0.7rem;
  color: var(--os-text-hint);
  margin-left: 0.25rem;
}
.cs-row-sub {
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.cs-row-badge {
  font-size: 0.5rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.cs-row-edit {
  padding: 0.3rem 0.5rem;
  margin-right: 0.5rem;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--os-text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 5px;
  transition: all 0.15s;
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
  line-height: 1;
  opacity: 0;
}
.cs-row:hover .cs-row-edit { opacity: 1; }
.cs-row-edit:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.35); }

/* Provider separator */
.cs-provider-label {
  padding: 0.6rem 1.125rem 0.2rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-text-hint);
}

/* Collapsible provider group */
.cs-group { }
.cs-provider-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.cs-provider-toggle:hover { color: var(--os-text-muted) !important; }
.cs-provider-chevron {
  font-size: 0.6rem;
  opacity: 0.5;
  margin-right: 1.125rem;
}

/* Two-column model grid */
.cs-model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.35rem 1.125rem 0.5rem;
}
.cs-model-tile {
  position: relative;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  transition: background 0.12s, border-color 0.12s;
  overflow: hidden;
}
.cs-model-tile:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
.cs-model-tile.active { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.25); }
.cs-model-tile-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  text-align: left;
}
.cs-model-tile-inner {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.cs-model-tile-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--os-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-model-tile-sub {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-model-tile.active .cs-model-tile-name { color: rgba(74,222,128,0.9); }
.cs-tile-check {
  font-size: 0.65rem;
  color: #4ade80;
  flex-shrink: 0;
}
.cs-tile-edit {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--os-text-muted);
  font-size: 0.65rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.4;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  opacity: 0;
}
.cs-model-tile:hover .cs-tile-edit { opacity: 1; }
.cs-tile-edit:hover { color: white; background: rgba(var(--accent-rgb), 0.6); border-color: rgba(var(--accent-rgb), 0.5); }

/* New persona button */
.cs-new-persona {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.5rem 1.125rem 0.25rem;
  padding: 0.5rem 1rem;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  border-radius: 7px;
  color: rgba(var(--accent-rgb), 0.7);
  color: color-mix(in srgb, var(--accent) 70%, transparent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  width: calc(100% - 2.25rem);
}
.cs-new-persona:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}

/* Edit form — shown inside picker */
.cs-edit-wrap {
  padding: 0.5rem 1.125rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
}
.cs-edit-back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0 0 0.25rem;
  transition: color 0.15s;
}
.cs-edit-back:hover { color: var(--os-text-secondary); }

/* Two-pane split edit form */
.cs-edit-form--split {
  display: flex;
  flex-direction: row;
  gap: 0;
  height: 100%;
  min-height: 420px;
}

/* LEFT panel */
.cs-edit-left {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.125rem 1rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}
.cs-edit-avatar-wrap {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0.25rem;
}
.cs-edit-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(0,0,0,0.65);
  flex-shrink: 0;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}
.cs-edit-left-actions {
  margin-top: auto;
}

/* RIGHT panel */
.cs-edit-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1rem;
  min-width: 0;
}

/* Field rows (label on top, control below) */
.cs-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cs-edit-field--grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cs-edit-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-hint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cs-edit-name-input {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

.cs-edit-input, .cs-edit-select, .cs-edit-textarea {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  padding: 0.4rem 0.65rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.cs-edit-input:focus, .cs-edit-select:focus, .cs-edit-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.cs-edit-select option, .cs-edit-select optgroup { background: #1a1a2e; }
.cs-edit-textarea { resize: none; font-family: inherit; line-height: 1.6; min-height: 80px; }
.cs-edit-textarea--grow { flex: 1; min-height: 0; resize: none; }
.cs-edit-hint {
  font-size: 0.625rem;
  color: var(--os-text-hint);
}

.cs-color-swatches { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.cs-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  outline: none;
}
.cs-color-swatch:hover { transform: scale(1.18); }
.cs-color-swatch.selected {
  border-color: white;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
}

/* Personal context toggle as a card row */
.cs-edit-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  gap: 0.75rem;
}
.cs-edit-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cs-edit-toggle-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--os-text-secondary);
}

.cs-toggle { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.cs-toggle input { display: none; }
.cs-toggle-track {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: rgba(255,255,255,0.1);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.cs-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: left 0.2s, background 0.2s;
}
.cs-toggle input:checked ~ .cs-toggle-track { background: rgba(var(--accent-rgb), 0.6); }
.cs-toggle input:checked ~ .cs-toggle-track::after { left: 17px; background: var(--accent); }

.cs-edit-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid rgba(255,255,255,0.07); }
.cs-edit-cancel, .cs-edit-save {
  padding: 0.4rem 1rem;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}
.cs-edit-cancel { background: rgba(255,255,255,0.07); color: var(--os-text-muted); }
.cs-edit-cancel:hover { background: rgba(255,255,255,0.12); }
.cs-edit-save { background: rgba(var(--accent-rgb), 0.85); color: white; }
.cs-edit-save:hover { background: var(--accent); }
.cs-edit-save:disabled { opacity: 0.3; cursor: not-allowed; }

/* Delete button in edit form */
.cs-edit-delete {
  background: none;
  border: none;
  color: rgba(239,68,68,0.5);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.4rem 0;
  margin-right: auto;
  transition: color 0.15s;
}
.cs-edit-delete:hover { color: #f87171; }

/* Footer */
.cs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.125rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.cs-modal--edit .cs-footer { display: none; }
.cs-footer-clear {
  background: none;
  border: none;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  transition: color 0.15s;
}
.cs-footer-clear:hover { color: var(--os-text-muted); }
.cs-footer-done {
  background: rgba(var(--accent-rgb), 0.8);
  border: none;
  color: white;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
}
.cs-footer-done:hover { background: var(--accent); }

/* Light theme */
body.light .cs-modal {
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
}
body.light .cs-header { border-color: rgba(0,0,0,0.08) !important; }
body.light .cs-title { color: rgba(20,20,30,0.85) !important; }
body.light .cs-close { color: rgba(20,20,30,0.3) !important; }
body.light .cs-close:hover { color: rgba(20,20,30,0.7) !important; background: rgba(0,0,0,0.05) !important; }

/* Room chips */
body.light .cs-room-chip {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-color: rgba(var(--accent-rgb), 0.2) !important;
  color: rgba(20,20,30,0.8) !important;
}
body.light .cs-room-chip-remove { color: rgba(20,20,30,0.3) !important; }
body.light .cs-room-chip-remove:hover { color: rgba(20,20,30,0.65) !important; }
body.light .cs-room-empty { color: rgba(20,20,30,0.35) !important; }
body.light .cs-speed-hint { color: rgba(20,20,30,0.4) !important; background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.08) !important; }
body.light .cs-speed-warning { color: rgba(161,120,0,0.85) !important; background: rgba(251,191,36,0.07) !important; border-color: rgba(251,191,36,0.25) !important; }
body.light .cs-speed-fast { color: rgba(22,163,74,0.8) !important; }
body.light .cs-speed-slow { color: rgba(100,116,139,0.7) !important; }
body.light .cs-add-btn { color: rgba(20,20,30,0.35) !important; border-color: rgba(0,0,0,0.15) !important; }
body.light .cs-add-btn:hover { color: var(--accent) !important; border-color: rgba(var(--accent-rgb),0.4) !important; background: rgba(var(--accent-rgb),0.06) !important; }

/* Picker */
body.light .cs-picker-back { color: rgba(20,20,30,0.35) !important; }
body.light .cs-picker-back:hover { color: rgba(20,20,30,0.65) !important; }
body.light .cs-provider-label { color: rgba(20,20,30,0.3) !important; }
body.light .cs-model-tile { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.09) !important; }
body.light .cs-model-tile:hover { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.15) !important; }
body.light .cs-model-tile.active { background: rgba(34,197,94,0.07) !important; border-color: rgba(34,197,94,0.25) !important; }
body.light .cs-model-tile-name { color: rgba(20,20,30,0.8) !important; }
body.light .cs-model-tile-sub { color: rgba(20,20,30,0.3) !important; }
body.light .cs-model-tile.active .cs-model-tile-name { color: rgba(22,163,74,0.9) !important; }
body.light .cs-tile-edit { color: rgba(20,20,30,0.4) !important; background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.12) !important; }
body.light .cs-tile-edit:hover { color: white !important; background: var(--accent) !important; border-color: var(--accent) !important; }
body.light .cs-row:hover { background: rgba(0,0,0,0.04) !important; }
body.light .cs-row-btn { color: rgba(20,20,30,0.8) !important; }
body.light .cs-row-sub { color: rgba(20,20,30,0.3) !important; }
body.light .cs-row-sub-model { color: rgba(20,20,30,0.3) !important; }
body.light .cs-row-edit { color: rgba(20,20,30,0.35) !important; border-color: rgba(0,0,0,0.12) !important; }
body.light .cs-row-edit:hover { color: var(--accent) !important; background: rgba(var(--accent-rgb),0.08) !important; border-color: rgba(var(--accent-rgb),0.35) !important; }
body.light .cs-new-persona { background: rgba(var(--accent-rgb),0.05) !important; border-color: rgba(var(--accent-rgb),0.25) !important; color: rgba(var(--accent-rgb),0.6) !important; }
body.light .cs-new-persona:hover { background: rgba(var(--accent-rgb),0.1) !important; border-color: rgba(var(--accent-rgb),0.45) !important; color: var(--accent) !important; }

/* Edit form */
body.light .cs-edit-back { color: rgba(20,20,30,0.35) !important; }
body.light .cs-edit-back:hover { color: rgba(20,20,30,0.65) !important; }
body.light .cs-edit-label { color: rgba(20,20,30,0.4) !important; }
body.light .cs-edit-left { border-color: rgba(0,0,0,0.08) !important; background: rgba(0,0,0,0.02) !important; }
body.light .cs-edit-avatar { color: rgba(255,255,255,0.9) !important; }
body.light .cs-edit-toggle-row { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.09) !important; }
body.light .cs-edit-toggle-label { color: rgba(20,20,30,0.65) !important; }
body.light .cs-edit-actions { border-color: rgba(0,0,0,0.08) !important; }
body.light .cs-edit-input, body.light .cs-edit-select, body.light .cs-edit-textarea {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: rgba(20,20,30,0.85) !important;
}
body.light .cs-edit-select option, body.light .cs-edit-select optgroup { background: white !important; color: rgba(20,20,30,0.85) !important; }
body.light .cs-edit-hint { color: rgba(20,20,30,0.3) !important; }
body.light .cs-edit-cancel { background: rgba(0,0,0,0.05) !important; color: rgba(20,20,30,0.5) !important; }
body.light .cs-edit-cancel:hover { background: rgba(0,0,0,0.09) !important; }
body.light .cs-toggle-track { background: rgba(0,0,0,0.1) !important; }
body.light .cs-toggle-track::after { background: rgba(0,0,0,0.3) !important; }

/* Footer */
body.light .cs-footer { border-color: rgba(0,0,0,0.08) !important; }
body.light .cs-footer-clear { color: rgba(20,20,30,0.3) !important; }
body.light .cs-footer-clear:hover { color: rgba(20,20,30,0.6) !important; }

/* Council card (multi-model response) */
.council-message.council-multi {
  width: min(94%, 1120px);
  max-width: min(94%, 1120px);
}

/* Model name flash on card switch */
.council-model-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-text-muted);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.7s ease;
  white-space: nowrap;
}

.council-model-flash.fade-out {
  opacity: 0;
}

body.light .council-model-flash {
  color: rgba(20, 15, 40, 0.5);
  background: rgba(255, 255, 255, 0.6);
}

.council-card {
  position: relative;
  width: 100%;
  background: rgb(30, 30, 35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

/* All-failed banner */
.council-all-failed-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: rgba(239, 68, 68, 0.08);
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px 12px 0 0;
  font-size: 0.75rem;
}

.council-all-failed-icon {
  color: rgba(239, 68, 68, 0.8);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.council-all-failed-msg {
  flex: 1;
  color: var(--os-text-muted);
}

.council-all-failed-retry {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 5px;
  color: rgba(239, 68, 68, 0.9);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.council-all-failed-retry:hover {
  background: rgba(239, 68, 68, 0.25);
}

body.light .council-all-failed-msg {
  color: rgba(60, 20, 20, 0.7);
}

/* Kindle-style edge navigation — inside card-layout to avoid overflow:hidden clipping */
.council-card-layout > .council-edge-nav {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.35;
  pointer-events: auto;
  transition: opacity 0.2s ease, background 0.2s ease;
  z-index: 2;
  color: rgba(255, 255, 255, 0.6);
}

.council-card-layout > .council-edge-nav.left {
  left: 0;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(to right, rgba(255,255,255,0.06), transparent);
}

.council-card-layout > .council-edge-nav.right {
  right: 0;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(to left, rgba(255,255,255,0.06), transparent);
}

.council-card-layout > .council-edge-nav:hover {
  opacity: 1;
  color: white;
}

.council-card-layout > .council-edge-nav.left:hover {
  background: linear-gradient(to right, rgba(255,255,255,0.15), transparent);
}

.council-card-layout > .council-edge-nav.right:hover {
  background: linear-gradient(to left, rgba(255,255,255,0.15), transparent);
}

body.light .council-card-layout > .council-edge-nav {
  color: rgba(20, 20, 30, 0.4);
}

body.light .council-card-layout > .council-edge-nav.left {
  background: linear-gradient(to right, rgba(0,0,0,0.04), transparent);
}

body.light .council-card-layout > .council-edge-nav.right {
  background: linear-gradient(to left, rgba(0,0,0,0.04), transparent);
}

body.light .council-card-layout > .council-edge-nav:hover {
  opacity: 1;
  color: rgba(20, 20, 30, 0.9);
}

.council-card-layout > .council-edge-nav:disabled {
  opacity: 0 !important;
  pointer-events: none;
  cursor: default;
}

/* Model theme colors */
.council-theme-claude { --council-accent: rgba(var(--accent-rgb), 0.25); --council-accent-text: var(--accent); --council-accent-bg: rgba(var(--accent-rgb), 0.08); }
.council-theme-gemini { --council-accent: rgba(56, 189, 248, 0.25); --council-accent-text: #38bdf8; --council-accent-bg: rgba(56, 189, 248, 0.08); }
.council-theme-openai { --council-accent: rgba(74, 222, 128, 0.25); --council-accent-text: #4ade80; --council-accent-bg: rgba(74, 222, 128, 0.08); }
.council-theme-deepseek { --council-accent: rgba(251, 191, 36, 0.25); --council-accent-text: #fbbf24; --council-accent-bg: rgba(251, 191, 36, 0.08); }
.council-theme-grok { --council-accent: rgba(248, 113, 113, 0.25); --council-accent-text: #f87171; --council-accent-bg: rgba(248, 113, 113, 0.08); }
.council-theme-default { --council-accent: rgba(255, 255, 255, 0.15); --council-accent-text: rgba(255, 255, 255, 0.7); --council-accent-bg: rgba(255, 255, 255, 0.05); }

/* Card layout — vertical sidebar + content */
.council-card-layout {
  display: flex;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* Parts map right panel — sits inside council-card-layout as a right column */
.council-parts-panel {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  padding: 1rem 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 0 12px 12px 0;
}

.council-parts-panel-header {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-text-hint);
}

.council-parts-panel-loading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.council-parts-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.council-parts-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.council-parts-item-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.council-parts-item-emoji {
  font-size: 1.1rem;
  line-height: 1;
}

.council-parts-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.council-parts-item-expr {
  font-size: 0.8rem;
  color: var(--os-text-muted);
  line-height: 1.4;
  padding-left: 1.5rem;
}

.council-parts-throne {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--os-text-muted);
  line-height: 1.4;
}

.council-parts-throne.present {
  border-color: rgba(167, 139, 250, 0.25);
  background: rgba(167, 139, 250, 0.06);
  color: rgba(167, 139, 250, 0.8);
}

.council-parts-throne.absent {
  border-color: rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.05);
  color: rgba(251, 191, 36, 0.7);
}

.council-parts-stirring {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--os-text-muted);
  line-height: 1.4;
}

.council-parts-stirring-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-hint);
  letter-spacing: 0.04em;
}

.council-parts-proposed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.council-parts-proposed-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--os-text-hint);
  letter-spacing: 0.04em;
}

.council-parts-proposed-type {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}

.council-parts-count {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  margin-left: auto;
}

.council-parts-count.highlighted {
  color: rgba(167, 139, 250, 0.8);
  font-weight: 600;
}

.council-parts-item.recurring .council-parts-item-name {
  color: rgba(167, 139, 250, 0.9);
}

/* Vertical sidebar tabs */
.council-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.3rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  width: 26px;
  border-radius: 12px 0 0 12px;
  background: rgba(0, 0, 0, 0.06);
  transition: width 0.2s ease, opacity 0.2s ease;
  overflow: hidden;
  opacity: 0.3;
  z-index: 3;
}

.council-message:hover .council-sidebar,
.council-sidebar.expanded,
.council-sidebar:hover {
  opacity: 1;
}

.council-sidebar.expanded {
  width: 120px;
}

/* Sticky sidebar on the last council message */
.council-sidebar.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
}

/* Toggle button at the top of the sidebar */
.council-sidebar-toggle {
  all: unset;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20px;
  cursor: pointer;
  color: var(--os-text-hint);
  flex-shrink: 0;
  transition: color 0.15s;
}

.council-sidebar-toggle:hover {
  color: var(--os-text-muted);
}

.council-message:hover .council-sidebar-toggle,
.council-sidebar-toggle:focus {
  opacity: 1;
}

/* Keep expanded toggle always visible */
.council-sidebar.expanded .council-sidebar-toggle {
  opacity: 1;
}

/* Label text shown when expanded */
.council-tab-label-text {
  font-size: 0.63rem;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 82px;
  opacity: 0.8;
}

.council-card-content {
  flex: 1;
  min-width: 0;
  width: 100%;
  transition: opacity 0.12s ease;
}

.council-card-model-header {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-text-hint);
  padding: 0.6rem 1.25rem 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.council-message:hover .council-card-model-header {
  opacity: 1;
}

body.light .council-card-model-header {
  color: rgba(20, 20, 30, 0.45);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

/* Parts panel — hide at rest, show on hover */
.council-parts-panel {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.council-message:hover .council-parts-panel {
  opacity: 1;
}

.council-tab {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.28rem 0;
  font-family: inherit;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

/* When sidebar is expanded, left-align tabs */
.council-sidebar.expanded .council-tab {
  justify-content: flex-start;
  padding-left: 0.4rem;
}

.council-tab-row {
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: visible;
}

.council-tab-row .council-tab {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.council-tab-action {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-primary);
  background: rgba(40, 40, 50, 0.95);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.12s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.council-tab-row:hover .council-tab-action,
.council-tab-row:focus-within .council-tab-action,
.council-tab-action.persistent {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Retry/stop icon replaces dot inside tab */
.council-tab svg.council-tab-dot {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.council-tab:hover svg.council-tab-dot {
  opacity: 1;
}
.council-tab svg.council-tab-dot.error {
  color: rgba(248, 113, 113, 0.85);
}
.council-tab.model-running {
  cursor: default;
}

/* When expanded, anchor to right edge so it doesn't overlap the label */
.council-sidebar.expanded .council-tab-action {
  left: auto;
  right: 2px;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
}
.council-sidebar.expanded .council-tab-row:hover .council-tab-action,
.council-sidebar.expanded .council-tab-row:focus-within .council-tab-action,
.council-sidebar.expanded .council-tab-action.persistent {
  transform: translateY(-50%) scale(1);
}
/* persistent (error/cancelled) always visible in expanded mode */
.council-sidebar.expanded .council-tab-action.persistent {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.council-tab-action:hover {
  color: #fff;
  background: rgba(60, 60, 70, 0.98);
}

.council-tab-action.stop {
  color: rgba(248, 113, 113, 0.9);
}

.council-tab-action.stop:hover {
  color: rgba(248, 113, 113, 1);
  background: rgba(60, 20, 20, 0.95);
}

.council-tab:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
}

.council-tab:disabled {
  cursor: default;
}

/* ── Active / selected: subtle bg only ── */
.council-tab.active {
  background: var(--council-accent-bg, rgba(167, 139, 250, 0.08));
}


/* Dot — replaces text label in sidebar */
.council-tab-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.council-tab-dot.loading {
  background: rgba(255, 255, 255, 0.12);
  animation: council-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes council-dot-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.65; }
}

.council-tab-dot.active {
  background: var(--council-accent-text, #a78bfa);
  transform: scale(1.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}

.council-tab-dot.unviewed {
  background: rgba(255, 255, 255, 0.6);
}

.council-tab-dot.error {
  background: rgba(248, 113, 113, 0.85);
}

.council-tab-dot.cancelled {
  background: rgba(255, 255, 255, 0.1);
}

.council-tab-dot.picked {
  background: var(--council-accent-text, #a78bfa);
}

/* Picked tab — subtle highlight */
.council-tab.picked {
  font-weight: 600;
}

/* Parts tab — at bottom, icon only */
.council-tab-parts {
  margin-top: auto;
  padding: 0.3rem 0;
  color: rgba(var(--accent-rgb), 0.4);
}
.council-tab-parts:hover:not(:disabled) {
  color: rgba(var(--accent-rgb), 0.85);
  background: rgba(var(--accent-rgb), 0.06);
}
.council-tab-parts.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.council-tab-parts-count {
  font-size: 0.55rem;
  font-weight: 700;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  padding: 0px 4px;
  border-radius: 4px;
  min-width: 12px;
  text-align: center;
  line-height: 1.4;
}

.council-card-body {
  padding: 0.75rem 1.5rem;
  line-height: 1.55;
  user-select: text;
  -webkit-user-select: text;
}

.council-card-body-time {
  display: none;
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--os-text-hint);
  text-align: right;
}

/* Council model nav — inline group within session controls */
.council-floating-nav-group {
  display: flex;
  align-items: center;
  gap: 2px;
  animation: council-nav-fade-in 0.25s ease;
}
.council-nav-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 6px;
}
@keyframes council-nav-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.council-nav-arrow {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.council-nav-arrow:hover:not(:disabled) {
  color: var(--os-text-primary);
  background: rgba(255, 255, 255, 0.08);
}
.council-nav-arrow:disabled {
  opacity: 0.15;
  cursor: default;
}
.council-nav-arrow.small {
  width: 18px;
  height: 14px;
  border-radius: 4px;
}
.council-nav-arrows-vertical {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 2px;
}
.council-floating-nav-label {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  font-weight: 500;
  min-width: 56px;
  text-align: center;
  white-space: nowrap;
}
.council-floating-nav-label.is-picked {
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 3px;
}
.council-picked-check {
  flex-shrink: 0;
}
.council-floating-nav-count {
  font-size: 0.6rem;
  color: var(--os-text-hint);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.council-floating-pick {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  margin-left: 2px;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.council-floating-pick:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.35);
}
.council-floating-pick:disabled {
  opacity: 0.4;
  cursor: default;
}
.council-floating-pick.picked {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.2);
  cursor: default;
}

.council-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.07);
  min-height: 32px;
}

/* Prev/next nav arrows — sits between meta and actions in footer */
.council-footer-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.council-footer-nav-label {
  font-size: 0.6rem;
  color: var(--os-text-hint);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  text-align: center;
}

.council-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.council-card-model {
  display: none;
}

.council-card-duration {
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--os-text-hint);
}

.council-card-time {
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--os-text-hint);
}

.council-pick-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.council-pick-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8);
  filter: none;
}

.council-pick-btn-picked {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.council-pick-btn-picked:hover {
  background: rgba(255, 255, 255, 0.08);
  filter: none;
}

.council-retry-all-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.council-retry-all-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--os-text-secondary);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8);
  filter: none;
}

/* Pulse skeleton — shows before council streaming starts */
.council-loading-pulse {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.council-pulse-bar {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: pulse-shimmer 1.5s ease-in-out infinite;
  width: 80%;
}

.council-pulse-bar.short {
  width: 50%;
}

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

.council-card-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  min-height: 0;
  padding: 0;
}

/* Hide card chrome when showing inline loading */
.council-card:has(.council-loading-inline) {
  background: none;
  border: none;
  overflow: visible;
}

.council-card:has(.council-loading-inline) .council-edge-nav,
.council-card-layout:has(.council-loading-inline) .council-edge-nav,
.council-card:has(.council-loading-inline) .council-sidebar,
.council-card:has(.council-loading-inline) .council-all-failed-banner {
  display: none !important;
}

.council-card-layout:has(.council-loading-inline) {
  min-height: 0;
}

/* Inline loading indicator — simple, no card chrome */
.council-loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.72rem;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.council-loading-inline button {
  all: unset;
  font-size: 0.65rem;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 3px;
}

.council-loading-inline button:hover {
  color: rgba(248, 113, 113, 0.9);
  background: rgba(248, 113, 113, 0.1);
}

/* Compact single-line loading indicator */
.council-loading-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  width: 100%;
}

.council-loading-dots {
  display: flex;
  gap: 4px;
}

.council-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.council-dot.pending {
  animation: dot-pulse 1.2s ease-in-out infinite;
}

.council-dot.done {
  background: rgba(74, 222, 128, 0.7);
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.3);
}

.council-dot.error {
  background: rgba(248, 113, 113, 0.7);
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.council-loading-label {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  font-variant-numeric: tabular-nums;
}

.council-loading-top {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 0.5rem;
}

.council-loading-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.council-loading-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--os-text-hint);
}

.council-loading-count {
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.council-loading-stop-btn {
  all: unset;
  box-sizing: border-box;
  font-size: 0.6rem;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.1s ease, background 0.1s ease;
}

.council-loading-stop-btn:hover {
  color: rgba(248, 113, 113, 0.9);
  background: rgba(248, 113, 113, 0.1);
}

/* Per-model loading rows */
.council-loading-models {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.council-loading-model-row {
  display: grid;
  grid-template-columns: 90px 20px 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

.council-loading-model-name {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--os-text-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.council-loading-model-row.done .council-loading-model-name {
  color: var(--os-text-muted);
}
.council-loading-model-row.error .council-loading-model-name,
.council-loading-model-row.cancelled .council-loading-model-name {
  color: var(--os-text-hint);
}

.council-loading-model-state {
  font-size: 0.65rem;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.council-loading-model-row.done .council-loading-model-state { color: rgba(74, 222, 128, 0.8); }
.council-loading-model-row.error .council-loading-model-state { color: rgba(248, 113, 113, 0.7); }
.council-loading-model-row.cancelled .council-loading-model-state { color: var(--os-text-hint); }
.council-loading-model-row.pending .council-loading-model-state { color: var(--os-text-hint); }

/* Thinking dots animation */
.council-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.council-thinking-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: council-dot-bounce 1.2s ease-in-out infinite;
}
.council-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.council-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes council-dot-bounce {
  0%, 60%, 100% { opacity: 0.2; transform: translateY(0); }
  30% { opacity: 0.8; transform: translateY(-2px); }
}

/* Progress bar */
.council-loading-model-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
}

.council-loading-model-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  background-size: 200% 100%;
  animation: council-bar-sweep 1.6s ease-in-out infinite;
  transform-origin: left;
}

.council-loading-model-fill.complete {
  animation: none;
  width: 100%;
  background: rgba(74, 222, 128, 0.35);
}

.council-loading-model-row.error .council-loading-model-fill.complete {
  background: rgba(248, 113, 113, 0.3);
}
.council-loading-model-row.cancelled .council-loading-model-fill.complete {
  background: rgba(255, 255, 255, 0.08);
}

@keyframes council-bar-sweep {
  0% { left: -60%; width: 60%; }
  100% { left: 110%; width: 60%; }
}

/* Stagger bar animations per row */
.council-loading-model-row:nth-child(1) .council-loading-model-fill { animation-delay: 0s; }
.council-loading-model-row:nth-child(2) .council-loading-model-fill { animation-delay: 0.25s; }
.council-loading-model-row:nth-child(3) .council-loading-model-fill { animation-delay: 0.5s; }
.council-loading-model-row:nth-child(4) .council-loading-model-fill { animation-delay: 0.75s; }
.council-loading-model-row:nth-child(5) .council-loading-model-fill { animation-delay: 1.0s; }
.council-loading-model-row:nth-child(6) .council-loading-model-fill { animation-delay: 1.25s; }

/* Model theme accent colors for the progress bar when pending */
.council-loading-model-row.council-theme-claude.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.35), transparent);
}
.council-loading-model-row.council-theme-openai.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.3), transparent);
}
.council-loading-model-row.council-theme-gemini.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), transparent);
}
.council-loading-model-row.council-theme-deepseek.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.3), transparent);
}
.council-loading-model-row.council-theme-grok.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.25), transparent);
}

.council-card-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.council-card-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 0.25rem;
}

.council-card-rating .council-star {
  cursor: pointer;
  color: var(--os-text-hint);
  transition: color 0.15s;
  padding: 3px;
}

.council-card-rating .council-star:hover {
  color: var(--os-text-muted);
}

.council-card-rating .council-star.filled {
  color: #fbbf24;
}

.council-gem-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s;
}

.council-gem-card-btn:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.council-gem-card-btn:focus-visible {
  outline: 1px solid rgba(var(--accent-rgb), 0.45);
  outline-offset: 1px;
}

/* Council picked badge */
/* Picked message footer — single row, visible on hover */
.council-picked-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  height: 24px;
}

.council-message:hover .council-picked-footer,
.council-picked-footer:focus-within {
  opacity: 1;
}

.council-picked-footer .council-message-rating {
  margin-top: 0;
  flex-shrink: 0;
  opacity: 1;
}

.council-picked-left {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  min-width: 0;
}

/* Parts map inside footer row — inline, no extra space */
.council-picked-footer .becoming-map-section,
.council-picked-left .becoming-map-section {
  margin-top: 0;
  padding: 0;
}

.council-picked-footer .becoming-map-toggle {
  padding: 3px 8px !important;
  font-size: 0.6rem !important;
  border-radius: 10px !important;
}

.council-picked-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 10px;
  font-size: 0.625rem;
  color: rgba(var(--accent-rgb), 0.7);
}

.council-picked-count {
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(var(--accent-rgb), 0.18);
  padding: 1px 5px;
  border-radius: 8px;
  color: var(--accent);
  min-width: 15px;
  text-align: center;
  line-height: 1.3;
}

/* Council message rating — subtle hint, full on hover, stays when rated */
.council-message-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 0.375rem;
  opacity: 0.25;
  transition: opacity 0.2s ease;
}

.council-message-rating:hover,
.council-message:hover .council-message-rating,
.council-message-rating.rated {
  opacity: 1;
}

.council-star {
  color: var(--os-text-hint);
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  fill: transparent;
  stroke-width: 2;
}

.council-star:hover {
  color: rgba(251, 191, 36, 0.6);
  transform: scale(1.15);
}

.council-star.filled {
  color: #fbbf24;
  fill: #fbbf24;
  cursor: default;
}

.council-message-rating.rated .council-star:not(.filled) {
  display: none;
}

/* Council stats overlay & popover */
/* Council stats overlay & popover */
.council-stats-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.2);
}

.council-stats-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-height: 80vh;
  background: rgba(20, 20, 25, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  overflow: hidden;
}

.council-gems-popover {
  width: 560px;
}

.council-gems-popover .council-gems-list {
  max-height: 60vh;
  padding: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.25) transparent;
}

.council-gems-popover .council-gems-list::-webkit-scrollbar {
  width: 6px;
}

.council-gems-popover .council-gems-list::-webkit-scrollbar-track {
  background: transparent;
}

.council-gems-popover .council-gems-list::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 3px;
}

.council-gems-popover .council-gems-list::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.35);
}

.council-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.council-stats-header button {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}

.council-stats-header button:hover {
  color: var(--os-text-secondary);
}

/* Top section: donut chart + metrics side by side */
.council-stats-top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.council-stats-chart {
  flex-shrink: 0;
}

.council-stats-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  flex: 1;
}

.council-stats-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.council-stats-kpi-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-light);
  line-height: 1.2;
}

.council-stats-kpi-label {
  font-size: 0.5625rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Highlights row */
.council-stats-highlights {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.council-stats-highlight {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.375rem 0.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.council-stats-highlight-icon {
  font-size: 0.75rem;
  line-height: 1;
}

.council-stats-highlight-label {
  font-size: 0.5rem;
  color: var(--os-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.council-stats-highlight-value {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Model leaderboard */
.council-stats-leaderboard {
  padding: 0.625rem 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
}

.council-stats-model-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.council-stats-model-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.council-stats-model-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.council-stats-model-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  flex: 1;
}

.council-stats-pick-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-light);
}

.council-stats-model-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  color: var(--os-text-hint);
  padding-left: 1.375rem;
}

.council-stats-model-details span {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.council-stats-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 1.375rem;
}

.council-stats-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.council-stats-empty {
  text-align: center;
  color: var(--os-text-hint);
  font-size: 0.75rem;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

/* Stats tabs */
.council-stats-tabs {
  display: flex;
  gap: 0.125rem;
}

.council-stats-tab {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-hint);
  cursor: pointer;
  transition: all 0.15s;
}

.council-stats-tab:hover {
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.04);
}

.council-stats-tab.active {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

/* Gem button on messages */
.council-gem-btn {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  margin-left: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}

.council-gem-btn:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

/* Gem toast — fixed floating pill, not part of layout flow */
.council-gem-toast {
  position: fixed;
  bottom: 2.5rem;
  left: 50%;
  transform: translate(-50%, 0);
  width: max-content;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 1rem;
  background: rgba(30, 30, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: council-gem-toast-in 0.2s ease-out;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes council-gem-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

body.light .council-gem-toast {
  background: rgba(30, 30, 40, 0.92);
  color: #fff;
  border-color: rgba(0, 0, 0, 0.15);
}

/* Note-to-memory confirmation preview */
.council-note-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.council-note-confirm {
  background: rgb(28, 28, 35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1.25rem;
  width: min(480px, 90vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.council-note-confirm-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.council-note-confirm-header span { flex: 1; }

.council-note-confirm-close {
  all: unset;
  cursor: pointer;
  color: var(--os-text-muted);
  display: flex;
  align-items: center;
}
.council-note-confirm-close:hover { color: var(--os-text-secondary); }

.council-note-confirm-preview {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
  overflow-y: auto;
  max-height: 45vh;
  white-space: pre-wrap;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 0.75rem;
}

.council-note-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.council-note-confirm-cancel {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.4rem 0.875rem;
  border-radius: 7px;
  color: var(--os-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.council-note-confirm-cancel:hover { color: var(--os-text-secondary); background: rgba(255, 255, 255, 0.05); }

.council-note-confirm-save {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.875rem;
  border-radius: 7px;
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: #a78bfa;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.council-note-confirm-save:hover { background: rgba(167, 139, 250, 0.3); }

body.light .council-note-confirm {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body.light .council-note-confirm-header { color: rgba(0, 0, 0, 0.85); }
body.light .council-note-confirm-close { color: rgba(0, 0, 0, 0.35); }
body.light .council-note-confirm-close:hover { color: rgba(0, 0, 0, 0.7); }
body.light .council-note-confirm-preview { color: rgba(0, 0, 0, 0.65); background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.light .council-note-confirm-cancel { color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.12); }
body.light .council-note-confirm-cancel:hover { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.8); }

/* Gems list in stats popover */
.council-gems-list {
  padding: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.council-gem-item {
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.15s;
}

.council-gem-item:hover {
  border-color: rgba(var(--accent-rgb), 0.15);
}

.council-gem-text {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--os-text-secondary);
  white-space: pre-wrap;
  /* Clamp long gems */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.council-gem-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.625rem;
}

.council-gem-model {
  color: var(--accent);
  font-weight: 600;
}

.council-gem-time {
  color: var(--os-text-hint);
}

.council-gem-save {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin-left: auto;
  transition: all 0.15s;
}

.council-gem-save:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.council-gem-delete {
  background: none;
  border: none;
  color: var(--os-text-hint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}

.council-gem-delete:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

.council-gem-question {
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.6875rem;
  color: var(--os-text-hint);
  font-style: italic;
}

.council-gem-question span {
  color: var(--os-text-muted);
  font-style: normal;
  font-weight: 600;
}

/* Council streaming indicator */
.council-streaming-indicator {
  padding: 0.75rem 1rem;
}

.council-streaming-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.council-streaming-models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.council-streaming-model {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.council-streaming-model.active {
  border-color: var(--council-accent, rgba(167, 139, 250, 0.2));
  color: var(--council-accent-text, rgba(167, 139, 250, 0.7));
}

.council-streaming-model.active:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 100, 100, 0.3);
}

.council-streaming-model.done {
  border-color: rgba(34, 197, 94, 0.2);
  color: rgba(34, 197, 94, 0.7);
}

.council-streaming-model.waiting {
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--os-text-hint);
  border-style: dashed;
}

.council-streaming-model.cancelled {
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--os-text-hint);
  opacity: 0.6;
}

.council-streaming-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.council-streaming-model.active .council-streaming-dot {
  animation: dotPulse 1.4s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Becoming View */
.becoming-view {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
}

.becoming-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--os-text-muted);
}

/* North Star */
.north-star-section {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.1);
  border-radius: 16px;
  padding: 1.75rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(251, 191, 36, 0.05);
}

.north-star-statement {
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.95);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.north-star-wins h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.north-star-wins ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.north-star-wins li {
  padding: 0.375rem 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  position: relative;
}

.north-star-wins li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: rgba(74, 222, 128, 0.8);
}

.becoming-section {
  margin-bottom: 2.5rem;
}

.becoming-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.section-icon {
  font-size: 1.5rem;
}

.becoming-section-desc {
  margin: 0 0 1.25rem 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}

/* Vows Grid */
.vows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.vow-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vow-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.vow-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.vow-emoji {
  font-size: 1.25rem;
}

.vow-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.vow-question {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: rgba(var(--accent-rgb), 0.9);
}

.vow-description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  line-height: 1.5;
}

/* Phases Timeline */
.phases-timeline {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.phase-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}

.phase-dot:hover {
  background: rgba(255, 255, 255, 0.07);
}

.phase-dot.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.1);
}

.phase-dot.current {
  box-shadow: 0 0 0 1.5px rgba(74, 222, 128, 0.35), 0 2px 12px rgba(74, 222, 128, 0.08);
}

.phase-emoji {
  font-size: 1.25rem;
}

.phase-number {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
}

.phase-dot.active .phase-number {
  color: var(--accent);
}

/* Phase Detail */
.phase-detail {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 1.75rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.phase-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.phase-big-emoji {
  font-size: 2.5rem;
}

.phase-titles {
  flex: 1;
}

.phase-name {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.phase-subtitle {
  margin: 0 0 0.25rem 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--os-text-muted);
}

.phase-embodied {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
}

.phase-embodied strong {
  color: rgba(251, 191, 36, 0.9);
}

.phase-current-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  font-size: 0.75rem;
  font-weight: 600;
  color: #4ade80;
}

.phase-essence {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent);
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 0 12px 12px 0;
}

.phase-essence p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}

.phase-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.phase-weather h4,
.phase-parts h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.phase-weather ul,
.phase-parts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.phase-weather li,
.phase-parts li {
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.phase-weather li:last-child,
.phase-parts li:last-child {
  border-bottom: none;
}

/* Becoming Footer */
.becoming-footer {
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.becoming-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
  line-height: 1.6;
}

.becoming-note strong {
  color: var(--os-text-secondary);
}

/* Voltage Bands */
.voltage-bands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.voltage-band {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.voltage-band:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.voltage-band.voltage-grey {
  border-color: rgba(156, 163, 175, 0.3);
  background: rgba(156, 163, 175, 0.08);
}

.voltage-band.voltage-gold {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}

.voltage-band.voltage-redline {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}

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

.voltage-emoji {
  font-size: 1.25rem;
}

.voltage-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.voltage-description {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}

.voltage-action {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
}

.voltage-action strong {
  color: var(--os-text-secondary);
}

/* Energy Leaks Grid */
.energy-leaks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.leak-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}

.leak-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.leak-card.selected {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}

.leak-emoji {
  font-size: 1.5rem;
}

.leak-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--os-text-secondary);
  text-align: center;
}

/* Leak Detail */
.leak-detail {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.leak-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.leak-big-emoji {
  font-size: 2rem;
}

.leak-detail-header h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.leak-feels-like {
  margin: 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--os-text-muted);
}

.leak-detail-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.leak-throne-line {
  grid-column: 1 / -1;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  padding: 0.875rem 1rem;
}

.leak-throne-line h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.throne-line-text {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.95);
}

.leak-anchor h4,
.leak-parts h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.leak-anchor p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
}

.leak-becoming-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.leak-part-tag {
  padding: 0.25rem 0.625rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  color: var(--os-text-secondary);
}

/* 10-Second Protocol */
.ten-second-protocol {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  padding: 1.25rem;
}

.ten-second-protocol h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.protocol-desc {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}

.protocol-steps {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
}

.protocol-steps li {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
}

.protocol-anchors {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.875rem 1rem;
}

.protocol-anchors h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.protocol-anchors ul {
  margin: 0;
  padding: 0 0 0 1.25rem;
}

.protocol-anchors li {
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

/* Key Roles Grid */
.key-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.875rem;
}

.role-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.role-emoji {
  font-size: 1.5rem;
}

.role-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.role-description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  line-height: 1.5;
}

/* Light OS Section */
.light-os-section {
  background: rgba(74, 222, 128, 0.05);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.becoming-section-subtitle {
  margin: -0.25rem 0 0.5rem 0;
  font-size: 1rem;
  font-style: italic;
  color: rgba(74, 222, 128, 0.9);
}

.light-os-principles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.light-os-principle {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.principle-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4ade80;
  flex-shrink: 0;
}

.light-os-principle h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.light-os-principle p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

/* Mercy Protocol */
.mercy-protocol {
  background: rgba(236, 72, 153, 0.08);
  border: 1px solid rgba(236, 72, 153, 0.2);
  border-radius: 10px;
  padding: 1.25rem;
}

.mercy-protocol h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(236, 72, 153, 0.95);
}

.mercy-intro {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}

.mercy-protocol ol {
  margin: 0;
  padding-left: 1.5rem;
}

.mercy-protocol li {
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}

/* Definition Section */
.definition-section {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(56, 189, 248, 0.03));
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 16px;
  padding: 1.75rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(var(--accent-rgb), 0.06);
}

.definition-subtitle {
  margin: -0.25rem 0 1rem 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--os-text-muted);
}

.definition-core {
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(var(--accent-rgb), 0.95);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.definition-essence {
  margin: 0 0 1.25rem 0;
  padding: 0;
  list-style: none;
}

.definition-essence li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

.definition-essence li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: rgba(var(--accent-rgb), 0.7);
}

.keystone-vow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), rgba(0, 0, 0, 0.15));
  border-radius: 12px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
}

.keystone-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.keystone-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.95);
}

/* Spiral Section */
.spiral-section {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.05), rgba(var(--accent-rgb), 0.03));
  border: 1px solid rgba(56, 189, 248, 0.1);
  border-radius: 16px;
  padding: 1.75rem;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(56, 189, 248, 0.05);
}

.spiral-description {
  font-size: 1rem;
  color: var(--os-text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.spiral-mantra {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(56, 189, 248, 0.95);
}

/* Principles Grid */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.principle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}

.principle-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.principle-card.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.principle-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(var(--accent-rgb), 0.9);
}

.principle-short-name {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  text-align: center;
  line-height: 1.3;
}

/* Principle Detail */
.principle-detail {
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  padding: 1.25rem;
}

.principle-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.principle-number-badge {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

.principle-essence {
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  line-height: 1.6;
}

.principle-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.principle-question,
.principle-mantra {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.875rem 1rem;
}

.principle-question h4,
.principle-mantra h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.principle-question p,
.principle-mantra p {
  margin: 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--os-text-secondary);
}

.principle-mantra p {
  color: rgba(var(--accent-rgb), 0.9);
}

/* Triangle Section */
.triangle-section {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.triangle-axes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.triangle-axis {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 1rem;
}

.triangle-axis h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.95);
}

.axis-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

.axis-row.risk {
  color: rgba(239, 68, 68, 0.8);
}

.axis-label {
  font-weight: 600;
  color: var(--os-text-muted);
  flex-shrink: 0;
}

.axis-integration {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
  font-style: italic;
  color: rgba(251, 191, 36, 0.9);
}

.triangle-practice {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  padding: 1rem;
}

.triangle-practice h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.triangle-practice p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--os-text-primary);
}

/* Daily Pillars Grid */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.pillar-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}

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

.pillar-emoji {
  font-size: 1.5rem;
}

.pillar-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.pillar-mantra {
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: rgba(56, 189, 248, 0.9);
}

.pillar-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pillar-row {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

.pillar-label {
  font-weight: 600;
  color: var(--os-text-muted);
  flex-shrink: 0;
}

.pillar-minimum {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  color: rgba(74, 222, 128, 0.9);
}

.pillar-minimum strong {
  color: var(--os-text-muted);
}

/* MVL Section */
.mvl-section {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.mvl-subtitle {
  margin: -0.25rem 0 0.75rem 0;
  font-size: 1rem;
  font-style: italic;
  color: rgba(239, 68, 68, 0.9);
}

.mvl-when {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.mvl-when h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mvl-when p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}

.mvl-script {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.mvl-script p {
  margin: 0;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: rgba(239, 68, 68, 0.95);
}

.mvl-checklist {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 1rem;
}

.mvl-checklist h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mvl-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.mvl-pillar {
  flex-shrink: 0;
  width: 80px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.9);
  text-transform: uppercase;
}

.mvl-task {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

/* ========================================
   Journey View Styles
   ======================================== */

.journey-view {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
}

.journey-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--os-text-muted);
}

.journey-section {
  margin-bottom: 2.5rem;
}

.journey-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.journey-section-desc {
  margin: -0.5rem 0 1.25rem 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}

/* Story Summary */
.story-summary-section {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.story-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.story-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.story-card .story-emoji {
  font-size: 1.5rem;
}

.story-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}

.story-card.origin {
  border-left: 3px solid rgba(74, 222, 128, 0.5);
}

.story-card.rupture {
  border-left: 3px solid rgba(239, 68, 68, 0.5);
}

.story-card.pattern {
  border-left: 3px solid rgba(251, 191, 36, 0.5);
}

.story-card.now {
  border-left: 3px solid rgba(var(--accent-rgb), 0.5);
}

/* Heritage Section */
.heritage-section {
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.heritage-content {
  max-width: 600px;
  margin: 0 auto;
}

.heritage-origin {
  font-size: 1rem;
  color: var(--os-text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.heritage-identity {
  font-size: 1.125rem;
  font-weight: 500;
  font-style: italic;
  color: rgba(251, 191, 36, 0.95);
  margin: 0;
}

/* Core Wound Section */
.core-wound-section {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.core-wound-desc {
  font-size: 1rem;
  color: var(--os-text-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  font-style: italic;
}

.core-wound-features {
  margin: 0 0 1.25rem 0;
  padding: 0;
  list-style: none;
}

.core-wound-features li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

.core-wound-features li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(239, 68, 68, 0.7);
}

.core-wound-healing {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.9375rem;
  color: rgba(74, 222, 128, 0.95);
}

.core-wound-healing strong {
  color: var(--os-text-secondary);
}

/* Arc Section */
.arc-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
}

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

.arc-header .journey-section-title {
  margin: 0;
}

.arc-toggle-btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.arc-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.arc-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* Arc Timeline */
.arc-timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.arc-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 80px;
}

.arc-node:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.arc-node.key-moment {
  border-color: rgba(var(--accent-rgb), 0.25);
}

.arc-node.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.arc-node.current {
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.4);
}

.arc-emoji {
  font-size: 1.25rem;
}

.arc-age {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.arc-phase {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  text-align: center;
}

.arc-connector {
  display: none; /* Hide connectors in wrapped layout */
}

/* Arc Detail */
.arc-detail {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 10px;
  padding: 1.25rem;
}

.arc-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.arc-detail-emoji {
  font-size: 2.5rem;
}

.arc-detail-titles {
  flex: 1;
}

.arc-detail-titles h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.arc-detail-meta {
  font-size: 0.875rem;
  color: var(--os-text-muted);
}

.arc-current-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  font-size: 0.75rem;
  font-weight: 600;
  color: #4ade80;
}

.arc-detail-description {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}

/* Patterns Section */
.patterns-section {
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.patterns-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.pattern-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 1rem;
  border-left: 3px solid rgba(251, 191, 36, 0.5);
}

.pattern-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.95);
}

.pattern-card p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

/* Key Parts Section */
.key-becoming-section {
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.key-becoming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}

.key-part-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 1rem;
  border-left: 3px solid rgba(56, 189, 248, 0.5);
}

.key-part-card h4 {
  margin: 0 0 0.375rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.key-part-born {
  margin: 0 0 0.25rem 0;
  font-size: 0.75rem;
  color: rgba(56, 189, 248, 0.9);
}

.key-part-role {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  font-style: italic;
}

/* Journey Footer */
.journey-footer {
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  text-align: center;
}

.journey-note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--os-text-muted);
  line-height: 1.7;
}

.journey-note strong {
  color: rgba(var(--accent-rgb), 0.95);
}

/* Journey Navigation */
.journey-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.journey-nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--os-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.journey-nav-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-secondary);
}

.journey-nav-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* Original Wholeness */
.wholeness-section {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.08), rgba(74, 222, 128, 0.02));
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.wholeness-desc {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  margin-bottom: 1rem;
}

.wholeness-traits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wholeness-traits li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9375rem;
  color: rgba(74, 222, 128, 0.95);
  font-style: italic;
}

.wholeness-traits li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: rgba(74, 222, 128, 0.6);
}

/* Fracture Event */
.fracture-section {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.fracture-details {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.fracture-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fracture-label {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
}

.fracture-value {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.95);
}

.fracture-nature {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  margin-bottom: 1rem;
}

.fracture-message {
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid rgba(239, 68, 68, 0.5);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--os-text-primary);
}

.fracture-result {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
}

/* Impossible Equation */
.equation-section {
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.equation-desc {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  margin-bottom: 1rem;
}

.equation-demands {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.equation-demand {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.demand-source {
  font-weight: 600;
  color: rgba(251, 191, 36, 0.95);
  min-width: 70px;
}

.demand-text {
  color: var(--os-text-secondary);
  font-style: italic;
}

.equation-result {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.95);
  text-align: center;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
}

/* Parental Wounds */
.parental-wounds-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
}

.wound-card {
  margin-bottom: 1rem;
  border-radius: 10px;
  overflow: hidden;
}

.wound-card.father-wound {
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.wound-card.mother-wound {
  border: 1px solid rgba(236, 72, 153, 0.2);
}

.wound-card-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
  color: inherit;
  text-align: left;
}

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

.wound-emoji {
  font-size: 1.5rem;
}

.wound-card-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.wound-theme {
  font-size: 0.8125rem;
  color: var(--os-text-muted);
}

.wound-chevron {
  color: var(--os-text-muted);
  transition: transform 0.2s ease;
}

.wound-chevron.rotated {
  transform: rotate(90deg);
}

.wound-card-content {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.1);
}

.wound-voice {
  margin: 0 0 1rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--os-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.wound-card-content h4 {
  margin: 1rem 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.wound-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wound-list li {
  padding: 0.375rem 0;
  padding-left: 1rem;
  position: relative;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}

.wound-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--os-text-muted);
}

.wound-parts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wound-part {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

.wound-part strong {
  color: rgba(var(--accent-rgb), 0.95);
}

.wound-core-belief {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}

.wound-reclamation {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 8px;
  font-size: 0.875rem;
  color: rgba(74, 222, 128, 0.95);
}

.wound-integration {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 10px;
}

.integration-icon {
  font-size: 1.25rem;
}

.wound-integration p {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(var(--accent-rgb), 0.95);
  line-height: 1.5;
}

/* Erotic Collapse */
.erotic-collapse-section {
  background: rgba(251, 146, 60, 0.06);
  border: 1px solid rgba(251, 146, 60, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.erotic-period {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(251, 146, 60, 0.95);
  margin-bottom: 0.5rem;
}

.erotic-context {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  font-style: italic;
  margin-bottom: 1.25rem;
}

.erotic-collapse-section h4 {
  margin: 1rem 0 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.erotic-list {
  margin: 0 0 1rem 0;
  padding: 0;
  list-style: none;
}

.erotic-list li {
  padding: 0.5rem 0;
  padding-left: 1.25rem;
  position: relative;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

.erotic-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(251, 146, 60, 0.6);
}

.erotic-belief {
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid rgba(251, 146, 60, 0.5);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--os-text-secondary);
}

.erotic-integration {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 10px;
}

.erotic-statement {
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin-bottom: 1rem;
}

.erotic-unlocks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.erotic-unlock {
  padding: 0.5rem 0.75rem;
  background: rgba(74, 222, 128, 0.1);
  border-radius: 6px;
  font-size: 0.875rem;
  color: rgba(74, 222, 128, 0.95);
}

/* Three Decades */
.decades-section {
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.decades-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.decade-card {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border-left: 3px solid rgba(var(--accent-rgb), 0.5);
}

.decade-range {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.95);
  text-transform: uppercase;
}

.decade-card h4 {
  margin: 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.decade-card p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

/* Why 40 */
.why-forty-section {
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.forty-bio {
  margin-bottom: 1.5rem;
}

.forty-bio > p {
  font-size: 0.9375rem;
  color: var(--os-text-secondary);
  margin-bottom: 1rem;
}

.forty-halves {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.forty-half {
  flex: 1;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

.forty-half.first {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.forty-half.second {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.half-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--os-text-muted);
  margin-bottom: 0.5rem;
}

.forty-half.first .half-text {
  color: rgba(251, 191, 36, 0.95);
}

.forty-half.second .half-text {
  color: rgba(74, 222, 128, 0.95);
}

.half-text {
  font-size: 0.9375rem;
  font-weight: 500;
}

.forty-quote {
  margin: 1rem 0 0 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid rgba(74, 222, 128, 0.5);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--os-text-secondary);
}

.forty-sacred-math {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.forty-sacred-math h4 {
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  text-align: center;
}

.sacred-math-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1rem;
}

.math-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.math-value {
  font-size: 2rem;
  font-weight: 700;
  color: rgba(var(--accent-rgb), 0.95);
}

.math-label {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.math-summary {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(74, 222, 128, 0.95);
}

/* What Dies, What Lives */
.dies-lives-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
}

.dies-lives-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.dies-column,
.lives-column {
  padding: 1rem;
  border-radius: 10px;
}

.dies-column {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.lives-column {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
}

.dies-column h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.95);
}

.lives-column h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(74, 222, 128, 0.95);
}

.dies-column ul,
.lives-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dies-column li,
.lives-column li {
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}

/* Soul Echoes */
.soul-echoes-section {
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.soul-echoes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.soul-echo {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border-left: 3px solid rgba(56, 189, 248, 0.5);
}

.echo-header {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.echo-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.95);
}

.echo-time {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.echo-title {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.echo-content {
  margin: 0;
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  line-height: 1.6;
  font-style: italic;
}

/* Sacred Reframe */
.sacred-reframe-section {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  padding: 1.5rem;
}

.reframe-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.reframe-card {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.reframe-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.95);
}

.reframe-truth {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--os-text-secondary);
  margin-bottom: 0.75rem;
}

.reframe-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reframe-card li {
  padding: 0.25rem 0;
  padding-left: 1rem;
  position: relative;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

.reframe-card li::before {
  content: '✦';
  position: absolute;
  left: 0;
  font-size: 0.625rem;
  color: rgba(var(--accent-rgb), 0.6);
}

/* The Vow */
.vow-section {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.03));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
}

.vow-text {
  margin: 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  font-size: 1rem;
  font-style: italic;
  color: var(--os-text-primary);
  line-height: 1.8;
  text-align: center;
}

/* Arc Detail Extended */
.arc-detail-extended {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  line-height: 1.6;
}

/* Key Part Wound Badge */
.key-part-wound {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 4px;
  font-size: 0.6875rem;
  color: rgba(239, 68, 68, 0.9);
  text-transform: uppercase;
}

/* ================================================
   GLOSSARY VIEW
   ================================================ */

.glossary-view {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Tree panel (left) */
.glossary-tree {
  width: 260px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.glossary-search {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.glossary-search-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.glossary-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--os-text-primary);
  font-size: 0.8rem;
  font-family: inherit;
}

.glossary-search-input::placeholder {
  color: var(--os-text-hint);
}

.glossary-search-clear {
  background: none;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.125rem;
  line-height: 1;
}

.glossary-search-clear:hover {
  color: var(--os-text-secondary);
}

.glossary-tree-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.375rem 0;
}

.glossary-tree-group {
  margin-bottom: 0.125rem;
}

.glossary-tree-category {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: none;
  background: none;
  color: var(--os-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.glossary-tree-category:hover {
  background: rgba(255, 255, 255, 0.04);
}

.glossary-tree-chevron {
  color: var(--os-text-hint);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.glossary-tree-chevron.expanded {
  transform: rotate(90deg);
}

.glossary-tree-cat-emoji {
  font-size: 0.85rem;
}

.glossary-tree-cat-name {
  flex: 1;
}

.glossary-tree-cat-count {
  font-size: 0.65rem;
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.0625rem 0.375rem;
  border-radius: 8px;
}

.glossary-tree-items {
  padding: 0.125rem 0;
}

.glossary-tree-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.3rem 0.625rem 0.3rem 2rem;
  border: none;
  background: none;
  color: var(--os-text-muted);
  font-size: 0.775rem;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.1s ease;
}

.glossary-tree-item:hover {
  color: var(--os-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.glossary-tree-item.active {
  color: var(--os-text-primary);
  background: rgba(var(--accent-rgb), 0.12);
}

/* Detail panel (right) */
.glossary-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0;
}

.glossary-detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.glossary-detail-emoji {
  font-size: 1.5rem;
}

.glossary-detail-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--os-text-primary);
  flex: 1;
}

.glossary-detail-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.glossary-detail-body {
  padding: 1.5rem;
}

.glossary-detail-definition {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--os-text-secondary);
}

.glossary-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--os-text-hint);
  gap: 0.5rem;
}

.glossary-detail-empty-icon {
  font-size: 2.5rem;
  opacity: 0.5;
}

.glossary-detail-empty p {
  margin: 0;
  font-size: 0.875rem;
}

.glossary-detail-empty-count {
  font-size: 0.75rem;
  color: var(--os-text-hint);
}

/* Companion visibility indicators */
.glossary-companion-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  flex-shrink: 0;
  opacity: 0.7;
  vertical-align: middle;
}

.glossary-tree-item:hover .glossary-companion-dot,
.glossary-tree-item.active .glossary-companion-dot {
  opacity: 1;
}

/* Filter bar */
.glossary-filter-bar {
  display: flex;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.glossary-filter-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: none;
  color: var(--os-text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.glossary-filter-btn:hover {
  color: var(--os-text-muted);
  border-color: rgba(255, 255, 255, 0.15);
}

.glossary-filter-btn.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
}

.glossary-filter-btn .glossary-companion-dot {
  margin-left: 0;
}

.glossary-filter-count {
  font-size: 0.6rem;
  opacity: 0.6;
}

/* Detail companion badge (toggleable) */
.glossary-detail-companion-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid;
}

.glossary-detail-companion-badge .glossary-companion-dot {
  margin-left: 0;
}

.glossary-detail-companion-badge.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.glossary-detail-companion-badge.inactive {
  color: var(--os-text-hint);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.glossary-detail-companion-badge:hover {
  opacity: 0.85;
}

/* ================================================
   STRATEGY VIEW
   ================================================ */

.strategy-view {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.strategy-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--os-text-muted);
}

.strategy-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}

.strategy-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0 0 1rem 0;
}

.strategy-section-title .section-icon {
  font-size: 1.125rem;
}

/* Phase Section */
.phase-card {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  padding: 1rem;
}

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

.phase-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--accent);
}

.phase-horizon {
  color: var(--os-text-muted);
  font-size: 0.875rem;
}

.phase-focus {
  margin: 0 0 0.5rem 0;
  color: var(--os-text-secondary);
  font-size: 0.9375rem;
}

.phase-transition {
  margin: 0;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}

/* Bets Section */
.bets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.bet-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bet-card.primary {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
}

.bet-card.non-negotiable {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
}

.bet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.bet-allocation {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.9);
}

.bet-role {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
}

.bet-description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

.bet-deliverable {
  margin: 0;
  font-size: 0.75rem;
  color: var(--os-text-muted);
  font-style: italic;
}

/* Capacity Section */
.capacity-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.capacity-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.capacity-stat .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.capacity-stat .stat-label {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.capacity-constraints h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  margin: 0 0 0.5rem 0;
}

.capacity-constraints ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}

.capacity-constraints li {
  margin-bottom: 0.25rem;
}

/* Runway Section */
.runway-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.runway-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  flex: 1;
}

.runway-stat.primary {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.runway-stat .stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--os-text-primary);
}

.runway-stat.primary .stat-value {
  color: #4ade80;
}

.runway-stat .stat-label {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.runway-sources {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.runway-source {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.8125rem;
}

.source-name {
  color: var(--os-text-secondary);
}

.source-amount {
  color: var(--os-text-primary);
  font-weight: 500;
}

/* Decisions Section */
.decisions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.decisions-column h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
}

.decisions-column.decided h4 {
  color: #4ade80;
}

.decisions-column.pending h4 {
  color: #fbbf24;
}

.decision-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.decision-q {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

.decision-a {
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  font-weight: 500;
}

.decision-deadline {
  font-size: 0.75rem;
  color: #fbbf24;
}

/* Exit Paths Section */
.exits-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.exit-path {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.exit-name {
  font-weight: 600;
  color: var(--os-text-primary);
  font-size: 0.875rem;
}

.exit-desc {
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}

.exit-when {
  color: var(--os-text-muted);
  font-size: 0.75rem;
  text-align: right;
}

/* Filters Section */
.filters-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.filter-vow {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.8125rem;
}

.filter-question {
  color: var(--os-text-secondary);
  font-size: 0.8125rem;
}

.filter-redflag {
  color: rgba(239, 68, 68, 0.8);
  font-size: 0.75rem;
}

/* Strategy Footer */
.strategy-footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.strategy-updated {
  margin: 0;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

/* ================================================
   NORTH STAR VIEW
   ================================================ */

.northstar-view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0; /* Important for flex children to scroll */
}

.northstar-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--os-text-muted);
}

/* Hero Section */
.northstar-hero {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.03));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 16px;
}

.hero-archetype {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.hero-icon {
  font-size: 2.5rem;
}

.hero-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}

.hero-statement {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--os-text-primary);
  margin: 0 0 0.75rem 0;
}

.hero-desc {
  font-size: 0.9375rem;
  color: var(--os-text-muted);
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Sections */
.northstar-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}

.northstar-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.northstar-section-header.clickable {
  cursor: pointer;
}

.northstar-section-header.clickable:hover {
  opacity: 0.8;
}

.section-toggle {
  font-size: 1.25rem;
  color: var(--os-text-muted);
  font-weight: 300;
}

.northstar-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0 0 1rem 0;
}

.northstar-section-header + .vision-grid,
.northstar-section-header + .phases-nav {
  margin-top: 1rem;
}

/* Vision Board - Paint the Picture */
.vision-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.vision-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  gap: 0.375rem;
  transition: all 0.2s ease;
}

.vision-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(251, 191, 36, 0.2);
  transform: translateY(-2px);
}

.vision-icon {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}

.vision-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}

.vision-desc {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  margin: 0;
  line-height: 1.4;
}

.vision-phase {
  font-size: 0.625rem;
  color: rgba(var(--accent-rgb), 0.8);
  margin-top: 0.25rem;
}

/* Phase Navigator */
.phases-nav {
  display: flex;
  gap: 0.5rem;
}

.phase-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.phase-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.phase-nav-btn.current {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}

.phase-nav-btn.selected {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.12);
}

.phase-nav-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.phase-nav-btn.current .phase-nav-number {
  background: #fbbf24;
  color: #000;
}

.phase-nav-btn.selected .phase-nav-number {
  background: var(--accent);
  color: #000;
}

.phase-nav-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}

.phase-nav-time {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.phase-nav-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #fbbf24;
  color: #000;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

/* Phase Detail */
.phase-detail-section {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
  border-color: rgba(var(--accent-rgb), 0.2);
}

.phase-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.phase-detail-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.current-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border-radius: 4px;
}

.phase-detail-timeframe {
  font-size: 0.875rem;
  color: var(--os-text-muted);
}

.phase-detail-focus {
  margin: 0 0 1.25rem 0;
  font-size: 1rem;
  color: var(--os-text-secondary);
}

/* Phase Goals Grid */
.phase-goals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.phase-goal-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.875rem;
}

.phase-goal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.phase-goal-icon {
  font-size: 1rem;
}

.phase-goal-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}

.phase-goal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.phase-goal-item {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  line-height: 1.4;
}

.goal-bullet {
  color: rgba(var(--accent-rgb), 0.7);
  flex-shrink: 0;
}

/* Phase Focus Areas */
.phase-focus-areas {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.focus-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.focus-icon {
  font-size: 1rem;
}

.focus-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.focus-value {
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

/* Pillars Section */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.pillar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  gap: 0.5rem;
  transition: all 0.15s ease;
}

.pillar-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pillar-icon {
  font-size: 1.75rem;
}

.pillar-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--os-text-primary);
}

.pillar-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin: 0;
}

/* Win Condition Section */
.win-section .northstar-section-title {
  margin-bottom: 1rem;
}

.win-timeline {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.8);
  background: rgba(251, 191, 36, 0.1);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
}

.win-markers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.win-marker {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.win-marker:hover {
  background: rgba(255, 255, 255, 0.06);
}

.marker-bullet {
  color: rgba(251, 191, 36, 0.7);
  font-size: 0.625rem;
  margin-top: 0.25rem;
}

.marker-text {
  font-size: 0.875rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

/* Desires Section */
.desires-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.desire-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.desire-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.desire-name {
  font-weight: 500;
  color: var(--os-text-primary);
  font-size: 0.875rem;
}

.desire-pull {
  display: flex;
  gap: 3px;
}

.pull-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.pull-dot.active {
  background: linear-gradient(135deg, #f97316, #fbbf24);
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

.desire-feasibility {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: capitalize;
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
}

.desire-feasibility.high {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.desire-feasibility.medium {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.desire-feasibility.low {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.desire-phase {
  font-size: 0.75rem;
  color: rgba(var(--accent-rgb), 0.8);
  font-weight: 500;
}

/* Key Dates Timeline */
.dates-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 1rem;
}

.dates-timeline::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
}

.date-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0;
  position: relative;
}

.date-marker {
  position: absolute;
  left: -1rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-3px);
}

.date-item.professional .date-marker {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

.date-item.life .date-marker {
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

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

.date-value {
  font-family: monospace;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  min-width: 60px;
}

.date-event {
  font-size: 0.875rem;
  color: var(--os-text-secondary);
}

/* North Star Footer */
.northstar-footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.northstar-updated {
  margin: 0;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

/* ================================================
   ROADMAP VIEW - Video Game Style
   ================================================ */

.roadmap-view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0; /* Important for flex children to scroll */
}

.roadmap-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--os-text-muted);
}

/* Hero - The Arc */
.roadmap-hero {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 16px;
  padding: 1.5rem;
}

.arc-journey {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.arc-node {
  flex: 1;
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
}

.arc-node.past {
  background: rgba(107, 114, 128, 0.2);
}

.arc-node.present {
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.arc-node.future {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.arc-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
  margin-bottom: 0.5rem;
}

.arc-node.present .arc-label {
  color: var(--accent);
}

.arc-node.future .arc-label {
  color: #fbbf24;
}

.arc-node p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

.arc-connector {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}

.arc-line {
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.arc-arrow {
  font-size: 1rem;
  color: var(--os-text-muted);
}

.arc-quote {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-style: italic;
  font-size: 0.875rem;
  color: rgba(251, 191, 36, 0.8);
}

/* Phase Progress Path */
.roadmap-path {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  overflow-x: auto;
  flex-shrink: 0; /* Don't shrink this section */
}

.path-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: min-content;
}

.path-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.path-phase:hover {
  transform: translateY(-4px);
}

.phase-node {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phase-icon {
  font-size: 2rem;
  z-index: 2;
}

.phase-progress-ring {
  position: absolute;
  inset: 0;
}

.phase-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2.5;
}

.ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.path-phase.current .ring-fill {
  stroke: #fbbf24;
}

.phase-percent {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.625rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.8);
  color: var(--accent);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

.path-phase.current .phase-percent {
  color: #fbbf24;
}

.phase-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.phase-number {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
}

.phase-label .phase-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--os-text-primary);
}

.path-phase.current .phase-label .phase-name {
  color: #fbbf24;
}

.path-phase.selected .phase-label .phase-name {
  color: var(--accent);
}

.phase-time {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.path-connector {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.5rem;
  margin-top: 28px;
}

.connector-line {
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.path-connector.unlocked .connector-line {
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.3));
}

.connector-lock {
  font-size: 0.75rem;
  color: var(--os-text-hint);
}

.path-connector.unlocked .connector-lock {
  color: var(--accent);
}

/* Phase Detail */
.roadmap-phase-detail {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  padding: 1.25rem;
}

.phase-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.phase-title-group {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.phase-big-icon {
  font-size: 2.5rem;
}

.phase-title-group h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.phase-title-group .phase-focus {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--os-text-muted);
}

.phase-stats {
  display: flex;
  gap: 1.25rem;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
}

/* Milestones Grid */
.milestones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.milestone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  position: relative;
  transition: all 0.2s ease;
}

.milestone-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.milestone-card.complete {
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.08);
}

.milestone-card.in-progress {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}

.milestone-card.locked {
  opacity: 0.5;
}

.milestone-status {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.status-icon {
  font-size: 0.75rem;
}

.milestone-card.complete .status-icon {
  color: #4ade80;
}

.milestone-card.in-progress .status-icon {
  color: #fbbf24;
}

.milestone-card.locked .status-icon {
  color: var(--os-text-hint);
}

.milestone-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.milestone-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
  margin-bottom: 0.25rem;
}

.milestone-desc {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--os-text-muted);
  line-height: 1.4;
}

/* Roadmap Sections */
.roadmap-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
}

.roadmap-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.roadmap-section-header.clickable {
  cursor: pointer;
}

.roadmap-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0;
}

/* Becoming Inner Path */
.becoming-path {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.becoming-node {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  position: relative;
}

.becoming-node.complete {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.becoming-node.current {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.becoming-node.emerging {
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.becoming-node.future {
  opacity: 0.5;
}

.becoming-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.becoming-icon {
  font-size: 1.25rem;
}

.becoming-number {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--os-text-muted);
}

.becoming-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.becoming-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}

.becoming-energy {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.becoming-work {
  font-size: 0.625rem;
  font-style: italic;
  color: rgba(var(--accent-rgb), 0.7);
}

.becoming-connector {
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  position: absolute;
  right: -16px;
  top: 50%;
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.product-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 1rem;
}

.product-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.product-icon {
  font-size: 1.5rem;
}

.product-name {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--os-text-primary);
}

.product-role {
  font-size: 0.6875rem;
  color: rgba(var(--accent-rgb), 0.8);
}

.product-desc {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.product-phases {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.product-phase {
  display: flex;
  gap: 0.5rem;
  font-size: 0.6875rem;
}

.pp-num {
  font-weight: 700;
  color: var(--os-text-muted);
  min-width: 20px;
}

.pp-text {
  color: var(--os-text-secondary);
}

/* Flywheel */
.flywheel-section {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.08), rgba(var(--accent-rgb), 0.08));
}

.flywheel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 1rem;
  padding: 1rem;
}

.flywheel-node {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.flywheel-icon {
  font-size: 1.25rem;
}

.flywheel-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--os-text-primary);
}

.flywheel-arrow {
  color: rgba(74, 222, 128, 0.6);
  font-size: 1rem;
  margin: 0 0.25rem;
}

.flywheel-loop {
  font-size: 1.5rem;
  color: rgba(74, 222, 128, 0.5);
  margin-left: 0.5rem;
}

/* Roadmap Footer */
.roadmap-footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.roadmap-updated {
  margin: 0;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

/* ================================================
   SCROLLBAR STYLING
   ================================================ */

/* All scrollable views */
.becoming-tree-content::-webkit-scrollbar,
.becoming-detail-content::-webkit-scrollbar,
.becoming-edit-form::-webkit-scrollbar,
.council-messages::-webkit-scrollbar,
.becoming-view::-webkit-scrollbar,
.journey-view::-webkit-scrollbar,
.strategy-view::-webkit-scrollbar,
.northstar-view::-webkit-scrollbar,
.roadmap-view::-webkit-scrollbar {
  width: 5px;
}

.becoming-tree-content::-webkit-scrollbar-track,
.becoming-detail-content::-webkit-scrollbar-track,
.becoming-edit-form::-webkit-scrollbar-track,
.council-messages::-webkit-scrollbar-track,
.becoming-view::-webkit-scrollbar-track,
.journey-view::-webkit-scrollbar-track,
.strategy-view::-webkit-scrollbar-track,
.northstar-view::-webkit-scrollbar-track,
.roadmap-view::-webkit-scrollbar-track {
  background: transparent;
}

.becoming-tree-content::-webkit-scrollbar-thumb,
.becoming-detail-content::-webkit-scrollbar-thumb,
.becoming-edit-form::-webkit-scrollbar-thumb,
.council-messages::-webkit-scrollbar-thumb,
.becoming-view::-webkit-scrollbar-thumb,
.journey-view::-webkit-scrollbar-thumb,
.strategy-view::-webkit-scrollbar-thumb,
.northstar-view::-webkit-scrollbar-thumb,
.roadmap-view::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.becoming-tree-content::-webkit-scrollbar-thumb:hover,
.becoming-detail-content::-webkit-scrollbar-thumb:hover,
.becoming-edit-form::-webkit-scrollbar-thumb:hover,
.council-messages::-webkit-scrollbar-thumb:hover,
.becoming-view::-webkit-scrollbar-thumb:hover,
.journey-view::-webkit-scrollbar-thumb:hover,
.strategy-view::-webkit-scrollbar-thumb:hover,
.northstar-view::-webkit-scrollbar-thumb:hover,
.roadmap-view::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ==================== CONTEXT VIEW ==================== */

.context-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.context-loading,
.context-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  color: var(--os-text-muted);
}

.context-loading .spinning {
  animation: spin 1s linear infinite;
}

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

.context-error button {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--os-text-secondary);
  cursor: pointer;
}

.context-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.context-mode-tabs {
  display: flex;
  gap: 0.5rem;
}

.context-mode-tab {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.context-mode-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.context-mode-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.context-stats {
  display: flex;
  gap: 0.5rem;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
  margin-left: auto;
}

.context-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.context-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

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

.context-sections-list {
  width: 420px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.context-section-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.15s ease;
}

.context-section-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.context-section-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-left: 3px solid var(--accent);
}

.context-section-title {
  font-size: 0.875rem;
  color: var(--os-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.context-section-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.context-section-source {
  font-size: 0.7rem;
  opacity: 0.6;
}

.context-section-size {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.context-section-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.context-section-header {
  margin-bottom: 1rem;
}

.context-content-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.context-section-source-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.context-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.context-source-badge.file {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.context-source-badge.dynamic {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.context-source-badge.agent {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.context-source-badge.mobile {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.context-source-path {
  font-family: 'SF Mono', monospace;
  font-size: 0.7rem;
  color: var(--os-text-muted);
}

.context-source-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  font-style: italic;
}

/* Legend in placeholder */
.context-legend {
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.context-legend h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  font-weight: 500;
}

.context-legend-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.context-legend-item:last-child {
  margin-bottom: 0;
}

.context-content-text {
  margin: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
  flex: 1;
}

.context-content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  gap: 1.5rem;
  color: var(--os-text-muted);
}

.context-content-placeholder p {
  margin: 0.5rem 0;
}

.context-hint {
  font-size: 0.875rem;
  max-width: 400px;
}

/* Prompt summary header */
.context-prompt-summary {
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.context-prompt-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  margin-bottom: 0.35rem;
}

.context-prompt-total {
  font-size: 0.75rem;
  color: var(--os-text-hint);
  font-family: 'SF Mono', monospace;
}

/* Summary grid cards */
.context-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.context-summary-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left-width: 3px;
}

.context-summary-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

.context-summary-card.agent {
  border-left-color: #a78bfa;
}

.context-summary-card.dynamic {
  border-left-color: #fbbf24;
}

.context-summary-card.file {
  border-left-color: #4ade80;
}

.context-summary-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.context-summary-icon {
  font-size: 0.9rem;
}

.context-summary-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text-secondary);
  flex: 1;
}

.context-summary-size {
  font-size: 0.75rem;
  font-family: 'SF Mono', monospace;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.context-summary-desc {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin-bottom: 0.25rem;
}

.context-summary-count {
  font-size: 0.7rem;
  color: var(--os-text-hint);
}

.context-select-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--os-text-hint);
  margin: 0;
}

/* Grouped Sections View */
.context-sections-grouped {
  padding: 0.5rem;
}

.context-section-group {
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.context-section-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem 0.25rem 1rem;
}

.context-group-stats {
  font-size: 0.7rem;
  color: var(--os-text-muted);
}

.context-group-desc {
  margin: 0 0 0.5rem 0;
  padding: 0 1rem;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.context-sections-grouped .context-section-item {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.context-sections-grouped .context-section-item:last-child {
  border-bottom: none;
}

.context-sections-grouped .context-section-meta {
  width: 100%;
  justify-content: space-between;
}

.context-sections-grouped .context-section-path {
  font-family: 'SF Mono', monospace;
  font-size: 0.65rem;
  color: var(--os-text-hint);
}

/* Explanation in placeholder */
.context-explanation {
  text-align: left;
  max-width: 500px;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.context-explanation > p:first-child {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--os-text-secondary);
}

.context-explanation-section {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border-left: 3px solid transparent;
}

.context-explanation-section:has(.context-source-badge.agent) {
  border-left-color: var(--accent);
}

.context-explanation-section:has(.context-source-badge.dynamic) {
  border-left-color: #fbbf24;
}

.context-explanation-section:has(.context-source-badge.file) {
  border-left-color: #4ade80;
}

.context-explanation-section .context-source-badge {
  margin-bottom: 0.5rem;
}

.context-explanation-section p {
  margin: 0.25rem 0;
  font-size: 0.8rem;
  color: var(--os-text-muted);
}

.context-explanation-section code {
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  color: var(--os-text-secondary);
}

.context-explanation-size {
  font-size: 0.7rem !important;
  color: var(--os-text-muted) !important;
  font-style: italic;
}

.context-explanation-note {
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem !important;
  color: var(--os-text-muted) !important;
}

/* Scrollbar for context view */
.context-sections-list::-webkit-scrollbar,
.context-section-content::-webkit-scrollbar {
  width: 6px;
}

.context-sections-list::-webkit-scrollbar-track,
.context-section-content::-webkit-scrollbar-track {
  background: transparent;
}

.context-sections-list::-webkit-scrollbar-thumb,
.context-section-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.context-sections-list::-webkit-scrollbar-thumb:hover,
.context-section-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* View mode tabs (Sections / Files) */
.context-view-tabs {
  display: flex;
  gap: 0.25rem;
}

.context-view-tab {
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--os-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.context-view-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.context-view-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* Files list */
.context-files-list {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.context-files-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--os-text-muted);
  padding: 2rem;
}

.context-files-empty code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--os-text-secondary);
}

.context-file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: default;
  flex-wrap: wrap;
}

.context-file-item .context-file-key {
  flex: 1;
  min-width: 0;
}

.context-file-item .context-file-path {
  display: none;
}

.context-file-item.missing {
  opacity: 0.5;
  border-color: rgba(239, 68, 68, 0.3);
}

.context-file-key {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--os-text-primary);
  min-width: 140px;
}

.context-file-path {
  flex: 1;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.8125rem;
  color: var(--os-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-file-size {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  min-width: 50px;
  text-align: right;
}

.context-file-item.missing .context-file-size {
  color: rgba(239, 68, 68, 0.7);
}

.context-file-source {
  font-size: 1rem;
  min-width: 24px;
  text-align: center;
}

.context-file-item.dynamic {
  background: rgba(56, 189, 248, 0.05);
  border-color: rgba(56, 189, 248, 0.15);
}

.context-file-item.dynamic .context-file-size {
  color: rgba(56, 189, 248, 0.7);
}

.context-file-item.clickable {
  cursor: pointer;
}

.context-file-item.clickable:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.context-file-item.clickable:hover .context-file-path {
  color: var(--accent);
}

.context-file-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.context-file-item.selected .context-file-key {
  color: var(--accent);
}

/* File content panel */
.context-file-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.context-file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

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

.context-file-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.context-file-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.context-file-btn.save {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}

.context-file-btn.save:hover {
  background: rgba(var(--accent-rgb), 0.3);
}

.context-file-btn.cancel {
  color: var(--os-text-muted);
}

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

.context-file-path-display {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  margin-bottom: 0.75rem;
  font-family: 'SF Mono', monospace;
}

.context-file-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1;
  color: var(--os-text-muted);
}

.context-file-editor {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.75rem;
  color: var(--os-text-primary);
  font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  resize: none;
  overflow: auto;
}

.context-file-editor:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* Context Flow View */
.context-flow {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.context-flow-diagram {
  max-width: 700px;
  margin: 0 auto;
}

.context-flow-diagram h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--os-text-primary);
  text-align: center;
}

.flow-stage {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
}

.flow-stage.final {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.flow-stage.messages {
  background: rgba(56, 189, 248, 0.05);
  border-color: rgba(56, 189, 248, 0.2);
  border-style: dashed;
}

.flow-stage-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.flow-stage-num {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.flow-stage-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--os-text-primary);
  flex: 1;
}

.flow-stage-content {
  padding-left: 36px;
}

.flow-stage-content p {
  margin: 0 0 0.5rem 0;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
}

.flow-stage-content code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: 'SF Mono', monospace;
}

.flow-detail {
  font-style: italic;
  color: var(--os-text-muted) !important;
}

.flow-arrow {
  text-align: center;
  font-size: 1.25rem;
  color: var(--os-text-hint);
  padding: 0.25rem 0;
}

.flow-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.flow-section-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.flow-section-tag:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.flow-section-tag.editable {
  border-color: rgba(74, 222, 128, 0.2);
}

.flow-section-tag.editable:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.flow-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.flow-item {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  padding: 0.4rem 0.6rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.flow-item strong {
  color: var(--os-text-secondary);
  min-width: 100px;
}

.flow-item span {
  color: var(--os-text-muted);
}

.flow-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--os-text-muted);
}

.flow-stats strong {
  color: var(--accent);
}

/* Full Prompt View */
.context-full-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem;
}

.context-full-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.context-full-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

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

.context-full-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: var(--os-text-muted);
}

.context-full-stats strong {
  color: var(--os-text-secondary);
}

.context-full-text {
  flex: 1;
  margin: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
}

/* =========================
   Parts Map
   ========================= */

.becoming-map-card {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.becoming-map-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.4), rgba(var(--accent-rgb), 0.1), transparent);
}

.becoming-map-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(var(--accent-rgb), 0.7);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

/* Parts grid — chips wrap in a flow layout */
.becoming-map-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.becoming-map-chip {
  flex: 1 1 calc(50% - 4px);
  min-width: 160px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

.becoming-map-chip:hover {
  border-color: rgba(var(--accent-rgb), 0.2);
}

.becoming-map-chip-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.becoming-map-chip-emoji {
  font-size: 1rem;
  line-height: 1;
}

.becoming-map-chip-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--os-text-primary);
  letter-spacing: 0.01em;
}

.becoming-map-chip-expression {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.45;
  font-style: italic;
}

/* Throne status */
.becoming-map-throne {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.45;
}

.becoming-map-throne.present {
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.12);
}

.becoming-map-throne.absent {
  background: rgba(251, 146, 60, 0.06);
  border: 1px solid rgba(251, 146, 60, 0.12);
}

.becoming-map-throne-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Stirring — something new emerging */
.becoming-map-stirring {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 8px;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  line-height: 1.45;
}

.becoming-map-stirring-label {
  color: rgba(var(--accent-rgb), 0.6);
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

/* Proposed new parts/facets */
.becoming-map-proposed {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(250, 204, 21, 0.04);
  border: 1px solid rgba(250, 204, 21, 0.1);
  border-radius: 8px;
}

.becoming-map-proposed-label {
  color: rgba(250, 204, 21, 0.6);
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.becoming-map-proposed-item {
  padding: 6px 0;
}

.becoming-map-proposed-item + .becoming-map-proposed-item {
  border-top: 1px solid rgba(250, 204, 21, 0.06);
}

.becoming-map-proposed-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.becoming-map-proposed-type {
  font-size: 0.58rem;
  color: rgba(250, 204, 21, 0.45);
  background: rgba(250, 204, 21, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.becoming-map-proposed-count {
  font-size: 0.58rem;
  color: rgba(250, 204, 21, 0.5);
  background: rgba(250, 204, 21, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: auto;
}

.becoming-map-proposed-count.highlighted {
  color: rgba(245, 158, 11, 0.9);
  background: rgba(245, 158, 11, 0.15);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.2);
}

.becoming-map-proposed-item.recurring {
  background: rgba(245, 158, 11, 0.06);
  border-radius: 6px;
  padding: 6px 8px;
}

/* Loading skeleton with shimmer */
.becoming-map-card.becoming-map-loading {
  background: rgba(var(--accent-rgb), 0.03);
}

.becoming-map-card.becoming-map-loading .becoming-map-header {
  color: rgba(var(--accent-rgb), 0.4);
}

.becoming-map-skeleton {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.becoming-map-skeleton-chip {
  height: 52px;
  flex: 1 1 calc(50% - 4px);
  min-width: 140px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.04) 25%, rgba(var(--accent-rgb), 0.08) 50%, rgba(var(--accent-rgb), 0.04) 75%);
  background-size: 200% 100%;
  animation: becoming-map-shimmer 1.5s infinite ease-in-out;
}

.becoming-map-skeleton-chip.short {
  flex: 0 1 calc(50% - 4px);
}

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

/* Parts Map — inline in council carousel */
.council-theme-parts {
  --council-accent: rgba(var(--accent-rgb), 0.25);
  --council-accent-text: #c084fc;
  --council-accent-bg: rgba(var(--accent-rgb), 0.08);
}

.becoming-map-card-inline {
  padding: 0.5rem 0;
}

.becoming-map-card-inline .becoming-map-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--os-text-muted);
  margin-bottom: 0.5rem;
}

.becoming-map-card-inline .becoming-map-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.6rem;
}

.becoming-map-card-inline .becoming-map-chip {
  flex: 0 1 calc(50% - 3px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
}

.becoming-map-card-inline .becoming-map-chip-top {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.becoming-map-card-inline .becoming-map-chip-emoji {
  font-size: 0.85rem;
}

.becoming-map-card-inline .becoming-map-chip-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.becoming-map-card-inline .becoming-map-chip-expression {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  font-style: italic;
  line-height: 1.3;
}

.becoming-map-card-inline .becoming-map-throne {
  font-size: 0.68rem;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.becoming-map-card-inline .becoming-map-throne.present {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.becoming-map-card-inline .becoming-map-throne.absent {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.becoming-map-card-inline .becoming-map-stirring,
.becoming-map-card-inline .becoming-map-proposed {
  font-size: 0.68rem;
  color: var(--os-text-muted);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  margin-bottom: 0.4rem;
}

.becoming-map-card-inline .becoming-map-proposed {
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.1);
}

.becoming-map-card-inline .becoming-map-skeleton {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.becoming-map-card-inline .becoming-map-skeleton-chip {
  flex: 0 1 calc(50% - 3px);
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: becoming-map-shimmer 1.5s infinite ease-in-out;
}

.council-dot.becoming-dot {
  background: rgba(var(--accent-rgb), 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  width: 6px;
  height: 6px;
}

.council-dot.becoming-dot.active {
  background: #c084fc;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}

/* Parts Map — toggle button */
.becoming-map-section {
  padding: 0 0.875rem 0.5rem;
}

button.becoming-map-toggle {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.7rem;
  font-weight: 500;
  font-family: inherit;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.becoming-map-toggle:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: #c084fc;
}

.becoming-map-toggle.expanded {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: #c084fc;
}

.becoming-map-toggle.loading {
  animation: becoming-map-edge-pulse 2s infinite ease-in-out;
}

.becoming-map-toggle-count {
  background: rgba(var(--accent-rgb), 0.2);
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 0.6rem;
}

.becoming-map-toggle-chevron {
  transition: transform 0.2s;
  opacity: 0.5;
}

.becoming-map-toggle-chevron.flipped {
  transform: rotate(180deg);
}

/* Parts Map — floating edge button (unused, kept for reference) */
button.becoming-map-edge-btn {
  position: absolute !important;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 0 8px 8px 0;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-left: 1px solid rgba(var(--accent-rgb), 0.15);
  color: #c084fc;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
  pointer-events: auto;
}

button.becoming-map-edge-btn:hover {
  opacity: 1;
  background: rgba(var(--accent-rgb), 0.35);
}

button.becoming-map-edge-btn.loading {
  animation: becoming-map-edge-pulse 2s infinite ease-in-out;
}

button.becoming-map-edge-btn.ready {
  opacity: 0.8;
}

@keyframes becoming-map-edge-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}

/* ============================================================
   LIGHT THEME OVERRIDES — Comprehensive
   ============================================================
   Strategy: Use broad cascade overrides to catch the 400+ white
   text declarations, then targeted overrides for special elements.
   ============================================================ */

/* ---- BROAD CASCADE: catch all white text/borders/backgrounds ---- */

/* All text inside the app: force dark colors via inheritance */
body.light .becoming-app {
  /* Use a solid light canvas so chat cards don't sit on a gray host surface. */
  background: #ffffff !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Keep Companion surfaces on the same white base for visual consistency. */
body.light .becoming-app .becoming-content,
body.light .becoming-app .council-chat,
body.light .becoming-app .council-chat-body,
body.light .becoming-app .council-chat-main,
body.light .becoming-app .council-messages {
  background: #ffffff !important;
}

/* Nuclear override: force ALL text inside the app to dark.
   This catches the 400+ selectors with hardcoded rgba(255,255,255,...).
   Specific elements with intentional colors get restored below. */
body.light .becoming-app *:not(.section-icon):not([class*="emoji"]):not([class*="badge"]) {
  color: inherit !important;
}

/* Restore specific colored text */
body.light .becoming-app .definition-core { color: var(--accent) !important; }
body.light .becoming-app .spiral-mantra { color: rgba(30, 140, 200, 0.95) !important; }
body.light .becoming-app .north-star-statement { color: rgba(180, 130, 0, 0.95) !important; }
body.light .becoming-app .heritage-identity { color: rgba(180, 130, 0, 0.95) !important; }
body.light .becoming-app .north-star-wins li::before { color: rgba(22, 163, 74, 0.8) !important; }
body.light .becoming-app .definition-essence li::before { color: var(--accent) !important; }
body.light .becoming-app .council-mode-tab.active { color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important; }
body.light .becoming-app .journey-nav-btn.active { color: var(--accent) !important; }
body.light .becoming-app .phase-nav-btn.active { color: var(--accent) !important; }
body.light .becoming-app .context-view-tab.active { color: var(--accent) !important; }
body.light .becoming-app .context-mode-tab.active { color: var(--accent) !important; }
body.light .becoming-app .council-becoming-map-btn { color: var(--accent) !important; }
body.light .becoming-app .council-stop-btn { color: #dc2626 !important; }
body.light .becoming-app .becoming-edit-actions .save-btn { color: var(--accent) !important; }
body.light .becoming-app .becoming-map-header { color: rgba(var(--accent-rgb), 0.8) !important; }
body.light .becoming-app .flow-stats strong { color: var(--accent) !important; }
body.light .becoming-app .keystone-label { color: var(--os-text-muted, rgba(60, 60, 80, 0.55)) !important; }
body.light .becoming-app .council-toggle-count { color: white !important; }
body.light .becoming-app .council-toggle-btn.active { color: var(--accent) !important; }

/* ---- COUNCIL CARDS: light theme ---- */
body.light .becoming-app .council-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
  color: rgba(20, 20, 30, 0.9) !important;
}
body.light .becoming-app .council-card-header {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .becoming-app .council-card-duration {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .becoming-app .council-card-time {
  color: rgba(60, 60, 80, 0.3) !important;
}
body.light .becoming-app .council-card-model {
  color: rgba(20, 20, 30, 0.6) !important;
}
body.light .becoming-app .council-card-position {
  color: rgba(60, 60, 80, 0.45) !important;
}
body.light .becoming-app .council-card-body {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .becoming-app .council-card-nav button {
  color: rgba(60, 60, 80, 0.5) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .becoming-app .council-card-nav button:hover:not(:disabled) {
  color: rgba(20, 20, 30, 0.8) !important;
  background: rgba(0, 0, 0, 0.08) !important;
}
body.light .becoming-app .council-card-footer {
  background: rgba(0, 0, 0, 0.015) !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}
body.light .becoming-app .council-nav-divider {
  background: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .council-nav-arrow {
  color: rgba(0, 0, 0, 0.35) !important;
}
body.light .becoming-app .council-nav-arrow:hover:not(:disabled) {
  color: rgba(0, 0, 0, 0.7) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
body.light .becoming-app .council-floating-nav-label {
  color: rgba(0, 0, 0, 0.4) !important;
}
body.light .becoming-app .council-floating-nav-label.is-picked {
  color: #16a34a !important;
}
body.light .becoming-app .council-floating-nav-count {
  color: rgba(0, 0, 0, 0.3) !important;
}
body.light .becoming-app .council-floating-pick {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.18) !important;
}
body.light .becoming-app .council-card-rating .council-star {
  color: rgba(0, 0, 0, 0.15) !important;
}
body.light .becoming-app .council-card-rating .council-star.filled {
  color: #d97706 !important;
}
body.light .becoming-app .council-dot {
  background: rgba(0, 0, 0, 0.12) !important;
}
body.light .becoming-app .council-dot.active {
  background: var(--council-accent-text, #a78bfa) !important;
}
/* Light theme model accent colors — darker for readability on white */
body.light .becoming-app .council-theme-claude { --council-accent: rgba(var(--accent-rgb), 0.2); --council-accent-text: var(--accent-dark, #7c3aed); --council-accent-bg: rgba(var(--accent-rgb), 0.06); }
body.light .becoming-app .council-theme-gemini { --council-accent: rgba(14, 116, 188, 0.2); --council-accent-text: #0e74bc; --council-accent-bg: rgba(14, 116, 188, 0.06); }
body.light .becoming-app .council-theme-openai { --council-accent: rgba(22, 163, 74, 0.2); --council-accent-text: #16a34a; --council-accent-bg: rgba(22, 163, 74, 0.06); }
body.light .becoming-app .council-theme-deepseek { --council-accent: rgba(180, 130, 0, 0.2); --council-accent-text: #b48200; --council-accent-bg: rgba(180, 130, 0, 0.06); }
body.light .becoming-app .council-theme-grok { --council-accent: rgba(220, 38, 38, 0.2); --council-accent-text: #dc2626; --council-accent-bg: rgba(220, 38, 38, 0.06); }
body.light .becoming-app .council-theme-default { --council-accent: rgba(0, 0, 0, 0.1); --council-accent-text: rgba(60, 60, 80, 0.7); --council-accent-bg: rgba(0, 0, 0, 0.03); }

/* Light theme tab styles */
body.light .becoming-app .council-sidebar {
  background: rgba(0, 0, 0, 0.025) !important;
  border-right-color: rgba(0, 0, 0, 0.05) !important;
}
body.light .becoming-app .council-tab:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .council-tab-action {
  background: rgba(240, 240, 244, 0.97) !important;
  color: rgba(20, 20, 30, 0.6) !important;
}
body.light .becoming-app .council-tab-action:hover {
  color: rgba(20, 20, 30, 0.9) !important;
  background: rgba(220, 220, 228, 0.98) !important;
}
body.light .becoming-app .council-tab-action.stop {
  color: rgba(185, 28, 28, 0.8) !important;
}
body.light .becoming-app .council-tab-action.stop:hover {
  color: rgba(185, 28, 28, 1) !important;
  background: rgba(254, 226, 226, 0.98) !important;
}
body.light .becoming-app .council-tab-dot {
  background: rgba(0, 0, 0, 0.18) !important;
}
body.light .becoming-app .council-tab-dot.active {
  background: var(--council-accent-text, #7c3aed) !important;
}
body.light .becoming-app .council-tab-dot.unviewed {
  background: rgba(0, 0, 0, 0.55) !important;
}
body.light .becoming-app .council-tab-dot.loading {
  background: rgba(0, 0, 0, 0.12) !important;
}
body.light .becoming-app .council-tab-dot.error {
  background: rgba(185, 28, 28, 0.75) !important;
}
body.light .becoming-app .council-tab-dot.cancelled {
  background: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .council-tab-parts {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
  color: rgba(var(--accent-rgb), 0.5) !important;
}
body.light .becoming-app .council-card-loading {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .becoming-app .council-loading-title {
  color: rgba(20, 20, 30, 0.35) !important;
}
body.light .becoming-app .council-loading-count {
  color: rgba(20, 20, 30, 0.6) !important;
  background: rgba(20, 20, 30, 0.05) !important;
  border-color: rgba(20, 20, 30, 0.08) !important;
}
body.light .becoming-app .council-loading-stop-btn {
  border-color: rgba(220, 38, 38, 0.24) !important;
  background: rgba(220, 38, 38, 0.08) !important;
  color: rgba(220, 38, 38, 0.9) !important;
}
body.light .becoming-app .council-loading-stop-btn:hover {
  background: rgba(220, 38, 38, 0.16) !important;
  border-color: rgba(220, 38, 38, 0.34) !important;
}
body.light .becoming-app .council-loading-model-name {
  color: rgba(20, 20, 30, 0.35) !important;
}
body.light .becoming-app .council-loading-model-row.done .council-loading-model-name {
  color: rgba(20, 20, 30, 0.65) !important;
}
body.light .becoming-app .council-loading-model-bar {
  background: rgba(20, 20, 30, 0.06) !important;
}
body.light .becoming-app .council-loading-model-row.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(20, 20, 30, 0.12), transparent) !important;
}
body.light .becoming-app .council-loading-model-row.council-theme-claude.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.2), transparent) !important;
}
body.light .becoming-app .council-loading-model-row.council-theme-openai.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(22, 163, 74, 0.2), transparent) !important;
}
body.light .becoming-app .council-loading-model-row.council-theme-gemini.pending .council-loading-model-fill {
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.2), transparent) !important;
}
body.light .becoming-app .council-loading-model-fill.complete {
  background: rgba(22, 163, 74, 0.3) !important;
}
/* Council card markdown text in light mode */
body.light .becoming-app .council-card-body p,
body.light .becoming-app .council-card-body li,
body.light .becoming-app .council-card-body span {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .becoming-app .council-card-body strong {
  color: rgba(20, 20, 30, 0.95) !important;
}
body.light .becoming-app .council-card-body em {
  color: rgba(var(--accent-rgb), 0.85) !important;
}
body.light .becoming-app .council-card-body code {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(20, 20, 30, 0.8) !important;
}
body.light .becoming-app .council-card-body a {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .council-card-body blockquote {
  border-left-color: rgba(var(--accent-rgb), 0.3) !important;
  color: rgba(60, 60, 80, 0.7) !important;
}

body.light .becoming-app .council-gem-card-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(60, 60, 80, 0.45) !important;
}

body.light .becoming-app .council-gem-card-btn:hover {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent) !important;
}

/* ---- COUNCIL SETTINGS MENU: light theme ---- */
body.light .becoming-app .council-settings-menu {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
body.light .becoming-app .council-settings-btn {
  color: rgba(20, 20, 30, 0.7) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .council-settings-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(20, 20, 30, 0.9) !important;
}
body.light .becoming-app .council-settings-btn.council-active {
  background: rgba(var(--accent-rgb), 0.12) !important;
  color: var(--accent-dark, #7c3aed) !important;
  border-color: rgba(var(--accent-rgb), 0.25) !important;
}
body.light .becoming-app .settings-council-toggle-row {
  color: rgba(20, 20, 30, 0.8) !important;
}
body.light .becoming-app .settings-council-toggle-row:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-council-chip {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(20, 20, 30, 0.7) !important;
}
body.light .becoming-app .settings-council-manage {
  background: rgba(var(--accent-rgb), 0.1) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .settings-section-header {
  color: rgba(60, 60, 80, 0.5) !important;
}
body.light .becoming-app .settings-current-model {
  color: rgba(20, 20, 30, 0.9) !important;
}
body.light .becoming-app .settings-divider {
  background: rgba(0, 0, 0, 0.08) !important;
}
body.light .becoming-app .settings-provider-header {
  color: rgba(20, 20, 30, 0.7) !important;
}
body.light .becoming-app .settings-provider-header:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-provider-header.has-selection {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .settings-model-option {
  color: rgba(20, 20, 30, 0.75) !important;
}
body.light .becoming-app .settings-model-option:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-model-option.selected {
  background: rgba(var(--accent-rgb), 0.1) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .settings-toggle-row {
  color: rgba(20, 20, 30, 0.8) !important;
}
body.light .becoming-app .settings-toggle-row:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-toggle {
  background: rgba(0, 0, 0, 0.12) !important;
}
body.light .becoming-app .settings-toggle.on {
  background: rgba(var(--accent-rgb), 0.45) !important;
}
body.light .becoming-app .settings-toggle-thumb {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}
body.light .becoming-app .settings-voice-select {
  color: rgba(20, 20, 30, 0.7) !important;
}
body.light .becoming-app .settings-voice-select:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-voice-option:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .becoming-app .settings-voice-option.selected {
  background: rgba(var(--accent-rgb), 0.08) !important;
}
body.light .becoming-app .settings-voice-option .voice-name {
  color: rgba(20, 20, 30, 0.9) !important;
}
body.light .becoming-app .settings-voice-option.selected .voice-name {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .settings-voice-option .voice-desc {
  color: rgba(60, 60, 80, 0.45) !important;
}
body.light .becoming-app .settings-hint {
  color: rgba(60, 60, 80, 0.35) !important;
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}

/* ---- COUNCIL CONTEXT MENUS: light theme ---- */
/* Thread context menu is inside .becoming-app */
body.light .becoming-app .council-thread-context-menu {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .council-thread-context-menu button {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .becoming-app .council-thread-context-menu button:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .becoming-app .council-thread-context-menu button.danger {
  color: #dc2626 !important;
}
body.light .becoming-app .council-thread-context-menu button.danger:hover {
  background: rgba(220, 38, 38, 0.06) !important;
}
/* Message context menu is portalled to body */
body.light .council-message-context-menu {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}
body.light .council-message-context-menu button {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .council-message-context-menu button:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .council-message-context-menu button.danger {
  color: #dc2626 !important;
}
body.light .council-message-context-menu button.danger:hover {
  background: rgba(220, 38, 38, 0.06) !important;
}
body.light .council-context-timestamp {
  color: rgba(60, 60, 80, 0.4) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* ---- COUNCIL STATS & GEMS POPOVERS: light theme (portalled to body) ---- */
body.light .council-stats-popover {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
body.light .council-stats-header {
  color: rgba(20, 20, 30, 0.8) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .council-stats-header button {
  color: rgba(60, 60, 80, 0.3) !important;
}
body.light .council-stats-header button:hover {
  color: rgba(60, 60, 80, 0.7) !important;
}
body.light .council-stats-tab {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .council-stats-tab:hover {
  color: rgba(60, 60, 80, 0.65) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .council-stats-tab.active {
  color: rgba(20, 20, 30, 0.85) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
body.light .council-stats-top {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .council-stats-kpi-value {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-stats-kpi-label {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .council-stats-highlights {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .council-stats-highlight {
  background: rgba(0, 0, 0, 0.03) !important;
}
body.light .council-stats-highlight-label {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .council-stats-highlight-value {
  color: rgba(20, 20, 30, 0.75) !important;
}
body.light .council-stats-model-name {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .council-stats-pick-pct {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-stats-model-details {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .council-stats-bar {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.light .council-stats-empty {
  color: rgba(60, 60, 80, 0.35) !important;
}
/* Gems items */
body.light .council-gem-item {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}
body.light .council-gem-item:hover {
  border-color: rgba(var(--accent-rgb), 0.2) !important;
}
body.light .council-gem-text {
  color: rgba(20, 20, 30, 0.85) !important;
}
body.light .council-gem-model {
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-gem-time {
  color: rgba(60, 60, 80, 0.35) !important;
}
body.light .council-gem-save {
  color: rgba(60, 60, 80, 0.2) !important;
}
body.light .council-gem-save:hover {
  color: var(--accent-dark, #7c3aed) !important;
  background: rgba(var(--accent-rgb), 0.08) !important;
}
body.light .council-gem-delete {
  color: rgba(60, 60, 80, 0.2) !important;
}
body.light .council-gem-delete:hover {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.06) !important;
}
body.light .council-gem-question {
  color: rgba(60, 60, 80, 0.35) !important;
  border-top-color: rgba(0, 0, 0, 0.05) !important;
}
body.light .council-gem-question span {
  color: rgba(60, 60, 80, 0.55) !important;
}

/* ---- COUNCIL MULTI-PICKER: light theme (portalled to body) ---- */
body.light .council-multi-picker {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
body.light .council-multi-picker-header {
  color: rgba(60, 60, 80, 0.6) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .council-multi-picker-header button {
  color: rgba(60, 60, 80, 0.3) !important;
}
body.light .council-multi-picker-header button:hover {
  color: rgba(60, 60, 80, 0.7) !important;
}
body.light .council-multi-picker-group + .council-multi-picker-group {
  border-top-color: rgba(0, 0, 0, 0.05) !important;
}
body.light .council-multi-picker-provider {
  color: rgba(60, 60, 80, 0.35) !important;
}
body.light .council-multi-picker-item {
  color: rgba(20, 20, 30, 0.7) !important;
}
body.light .council-multi-picker-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .council-multi-picker-item.selected {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-multi-picker-item input[type="checkbox"] {
  border-color: rgba(0, 0, 0, 0.2) !important;
}
body.light .council-multi-picker-item.selected input[type="checkbox"] {
  background: var(--accent-dark, #7c3aed) !important;
  border-color: var(--accent-dark, #7c3aed) !important;
}

body.light .council-member-picker-item {
  color: rgba(20, 20, 30, 0.7) !important;
}
body.light .council-member-picker-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
body.light .council-member-picker-item.selected {
  background: rgba(124, 58, 237, 0.08) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-member-picker-model {
  color: rgba(20, 20, 30, 0.35) !important;
}
body.light .council-member-picker-item input[type="checkbox"] {
  border-color: rgba(0, 0, 0, 0.2) !important;
}
body.light .council-member-picker-item.selected input[type="checkbox"] {
  background: var(--accent-dark, #7c3aed) !important;
  border-color: var(--accent-dark, #7c3aed) !important;
}
body.light .council-member-picker-empty {
  color: rgba(20, 20, 30, 0.3) !important;
}
body.light .council-multi-picker-section-label {
  color: rgba(20, 20, 30, 0.3) !important;
}
body.light .council-multi-picker-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* ---- COUNCIL EDIT BAR: light theme ---- */
body.light .becoming-app .council-edit-bar {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent-dark, #7c3aed) !important;
}
body.light .becoming-app .council-edit-bar button {
  color: rgba(60, 60, 80, 0.4) !important;
}
body.light .becoming-app .council-edit-bar button:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(20, 20, 30, 0.8) !important;
}

/* ---- TYPOGRAPHY: explicit color overrides by opacity tier ---- */

/* Primary text (headings, titles, strong content) — was rgba(255,255,255,0.85-0.97) */
body.light .becoming-app h1,
body.light .becoming-app h2,
body.light .becoming-app h3,
body.light .becoming-app h4,
body.light .becoming-app h5,
body.light .becoming-app strong,
body.light .becoming-section-title,
body.light .journey-section-title,
body.light .becoming-section-subtitle,
body.light .council-chat-title h3,
body.light .context-content-title,
body.light .context-flow-diagram h3,
body.light .context-full-header h3,
body.light .flow-stage-title,
body.light .glossary-title,
body.light .detail-panel-title,
body.light .detail-title,
body.light .north-star-statement {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Secondary text (body, descriptions, list items) — was rgba(255,255,255,0.5-0.8) */
body.light .becoming-section-desc,
body.light .journey-section-desc,
body.light .becoming-loading,
body.light .flow-stage-content p,
body.light .flow-detail,
body.light .flow-stats,
body.light .flow-item span,
body.light .context-explanation > p:first-child,
body.light .context-explanation-section p,
body.light .context-group-desc,
body.light .heritage-origin,
body.light .north-star-wins h4 {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.7)) !important;
}

/* Muted text (labels, sizes, hints, badges) — was rgba(255,255,255,0.3-0.5) */
body.light .context-section-size,
body.light .context-group-stats,
body.light .context-stats,
body.light .context-explanation-size,
body.light .context-explanation-note,
body.light .context-files-empty,
body.light .flow-arrow,
body.light .council-status,
body.light .council-last-message,
body.light .council-streaming-indicator {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}

/* ---- SIDEBAR ---- */
body.light .becoming-sidebar {
  background: rgba(0, 0, 0, 0.03) !important;
  border-right-color: rgba(0, 0, 0, 0.1) !important;
}

body.light .becoming-app .sidebar-nav-item {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .becoming-app .sidebar-nav-item:hover {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

body.light .becoming-app .sidebar-nav-item.active {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-left-color: var(--accent) !important;
}

body.light .becoming-app .sidebar-toggle {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}

body.light .becoming-app .sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.8)) !important;
}

/* ---- TOP BAR & BORDERS ---- */
body.light .becoming-top-bar {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* ---- BACKGROUNDS: dark bg → light bg ---- */
/* Cards and sections: clean white backgrounds */
body.light .story-card,
body.light .vow-card,
body.light .wound-card,
body.light .leak-card,
body.light .reframe-card,
body.light .key-becoming-card,
body.light .echo-card,
body.light .glossary-card,
body.light .glossary-term-card,
body.light .arc-card,
body.light .becoming-map-card,
body.light .becoming-map-chip,
body.light .flow-stage,
body.light .flow-item,
body.light .keystone-vow {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* Sections with colored tints — lighter versions */
body.light .heritage-section,
body.light .north-star-section {
  background: rgba(251, 191, 36, 0.06) !important;
}

body.light .story-summary-section,
body.light .definition-section {
  background: rgba(var(--accent-rgb), 0.05) !important;
}

body.light .spiral-section {
  background: rgba(56, 189, 248, 0.05) !important;
}

/* Context/explanation panels */
body.light .context-explanation,
body.light .context-explanation-section,
body.light .context-section-group,
body.light .context-full-text {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* Slightly deeper backgrounds for panels/lists */
body.light .context-sections-list,
body.light .context-files-list,
body.light .council-thread-sidebar,
body.light .detail-panel,
body.light .becoming-detail,
body.light .becoming-detail-panel {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* Override any dark backgrounds from base styles */
body.light .becoming-app .becoming-detail-icon,
body.light .becoming-app .flow-stage-num {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* ---- BORDERS: white → dark ---- */
/* All borders: white → subtle dark */
body.light .becoming-app *:not(.story-card):not(.wound-card):not(.leak-card):not([class*="badge"]) {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Cards keep their colored left borders */
body.light .story-card.origin { border-color: rgba(0, 0, 0, 0.08) !important; border-left-color: rgba(74, 222, 128, 0.5) !important; }
body.light .story-card.rupture { border-color: rgba(0, 0, 0, 0.08) !important; border-left-color: rgba(239, 68, 68, 0.5) !important; }
body.light .story-card.pattern { border-color: rgba(0, 0, 0, 0.08) !important; border-left-color: rgba(251, 191, 36, 0.5) !important; }
body.light .story-card.now { border-color: rgba(0, 0, 0, 0.08) !important; border-left-color: rgba(var(--accent-rgb), 0.5) !important; }

body.light .context-sections-list,
body.light .context-files-list,
body.light .context-section-item,
body.light .context-file-item,
body.light .council-thread-sidebar {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ---- BUTTONS & INTERACTIVE ---- */
body.light .becoming-app button:not([class*="council-send"]):not([class*="save"]):not(.active) {
  border-color: rgba(0, 0, 0, 0.12) !important;
}

body.light .context-view-tab,
body.light .context-mode-tab,
body.light .context-refresh-btn,
body.light .context-error button,
body.light .context-file-btn,
body.light .journey-nav-btn,
body.light .phase-nav-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .context-view-tab:hover,
body.light .context-mode-tab:hover,
body.light .context-refresh-btn:hover,
body.light .context-file-btn:hover,
body.light .journey-nav-btn:hover,
body.light .phase-nav-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .journey-nav-btn.active,
body.light .phase-nav-btn.active {
  color: var(--accent) !important;
}

/* ---- CODE elements ---- */
body.light .becoming-app code,
body.light .flow-stage-content code,
body.light .context-explanation-section code,
body.light .context-files-empty code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}

/* ---- LIST ITEMS text ---- */
body.light .story-card p,
body.light .north-star-wins li,
body.light .vow-card p,
body.light .wound-card p,
body.light .leak-card p,
body.light .heritage-origin {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .flow-item strong,
body.light .context-full-stats strong {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}

/* ---- Section hover backgrounds ---- */
body.light .context-section-item:hover,
body.light .context-file-item.clickable:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ---- Scrollbar ---- */
body.light .becoming-view::-webkit-scrollbar-thumb,
body.light .context-sections-list::-webkit-scrollbar-thumb,
body.light .context-section-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}

/* ---- SPECIAL: elements with colored backgrounds that need specific text ---- */
/* North Star uses golden text — keep it, just ensure readability */
body.light .north-star-statement {
  color: rgba(180, 130, 0, 0.95) !important;
}

body.light .heritage-identity {
  color: rgba(180, 130, 0, 0.95) !important;
}

/* Parts map chip names */
body.light .becoming-map-chip-name {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .becoming-map-chip-expression {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.7)) !important;
}

body.light .becoming-map-header {
  color: rgba(var(--accent-rgb), 0.8) !important;
}

/* Flow stage number circles */
body.light .flow-stage-num {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

/* Flow section tags */
body.light .flow-section-tag {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

/* Context header */
body.light .context-header {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

/* Explanation note divider */
body.light .context-explanation-note {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}

/* Full prompt text */
body.light .context-full-text {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.88)) !important;
}

/* Context file keys */
body.light .context-file-key {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .context-file-path {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .context-file-size {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}

body.light .context-sections-grouped .context-section-path {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.45)) !important;
}

body.light .context-sections-grouped .context-section-item {
  border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}

/* Loading state */
body.light .context-loading {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

/* Chat header */
body.light .council-chat-header {
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.08)) !important;
}

body.light .council-mode-tabs {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.light .council-mode-tab {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .council-mode-tab:hover {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .council-mode-tab.active {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

body.light .council-chat-title h3 {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Model select */
body.light .council-model-select {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(20, 20, 30, 0.9) !important;
}

body.light .council-model-select option,
body.light .council-model-select optgroup {
  background: #fff !important;
  color: #1a1a1a !important;
}

/* Clear / control buttons */
body.light .council-clear-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(30, 30, 45, 0.8) !important;
}

body.light .council-clear-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Chat intro */
body.light .council-chat-intro {
  border-bottom-color: var(--os-glass-border, rgba(0, 0, 0, 0.06)) !important;
}

body.light .council-chat-intro p {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

/* Load earlier button */
body.light .council-load-earlier {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .council-load-earlier:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

/* Messages */
body.light .council-message-content {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-message.assistant .council-message-content {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-message.user .council-message-content {
  background: rgba(var(--accent-rgb), 0.1) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Markdown in messages */
body.light .council-message-content .md-bold {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.95)) !important;
}

body.light .council-message-content .md-italic {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .council-message-content .md-code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-message-content .md-h1,
body.light .council-message-content .md-h2,
body.light .council-message-content .md-h3 {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.95)) !important;
}

/* Message actions */
body.light .council-message-actions button {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}

body.light .council-message-actions button:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Parts map button */
body.light .council-becoming-map-btn {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-color: rgba(var(--accent-rgb), 0.2) !important;
  color: var(--accent) !important;
}

/* Status / timestamp */
body.light .council-status {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}

body.light .council-last-message {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}

/* Input form */
body.light .council-input-form {
  border-top-color: var(--os-glass-border, rgba(0, 0, 0, 0.08)) !important;
}

body.light .council-input-form textarea {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: var(--os-glass-border, rgba(0, 0, 0, 0.1)) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-input-form textarea:focus {
  background: #fff !important;
  border-color: rgba(var(--accent-rgb), 0.4) !important;
}

body.light .council-input-form textarea::placeholder {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}

/* Undo toast */
body.light .council-undo-toast {
  background: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.8)) !important;
}

/* Toggle buttons in header */
body.light .council-chat-controls .council-toggle-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(40, 40, 55, 0.7) !important;
}

body.light .council-chat-controls .council-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-chat-controls .council-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.1) !important;
  border-color: rgba(var(--accent-rgb), 0.25) !important;
}

/* Context panel */
body.light .council-context-panel {
  background: rgba(0, 0, 0, 0.02) !important;
  border-left-color: var(--os-glass-border, rgba(0, 0, 0, 0.08)) !important;
}

/* Stop button */
body.light .council-stop-btn {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #dc2626 !important;
}

/* Streaming indicator */
body.light .council-streaming-indicator {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}

/* Model select optgroup */
body.light .council-model-select optgroup {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

/* =============================================
   CONTEXT VIEW - Light Theme
   ============================================= */

/* Loading / error states */
body.light .context-loading,
body.light .context-error {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .context-error button {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Header */
body.light .context-header {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

/* Mode tabs */
body.light .context-mode-tab {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .context-mode-tab:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Stats */
body.light .context-stats {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

/* Refresh button */
body.light .context-refresh-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .context-refresh-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* View tabs (Flow, Sections, Files, Full) */
body.light .context-view-tab {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .context-view-tab:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Sections sidebar */
body.light .context-sections-list {
  border-right-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

body.light .context-section-item {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

body.light .context-section-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.light .context-section-title {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .context-section-size {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}

/* Section content */
body.light .context-content-title {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.95)) !important;
}

/* Section groups */
body.light .context-section-group {
  background: rgba(0, 0, 0, 0.03) !important;
}

body.light .context-group-stats {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}

body.light .context-group-desc {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .context-sections-grouped .context-section-item {
  border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}

body.light .context-sections-grouped .context-section-path {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.45)) !important;
}

/* Prompt summary (light theme) */
body.light .context-prompt-title {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .context-prompt-total {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.45)) !important;
}

body.light .context-summary-card {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light .context-summary-card:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

body.light .context-summary-label {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}

body.light .context-summary-size {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

body.light .context-summary-desc,
body.light .context-summary-count,
body.light .context-select-hint {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.45)) !important;
}

body.light .context-prompt-summary {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* Files sidebar */
body.light .context-files-list {
  border-right-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

body.light .context-files-empty {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .context-files-empty code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}

body.light .context-file-item {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

body.light .context-file-size {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}

body.light .context-file-path {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .context-file-key {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* File content */
body.light .context-file-content {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .context-file-header {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .context-file-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .context-file-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Full prompt view */
body.light .context-full-header h3 {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .context-full-stats {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .context-full-stats strong {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .context-full-text {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.88)) !important;
}

/* Flow view */
body.light .context-flow-diagram h3 {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .flow-stage {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light .flow-stage-num {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .flow-stage-title {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .flow-stage-content p {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .flow-stage-content code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}

body.light .flow-detail {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.55)) !important;
}

body.light .flow-arrow {
  color: rgba(0, 0, 0, 0.2) !important;
}

body.light .flow-section-tag {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .flow-item {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.light .flow-item strong {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}

body.light .flow-item span {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .flow-stats {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

/* Explanation (flow view intro) */
body.light .context-explanation {
  background: rgba(0, 0, 0, 0.03) !important;
}

body.light .context-explanation > p:first-child {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .context-explanation-section {
  background: rgba(0, 0, 0, 0.02) !important;
}

body.light .context-explanation-section p {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .context-explanation-section code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.85)) !important;
}

body.light .context-explanation-size {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}

body.light .context-explanation-note {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.55)) !important;
}

/* ---- EDIT FORMS ---- */
body.light .becoming-edit-form label span {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .becoming-edit-form input,
body.light .becoming-edit-form textarea,
body.light .becoming-edit-form select {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .becoming-edit-form input:focus,
body.light .becoming-edit-form textarea:focus,
body.light .becoming-edit-form select:focus {
  background: #fff !important;
}

body.light .becoming-edit-form select option {
  background: #fff !important;
  color: #1a1a1a !important;
}

body.light .becoming-edit-actions {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}

body.light .becoming-edit-actions .cancel-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .becoming-edit-actions .cancel-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* ---- DETAIL PANEL ---- */
body.light .becoming-detail-header {
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

body.light .becoming-detail-icon {
  background: rgba(0, 0, 0, 0.05) !important;
}

body.light .becoming-detail-empty {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}

body.light .becoming-detail-section h4 {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.7)) !important;
}

/* ---- COUNCIL INPUT ---- */
body.light .council-input-form textarea {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-input-form textarea:focus {
  background: #fff !important;
  border-color: rgba(var(--accent-rgb), 0.4) !important;
}

body.light .council-input-form textarea::placeholder {
  color: var(--os-text-hint, rgba(80, 80, 100, 0.5)) !important;
}

body.light .council-input-form {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* ---- COUNCIL EDIT BAR ---- */
body.light .council-edit-bar {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent-dark, #7c3aed) !important;
}

body.light .council-edit-bar span {
  color: inherit !important;
}

body.light .council-edit-bar button {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}

body.light .council-edit-bar button:hover {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* ---- COUNCIL MESSAGES ---- */
body.light .council-message-content {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-message.assistant .council-message-content {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-message.user .council-message-content {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-message-content .md-bold {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.95)) !important;
}

body.light .council-message-content .md-italic {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .council-message-content .md-code {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-message-content .md-h1,
body.light .council-message-content .md-h2,
body.light .council-message-content .md-h3 {
  color: var(--os-text-primary, rgba(20, 20, 30, 0.95)) !important;
}

body.light .council-message-actions button {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.5)) !important;
}

body.light .council-message-actions button:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* ---- COUNCIL HEADER ---- */
body.light .council-chat-header {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

body.light .council-mode-tabs {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.light .council-mode-tab {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .council-mode-tab:hover {
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

body.light .council-mode-tab.active {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

body.light .council-model-select {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(20, 20, 30, 0.9) !important;
}

body.light .council-model-select option,
body.light .council-model-select optgroup {
  background: #fff !important;
  color: #1a1a1a !important;
}

/* Clear / control buttons */
body.light .council-clear-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(30, 30, 45, 0.8) !important;
}

body.light .council-clear-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

/* Toggle buttons in header */
body.light .council-chat-controls .council-toggle-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(40, 40, 55, 0.7) !important;
}

body.light .council-chat-controls .council-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .council-chat-controls .council-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.1) !important;
  border-color: rgba(var(--accent-rgb), 0.25) !important;
}

/* Chat intro */
body.light .council-chat-intro {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

body.light .council-chat-intro p {
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

/* Load earlier button */
body.light .council-load-earlier {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--os-text-muted, rgba(60, 60, 80, 0.6)) !important;
}

body.light .council-load-earlier:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--os-text-secondary, rgba(40, 40, 55, 0.78)) !important;
}

/* Parts map button */
body.light .council-becoming-map-btn {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-color: rgba(var(--accent-rgb), 0.2) !important;
  color: var(--accent) !important;
}

/* Undo toast */
body.light .council-undo-toast {
  background: rgba(234, 179, 8, 0.1) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.8)) !important;
}

/* Context panel */
body.light .council-context-panel {
  background: rgba(0, 0, 0, 0.02) !important;
  border-left-color: rgba(0, 0, 0, 0.08) !important;
}

/* Stop button */
body.light .council-stop-btn {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #dc2626 !important;
}

/* ---- THREAD SIDEBAR ---- */
body.light .council-thread-sidebar {
  border-right-color: rgba(0, 0, 0, 0.08) !important;
}

body.light .council-thread-item {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

body.light .council-thread-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.light .cal-week-header {
  color: rgba(0, 0, 0, 0.3) !important;
}

body.light .cal-day-header {
  color: rgba(0, 0, 0, 0.5) !important;
}

body.light .cal-day-empty {
  color: rgba(0, 0, 0, 0.25) !important;
}

body.light .cal-session-item:hover,
body.light .cal-fragment-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.light .cal-item-name {
  color: rgba(20, 20, 30, 0.85) !important;
}

body.light .cal-item-name.fragment-name {
  color: rgba(20, 20, 30, 0.45) !important;
}

body.light .cal-item-meta {
  color: rgba(20, 20, 30, 0.35) !important;
}

body.light .fragment-dot {
  color: rgba(20, 20, 30, 0.25) !important;
}

/* ---- GLOSSARY ---- */
body.light .glossary-search input {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--os-text-primary, rgba(20, 20, 30, 0.92)) !important;
}

body.light .glossary-search input:focus {
  background: #fff !important;
}

/* ---- ARCHIVE / TIMELINE ---- */
body.light .archive-item,
body.light .timeline-item {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ---- SETTINGS within app ---- */
body.light .becoming-app .settings-item {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* ============================================================
   COMPANION SESSION STYLES
   ============================================================ */

/* --- Session Controls in Header --- */

.session-active-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.session-badge {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.session-badge.begin {
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.12);
  color: rgba(74, 222, 128, 0.7);
}
.session-badge.begin:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.12);
  color: rgba(74, 222, 128, 1);
}
.session-badge.begin:disabled { opacity: 0.6; cursor: default; }
.session-badge.active {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  color: rgba(74, 222, 128, 0.9);
}
.session-badge.active:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.9);
}
.session-badge.synthesizing {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--os-text-muted);
  cursor: default;
}

.session-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: session-pulse-anim 2s ease-in-out infinite;
}

@keyframes session-pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* --- Session Labels (ultra-minimal markers) --- */

.session-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 2px;
  font-size: 0.58rem;
  color: var(--os-text-hint);
  letter-spacing: 0.04em;
  user-select: none;
}

.session-label.session-label-start {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 28px 0 16px;
  padding: 0;
  width: 100%;
  position: relative;
}

/* Top rule */
.session-label.session-label-start::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(74, 222, 128, 0.1) 20%, rgba(74, 222, 128, 0.1) 80%, transparent);
}

/* Opening question pill */
.session-label.session-label-start > span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--council-bg, #111);
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(74, 222, 128, 0.1);
  color: rgba(74, 222, 128, 0.45);
  font-size: 0.72rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}

.session-label-start.collapsed {
  margin-top: 0;
  padding-top: 2px;
}

.session-opening-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.1);
  color: rgba(74, 222, 128, 0.55);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.session-opening-loader {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}

.session-opening-loader-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.1);
  color: rgba(74, 222, 128, 0.6);
  font-size: 0.75rem;
  font-weight: 500;
}

.session-label-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 8px 0 24px;
  padding: 0;
  position: relative;
}

/* Horizontal rule through center */
.session-label-end::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(74, 222, 128, 0.12) 20%, rgba(74, 222, 128, 0.12) 80%, transparent);
}

/* Session info pill */
.session-label-end > span {
  position: relative;
  background: var(--council-bg, #111);
  padding: 3px 14px;
  border-radius: 20px;
  border: 1px solid rgba(74, 222, 128, 0.12);
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(74, 222, 128, 0.5);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.session-end-journal {
  margin-top: 2px;
  width: 100%;
  max-width: 480px;
}
.session-end-journal summary {
  font-size: 0.62rem;
  color: rgba(74, 222, 128, 0.3);
  cursor: pointer;
  text-align: center;
  padding: 1px 0;
}
.session-end-journal summary:hover {
  color: rgba(74, 222, 128, 0.5);
}

.session-journal-md {
  text-align: left;
  padding: 8px 12px;
  margin-top: 4px;
  background: rgba(74, 222, 128, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(74, 222, 128, 0.06);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--os-text-muted);
  max-width: 500px;
}

/* --- In-Session Message Styling --- */
/* Messages within a session get a subtle green left accent + tinted background */

.council-message.in-session {
  border-left: 2px solid rgba(74, 222, 128, 0.12);
  margin-left: 2px;
  padding-left: 12px;
  background: rgba(74, 222, 128, 0.02);
  border-radius: 0 12px 12px 0;
}

/* --- Forgotten Session Prompt --- */

.session-forgotten-prompt {
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  margin: 4px 0;
}

.session-forgotten-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 10px;
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

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

.session-forgotten-actions button {
  all: unset;
  box-sizing: border-box;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.session-forgotten-actions button:first-child {
  background: rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 0.9);
}
.session-forgotten-actions button:first-child:hover {
  background: rgba(74, 222, 128, 0.25);
}

.session-forgotten-actions button:last-child {
  background: rgba(255, 255, 255, 0.06);
  color: var(--os-text-muted);
}
.session-forgotten-actions button:last-child:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* --- Light Theme Session Overrides --- */

body.light .becoming-app .session-badge.begin {
  background: rgba(22, 163, 74, 0.05) !important;
  border-color: rgba(22, 163, 74, 0.1) !important;
  color: rgba(22, 163, 74, 0.65) !important;
}
body.light .becoming-app .session-badge.begin:hover:not(:disabled) {
  background: rgba(22, 163, 74, 0.1) !important;
  color: rgba(22, 163, 74, 1) !important;
}
body.light .becoming-app .session-badge.active {
  background: rgba(22, 163, 74, 0.08) !important;
  border-color: rgba(22, 163, 74, 0.15) !important;
  color: rgba(22, 163, 74, 0.85) !important;
}
body.light .becoming-app .session-badge.active:hover {
  background: rgba(220, 38, 38, 0.06) !important;
  border-color: rgba(220, 38, 38, 0.12) !important;
  color: rgba(220, 38, 38, 0.75) !important;
}
body.light .becoming-app .session-pulse {
  background: #16a34a !important;
}
body.light .becoming-app .session-label {
  color: rgba(60, 60, 80, 0.2) !important;
}
body.light .becoming-app .session-label-start > span {
  color: rgba(22, 163, 74, 0.5) !important;
  background: #ffffff !important;
  border-color: rgba(22, 163, 74, 0.1) !important;
}
body.light .becoming-app .session-label-end > span {
  color: rgba(22, 163, 74, 0.5) !important;
  background: #ffffff !important;
  border-color: rgba(22, 163, 74, 0.1) !important;
}
body.light .becoming-app .session-opening-badge {
  background: rgba(22, 163, 74, 0.06) !important;
  border-color: rgba(22, 163, 74, 0.12) !important;
  color: rgba(22, 163, 74, 0.55) !important;
}
body.light .becoming-app .session-opening-loader-inner {
  background: rgba(22, 163, 74, 0.06) !important;
  border-color: rgba(22, 163, 74, 0.12) !important;
  color: rgba(22, 163, 74, 0.6) !important;
}
body.light .becoming-app .session-end-journal summary {
  color: rgba(22, 163, 74, 0.3) !important;
}
body.light .becoming-app .session-journal-md {
  background: rgba(22, 163, 74, 0.02) !important;
  border-color: rgba(22, 163, 74, 0.05) !important;
  color: rgba(60, 60, 80, 0.55) !important;
}
body.light .becoming-app .council-message.in-session {
  border-left-color: rgba(22, 163, 74, 0.1) !important;
  background: rgba(22, 163, 74, 0.018) !important;
}
body.light .becoming-app .session-forgotten-card {
  background: rgba(22, 163, 74, 0.04) !important;
  border-color: rgba(22, 163, 74, 0.12) !important;
  color: rgba(60, 60, 80, 0.6) !important;
}
body.light .becoming-app .session-forgotten-actions button:first-child {
  background: rgba(22, 163, 74, 0.1) !important;
  color: rgba(22, 163, 74, 0.85) !important;
}
body.light .becoming-app .session-forgotten-actions button:last-child {
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(60, 60, 80, 0.5) !important;
}

/* --- Session Control Buttons --- */

/* Override fixed 38px from .council-input-form button for the pill buttons */
.council-input-form .session-begin-btn,
.council-input-form .session-end-btn {
  width: auto !important;
  height: auto !important;
}

.session-begin-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 0.8);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.session-begin-btn:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.15);
  color: rgba(74, 222, 128, 1);
}
.session-begin-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.session-end-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.18);
  color: rgba(239, 68, 68, 0.85);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.session-end-btn:hover {
  background: rgba(239, 68, 68, 0.18);
}

.session-saving-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 0.72rem;
  color: var(--os-text-muted);
  font-weight: 500;
}

/* --- Inline Confirm Dialog (replaces window.confirm) --- */

.council-inline-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.council-inline-confirm {
  background: rgba(30, 30, 40, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  max-width: 340px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.council-inline-confirm p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--os-text-secondary);
  line-height: 1.5;
}

.council-inline-confirm-actions {
  display: flex;
  gap: 0.625rem;
  justify-content: flex-end;
}

.council-inline-confirm-cancel {
  padding: 0.45rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--os-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}

.council-inline-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.06);
}

.council-inline-confirm-ok {
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  border: none;
  background: rgba(248, 113, 113, 0.25);
  color: rgba(248, 113, 113, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.council-inline-confirm-ok:hover {
  background: rgba(248, 113, 113, 0.35);
}

/* Light theme */
body.light .council-inline-confirm {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .council-inline-confirm p {
  color: rgba(0, 0, 0, 0.8);
}

body.light .council-inline-confirm-cancel {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.5);
}

body.light .council-inline-confirm-cancel:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* --- End Session Confirmation Dialog --- */

.session-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: council-nav-fade-in 0.15s ease;
}

.session-confirm-dialog {
  background: rgba(25, 25, 35, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 20px 24px;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.session-confirm-dialog p {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.session-confirm-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--os-text-muted);
  margin-bottom: 16px;
}

.session-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.session-confirm-cancel {
  all: unset;
  box-sizing: border-box;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.session-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.session-confirm-end {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.9);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  cursor: pointer;
  transition: background 0.15s;
}
.session-confirm-end:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Light theme: End Session Dialog */
body.light .session-confirm-overlay {
  background: rgba(0, 0, 0, 0.25);
}
body.light .session-confirm-dialog {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}
body.light .session-confirm-dialog p {
  color: rgba(30, 30, 40, 0.9) !important;
}
body.light .session-confirm-sub {
  color: rgba(60, 60, 80, 0.5) !important;
}
body.light .session-confirm-cancel {
  color: rgba(60, 60, 80, 0.5) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .session-confirm-cancel:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(60, 60, 80, 0.8) !important;
}
body.light .session-confirm-end {
  color: rgba(220, 38, 38, 0.85) !important;
  background: rgba(220, 38, 38, 0.06) !important;
  border-color: rgba(220, 38, 38, 0.15) !important;
}
body.light .session-confirm-end:hover {
  background: rgba(220, 38, 38, 0.12) !important;
}

/* --- Session Opening Loading --- */

.session-opening-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 4px;
  font-size: 0.7rem;
  color: rgba(74, 222, 128, 0.5);
  font-weight: 500;
}

/* --- Light Theme: Companion Status Bar --- */

body.light .becoming-app .companion-status-bar {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}
body.light .becoming-app .companion-last-msg {
  color: rgba(60, 60, 80, 0.45) !important;
}
body.light .becoming-app .companion-session-time {
  color: rgba(22, 163, 74, 0.6) !important;
}
body.light .becoming-app .companion-status-bar .council-nav-divider {
  background: rgba(0, 0, 0, 0.1) !important;
}
body.light .becoming-app .session-begin-btn {
  background: rgba(22, 163, 74, 0.06) !important;
  border-color: rgba(22, 163, 74, 0.12) !important;
  color: rgba(22, 163, 74, 0.7) !important;
}
body.light .becoming-app .session-begin-btn:hover:not(:disabled) {
  background: rgba(22, 163, 74, 0.12) !important;
  color: rgba(22, 163, 74, 1) !important;
}
body.light .becoming-app .session-end-btn {
  background: rgba(220, 38, 38, 0.06) !important;
  border-color: rgba(220, 38, 38, 0.12) !important;
  color: rgba(220, 38, 38, 0.75) !important;
}
body.light .becoming-app .session-saving-indicator {
  color: rgba(60, 60, 80, 0.5) !important;
}
body.light .becoming-app .session-opening-loading {
  color: rgba(22, 163, 74, 0.5) !important;
}
/**
 * Journal App Styles
 */

/* Main Layout */
.journal-app {
  display: flex;
  height: 100%;
  background: var(--os-glass-bg-solid);
  color: var(--os-text-primary);
  position: relative;
}

/* Sidebar */
.journal-sidebar {
  width: 180px;
  flex-shrink: 0;
  padding: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--os-text-muted);
  margin: 0;
  padding: 0 0.5rem;
}

.section-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.section-button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text-primary);
}

.section-button.active {
  background: rgba(217, 119, 6, 0.2);
  color: #d97706;
}

.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.section-button.active .section-icon {
  opacity: 1;
}

.section-name {
  flex: 1;
}

.section-count {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--os-text-muted);
}

.section-button.active .section-count {
  background: rgba(217, 119, 6, 0.3);
  color: #d97706;
}

/* Filters */
.filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.5rem;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--os-text-secondary);
  cursor: pointer;
}

.filter-checkbox input {
  accent-color: #d97706;
}

/* Main Content Area */
.journal-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Timeline */
.journal-timeline {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.timeline-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.date-filter-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: rgba(217, 119, 6, 0.15);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 6px;
  color: #f59e0b;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.date-filter-badge:hover {
  background: rgba(217, 119, 6, 0.25);
  border-color: rgba(217, 119, 6, 0.5);
}

/* Journal Calendar (sidebar) */
.journal-calendar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.4rem;
}

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

.jcal-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--os-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.jcal-current-badge {
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(217, 119, 6, 0.8);
  background: rgba(217, 119, 6, 0.12);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.jcal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.jcal-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.jcal-nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.jcal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.2rem;
}

.jcal-weekday {
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--os-text-hint);
  padding: 0.15rem;
}

.jcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.jcal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: 0.65rem;
  background: transparent;
  border: none;
  color: var(--os-text-hint);
  cursor: default;
  position: relative;
  transition: all 0.15s;
  padding: 0;
}

.jcal-day.blank {
  cursor: default;
}

.jcal-day.has-content {
  color: var(--os-text-secondary);
  cursor: pointer;
}

.jcal-day.has-content:hover {
  background: rgba(255, 255, 255, 0.1);
}

.jcal-day.today {
  border: 1px solid rgba(217, 119, 6, 0.4);
  color: rgba(217, 119, 6, 0.9);
}

.jcal-day.has-content::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.6);
}

.jcal-day.today.has-content::after {
  background: rgba(217, 119, 6, 0.7);
}

.jcal-day.selected {
  background: rgba(217, 119, 6, 0.3);
  color: #f59e0b;
}

.jcal-day.selected.today {
  border-color: rgba(217, 119, 6, 0.5);
}

.refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.timeline-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.timeline-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--os-text-muted);
}

.timeline-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--os-text-muted);
  text-align: center;
  padding: 3rem;
}

.timeline-empty p {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

.timeline-empty span {
  font-size: 0.85rem;
}

/* Date Groups */
.date-group {
  margin-bottom: 1.5rem;
}

.date-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(217, 119, 6, 0.12);
}

.date-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(245, 158, 11, 0.85);
}

.date-header:hover .date-filter-icon {
  opacity: 0.5;
}

.date-filter-icon {
  opacity: 0;
  transition: opacity 0.15s ease;
  color: var(--os-text-muted);
}

.date-header.active {
  border-bottom-color: rgba(217, 119, 6, 0.3);
}

.entry-count {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.entries-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Entry Card */
/* --- Entry Card (compact timeline card) --- */

.entry-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.entry-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--os-text-hint);
  border-left-color: rgba(217, 119, 6, 0.4);
}

.entry-card.soul {
  border-left-color: rgba(239, 68, 68, 0.3);
}

.entry-card.thoughts {
  border-left-color: rgba(251, 191, 36, 0.3);
}


.entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.entry-time {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

.entry-section-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-transform: capitalize;
  font-weight: 500;
}

.entry-section-badge.soul {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.entry-section-badge.thoughts {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}


.entry-source {
  display: flex;
  align-items: center;
  opacity: 0.5;
}

.entry-source.voice {
  color: #4ade80;
  opacity: 0.8;
}

.entry-title {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0.5rem 0 0.25rem;
  color: var(--os-text-primary);
}

.entry-content {
  margin-top: 0.5rem;
}

.entry-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--os-text-secondary);
}

/* Markdown rendering inside entry cards */
.entry-text h1,
.entry-text h2,
.entry-text h3,
.entry-text h4,
.entry-text h5,
.entry-text h6 {
  margin: 0.4rem 0 0.2rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.entry-text h1 { font-size: 1rem; }
.entry-text h2 { font-size: 0.95rem; }
.entry-text h3 { font-size: 0.9rem; }
.entry-text h4,
.entry-text h5,
.entry-text h6 { font-size: 0.85rem; }

.entry-text p {
  margin: 0 0 0.3rem;
}

.entry-text p:last-child {
  margin-bottom: 0;
}

.entry-text ul,
.entry-text ol {
  margin: 0.15rem 0 0.3rem;
  padding-left: 1.25rem;
}

.entry-text li {
  margin-bottom: 0.1rem;
}

.entry-text em {
  color: var(--os-text-secondary);
  font-style: italic;
}

.entry-text strong {
  color: var(--os-text-secondary);
  font-weight: 600;
}

.entry-text code {
  font-size: 0.8rem;
  padding: 0.1rem 0.3rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: rgba(217, 119, 6, 0.9);
}

.entry-text hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0.4rem 0;
}

/* Today empty prompt */
.today-empty-prompt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  color: var(--os-text-hint);
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.today-empty-prompt:hover {
  color: rgba(217, 119, 6, 0.8);
  border-color: rgba(217, 119, 6, 0.3);
  background: rgba(217, 119, 6, 0.05);
}

/* --- Entry Dialog (modal overlay) --- */

.entry-dialog-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 2rem;
}

.entry-dialog {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  background: var(--os-context-bg);
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.entry-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.entry-dialog-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.entry-dialog-date {
  font-size: 0.8rem;
  color: var(--os-text-muted);
}

.entry-dialog-time {
  font-size: 0.8rem;
  color: var(--os-text-muted);
}

.entry-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.entry-dialog-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.entry-dialog-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-primary);
}

.entry-dialog-btn.primary {
  background: rgba(217, 119, 6, 0.2);
  border-color: rgba(217, 119, 6, 0.3);
  color: #f59e0b;
}

.entry-dialog-btn.primary:hover {
  background: rgba(217, 119, 6, 0.3);
}

.entry-dialog-btn.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.entry-dialog-title {
  padding: 0.75rem 1.25rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--os-text-primary);
  margin: 0;
}

.entry-dialog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 1.25rem 0;
}

.entry-dialog-tags.editing {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem 0;
}

.entry-dialog-tags .tags-icon {
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.entry-dialog-tags-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(217, 119, 6, 0.9);
  font-size: 0.8rem;
  font-family: inherit;
  padding: 0.25rem 0;
}

.entry-dialog-tags-input:focus {
  outline: none;
  border-bottom-color: #d97706;
}

.entry-dialog-tags-input::placeholder {
  color: var(--os-text-hint);
}

.entry-dialog-body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.entry-dialog-content {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--os-text-secondary);
}

.entry-dialog-content h1,
.entry-dialog-content h2,
.entry-dialog-content h3,
.entry-dialog-content h4,
.entry-dialog-content h5,
.entry-dialog-content h6 {
  margin: 0.75rem 0 0.35rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.entry-dialog-content h1 { font-size: 1.2rem; }
.entry-dialog-content h2 { font-size: 1.1rem; }
.entry-dialog-content h3 { font-size: 1rem; }
.entry-dialog-content h4,
.entry-dialog-content h5,
.entry-dialog-content h6 { font-size: 0.9rem; }

.entry-dialog-content p {
  margin: 0 0 0.75rem;
}

.entry-dialog-content p:last-child {
  margin-bottom: 0;
}

.entry-dialog-content ul,
.entry-dialog-content ol {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.5rem;
}

.entry-dialog-content li {
  margin-bottom: 0.2rem;
}

.entry-dialog-content em {
  color: var(--os-text-secondary);
  font-style: italic;
}

.entry-dialog-content strong {
  color: var(--os-text-primary);
  font-weight: 600;
}

.entry-dialog-content code {
  font-size: 0.85rem;
  padding: 0.1rem 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: rgba(217, 119, 6, 0.9);
}

.entry-dialog-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0.75rem 0;
}

.entry-dialog-editor {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.7;
  resize: none;
  box-sizing: border-box;
}

.entry-dialog-editor:focus {
  outline: none;
  border-color: #d97706;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.entry-tag {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  background: rgba(217, 119, 6, 0.15);
  border-radius: 4px;
  color: #d97706;
}

/* Right Panel (Calendar only) */
.journal-capture {
  width: 220px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.journal-capture > .journal-calendar {
  margin: 0.75rem 0.5rem 0;
}

/* FAB (Floating Action Button) */
.journal-fab {
  position: absolute;
  bottom: 1.5rem;
  right: 240px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #d97706;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.4);
  transition: all 0.2s ease;
  z-index: 10;
}

.journal-fab:hover {
  background: #f59e0b;
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(217, 119, 6, 0.5);
}

/* Timeline Add Entry Button */
.timeline-add-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(217, 119, 6, 0.15);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 8px;
  color: #f59e0b;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.timeline-add-btn:hover {
  background: rgba(217, 119, 6, 0.25);
  border-color: rgba(217, 119, 6, 0.5);
}

/* --- Capture Dialog --- */

.capture-dialog-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 1.5rem 2rem 5rem;
}

.capture-dialog {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  background: var(--os-context-bg);
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.capture-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.capture-dialog-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.capture-dialog-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.capture-dialog-routing-inline {
  display: flex;
  align-items: center;
  color: var(--os-text-muted);
}

.capture-dialog-routing-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: rgba(217, 119, 6, 0.15);
  border-radius: 4px;
  font-size: 0.7rem;
  color: #d97706;
  text-transform: capitalize;
}

.capture-dialog-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* EditableMarkdownBlock inside capture dialog — fill available space */
.capture-dialog-body .editable-markdown-edit-mode {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.capture-dialog-body .editable-markdown-editor-wrapper {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.capture-dialog-body .editable-markdown-editor {
  flex: 1 1 0;
  min-height: 0 !important;
}

.capture-dialog-body .editable-markdown-textarea,
.capture-dialog-body .editable-markdown-pre {
  height: 100% !important;
  min-height: 0 !important;
}

.capture-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.capture-dialog-destinations {
  display: flex;
  gap: 0.35rem;
}

.capture-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.capture-dialog-save {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: #d97706;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.capture-dialog-save:hover:not(:disabled) {
  background: #f59e0b;
}

.capture-dialog-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Voice Recorder */
.capture-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.voice-recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.record-button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  border: 2px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-button:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}

.record-button.recording {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
  }
}

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

.recording-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.audio-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
}

.audio-bar {
  width: 4px;
  background: #ef4444;
  border-radius: 2px;
  transition: height 0.1s ease;
}

.duration {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--os-text-secondary);
  font-variant-numeric: tabular-nums;
}

.transcribing-text,
.hint-text {
  font-size: 0.75rem;
  color: var(--os-text-muted);
}

/* Capture Divider */
.capture-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--os-text-hint);
  font-size: 0.75rem;
}

.capture-divider::before,
.capture-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* Text Input */
.capture-text {
  position: relative;
}

.capture-text textarea {
  width: 100%;
  padding: 0.75rem;
  padding-right: 2.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  resize: none;
}

.capture-text textarea:focus {
  outline: none;
  border-color: rgba(217, 119, 6, 0.5);
}

.capture-text textarea::placeholder {
  color: var(--os-text-muted);
}

.text-submit-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #d97706;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.text-submit-btn:hover:not(:disabled) {
  background: #f59e0b;
}

.text-submit-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Capture Preview */
.capture-preview {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.75rem;
}

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

.preview-source {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.preview-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--os-text-muted);
  cursor: pointer;
}

.preview-clear:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--os-text-secondary);
}

.preview-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--os-text-primary);
}

/* Routing Preview */
.routing-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--os-text-muted);
}

.routing-preview {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: 8px;
  padding: 0.75rem;
}

.routing-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.routing-suggestion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.routing-dest {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--os-text-primary);
}

.routing-confidence {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.routing-confidence.high {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.routing-confidence.medium {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.routing-confidence.low {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.routing-reason {
  font-size: 0.75rem;
  color: var(--os-text-muted);
  margin-top: 0.35rem;
}

/* Destination Selector */
.capture-destination {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.capture-destination label {
  font-size: 0.7rem;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.destination-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dest-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--os-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dest-option:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--os-text-hint);
}

.dest-option.selected {
  background: rgba(217, 119, 6, 0.2);
  border-color: rgba(217, 119, 6, 0.4);
  color: #d97706;
}

/* Save Button */
.capture-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #d97706;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.capture-save-btn:hover:not(:disabled) {
  background: #f59e0b;
}

.capture-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Spinning animation for loaders */
.spinning {
  animation: spin 1s linear infinite;
}

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

/* ================================ */
/* Light Theme Overrides            */
/* ================================ */

body.light .journal-sidebar {
  border-right-color: rgba(0, 0, 0, 0.08);
}

body.light .sidebar-section-title {
  color: rgba(20, 20, 30, 0.45);
}

body.light .sidebar-item {
  color: rgba(20, 20, 30, 0.72);
}

body.light .sidebar-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(20, 20, 30, 0.88);
}

body.light .sidebar-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

body.light .sidebar-count {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(20, 20, 30, 0.55);
}

body.light .sidebar-item.active .sidebar-count {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

body.light .entry-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  border-left-color: rgba(0, 0, 0, 0.12);
}

body.light .entry-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  border-left-color: rgba(var(--accent-rgb), 0.4);
}

body.light .entry-time {
  color: rgba(20, 20, 30, 0.5);
}

body.light .entry-title {
  color: rgba(20, 20, 30, 0.9);
}

body.light .entry-text {
  color: rgba(20, 20, 30, 0.78);
}

body.light .entry-text strong,
body.light .entry-text b {
  color: rgba(20, 20, 30, 0.88);
}

body.light .entry-tag {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(20, 20, 30, 0.6);
}

body.light .timeline-date-header {
  color: rgba(20, 20, 30, 0.55);
}

body.light .date-filter-badge {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(20, 20, 30, 0.65);
}

body.light .timeline-empty {
  color: rgba(20, 20, 30, 0.4);
}

/* People App */
.people-app {
  height: 100%;
  display: flex;
  overflow: hidden;
}

/* === Left Panel: People List === */
.people-list-panel {
  width: 230px;
  min-width: 180px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.people-list-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.people-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.3rem 0.45rem;
}

.people-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
}

.people-search input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.people-search svg {
  color: rgba(255, 255, 255, 0.3);
}

.people-add-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
}

.people-add-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.people-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.15rem 0;
}

.people-loading {
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
}

/* Circle groups */
.people-circle-group {
  margin-bottom: 0;
}

.people-circle-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}

.people-circle-header:hover {
  color: rgba(255, 255, 255, 0.7);
}

.people-circle-header svg {
  opacity: 0.5;
}

.people-circle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.people-circle-label {
  flex: 1;
}

.people-circle-count {
  font-size: 0.65rem;
  opacity: 0.5;
}

.people-circle-list {
  padding-left: 0;
}

.people-circle-empty {
  padding: 0.15rem 0.6rem 0.25rem 1.6rem;
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.7rem;
  font-style: italic;
}

/* Person list item */
.people-list-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem 0.3rem 1.6rem;
  cursor: pointer;
  transition: background 0.1s;
  border-radius: 4px;
  margin: 0 0.2rem;
}

.people-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.people-list-item.selected {
  background: rgba(255, 255, 255, 0.08);
}

.people-item-name {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.people-ns-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.people-item-last {
  font-size: 0.65rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Attention states */
.attention-good { color: rgba(74, 222, 128, 0.7); }
.attention-approaching { color: rgba(251, 191, 36, 0.8); }
.attention-overdue { color: rgba(248, 113, 113, 0.8); }
.attention-unknown { color: rgba(255, 255, 255, 0.3); }

/* === Right Panel: Detail === */
.people-detail-panel {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.people-empty-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.8rem;
}

/* Person Detail */
.person-detail {
  max-width: 560px;
}

.person-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.person-detail-info h2 {
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.person-detail-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.person-circle-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

.person-location {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255, 255, 255, 0.5);
}

.person-detail-actions {
  display: flex;
  gap: 0.3rem;
}

.person-detail-actions button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
}

.person-detail-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.person-detail-actions button.active {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.7);
  border-color: rgba(239, 68, 68, 0.25);
}

/* Selector rows */
.person-selector-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.person-selector-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 36px;
  flex-shrink: 0;
}

/* Circle selector */
.person-circle-selector {
  display: flex;
  gap: 0.4rem;
}

.circle-btn {
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
}

.circle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

.circle-btn.active {
  font-weight: 700;
}

/* Info fields */
.person-fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.person-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.person-field svg {
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.person-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-top: 0.25rem;
}

.person-tag {
  padding: 0.1rem 0.45rem;
  background: rgba(var(--accent-rgb), 0.12);
  color: rgba(var(--accent-rgb), 0.8);
  border-radius: 4px;
  font-size: 0.7rem;
}

/* Description (editable) */
.person-notes {
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.person-notes .editable-markdown-view {
  padding: 0.75rem;
  cursor: text;
}

.person-notes .editable-markdown-edit-mode {
  padding: 0.25rem;
}

.person-notes p {
  margin: 0;
}

/* Additional Notes Section */
.person-notes-section {
  margin-bottom: 1rem;
}

.person-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.person-notes-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.person-notes-add-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
}

.person-notes-add-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.person-note-add-form {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.person-note-add-form input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  outline: none;
}

.person-note-add-form input:focus {
  border-color: rgba(255, 255, 255, 0.2);
}

.person-note-add-form button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s;
}

.person-note-add-form button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.person-note-add-form button:disabled {
  opacity: 0.3;
  cursor: default;
}

.person-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
}

.person-note-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  transition: background 0.1s;
}

.person-note-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.person-note-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: rgba(var(--accent-rgb), 0.9);
}

.person-note-item svg:first-child {
  flex-shrink: 0;
  opacity: 0.5;
}

.person-note-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-note-delete-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
}

.person-note-item:hover .person-note-delete-btn {
  opacity: 1;
}

.person-note-delete-btn:hover {
  background: rgba(248, 113, 113, 0.15);
  color: rgba(248, 113, 113, 0.8);
}

.person-note-editor {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  margin-top: 0.25rem;
}

.person-note-editor .editable-markdown-view {
  padding: 0.75rem;
  cursor: text;
}

.person-note-editor .editable-markdown-edit-mode {
  padding: 0.25rem;
}

/* Interaction Log */
.person-log-section {
  margin-top: 1rem;
}

.person-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.person-log-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.person-last-contact {
  font-size: 0.7rem;
  font-weight: 600;
}

.person-log-add {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.person-log-add input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  outline: none;
}

.person-log-add input:focus {
  border-color: rgba(255, 255, 255, 0.2);
}

.person-log-add input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.person-log-add button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  color: rgba(56, 189, 248, 0.8);
  cursor: pointer;
  transition: all 0.15s;
}

.person-log-add button:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.25);
}

.person-log-add button:disabled {
  opacity: 0.3;
  cursor: default;
}

.person-log-entries {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.person-log-entry {
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  border-left: 2px solid rgba(255, 255, 255, 0.06);
  padding-left: 0.6rem;
}

.person-log-empty {
  padding: 1rem 0.5rem;
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
}

/* === Forms === */
.person-form {
  max-width: 480px;
}

.person-form h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.form-field {
  margin-bottom: 0.75rem;
}

.form-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: rgba(255, 255, 255, 0.2);
}

.form-field select {
  cursor: pointer;
}

.form-field textarea {
  resize: vertical;
  min-height: 60px;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

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

.form-btn-delete {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  color: rgba(248, 113, 113, 0.8);
  cursor: pointer;
  transition: all 0.15s;
}

.form-btn-delete:hover {
  background: rgba(248, 113, 113, 0.2);
  color: rgba(248, 113, 113, 1);
}

.form-btn-cancel {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s;
}

.form-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.form-btn-save {
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: rgba(56, 189, 248, 0.9);
  cursor: pointer;
  transition: all 0.15s;
}

.form-btn-save:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.25);
}

.form-btn-save:disabled {
  opacity: 0.4;
  cursor: default;
}
.media-center {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: var(--os-glass-bg-solid);
  overflow: hidden;
}

.media-center-tabs {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 0.5rem;
  flex-shrink: 0;
}

.media-center-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.media-center-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.03);
}

.media-center-tab.active {
  color: rgba(255, 255, 255, 0.95);
}

.media-center-tab-icon { font-size: 0.9rem; }
.media-center-tab-name { font-size: 0.8rem; }

.media-center-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.media-center-frame {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  inset: 0;
}

.media-center-tab.external-tab { opacity: 0.7; }
.media-center-tab.external-tab:hover { opacity: 1; }
.media-center-tab-external { font-size: 0.6rem; opacity: 0.4; margin-left: 0.1rem; }
.media-center-open-external { margin-left: auto; text-decoration: none; font-size: 0.9rem; }

/* === Movie Search === */

.movie-search {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  background: #0d0d12;
}

.movie-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.movie-search-bar input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}

.movie-search-bar input:focus {
  border-color: rgba(167, 139, 250, 0.5);
}

.movie-search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.movie-search-spinner { font-size: 0.9rem; }

.movie-search-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.movie-search-message.success { background: rgba(74, 222, 128, 0.1); color: #4ade80; }
.movie-search-message.error { background: rgba(248, 113, 113, 0.1); color: #f87171; }
.movie-search-message button {
  background: none; border: none; color: inherit; cursor: pointer; font-size: 0.8rem; opacity: 0.6;
}

.movie-search-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.movie-search-results {
  width: 320px;
  min-width: 280px;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.movie-search-empty {
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
}

/* Movie Cards */

.movie-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.1s;
}

.movie-card:hover { background: rgba(255, 255, 255, 0.04); }
.movie-card.selected { background: rgba(167, 139, 250, 0.1); }

.movie-card-poster {
  width: 45px;
  height: 67px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

.movie-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-card-no-poster {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.movie-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.movie-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-card-year {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}

.movie-card-badges {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.badge-yellow { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.badge-dim { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.35); }

/* Movie Detail */

.movie-detail {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.movie-detail-header {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.movie-detail-poster {
  width: 140px;
  height: 210px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.movie-detail-meta {
  flex: 1;
}

.movie-detail-meta h2 {
  margin: 0 0 0.25rem 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.movie-detail-year {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.75rem;
}

.movie-detail-overview {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1rem 0;
}

.movie-add-btn {
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #a78bfa;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.movie-add-btn:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.3);
}

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

.movie-status-tag {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.movie-status-tag.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.movie-status-tag.yellow { background: rgba(250, 204, 21, 0.15); color: #facc15; }

/* Releases */

.movie-releases h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: rgba(255, 255, 255, 0.7);
}

.movie-releases-empty {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  padding: 0.5rem 0;
}

.movie-best-release {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  color: #4ade80;
  margin-bottom: 1rem;
}

.movie-release-group {
  margin-bottom: 0.75rem;
}

.movie-release-quality {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.movie-release-item {
  display: flex;
  gap: 1rem;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.release-seeders { color: #4ade80; min-width: 60px; }
.release-size { min-width: 50px; }
.release-indexer { color: rgba(255, 255, 255, 0.35); }

/* === Discover Page === */

.movie-discover-wrapper {
  height: 100%;
  position: relative;
  background: #0d0d12;
  color: rgba(255, 255, 255, 0.9);
}

.movie-discover {
  height: 100%;
  overflow-y: auto;
  padding: 1.25rem;
}

/* When showing trailers, disable scroll and let trailer view fill */
.movie-discover.trailers-active {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.movie-discover.trailers-active .discover-stats {
  padding: 0.5rem 1rem 0.5rem;
  margin-bottom: 0;
  border-bottom: none;
}

.discover-loading {
  padding: 3rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
}

.discover-stats {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.stat-green { color: #4ade80; }
.stat-yellow { color: #facc15; }

.stat-clickable { cursor: pointer; border-radius: 6px; padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; transition: background 0.15s; }
.stat-clickable:hover { background: rgba(255, 255, 255, 0.06); }

.stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.discover-section {
  margin-bottom: 1.75rem;
}

.discover-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.discover-year-count {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.25);
}

.discover-expand {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(167, 139, 250, 0.6);
  margin-left: auto;
}

.discover-row {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.discover-row::-webkit-scrollbar { height: 4px; }
.discover-row::-webkit-scrollbar-track { background: transparent; }
.discover-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.discover-card {
  flex-shrink: 0;
  width: 120px;
  cursor: pointer;
  transition: transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
}

.discover-card:hover { transform: translateY(-2px); }
.discover-card:active { transform: scale(0.97); }

.discover-poster {
  width: 120px;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
}

.discover-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discover-no-poster {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.discover-rating {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.75);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.discover-downloading {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(250, 204, 21, 0.2);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.65rem;
}

.discover-card-title {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.8);
}

.discover-card-year {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
}

/* View tabs inside stats bar */

.discover-view-tabs {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  align-items: center;
}

.discover-view-tab {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.discover-view-tab:hover { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.04); }
.discover-view-tab.active { color: #a78bfa; border-color: rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.08); }

.discover-tab-count {
  background: rgba(250, 204, 21, 0.2);
  color: #facc15;
  padding: 0.05rem 0.35rem;
  border-radius: 8px;
  font-size: 0.6rem;
}

/* Not in library badge */

.discover-not-in-lib {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(167, 139, 250, 0.3);
  color: #a78bfa;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Library search */
.library-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 1rem;
  width: 100%;
}

.library-search-input {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}

.library-search-input:focus {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

.library-search-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.library-search-clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.3rem;
}

.library-search-clear:hover { color: rgba(255, 255, 255, 0.7); }

/* Decade filter */

.discover-decade-filter {
  display: flex;
  gap: 0.3rem;
  padding: 0 0 1rem;
  flex-wrap: wrap;
}

.discover-decade-filter button {
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.discover-decade-filter button:hover { color: rgba(255, 255, 255, 0.7); }
.discover-decade-filter button.active { color: #a78bfa; border-color: rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.08); }

/* Grid layout for suggestions */

.discover-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Suggestion year picker */

.suggestion-year-picker {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  align-items: center;
}

.suggestion-year-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.suggestion-year-btn:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.04); }
.suggestion-year-btn.active { color: #a78bfa; border-color: rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.1); }

.suggestion-year-input {
  width: 70px;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  color-scheme: dark;
  font-size: 0.75rem;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.suggestion-year-input::placeholder { color: rgba(255, 255, 255, 0.25); }
.suggestion-year-input::-webkit-inner-spin-button,
.suggestion-year-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.discover-empty {
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.85rem;
}

/* ── Download List ── */
.dl-section h3 { margin-bottom: 0.75rem; }

.dl-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dl-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  align-items: center;
}
.dl-item:hover { background: rgba(255, 255, 255, 0.05); }

.dl-poster {
  width: 40px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
}
.dl-poster img { width: 100%; height: 100%; object-fit: cover; }

.dl-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dl-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-year {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
}

.dl-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
}

.dl-quality {
  background: rgba(167, 139, 250, 0.15);
  color: rgba(167, 139, 250, 0.9);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dl-eta { color: rgba(56, 189, 248, 0.7); }

.dl-progress-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1px;
}

.dl-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.dl-percent {
  font-size: 0.62rem;
  font-weight: 700;
  color: #4ade80;
  text-align: right;
  margin-top: -14px;
  line-height: 1;
}

/* Queued / Warning states */
.dl-status-badge {
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.62rem;
}
.dl-status-badge.queued {
  background: rgba(250, 204, 21, 0.12);
  color: rgba(250, 204, 21, 0.85);
}
.dl-status-badge.warning {
  background: rgba(248, 113, 113, 0.12);
  color: rgba(248, 113, 113, 0.85);
}

.dl-warning { border-left: 2px solid rgba(248, 113, 113, 0.4); }

.dl-error {
  font-size: 0.62rem;
  color: rgba(248, 113, 113, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-completed { opacity: 0.7; }
.dl-completed:hover { opacity: 1; }

.dl-status-badge.completed {
  background: rgba(74, 222, 128, 0.12);
  color: rgba(74, 222, 128, 0.85);
}

.dl-time { color: rgba(255, 255, 255, 0.25); }

/* Download sub-tabs */
.dl-subtabs {
  display: flex;
  gap: 2px;
  padding: 0 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dl-subtab {
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.dl-subtab:hover { color: rgba(255, 255, 255, 0.6); }
.dl-subtab.active {
  color: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--accent, #a78bfa);
}

.dl-subtab-count {
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
}
.dl-subtab.active .dl-subtab-count {
  background: rgba(var(--accent-rgb, 167, 139, 250), 0.15);
}

/* Have badge */
.discover-badge-have {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(74, 222, 128, 0.25);
  color: #4ade80;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
}

/* === Detail Popup === */

.detail-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.detail-popup {
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 100%;
  max-width: 950px;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.detail-fanart {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.detail-fanart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.detail-fanart::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(transparent, #141418);
}

.detail-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.detail-top {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.detail-poster-img {
  width: 130px;
  height: 195px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: -60px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

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

.detail-info h2 {
  margin: 0 0 0.3rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.detail-year {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1rem;
}

.detail-meta-row {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.4rem;
}

.detail-cert {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
}

.detail-genres {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 0.75rem;
}

.detail-ratings {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.detail-rating-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.detail-rating-source {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.detail-rating-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.detail-rating-votes {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.25);
}

.detail-overview {
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1rem 0;
}

.detail-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.detail-add-btn {
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #a78bfa;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.detail-add-btn:hover:not(:disabled) { background: rgba(167, 139, 250, 0.3); }
.detail-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.detail-search-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.detail-search-btn:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.1); }

.detail-status {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.detail-status.green { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.detail-status.yellow { background: rgba(250, 204, 21, 0.12); color: #facc15; }

.detail-plex-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(229, 160, 13, 0.15);
  color: #e5a00d;
  border: 1px solid rgba(229, 160, 13, 0.25);
  transition: background 0.15s;
  cursor: pointer;
}
.detail-plex-btn:hover { background: rgba(229, 160, 13, 0.25); }

.detail-message {
  margin-top: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.72rem;
}

.detail-message.success { background: rgba(74, 222, 128, 0.1); color: #4ade80; }
.detail-message.error { background: rgba(248, 113, 113, 0.1); color: #f87171; }

.detail-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}

.detail-close:hover { background: rgba(255, 255, 255, 0.15); }

/* Inline trailer - right side of detail */
.detail-trailer-inline {
  width: 100%;
  padding: 0 1.25rem 1rem;
}

.detail-trailer-frame {
  position: relative;
  width: 100%;
  padding-bottom: 40%;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.detail-trailer-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Releases in detail popup */
.detail-releases {
  padding: 0 1.25rem 1.25rem;
}

.detail-releases h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.5rem 0;
}

.detail-releases-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.detail-release-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  align-items: center;
}

.detail-release-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

.release-q {
  min-width: 80px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.release-seeds {
  min-width: 55px;
  font-weight: 600;
}

.release-sz {
  min-width: 45px;
  color: rgba(255, 255, 255, 0.4);
}

.release-idx {
  min-width: 70px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.65rem;
}

.release-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.65rem;
}

/* ── Trailer View ── */
.trailer-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.trailer-player {
  flex: 1;
  min-height: 0;
  background: #000;
}
.trailer-player iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Bottom bar — always visible below the video */
.trailer-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem 0.75rem;
  background: #0d0d12;
}

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

.trailer-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.trailer-title:hover { text-decoration: underline; }

.trailer-year {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
}

.trailer-rating {
  font-size: 0.7rem;
  font-weight: 700;
}

.trailer-genres {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 1px;
}

.trailer-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.trailer-filters {
  display: flex;
  gap: 2px;
}

.trailer-filter-btn {
  padding: 0.25rem 0.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.62rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.trailer-filter-btn:hover { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12); }
.trailer-filter-btn.active {
  background: rgba(var(--accent-rgb, 167, 139, 250), 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.trailer-nav-btns {
  display: flex;
  gap: 3px;
}
.trailer-nav-btns button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.trailer-nav-btns button:hover { background: rgba(255, 255, 255, 0.18); }

.trailer-counter {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  min-width: 45px;
  text-align: center;
}

.trailer-watchlist-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.trailer-watchlist-btn:hover {
  background: rgba(250, 204, 21, 0.12);
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.3);
}
.trailer-watchlist-btn.active {
  background: rgba(250, 204, 21, 0.15);
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.35);
}
/* Hindsight Chat App */
.hindsight-chat-app {
  display: flex;
  height: 100%;
  background: rgba(15, 15, 20, 0.95);
  border-radius: 8px;
  overflow: hidden;
}

/* Sidebar / Tree Panel */
.hindsight-sidebar {
  width: 260px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.hindsight-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 0.95rem;
}

.hindsight-sidebar-header svg {
  color: var(--accent);
}

.hindsight-add-btn {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.hindsight-add-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}

/* Tree */
.hindsight-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.tree-node-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
}

.tree-node-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tree-node-row.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-left-color: var(--accent);
  color: rgba(255, 255, 255, 0.95);
}

.tree-node-row.idle .tree-node-icon.bank {
  opacity: 0.5;
}

.tree-node-row.active .tree-node-icon.bank {
  color: #4ade80;
}

.tree-expand-btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.tree-expand-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

.tree-expand-spacer {
  width: 18px;
  flex-shrink: 0;
}

.tree-node-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.tree-node-icon.bank {
  color: var(--accent);
}

.tree-node-icon.group {
  color: #60a5fa;
}

.tree-node-label {
  flex: 1;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-node-status {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tree-node-status.idle {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.tree-node-status.active {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.tree-node-children {
  /* Children are indented via padding-left on rows */
}

/* Bank Info */
.hindsight-bank-info {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
}

.bank-info-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.bank-info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bank-info-row {
  display: flex;
  gap: 8px;
  font-size: 0.8rem;
}

.bank-info-row .label {
  color: rgba(255, 255, 255, 0.4);
  min-width: 80px;
}

.bank-info-row .value {
  color: rgba(255, 255, 255, 0.8);
  word-break: break-all;
}

/* Empty State */
.hindsight-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

.hindsight-empty .spinning {
  animation: spin 1s linear infinite;
}

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

/* Chat Panel */
.hindsight-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hindsight-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.hindsight-chat-header svg {
  color: var(--accent);
}

/* Chat Messages */
.hindsight-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hindsight-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 40px;
}

.hindsight-chat-empty svg {
  opacity: 0.3;
  color: var(--accent);
}

.hindsight-chat-empty h3 {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
}

.hindsight-chat-empty p {
  margin: 0;
  max-width: 300px;
  line-height: 1.5;
  font-size: 0.9rem;
}

/* Chat Message */
.chat-message {
  display: flex;
  gap: 12px;
  max-width: 85%;
}

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

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

.chat-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-message.user .chat-message-avatar {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.chat-message.assistant .chat-message-avatar {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

.chat-message-content {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.chat-message.user .chat-message-content {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: rgba(255, 255, 255, 0.95);
  border-radius: 12px 12px 4px 12px;
}

.chat-message.assistant .chat-message-content {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 12px 12px 12px 4px;
}

.chat-message-content p {
  margin: 0;
}

.chat-message-content .markdown-block {
  font-size: 0.9rem;
}

.chat-message-content .markdown-block p {
  margin: 0 0 0.5em 0;
}

.chat-message-content .markdown-block p:last-child {
  margin-bottom: 0;
}

/* Memories indicator */
.chat-message-memories {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.memories-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: rgba(var(--accent-rgb), 0.8);
}

/* Typing indicator */
.chat-message.loading .chat-message-content {
  padding: 16px 20px;
}

.typing-indicator {
  display: flex;
  gap: 4px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: rgba(var(--accent-rgb), 0.6);
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out;
}

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

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

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Error */
.hindsight-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(239, 68, 68, 0.1);
  border-top: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171;
  font-size: 0.85rem;
}

/* Chat Input */
.hindsight-chat-input {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.hindsight-chat-input textarea {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9rem;
  font-family: inherit;
  resize: none;
  outline: none;
  min-height: 44px;
  max-height: 120px;
  transition: border-color 0.15s ease;
}

.hindsight-chat-input textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.hindsight-chat-input textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.hindsight-send-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  border: none;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.hindsight-send-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

.hindsight-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* No Bank Selected */
.hindsight-no-bank {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 40px;
}

.hindsight-no-bank svg {
  opacity: 0.2;
  color: var(--accent);
}

.hindsight-no-bank h2 {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
}

.hindsight-no-bank p {
  margin: 0;
  max-width: 300px;
  line-height: 1.5;
  font-size: 0.9rem;
}

/* Modal */
.hindsight-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.hindsight-modal {
  width: 90%;
  max-width: 400px;
  background: rgba(25, 25, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.hindsight-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.hindsight-modal-header svg {
  color: var(--accent);
}

.hindsight-modal-body {
  padding: 20px;
}

.hindsight-modal-body label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hindsight-modal-body label span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.hindsight-modal-body input {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease;
}

.hindsight-modal-body input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.hindsight-modal-body input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.hindsight-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hindsight-modal-footer button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hindsight-modal-footer button.cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.hindsight-modal-footer button.cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hindsight-modal-footer button.primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  border: none;
  color: white;
}

.hindsight-modal-footer button.primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

.hindsight-modal-footer button.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrollbar */
.hindsight-tree::-webkit-scrollbar,
.hindsight-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.hindsight-tree::-webkit-scrollbar-track,
.hindsight-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.hindsight-tree::-webkit-scrollbar-thumb,
.hindsight-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.hindsight-tree::-webkit-scrollbar-thumb:hover,
.hindsight-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* French Learning App */

.window-body:has(.fr-app) {
  padding: 0 !important;
}

.fr-app {
  --fr-bg: #0a0a0f;
  --fr-surface: rgba(255, 255, 255, 0.03);
  --fr-surface-hover: rgba(255, 255, 255, 0.06);
  --fr-border: rgba(255, 255, 255, 0.06);
  --fr-text: rgba(255, 255, 255, 0.9);
  --fr-text-muted: rgba(255, 255, 255, 0.4);
  --fr-accent: #a78bfa;
  --fr-accent-bg: rgba(167, 139, 250, 0.1);
}

body.light .fr-app {
  --fr-bg: #f8f8fa;
  --fr-surface: rgba(0, 0, 0, 0.03);
  --fr-surface-hover: rgba(0, 0, 0, 0.05);
  --fr-border: rgba(0, 0, 0, 0.08);
  --fr-text: rgba(0, 0, 0, 0.85);
  --fr-text-muted: rgba(0, 0, 0, 0.4);
  --fr-accent: #7c3aed;
  --fr-accent-bg: rgba(167, 139, 250, 0.08);
}

body.gray .fr-app {
  --fr-bg: #1a1a22;
  --fr-surface: rgba(255, 255, 255, 0.04);
  --fr-surface-hover: rgba(255, 255, 255, 0.07);
  --fr-border: rgba(255, 255, 255, 0.08);
  --fr-text: rgba(255, 255, 255, 0.9);
  --fr-text-muted: rgba(255, 255, 255, 0.45);
  --fr-accent: #a78bfa;
  --fr-accent-bg: rgba(167, 139, 250, 0.12);
}

.fr-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--fr-bg, #0a0a0f);
  color: var(--fr-text, rgba(255, 255, 255, 0.9));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Views with sidebar — sidebar is position:fixed, content gets left margin */
.fr-app-with-nav > .fr-sidebar-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 50;
}

.fr-app-with-nav {
  padding-left: 42px; /* sidebar collapsed width */
}

.fr-app-with-nav:has(.fr-sidebar-nav.expanded) {
  padding-left: 150px;
}

/* Fallback for browsers without :has */
@supports not (selector(:has(*))) {
  .fr-app-with-nav {
    padding-left: 42px;
  }
}

/* ── Light theme ──────────────────────────────────────────────────── */

body.light .fr-app {
  background: var(--fr-bg);
  color: var(--fr-text);
}

body.light .fr-loading {
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-topbar {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .fr-topbar-title {
  color: rgba(0, 0, 0, 0.8);
}

body.light .fr-topbar-sub {
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-back-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.45);
}

body.light .fr-back-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}

body.light .fr-session-label {
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-session-arrow {
  color: rgba(167, 139, 250, 0.4);
}

body.light .fr-stat-label {
  color: rgba(0, 0, 0, 0.3);
}

body.light .fr-session-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .fr-progress-bar {
  background: rgba(0, 0, 0, 0.08);
}

body.light .fr-session-count {
  color: rgba(0, 0, 0, 0.3);
}

body.light .fr-card-lang {
  color: rgba(0, 0, 0, 0.2);
}

body.light .fr-card-french {
  color: rgba(0, 0, 0, 0.9);
}

body.light .fr-card-pronunciation {
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-show-btn {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
}

body.light .fr-show-btn:hover {
  background: rgba(0, 0, 0, 0.09);
  color: rgba(0, 0, 0, 0.85);
}

body.light .fr-card-example {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.07);
}

body.light .fr-example-fr {
  color: rgba(0, 0, 0, 0.7);
}

body.light .fr-example-en {
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-session-done h2 {
  color: rgba(0, 0, 0, 0.85);
}

body.light .fr-session-done p {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-add-manual {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .fr-manual-input {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.85);
}

body.light .fr-manual-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

body.light .fr-manual-input:focus {
  border-color: rgba(124, 58, 237, 0.4);
}

body.light .fr-manual-btn {
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .fr-suggestion-row {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .fr-suggestion-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .fr-suggestion-word {
  color: rgba(0, 0, 0, 0.8);
}

body.light .fr-suggestion-count {
  color: rgba(0, 0, 0, 0.3);
}

body.light .fr-word-row {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .fr-word-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .fr-word-en {
  color: rgba(0, 0, 0, 0.6);
}

body.light .fr-word-arrow {
  color: rgba(0, 0, 0, 0.2);
}

body.light .fr-word-fr {
  color: rgba(0, 0, 0, 0.85);
}

body.light .fr-badge.scheduled {
  color: rgba(0, 0, 0, 0.25);
}

body.light .fr-delete-btn {
  color: rgba(0, 0, 0, 0.2);
}

body.light .fr-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

body.light .fr-empty-small {
  color: rgba(0, 0, 0, 0.25);
}

/* ── Loading ──────────────────────────────────────────────────────── */

.fr-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

/* ── Shared topbar ────────────────────────────────────────────────── */

.fr-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.fr-topbar-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
}

.fr-topbar-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.fr-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.fr-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

/* ── Home ─────────────────────────────────────────────────────────── */

.fr-app-home {
  background: linear-gradient(180deg, var(--fr-accent-bg) 0%, var(--fr-bg) 60%);
}

.fr-home {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 2rem;
  gap: 0.75rem;
  overflow-y: auto;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* Hero — new design with progress ring */

.fr-hero-new {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 0;
}

.fr-hero-ring-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.fr-hero-ring {
  width: 100%;
  height: 100%;
}

.fr-hero-ring circle:last-child {
  transition: stroke-dasharray 0.6s ease;
}

.fr-hero-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fr-hero-ring-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--fr-accent);
  line-height: 1;
}

.fr-hero-ring-label {
  font-size: 0.55rem;
  color: var(--fr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fr-hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fr-hero-stats-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.fr-hero-stat-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fr-text);
}

.fr-hero-stat-pill span {
  font-weight: 400;
  color: var(--fr-text-muted);
  font-size: 0.65rem;
}

.fr-hero-stat-pill.fr-stat-due {
  color: #fbbf24;
}

/* Home action cards */
.fr-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.fr-home-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  color: var(--fr-text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.fr-home-card:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-text);
  border-color: var(--fr-accent);
}

.fr-home-card:disabled {
  opacity: 0.4;
  cursor: default;
}

.fr-home-card .lucide-loader {
  animation: spin 1.5s linear infinite;
}

/* Recent words */
.fr-home-recent {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.fr-home-recent-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fr-text-muted);
}

.fr-home-recent-list {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 2px;
}

.fr-home-recent-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0.4rem 0.7rem;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.fr-home-recent-word:hover {
  border-color: var(--fr-accent);
  background: var(--fr-surface-hover);
}

.fr-recent-fr {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fr-text);
}

.fr-recent-en {
  font-size: 0.6rem;
  color: var(--fr-text-muted);
}

/* Old hero (keep for reference) */
.fr-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0 0.25rem;
}

.fr-hero-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fr-hero-flag {
  font-size: 1.8rem;
  line-height: 1;
}

.fr-hero-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fr-text);
  letter-spacing: -0.5px;
}

.fr-streak {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.2);
  padding: 3px 10px;
  border-radius: 20px;
}

.fr-hero-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.3rem;
}

.fr-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.fr-hero-stat-num {
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

body.light .fr-hero-stat-num {
  color: rgba(0, 0, 0, 0.85);
}

.fr-hero-stat-label {
  font-size: 0.62rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.light .fr-hero-stat-label {
  color: rgba(0, 0, 0, 0.35);
}

.fr-hero-stat-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.08);
}

body.light .fr-hero-stat-divider {
  background: rgba(0, 0, 0, 0.08);
}

/* Session card */

.fr-session-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, var(--fr-accent-bg), transparent);
  border: 1px solid var(--fr-border);
  border-radius: 12px;
  transition: all 0.15s;
  user-select: none;
  cursor: pointer;
}

.fr-session-card:hover {
  background: linear-gradient(135deg, var(--fr-accent-bg), var(--fr-surface));
  border-color: var(--fr-accent);
}

.fr-session-card.done {
  background: var(--fr-surface);
  border-color: var(--fr-border);
  cursor: default;
  opacity: 0.6;
}

.fr-session-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.fr-session-nums {
  display: flex;
  gap: 8px;
  align-items: center;
}

.fr-num {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.fr-num.review {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
}

.fr-num.new {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

.fr-num.done {
  color: rgba(255, 255, 255, 0.3);
}

.fr-session-arrow {
  color: rgba(167, 139, 250, 0.5);
}

/* Quick actions grid */

.fr-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.5rem;
}

.fr-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.fr-quick-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.fr-quick-count {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.25);
}

body.light .fr-quick-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.6);
}

body.light .fr-quick-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.85);
}

body.light .fr-quick-count {
  color: rgba(0, 0, 0, 0.25);
}

/* Tools row */

.fr-tools {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.fr-tool-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  background: none;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
}

.fr-tool-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}

.fr-tool-btn:disabled {
  cursor: default;
  opacity: 0.5;
}

.fr-tool-btn span {
  flex: 1;
}

body.light .fr-tool-btn {
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-tool-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.6);
}

.fr-action-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  padding: 1px 7px;
  border-radius: 10px;
  flex: unset !important;
}

/* ── Session ──────────────────────────────────────────────────────── */

.fr-session-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.fr-progress-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.fr-progress-fill {
  height: 100%;
  background: #a78bfa;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.fr-session-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* Audio button */

.fr-audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.fr-audio-btn:hover {
  background: rgba(167, 139, 250, 0.15);
  border-color: rgba(167, 139, 250, 0.3);
  color: #a78bfa;
}

.fr-audio-btn.fr-audio-playing {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
  color: #a78bfa;
}

.fr-audio-sm {
  width: 24px;
  height: 24px;
}

.fr-audio-inline {
  width: 22px;
  height: 22px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.fr-word-row:hover .fr-audio-inline {
  opacity: 1;
}

.fr-audio-sentence {
  display: flex;
  flex-direction: row;
  width: auto;
  height: auto;
  border-radius: 20px;
  padding: 8px 16px;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.fr-audio-sentence:hover {
  color: #a78bfa;
}

body.light .fr-audio-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-audio-btn:hover,
body.light .fr-audio-btn.fr-audio-playing {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.25);
  color: #7c3aed;
}

body.light .fr-audio-sentence {
  color: rgba(0, 0, 0, 0.4);
}

/* Session split layout */

.fr-session-split {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.fr-session-main {
  flex: 1;
  display: flex;
  min-width: 280px;
}

.fr-session-context {
  width: 50%;
  max-width: 560px;
  min-width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--fr-surface, rgba(255, 255, 255, 0.02));
  position: relative;
  transition: width 0.2s ease, min-width 0.2s ease;
}

.fr-session-context.collapsed {
  width: 36px;
  min-width: 36px;
  padding: 0.6rem 0.3rem;
  overflow: hidden;
}

/* Context panels stack vertically */
.fr-context-columns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Video panel spans full width */
.fr-context-columns .fr-panel-video {
  width: 100%;
}

.fr-context-toggle {
  position: sticky;
  top: 0;
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  display: flex;
  z-index: 1;
  flex-shrink: 0;
}

.fr-context-toggle:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}

.fr-session-context.collapsed .fr-context-toggle {
  align-self: center;
}

.fr-panel-video {
  padding: 0;
  background: none;
  border: none;
}

.fr-panel-video .fr-video-embed {
  border-radius: 8px;
}

.fr-panel-video .fr-video-sentence {
  padding: 0.3rem 0.2rem 0;
  font-size: 0.7rem;
}

/* Audio clip player */

.fr-panel-clip {
  padding: 0.4rem !important;
  background: rgba(167, 139, 250, 0.04) !important;
  border-color: rgba(167, 139, 250, 0.1) !important;
  gap: 0.3rem;
}

.fr-clip-player {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  display: block;
  background: #000;
  object-fit: contain;
}

.fr-word-video .fr-clip-player {
  max-width: 360px;
  border-radius: 8px;
}

.fr-clip-label {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  line-height: 1.3;
  padding: 0 0.5rem 0.4rem;
}

.fr-clip-transcript {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.fr-clip-fr {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.45;
}

.fr-clip-en {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  line-height: 1.35;
}

.fr-clip-en-loading {
  color: rgba(255, 255, 255, 0.2);
}

body.light .fr-clip-transcript {
  background: rgba(0, 0, 0, 0.03);
}

body.light .fr-clip-fr {
  color: rgba(0, 0, 0, 0.75);
}

body.light .fr-clip-en {
  color: rgba(0, 0, 0, 0.4);
}

.fr-clip-source {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-clip-source:hover {
  color: rgba(255, 255, 255, 0.5);
}

.fr-word-video audio {
  width: 100%;
  max-width: 360px;
  height: 36px;
  border-radius: 6px;
}

body.light .fr-panel-clip {
  background: rgba(167, 139, 250, 0.03) !important;
  border-color: rgba(167, 139, 250, 0.1) !important;
}

body.light .fr-clip-label {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-clip-source {
  color: rgba(0, 0, 0, 0.25);
}

.fr-answer-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 400px;
}

.fr-session-video {
  width: 100%;
  max-width: 340px;
}

.fr-session-video .fr-video-sentence {
  text-align: center;
  margin-top: 0.3rem;
}

body.light .fr-session-context {
  border-left-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}

body.light .fr-context-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-context-toggle:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.08);
}

@media (max-width: 550px) {
  .fr-session-split {
    flex-direction: column;
  }
  .fr-session-context {
    width: auto;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 200px;
  }
}

/* Flashcard */

.fr-flashcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
  gap: 12px;
  overflow-y: auto;
}

.fr-card-lang {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.fr-card-french-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fr-card-french {
  font-size: 32px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.fr-card-pronunciation {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

.fr-show-btn {
  margin-top: 16px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s;
}

.fr-show-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

/* Answer section */

.fr-answer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

.fr-card-english {
  font-size: 20px;
  font-weight: 600;
  color: #4ade80;
  text-align: center;
}

.fr-card-example {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px 18px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fr-card-vault-examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.fr-card-vault-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(167, 139, 250, 0.6);
  margin-bottom: 2px;
}

.fr-card-vault-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(167, 139, 250, 0.05);
  border-radius: 8px;
  border-left: 2px solid rgba(167, 139, 250, 0.35);
}

.fr-card-vault-en {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.fr-card-vault-fr {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
}

.fr-card-vault-fr strong {
  color: #a78bfa;
  font-weight: 600;
}

body.light .fr-card-vault-item {
  background: rgba(124, 58, 237, 0.04);
  border-left-color: rgba(124, 58, 237, 0.3);
}

body.light .fr-card-vault-en {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-card-vault-fr {
  color: rgba(0, 0, 0, 0.75);
}

body.light .fr-card-vault-fr strong {
  color: #7c3aed;
}

body.light .fr-card-vault-label {
  color: rgba(124, 58, 237, 0.6);
}

.fr-example-fr {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  line-height: 1.5;
}

.fr-example-en {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.5;
}

/* Rating buttons */

.fr-rating-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.fr-rating-btn {
  flex: 1;
  padding: 11px 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.fr-rating-btn.hard {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.fr-rating-btn.hard:hover {
  background: rgba(239, 68, 68, 0.2);
}

.fr-rating-btn.ok {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.fr-rating-btn.ok:hover {
  background: rgba(251, 191, 36, 0.2);
}

.fr-rating-btn.easy {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.fr-rating-btn.easy:hover {
  background: rgba(74, 222, 128, 0.2);
}

/* Session done */

.fr-session-done {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
}

.fr-done-icon {
  color: #4ade80;
  opacity: 0.8;
}

.fr-session-done h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.fr-session-done p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.fr-btn-primary {
  margin-top: 8px;
  padding: 10px 28px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: #a78bfa;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
}

.fr-btn-primary:hover {
  opacity: 0.85;
}

/* ── Suggestions ──────────────────────────────────────────────────── */

.fr-add-manual {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.fr-manual-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  outline: none;
  transition: border-color 0.15s;
}

.fr-manual-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.fr-manual-input:focus {
  border-color: rgba(167, 139, 250, 0.4);
}

.fr-manual-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.fr-manual-btn:hover {
  background: rgba(167, 139, 250, 0.2);
}

.fr-suggestions-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.fr-suggestion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.1s;
}

.fr-suggestion-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.fr-suggestion-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fr-suggestion-word {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.fr-suggestion-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.fr-suggestion-example {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  line-height: 1.4;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.light .fr-suggestion-example {
  color: rgba(0, 0, 0, 0.4);
}

.fr-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(74, 222, 128, 0.2);
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.fr-add-btn:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.15);
}

.fr-add-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Word list ────────────────────────────────────────────────────── */

/* List header */
.fr-list-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--fr-border);
  flex-shrink: 0;
}

.fr-list-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  color: var(--fr-text-muted);
}

.fr-list-search-input {
  flex: 1;
  border: none;
  background: none;
  color: var(--fr-text);
  font-size: 0.78rem;
  outline: none;
}

.fr-list-search-input::placeholder {
  color: var(--fr-text-muted);
}

/* List filter tabs */
.fr-list-filters {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.fr-list-filter {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--fr-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.fr-list-filter:hover {
  background: var(--fr-surface);
}

.fr-list-filter.active {
  background: var(--fr-accent-bg);
  color: var(--fr-accent);
  border-color: var(--fr-accent);
}

.fr-list-filter-count {
  font-size: 0.65rem;
  opacity: 0.6;
}

/* Mastery dots */
.fr-word-mastery {
  display: flex;
  gap: 2px;
  align-items: center;
}

.fr-mastery-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fr-accent);
  opacity: 0.5;
}

.fr-badge.learned {
  color: #4ade80;
  font-size: 0.62rem;
}

.fr-word-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.fr-word-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  gap: 12px;
  transition: background 0.1s;
}

.fr-word-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.fr-word-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.fr-word-en {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.fr-word-arrow {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}

.fr-word-fr {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.fr-word-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fr-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fr-badge.new {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

.fr-badge.due {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.1);
}

.fr-badge.scheduled {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  background: transparent;
  font-weight: 400;
  letter-spacing: 0;
}

.fr-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
}

.fr-word-row:hover .fr-delete-btn {
  opacity: 1;
}

.fr-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ── Empty states ─────────────────────────────────────────────────── */

.fr-empty-small {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
}

/* ── Sentence practice view ───────────────────────────────────────── */

.fr-sentence-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  gap: 20px;
}

.fr-sentence-en-prompt {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  max-width: 340px;
}

.fr-sentence-fr {
  font-size: 20px;
  font-weight: 600;
  color: #c4b5fd;
  line-height: 1.4;
  max-width: 340px;
}

.fr-sentence-en-translation {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  max-width: 300px;
  line-height: 1.4;
}

.fr-sentence-reveal-btn {
  margin-top: 8px;
  padding: 10px 24px;
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  background: transparent;
  color: #a78bfa;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.fr-sentence-reveal-btn:hover {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.7);
}

.fr-sentence-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  gap: 12px;
}

.fr-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.fr-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

.fr-nav-next {
  background: rgba(167, 139, 250, 0.12);
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.3);
}

.fr-nav-next:hover {
  background: rgba(167, 139, 250, 0.2);
  color: #ddd6fe;
  border-color: rgba(167, 139, 250, 0.5);
}

.fr-sentence-counter {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
}

/* ── Light theme: sentence view ───────────────────────────────────── */

body.light .fr-sentence-en-prompt {
  color: rgba(0, 0, 0, 0.85);
}

body.light .fr-sentence-fr {
  color: #7c3aed;
}

body.light .fr-sentence-en-translation {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-sentence-reveal-btn {
  border-color: rgba(124, 58, 237, 0.4);
  color: #7c3aed;
}

body.light .fr-sentence-reveal-btn:hover {
  background: rgba(124, 58, 237, 0.08);
}

body.light .fr-sentence-nav {
  border-top-color: rgba(0, 0, 0, 0.08);
}

body.light .fr-nav-btn {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.5);
}

body.light .fr-nav-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 0, 0, 0.2);
}

body.light .fr-nav-next {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.25);
}

body.light .fr-nav-next:hover {
  background: rgba(124, 58, 237, 0.15);
  color: #5b21b6;
}

body.light .fr-sentence-counter {
  color: rgba(0, 0, 0, 0.3);
}

/* ── Word detail split layout ──────────────────────────────────────── */

.fr-word-split {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.fr-word-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  gap: 1.5rem;
  min-width: 0;
}

.fr-word-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

.fr-word-center .fr-detail-french {
  font-size: 2.2rem;
}

.fr-word-center .fr-detail-pronunciation {
  font-size: 0.85rem;
}

.fr-word-center .fr-detail-english {
  font-size: 1.1rem;
  margin-top: 0.3rem;
}

.fr-listen-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fr-regen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.15);
  background: rgba(167, 139, 250, 0.06);
  color: rgba(167, 139, 250, 0.5);
  cursor: pointer;
  transition: all 0.15s;
}

.fr-regen-btn:hover {
  background: rgba(167, 139, 250, 0.15);
  color: rgba(167, 139, 250, 0.9);
}

body.light .fr-regen-btn {
  border-color: rgba(167, 139, 250, 0.15);
  background: rgba(167, 139, 250, 0.05);
  color: rgba(124, 58, 237, 0.4);
}

body.light .fr-regen-btn:hover {
  background: rgba(167, 139, 250, 0.1);
  color: rgba(124, 58, 237, 0.8);
}

/* Main listen button */
.fr-listen-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 24px;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: #c4b5fd;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.75rem;
  transition: all 0.2s;
}

.fr-listen-btn:hover {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.35);
  color: #ddd6fe;
}

.fr-listen-btn.loading {
  background: rgba(167, 139, 250, 0.15);
  cursor: wait;
}

.fr-listen-btn.loading .lucide-loader {
  animation: spin 1.5s linear infinite;
}

.fr-listen-btn.playing,
.fr-listen-btn.looping {
  background: rgba(167, 139, 250, 0.25);
  border-color: rgba(167, 139, 250, 0.5);
  color: #ede9fe;
  animation: audioPulse 2s ease-in-out infinite;
}

body.light .fr-listen-btn {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.2);
  color: #7c3aed;
}

body.light .fr-listen-btn:hover {
  background: rgba(167, 139, 250, 0.14);
}

body.light .fr-listen-btn.playing,
body.light .fr-listen-btn.looping {
  background: rgba(167, 139, 250, 0.18);
  color: #6d28d9;
}

@keyframes audioPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(167, 139, 250, 0); }
}

/* Small audio buttons in panels */
.fr-audio-btn.fr-audio-sm {
  opacity: 0.5;
  transition: opacity 0.15s;
}

.fr-audio-btn.fr-audio-sm:hover {
  opacity: 0.9;
}

.fr-audio-btn.fr-audio-sm.fr-audio-playing,
.fr-audio-btn.fr-audio-sm.fr-audio-active {
  opacity: 1;
  color: #a78bfa;
}

.fr-audio-btn.fr-audio-sm.fr-audio-loading {
  opacity: 1;
  color: rgba(167, 139, 250, 0.6);
}

.fr-audio-btn.fr-audio-sm.fr-audio-loading .lucide-loader {
  animation: spin 1.5s linear infinite;
}

.fr-word-video {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.fr-word-video .fr-video-sentence {
  text-align: center;
}

.fr-word-stats {
  display: flex;
  gap: 0.4rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.25);
}

.fr-word-right {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
}

.fr-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.fr-panel .fr-detail-section-label {
  margin-bottom: 0.15rem;
}

.fr-panel .fr-detail-ex-fr,
.fr-panel .fr-tatoeba-fr,
.fr-panel .fr-detail-vault-fr {
  font-size: 0.75rem;
}

.fr-panel .fr-detail-ex-en,
.fr-panel .fr-tatoeba-en,
.fr-panel .fr-detail-vault-en {
  font-size: 0.68rem;
}

/* Light theme */
body.light .fr-word-right {
  border-left-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}

body.light .fr-panel {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}

body.light .fr-word-stats {
  color: rgba(0, 0, 0, 0.25);
}

body.light .fr-audio-lg {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.15);
}

/* Narrow windows: stack vertically */
@media (max-width: 550px) {
  .fr-word-split {
    flex-direction: column;
  }
  .fr-word-left {
    flex: none;
    padding: 1rem;
  }
  .fr-word-right {
    width: auto;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
}

/* ── Word detail view (legacy) ────────────────────────────────────── */

.fr-word-detail {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fr-detail-french-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fr-detail-french {
  font-size: 32px;
  font-weight: 700;
  color: #c4b5fd;
  line-height: 1.2;
}

.fr-detail-pronunciation {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  margin-top: -8px;
}

.fr-detail-english {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.fr-detail-vault-example {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(167, 139, 250, 0.07);
  border-left: 2px solid rgba(167, 139, 250, 0.3);
  border-radius: 0 6px 6px 0;
}

.fr-detail-vault-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(167, 139, 250, 0.6);
}

.fr-detail-vault-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  line-height: 1.4;
}

.fr-detail-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 8px;
}

.fr-detail-vault-examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fr-detail-vault-bilingual {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(167, 139, 250, 0.05);
  border-radius: 8px;
  border-left: 2px solid rgba(167, 139, 250, 0.35);
}

.fr-detail-vault-en {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  line-height: 1.4;
}

.fr-detail-vault-fr {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  flex: 1;
}

.fr-detail-vault-fr strong {
  color: #a78bfa;
  font-weight: 600;
}

.fr-detail-examples {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fr-detail-example {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.fr-detail-ex-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.fr-detail-ex-fr {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.fr-detail-ex-en {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
  line-height: 1.4;
}

.fr-detail-sm2 {
  margin-top: 4px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.fr-detail-sm2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

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

.fr-sm2-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fr-sm2-val {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.fr-sm2-legend {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  line-height: 1.4;
}

/* ── Light theme: word detail ─────────────────────────────────────── */

body.light .fr-detail-french {
  color: #7c3aed;
}

body.light .fr-detail-pronunciation {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-detail-english {
  color: rgba(0, 0, 0, 0.8);
}

body.light .fr-detail-vault-example {
  background: rgba(124, 58, 237, 0.05);
  border-left-color: rgba(124, 58, 237, 0.3);
}

body.light .fr-detail-vault-label {
  color: rgba(124, 58, 237, 0.6);
}

body.light .fr-detail-vault-text {
  color: rgba(0, 0, 0, 0.45);
}

body.light .fr-detail-vault-bilingual {
  background: rgba(124, 58, 237, 0.04);
  border-left-color: rgba(124, 58, 237, 0.3);
}

body.light .fr-detail-vault-en {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-detail-vault-fr {
  color: rgba(0, 0, 0, 0.8);
}

body.light .fr-detail-vault-fr strong {
  color: #7c3aed;
}

body.light .fr-detail-section-label {
  color: rgba(0, 0, 0, 0.3);
}

body.light .fr-detail-example {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}

body.light .fr-detail-ex-fr {
  color: rgba(0, 0, 0, 0.8);
}

body.light .fr-detail-ex-en {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-detail-sm2 {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}

body.light .fr-sm2-label {
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-sm2-val {
  color: rgba(0, 0, 0, 0.65);
}

body.light .fr-sm2-legend {
  color: rgba(0, 0, 0, 0.3);
}

/* ── Sources view ──────────────────────────────────────────────── */

.fr-sources {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fr-sources-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
}

.fr-source-add-row {
  display: flex;
  gap: 0.5rem;
}

.fr-source-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  outline: none;
}

.fr-source-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.fr-source-input:focus {
  border-color: rgba(255, 255, 255, 0.2);
}

.fr-source-add-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #a78bfa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.fr-source-add-btn:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.25);
}

.fr-source-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fr-source-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.fr-source-result {
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  line-height: 1.4;
}

.fr-source-result.ok {
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.fr-source-result.err {
  background: rgba(248, 113, 113, 0.08);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.2);
}

.fr-sources-empty {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  padding: 2rem 0;
}

.fr-sources-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fr-source-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.5rem;
  align-items: start;
}

.fr-source-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  grid-column: 1;
  grid-row: 1;
}

.fr-source-title:hover {
  color: #a78bfa;
}

.fr-source-meta {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  grid-column: 1;
  grid-row: 2;
}

.fr-source-delete {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.fr-source-delete:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

/* ── Vault example source link (flashcard + word detail) ────────── */

.fr-vault-source {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.2rem;
}

.fr-vault-source.yt-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 82, 82, 0.6);
  text-decoration: none;
}

.fr-vault-source.yt-link:hover {
  color: #ff5252;
}

/* ── Light theme: sources ───────────────────────────────────────── */

body.light .fr-sources-desc {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-source-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}

body.light .fr-source-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

body.light .fr-source-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .fr-source-title {
  color: rgba(0, 0, 0, 0.8);
}

body.light .fr-source-meta {
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-sources-empty {
  color: rgba(0, 0, 0, 0.3);
}

body.light .fr-vault-source {
  color: rgba(0, 0, 0, 0.3);
}

/* ── Tatoeba native sentences ──────────────────────────────────── */

.fr-tatoeba-load-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.fr-tatoeba-load-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.8);
}

.fr-tatoeba-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fr-tatoeba-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.25rem 0;
}

.fr-tatoeba-empty {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

.fr-tatoeba-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.fr-tatoeba-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.fr-tatoeba-fr {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
  flex: 1;
  line-height: 1.4;
}

.fr-tatoeba-en {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  padding-left: 0.1rem;
}

/* ── YouTube search button ─────────────────────────────────────── */

.fr-yt-search-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 82, 82, 0.06);
  border: 1px solid rgba(255, 82, 82, 0.15);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: rgba(255, 82, 82, 0.7);
  font-size: 0.75rem;
  text-decoration: none;
  width: 100%;
}

.fr-yt-search-btn:hover {
  background: rgba(255, 82, 82, 0.1);
  color: #ff5252;
}

/* ── Light theme: tatoeba + yt search ──────────────────────────── */

body.light .fr-tatoeba-load-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.45);
}

body.light .fr-tatoeba-load-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

body.light .fr-tatoeba-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.07);
}

body.light .fr-tatoeba-fr {
  color: rgba(0, 0, 0, 0.8);
}

body.light .fr-tatoeba-en {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-yt-search-btn {
  background: rgba(255, 82, 82, 0.04);
  border-color: rgba(255, 82, 82, 0.15);
  color: rgba(200, 50, 50, 0.7);
}

body.light .fr-yt-search-btn:hover {
  color: #c83232;
}

/* ── Video snippet ────────────────────────────────────────────── */

.fr-video-snippet {
  margin-top: 0.5rem;
}

.fr-video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.fr-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

.fr-video-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.4rem;
  padding: 0 0.2rem;
}

.fr-video-sentence {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  line-height: 1.3;
}

.fr-video-title-link {
  font-size: 0.68rem;
  color: rgba(255, 82, 82, 0.6);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-video-title-link:hover {
  color: #ff5252;
}

.fr-video-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.6rem 0;
}

.fr-video-loading .lucide-loader {
  animation: spin 1.5s linear infinite;
}

.fr-video-error {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.25rem;
}

/* Light theme */
body.light .fr-video-embed {
  background: rgba(0, 0, 0, 0.05);
}

body.light .fr-video-sentence {
  color: rgba(0, 0, 0, 0.5);
}

body.light .fr-video-title-link {
  color: rgba(200, 50, 50, 0.5);
}

body.light .fr-video-title-link:hover {
  color: #c83232;
}

body.light .fr-video-loading {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-video-error {
  color: rgba(0, 0, 0, 0.3);
}

.fr-video-more-clips {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fr-video-clip-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  transition: background 0.15s;
}

.fr-video-clip-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.fr-clip-sentence {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-clip-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  font-variant-numeric: tabular-nums;
}

body.light .fr-video-more-clips {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .fr-video-clip-link {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.6);
}

body.light .fr-video-clip-link:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.85);
}

body.light .fr-clip-time {
  color: rgba(0, 0, 0, 0.3);
}

/* ── Library view ─────────────────────────────────────────────── */

.fr-library {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  flex: 1;
}

.fr-library-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}

.fr-library-progress {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.15);
}

.fr-library-progress.done {
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.15);
}

.fr-library-progress.err {
  background: rgba(255, 82, 82, 0.06);
  border-color: rgba(255, 82, 82, 0.15);
}

.fr-progress-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(56, 189, 248, 0.8);
}

.fr-progress-step .lucide-loader {
  animation: spin 1.5s linear infinite;
}

.fr-progress-done {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.75rem;
  color: rgba(74, 222, 128, 0.8);
}

.fr-progress-done > :first-child {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fr-progress-stats {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  padding-left: 1.1rem;
}

.fr-progress-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255, 82, 82, 0.8);
}

.fr-library-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.fr-library-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s;
}

.fr-library-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.fr-library-item-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.fr-library-item-meta {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  padding-left: 1.2rem;
}

/* ── Library search ───────────────────────────────────────────── */

.fr-library-search-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
}

.fr-library-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
}

.fr-library-search-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.fr-library-search-clear {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 2px;
  display: flex;
}

.fr-library-search-clear:hover {
  color: rgba(255, 255, 255, 0.6);
}

.fr-library-results-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  padding: 0.2rem 0;
}

.fr-seg-source {
  display: block;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.light .fr-library-search-row {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-library-search-input {
  color: rgba(0, 0, 0, 0.9);
}

body.light .fr-library-search-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

body.light .fr-library-results-count {
  color: rgba(0, 0, 0, 0.3);
}

body.light .fr-seg-source {
  color: rgba(0, 0, 0, 0.25);
}

.fr-highlight {
  background: rgba(167, 139, 250, 0.25);
  color: #c4b5fd;
  border-radius: 2px;
  padding: 0 1px;
}

body.light .fr-highlight {
  background: rgba(167, 139, 250, 0.15);
  color: #7c3aed;
}

/* ── Inline player ────────────────────────────────────────────── */

.fr-inline-player {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.fr-inline-player-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  padding: 0 0.25rem;
}

.fr-inline-player-close {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-end;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}

.fr-inline-player-close:hover {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

.fr-transcript-seg {
  cursor: pointer;
}

.fr-transcript-seg.active {
  background: rgba(167, 139, 250, 0.08);
  border-left: 2px solid rgba(167, 139, 250, 0.5);
  padding-left: calc(0.5rem - 2px);
}

body.light .fr-inline-player {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .fr-inline-player-text {
  color: rgba(0, 0, 0, 0.5);
}

body.light .fr-transcript-seg.active {
  background: rgba(167, 139, 250, 0.06);
  border-left-color: rgba(167, 139, 250, 0.4);
}

/* ── Transcript view ──────────────────────────────────────────── */

.fr-transcript {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  flex: 1;
}

.fr-transcript-meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
}

.fr-transcript-segments {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.fr-transcript-seg {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  line-height: 1.35;
  transition: background 0.15s;
}

.fr-transcript-seg:hover {
  background: rgba(255, 255, 255, 0.06);
}

.fr-seg-time {
  flex-shrink: 0;
  width: 2.5rem;
  font-size: 0.68rem;
  color: rgba(56, 189, 248, 0.6);
  font-variant-numeric: tabular-nums;
  padding-top: 0.05rem;
}

.fr-seg-text {
  flex: 1;
}

/* Light theme */
body.light .fr-library-desc {
  color: rgba(0, 0, 0, 0.4);
}

body.light .fr-library-progress {
  background: rgba(56, 189, 248, 0.04);
  border-color: rgba(56, 189, 248, 0.15);
}

body.light .fr-library-progress.done {
  background: rgba(74, 222, 128, 0.04);
  border-color: rgba(74, 222, 128, 0.15);
}

body.light .fr-library-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .fr-library-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .fr-library-item-title {
  color: rgba(0, 0, 0, 0.85);
}

body.light .fr-library-item-meta {
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-transcript-meta {
  color: rgba(0, 0, 0, 0.35);
}

body.light .fr-transcript-seg {
  color: rgba(0, 0, 0, 0.75);
}

body.light .fr-transcript-seg:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .fr-seg-time {
  color: rgba(56, 189, 248, 0.7);
}

body.light .fr-progress-stats {
  color: rgba(0, 0, 0, 0.35);
}

/* ── Sentence dialog overlay ──────────────────────────────────── */

.fr-sentence-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2rem;
}

.fr-sentence-dialog {
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 16px;
  padding: 2rem;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.fr-sentence-dialog-fr {
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.5;
}

.fr-sentence-dialog-en {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  line-height: 1.4;
}

.fr-sentence-dialog-source {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.2);
}

.fr-sentence-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.fr-sentence-dialog-close {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0.4rem;
  display: flex;
}

.fr-sentence-dialog-close:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}

.fr-clickable {
  cursor: pointer;
  transition: background 0.15s;
}

.fr-clickable:hover {
  background: rgba(167, 139, 250, 0.06);
}

body.light .fr-sentence-overlay {
  background: rgba(255, 255, 255, 0.7);
}

body.light .fr-sentence-dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(167, 139, 250, 0.15);
}

body.light .fr-sentence-dialog-fr {
  color: rgba(0, 0, 0, 0.9);
}

body.light .fr-sentence-dialog-en {
  color: rgba(0, 0, 0, 0.45);
}

/* ── Hoverable word tooltip ───────────────────────────────────── */

.fr-interactive-text {
  display: inline;
}

.fr-hoverable-word {
  cursor: default;
  border-radius: 2px;
  transition: background 0.1s;
}

.fr-hoverable-word {
  border: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.fr-hoverable-word:hover {
  background: rgba(167, 139, 250, 0.08);
  animation: wordBorderGlow 1s ease forwards;
}

@keyframes wordBorderGlow {
  0% { border-color: transparent; box-shadow: none; }
  30% { border-color: rgba(167, 139, 250, 0.2); box-shadow: 0 0 4px rgba(167, 139, 250, 0.1); }
  60% { border-color: rgba(167, 139, 250, 0.4); box-shadow: 0 0 8px rgba(167, 139, 250, 0.2); background: rgba(167, 139, 250, 0.12); }
  100% { border-color: rgba(167, 139, 250, 0.6); box-shadow: 0 0 14px rgba(167, 139, 250, 0.35); background: rgba(167, 139, 250, 0.18); }
}

.fr-word-tooltip {
  z-index: 10000;
  background: rgba(15, 15, 25, 0.97);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  min-width: 160px;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.fr-tooltip-word {
  font-size: 1rem;
  font-weight: 600;
  color: #c4b5fd;
}

.fr-tooltip-english {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
}

.fr-tooltip-pron {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

.fr-tooltip-unknown {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

.fr-tooltip-actions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.fr-tooltip-play,
.fr-tooltip-add {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 6px;
  color: #a78bfa;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  width: fit-content;
}

.fr-tooltip-play:hover,
.fr-tooltip-add:hover {
  background: rgba(167, 139, 250, 0.2);
}

.fr-tooltip-play.active {
  background: rgba(167, 139, 250, 0.25);
  color: #ddd6fe;
}

.fr-tooltip-play .lucide-loader {
  animation: spin 1.5s linear infinite;
}

body.light .fr-word-tooltip {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(167, 139, 250, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light .fr-tooltip-word { color: #7c3aed; }
body.light .fr-tooltip-english { color: rgba(0, 0, 0, 0.7); }
body.light .fr-tooltip-pron { color: rgba(0, 0, 0, 0.35); }
body.light .fr-tooltip-unknown { color: rgba(0, 0, 0, 0.3); }

/* ── Flashcard explore button ──────────────────────────────────── */

.fr-card-explore-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.45rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.72rem;
  cursor: pointer;
  margin-top: 0.25rem;
}

.fr-card-explore-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}

body.light .fr-card-explore-btn {
  border-color: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.3);
}

body.light .fr-card-explore-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.55);
}

/* ── Word Map ────────────────────────────────────────────────── */

.fr-map-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.fr-map-container {
  flex: 1;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(30, 20, 60, 0.3) 0%, rgba(10, 10, 15, 0.95) 100%);
}

/* Map side panel */
.fr-map-panel {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-left: 1px solid var(--fr-border);
  background: var(--fr-surface);
  animation: slideInRight 0.2s ease;
}

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

.fr-map-panel-header {
  display: flex;
  justify-content: flex-end;
}

.fr-map-panel-word {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fr-text);
  line-height: 1.2;
}

.fr-map-panel-english {
  font-size: 1rem;
  font-weight: 600;
  color: #4ade80;
}

.fr-map-panel-pron {
  font-size: 0.75rem;
  color: var(--fr-text-muted);
  font-style: italic;
}

.fr-map-panel-stats {
  display: flex;
  gap: 0.4rem;
  font-size: 0.65rem;
  color: var(--fr-text-muted);
}

.fr-map-panel-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.fr-map-panel-example {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.fr-map-panel-ex-fr {
  font-size: 0.78rem;
  color: var(--fr-text);
  line-height: 1.4;
}

.fr-map-panel-ex-en {
  font-size: 0.68rem;
  color: var(--fr-text-muted);
  font-style: italic;
  margin-top: 0.15rem;
}

.fr-map-panel-ex-source {
  font-size: 0.6rem;
  color: var(--fr-text-muted);
  margin-top: 0.15rem;
  opacity: 0.6;
}

.fr-map-panel-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  background: none;
  color: var(--fr-text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  margin-top: auto;
}

.fr-map-panel-full:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-text);
}

.fr-map-panel-clip {
  border-radius: 8px;
  overflow: hidden;
}

.fr-map-panel-clip .fr-clip-player {
  width: 100%;
  border-radius: 6px;
}

.fr-map-panel-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--fr-text-muted);
}

.fr-map-panel-loading .lucide-loader {
  animation: spin 1.5s linear infinite;
}

/* Story mode */
.fr-map-toolbar {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: rgba(15, 15, 25, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  z-index: 10;
}

.fr-map-story-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.08);
  color: rgba(167, 139, 250, 0.8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.fr-map-story-btn.active {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
  color: #ddd6fe;
}

.fr-map-story-count {
  font-size: 0.7rem;
  color: rgba(74, 222, 128, 0.8);
  font-weight: 500;
}

.fr-map-generate-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 8px;
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.fr-map-generate-btn:hover {
  background: rgba(74, 222, 128, 0.2);
}

.fr-map-generate-btn .lucide-loader {
  animation: spin 1.5s linear infinite;
}

.fr-map-story-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fr-text);
}

.fr-map-story-en {
  font-size: 0.8rem;
  color: var(--fr-text-muted);
  font-style: italic;
  line-height: 1.5;
}

.fr-map-story-words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.fr-map-story-image {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  max-height: 200px;
}

.fr-map-story-image-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 120px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: var(--fr-text-muted);
  font-size: 0.72rem;
}

.fr-map-story-image-loading .lucide-image {
  animation: pulse 2s ease-in-out infinite;
}

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

.fr-map-story-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 8px;
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 0.25rem;
}

.fr-map-story-save:hover {
  background: rgba(74, 222, 128, 0.15);
}

.fr-map-story-word-tag {
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
  color: rgba(74, 222, 128, 0.8);
}

.fr-map-container {
  position: relative;
}

body.light .fr-map-toolbar {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
}

/* ── Curriculum ───────────────────────────────────────────────── */

.fr-curriculum {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

.fr-curriculum-header { margin-bottom: 1.5rem; }
.fr-curriculum-header h2 { margin: 0; font-size: 1.3rem; color: var(--fr-text); }
.fr-curriculum-header p { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--fr-text-muted); }

.fr-curriculum-level {
  margin-bottom: 1.25rem;
  border: 1px solid var(--fr-border);
  border-radius: 12px;
  overflow: hidden;
}

.fr-curriculum-level.active { border-color: var(--fr-accent); }
.fr-curriculum-level.locked { opacity: 0.4; }

.fr-curriculum-level-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--fr-surface);
}

.fr-curriculum-level-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--fr-accent-bg);
  color: var(--fr-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.fr-curriculum-level-name { font-weight: 600; color: var(--fr-text); font-size: 0.9rem; }
.fr-curriculum-level-progress { font-size: 0.7rem; color: var(--fr-text-muted); }

.fr-curriculum-units {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--fr-border);
}

.fr-curriculum-unit-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  background: var(--fr-bg);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.fr-curriculum-unit-card:hover:not(:disabled) { background: var(--fr-surface-hover); }
.fr-curriculum-unit-card:disabled { cursor: default; }
.fr-curriculum-unit-card.completed .fr-unit-status { color: #4ade80; }
.fr-curriculum-unit-card.in-progress .fr-unit-status { color: var(--fr-accent); }
.fr-curriculum-unit-card.available .fr-unit-status { color: var(--fr-text-muted); }
.fr-curriculum-unit-card.locked .fr-unit-status { color: var(--fr-text-muted); opacity: 0.3; }

.fr-unit-title { font-size: 0.82rem; font-weight: 500; color: var(--fr-text); }
.fr-unit-title-fr { font-size: 0.7rem; color: var(--fr-text-muted); font-style: italic; }

/* Unit Detail */
.fr-unit-detail {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 2rem;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fr-unit-detail-header { display: flex; align-items: flex-start; gap: 0.75rem; }
.fr-unit-detail-level { font-size: 0.65rem; color: var(--fr-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.fr-unit-detail-title { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--fr-text); }
.fr-unit-detail-title-fr { font-size: 0.85rem; color: var(--fr-text-muted); font-style: italic; }

.fr-unit-progress-bar { height: 4px; background: var(--fr-surface); border-radius: 2px; overflow: hidden; }
.fr-unit-progress-fill { height: 100%; background: var(--fr-accent); border-radius: 2px; transition: width 0.3s; }

.fr-unit-section {
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  padding: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.fr-unit-section:hover { border-color: var(--fr-accent); }

.fr-unit-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fr-text);
  margin-bottom: 0.5rem;
}

.fr-unit-vocab-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fr-unit-vocab-item {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: var(--fr-accent-bg);
  border-radius: 6px;
  font-size: 0.78rem;
}
.fr-unit-vocab-fr { font-weight: 600; color: var(--fr-accent); }
.fr-unit-vocab-en { color: var(--fr-text-muted); }
.fr-unit-vocab-pron { font-size: 0.65rem; color: var(--fr-text-muted); font-style: italic; }

.fr-unit-grammar { font-size: 0.82rem; color: var(--fr-text); line-height: 1.6; margin-bottom: 0.5rem; }
.fr-unit-grammar-example { font-size: 0.78rem; padding: 0.2rem 0; }

.fr-unit-passage-fr { font-size: 0.95rem; line-height: 1.7; color: var(--fr-text); margin-bottom: 0.4rem; }
.fr-unit-passage-en { font-size: 0.8rem; color: var(--fr-text-muted); font-style: italic; line-height: 1.5; }

/* ── Language Journal ─────────────────────────────────────────── */

.fr-journal {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fr-journal-input-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--fr-border);
  flex-shrink: 0;
}

.fr-journal-input {
  flex: 1;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  background: var(--fr-surface);
  color: var(--fr-text);
  font-size: 0.9rem;
  outline: none;
}

.fr-journal-input:focus {
  border-color: var(--fr-accent);
}

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

.fr-journal-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.fr-journal-feed {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.fr-journal-sidebar {
  width: 200px;
  flex-shrink: 0;
  padding: 0.75rem;
  border-left: 1px solid var(--fr-border);
  background: var(--fr-surface);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow-y: auto;
}

.fr-journal-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--fr-text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.fr-journal-filter:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-text);
}

.fr-journal-filter.active {
  background: var(--fr-accent-bg);
  color: var(--fr-accent);
}

.fr-journal-filter-count {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0.5;
}

.fr-journal-stats {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: var(--fr-text-muted);
  padding: 0.3rem 0.5rem;
}

.fr-journal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--fr-text-muted);
}

.fr-journal-empty .lucide { color: var(--fr-accent); opacity: 0.5; }
.fr-journal-empty p { margin: 0; }

.fr-journal-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 12px;
  transition: border-color 0.15s;
}

.fr-journal-card:hover {
  border-color: var(--fr-accent);
}

.fr-journal-note {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fr-journal-note-original {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fr-text);
}

.fr-journal-translation {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  background: var(--fr-accent-bg);
  border-radius: 8px;
  border-left: 3px solid var(--fr-accent);
}

.fr-journal-trans-text {
  font-size: 0.88rem;
  color: var(--fr-accent);
  font-weight: 500;
  line-height: 1.5;
}

.fr-journal-pron {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--fr-text-muted);
}

.fr-journal-note-actions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.fr-journal-translating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--fr-text-muted);
}

.fr-journal-translating .lucide-loader {
  animation: spin 1.5s linear infinite;
}

.fr-journal-video {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fr-journal-thumb {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  max-height: 180px;
}

.fr-journal-embed {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: 8px;
  overflow: hidden;
}

.fr-journal-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.fr-journal-image {
  width: 100%;
  border-radius: 8px;
  max-height: 300px;
  object-fit: cover;
}

.fr-journal-video-actions {
  display: flex;
  gap: 0.4rem;
}

.fr-journal-link-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--fr-border);
  border-radius: 6px;
  background: none;
  color: var(--fr-text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.fr-journal-link-btn:hover,
.fr-journal-link-btn.active {
  color: var(--fr-accent);
  border-color: var(--fr-accent);
}

.fr-journal-link-btn .lucide-loader {
  animation: spin 1.5s linear infinite;
}

.fr-journal-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--fr-accent);
  text-decoration: none;
  word-break: break-all;
}

.fr-journal-link:hover { text-decoration: underline; }

.fr-journal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fr-journal-date {
  font-size: 0.62rem;
  color: var(--fr-text-muted);
  opacity: 0.5;
}

.fr-journal-delete {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: none;
  color: var(--fr-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fr-journal-card:hover .fr-journal-delete { opacity: 0.5; }
.fr-journal-delete:hover { opacity: 1; color: #f87171; }

/* ── French Chat ──────────────────────────────────────────────── */

.fr-chat-start {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.fr-chat-start-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  max-width: 400px;
}

.fr-chat-start-inner h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fr-text);
  margin: 0;
}

.fr-chat-start-inner p {
  color: var(--fr-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.fr-chat-start-inner .lucide {
  color: var(--fr-accent);
}

.fr-chat-section-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fr-text-muted);
  align-self: flex-start;
  margin-top: 0.5rem;
}

.fr-chat-threads {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

.fr-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  background: var(--fr-surface);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

.fr-chat-thread:hover {
  background: var(--fr-surface-hover);
  border-color: var(--fr-accent);
}

.fr-thread-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-thread-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.62rem;
  color: var(--fr-text-muted);
}

.fr-chat-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--fr-border);
  background: var(--fr-surface);
  color: var(--fr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.fr-chat-back:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-accent);
  border-color: var(--fr-accent);
}

.fr-chat-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.5rem;
}

.fr-chat-topic {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  background: var(--fr-surface);
  color: var(--fr-text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}

.fr-chat-topic:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-text);
  border-color: var(--fr-accent);
}

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

.fr-chat-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.fr-chat-messages {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fr-chat-msg {
  display: flex;
  max-width: 80%;
  min-width: 0;
}

.fr-chat-msg {
  flex-direction: column;
  gap: 3px;
}

.fr-chat-msg.selected .fr-chat-msg-content {
  border-color: var(--fr-accent) !important;
}

.fr-chat-msg-content {
  word-break: break-word;
  overflow-wrap: break-word;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
}

.fr-chat-msg-content:hover {
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.15);
  transform: translateY(-1px);
}

.fr-chat-msg-actions {
  display: flex;
  gap: 0.2rem;
}

.fr-chat-msg.user .fr-chat-msg-actions {
  align-self: flex-end;
}

.fr-chat-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--fr-text-muted);
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.15s;
}

.fr-chat-action-btn:hover,
.fr-chat-action-btn.active {
  opacity: 1;
  color: var(--fr-accent);
}

.fr-chat-msg:hover .fr-chat-action-btn {
  opacity: 0.7;
}

.fr-chat-user-expand {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--fr-border);
}

.fr-chat-user-fr {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fr-accent);
}

.fr-chat-user-pron {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--fr-text-muted);
  margin-top: 2px;
}

.fr-chat-msg.user {
  align-self: flex-end;
  max-width: 70%;
}

.fr-chat-msg.assistant {
  align-self: flex-start;
}

.fr-chat-msg-content {
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  position: relative;
}

.fr-chat-msg.user .fr-chat-msg-content {
  background: var(--fr-accent-bg);
  border: 1px solid var(--fr-accent);
  color: var(--fr-text);
  border-bottom-right-radius: 4px;
}

.fr-chat-msg.assistant .fr-chat-msg-content {
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  color: var(--fr-text);
  border-bottom-left-radius: 4px;
}

.fr-chat-french {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fr-text);
  margin-bottom: 0.2rem;
}

.fr-chat-translation {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--fr-text-muted);
  margin-top: 0.15rem;
}

.fr-chat-newword {
  font-size: 0.72rem;
  color: var(--fr-accent);
  margin-top: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: var(--fr-accent-bg);
  border-radius: 6px;
  display: inline-block;
}

/* Old in-bubble actions removed — now using fr-chat-msg-actions */

.fr-chat-typing {
  display: flex;
  gap: 4px;
  padding: 0.2rem 0;
}

.fr-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fr-text-muted);
  animation: chatBounce 1.2s ease-in-out infinite;
}

.fr-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.fr-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

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

.fr-chat-input-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--fr-border);
  background: var(--fr-bg);
}

.fr-chat-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fr-border);
  border-radius: 20px;
  background: var(--fr-surface);
  color: var(--fr-text);
  font-size: 0.85rem;
  outline: none;
}

.fr-chat-input:focus {
  border-color: var(--fr-accent);
}

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

.fr-chat-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--fr-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s;
}

.fr-chat-send:hover { opacity: 0.85; }
.fr-chat-send:disabled { opacity: 0.3; cursor: default; }

/* Coach sidebar */
.fr-chat-coach {
  width: 320px;
  min-width: 220px;
  max-width: 500px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem;
  border-right: 1px solid var(--fr-border);
  background: var(--fr-surface);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  resize: horizontal;
  overflow-x: hidden;
}

.fr-coach-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fr-accent);
}

.fr-coach-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fr-coach-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fr-text-muted);
}

.fr-coach-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.fr-coach-word {
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem;
  background: var(--fr-accent-bg);
  border-radius: 5px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s;
}

.fr-coach-word:hover {
  background: var(--fr-surface-hover);
}

.fr-coach-word-fr {
  font-weight: 600;
  color: var(--fr-accent);
}

.fr-coach-word-en {
  color: var(--fr-text-muted);
}

.fr-coach-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  background: none;
  color: var(--fr-text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

.fr-coach-suggestion:hover {
  background: var(--fr-accent-bg);
  border-color: var(--fr-accent);
}

.fr-coach-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fr-text-muted);
  font-size: 0.72rem;
}

.fr-coach-loading .lucide-loader {
  animation: spin 1.5s linear infinite;
}

.fr-coach-empty {
  color: var(--fr-text-muted);
  font-size: 0.72rem;
  text-align: center;
  padding: 1rem 0.5rem;
  line-height: 1.5;
}

.fr-coach-translation {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fr-accent);
  line-height: 1.5;
  padding: 0.4rem 0.5rem;
  background: var(--fr-accent-bg);
  border-radius: 8px;
}

.fr-coach-speak {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--fr-border);
  border-radius: 6px;
  background: none;
  color: var(--fr-text-muted);
  font-size: 0.68rem;
  cursor: pointer;
  align-self: flex-start;
}

.fr-coach-speak:hover {
  color: var(--fr-accent);
  border-color: var(--fr-accent);
}

.fr-chat-msg.user {
  cursor: pointer;
}

.fr-coach-grammar {
  font-size: 0.7rem;
  color: var(--fr-text-muted);
  line-height: 1.4;
  padding: 0.3rem 0.4rem;
  background: rgba(251, 191, 36, 0.05);
  border-left: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: 0 4px 4px 0;
}

/* ── Theatre Game ─────────────────────────────────────────────── */

.fr-theatre {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0a0a12;
}

.fr-theatre-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.fr-theatre-score { font-weight: 600; }
.fr-theatre-round { color: rgba(255, 255, 255, 0.35); }
.fr-theatre-lives { font-size: 1rem; }

.fr-theatre-video {
  flex-shrink: 0;
  position: relative;
  background: #000;
}

.fr-theatre-player {
  width: 100%;
  max-height: 280px;
  display: block;
  object-fit: contain;
}

.fr-theatre-subtitle {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
}

.fr-theatre-prompt {
  text-align: center;
  padding: 0.6rem;
  font-size: 0.75rem;
  color: rgba(167, 139, 250, 0.6);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.fr-theatre-words {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  padding: 0 0.75rem 0.75rem;
  flex: 1;
  align-content: start;
}

.fr-theatre-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.7rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.15s;
}

.fr-theatre-word:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.3);
}

.fr-theatre-word-fr {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.fr-theatre-word-en {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
}

.fr-theatre-word.correct {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
}

.fr-theatre-word.correct .fr-theatre-word-fr { color: #4ade80; }

.fr-theatre-word.wrong {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.fr-theatre-word.wrong .fr-theatre-word-fr { color: #f87171; text-decoration: line-through; }

.fr-theatre-word.missed {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}

.fr-theatre-word.missed .fr-theatre-word-fr { color: #fbbf24; }

.fr-theatre-word:disabled {
  cursor: default;
  opacity: 0.7;
}

.fr-theatre-word-seek {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.58rem;
  color: rgba(167, 139, 250, 0.6);
  margin-top: 2px;
}

.fr-theatre-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  gap: 0.5rem;
}

.fr-theatre-control-btns {
  display: flex;
  gap: 0.4rem;
}

.fr-theatre-ctrl-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}

.fr-theatre-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.fr-theatre-ctrl-btn.give-up {
  border-color: rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.5);
}

.fr-theatre-ctrl-btn.give-up:hover {
  background: rgba(251, 191, 36, 0.1);
  color: rgba(251, 191, 36, 0.8);
}

/* ── Word Catch Game ──────────────────────────────────────────── */

.fr-game-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.95) 0%, rgba(20, 15, 40, 0.95) 100%);
}

.fr-game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.fr-game-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  color: var(--fr-text);
}

.fr-game-start h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.fr-game-start p {
  font-size: 0.85rem;
  color: var(--fr-text-muted);
  margin: 0;
}

.fr-game-start .lucide {
  color: var(--fr-accent);
}

.fr-game-final-score {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--fr-accent) !important;
}

.fr-game-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.fr-btn-primary {
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: 10px;
  background: var(--fr-accent, #a78bfa);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.fr-btn-primary:hover {
  opacity: 0.85;
}

.fr-btn-primary:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Stories view ─────────────────────────────────────────────── */

.fr-stories-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.fr-story-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 12px;
}

.fr-story-card-fr {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fr-text);
}

.fr-story-card-en {
  font-size: 0.8rem;
  color: var(--fr-text-muted);
  font-style: italic;
  line-height: 1.5;
}

.fr-story-card-date {
  font-size: 0.62rem;
  color: var(--fr-text-muted);
  opacity: 0.5;
}

body.light .fr-map-panel-example {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}

body.light .fr-map-container {
  background: radial-gradient(ellipse at center, rgba(230, 220, 250, 0.3) 0%, rgba(248, 248, 250, 0.95) 100%);
}

.fr-map-legend {
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
}

.fr-legend-item {
  font-size: 0.65rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.fr-legend-item::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.fr-legend-new { color: rgba(255, 255, 255, 0.35); }
.fr-legend-new::before { background: rgba(100, 100, 120, 0.5); }

.fr-legend-due { color: rgba(251, 191, 36, 0.7); }
.fr-legend-due::before { background: rgba(251, 191, 36, 0.5); }

.fr-legend-learned { color: rgba(167, 139, 250, 0.7); }
.fr-legend-learned::before { background: rgba(167, 139, 250, 0.5); }

body.light .fr-legend-new { color: rgba(0, 0, 0, 0.3); }
body.light .fr-legend-due { color: rgba(180, 130, 0, 0.7); }
body.light .fr-legend-learned { color: rgba(124, 58, 237, 0.7); }

/* ── Tab bar ─────────────────────────────────────────────────── */

/* Left sidebar navigation */
.fr-sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 42px;
  flex-shrink: 0;
  padding: 0.3rem;
  gap: 0.1rem;
  border-right: 1px solid var(--fr-border);
  background: var(--fr-bg);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s ease;
}

.fr-sidebar-nav.expanded {
  width: 150px;
  min-width: 120px;
  max-width: 220px;
  align-items: stretch;
  resize: horizontal;
  overflow: hidden;
}

.fr-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--fr-text-muted);
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 0.3rem;
  transition: all 0.15s;
  align-self: center;
}

.fr-nav-toggle:hover {
  color: var(--fr-text);
  background: var(--fr-surface-hover);
}

.fr-sidebar-nav.expanded .fr-nav-toggle {
  align-self: flex-end;
}

.fr-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  color: var(--fr-text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  flex-shrink: 0;
  gap: 0.5rem;
}

.fr-sidebar-nav.expanded .fr-nav-item {
  width: auto;
  justify-content: flex-start;
  padding: 0 0.5rem;
}

.fr-nav-item:hover {
  color: var(--fr-text);
  background: var(--fr-surface-hover);
}

.fr-nav-item.active {
  color: var(--fr-accent);
  background: var(--fr-accent-bg);
}

.fr-nav-item:disabled {
  opacity: 0.25;
  cursor: default;
}

.fr-nav-label {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.fr-nav-divider {
  height: 1px;
  width: 20px;
  margin: 0.25rem 0;
  background: var(--fr-border);
  align-self: center;
}

.fr-nav-header {
  opacity: 0.6;
  margin-top: 0.15rem;
}

.fr-nav-game {
  height: 30px;
}

.fr-nav-game .lucide {
  opacity: 0.7;
}

.fr-sidebar-nav.expanded .fr-nav-game {
  padding-left: 1.2rem;
}

/* Keep old tab classes for backward compat but hide */
.fr-tab-bar { display: none; }
.fr-tab { display: none; }

/* Tab dropdown */
.fr-tab-dropdown {
  position: relative;
}

.fr-tab-dropdown > .fr-tab {
  gap: 4px;
}

.fr-tab-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
}

.fr-tab-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 220px;
  background: var(--fr-bg, #0a0a0f);
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  padding: 0.35rem;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  animation: fadeInUp 0.15s ease;
}

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

.fr-tab-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--fr-text-muted);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}

.fr-tab-dropdown-item:hover {
  background: var(--fr-surface-hover);
  color: var(--fr-text);
}

.fr-tab-dropdown-item.active {
  color: var(--fr-accent);
}

.fr-dropdown-item-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: inherit;
}

.fr-dropdown-item-desc {
  font-size: 0.62rem;
  color: var(--fr-text-muted);
  opacity: 0.7;
}
/**
 * DOS Games App Styles
 *
 * Retro arcade aesthetic with CRT vibes
 */

.dos-games-app {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

/* Scanline effect overlay */
.dos-games-app::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 10;
}

/* Header */
.dos-header {
  padding: 1.5rem 2rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
}

.dos-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.dos-icon {
  font-size: 2rem;
  animation: pulse 2s ease-in-out infinite;
}

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

.dos-header h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  margin: 0;
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow 5s ease infinite;
  text-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
}

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

.dos-subtitle {
  margin: 0.5rem 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

/* Games Grid */
.games-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Game Card */
.game-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  overflow: hidden;
}

.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--game-color, #333) 0%, transparent 60%);
  opacity: 0.15;
  transition: opacity 0.3s ease;
}

.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--game-color, rgba(255, 255, 255, 0.3));
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.4),
    0 0 20px color-mix(in srgb, var(--game-color, #fff) 30%, transparent);
}

.game-card:hover::before {
  opacity: 0.25;
}

.game-card:active {
  transform: translateY(-2px);
}

.game-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.game-thumbnail {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

.game-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.game-name {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.game-meta {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--game-color, #888);
  background: rgba(0, 0, 0, 0.4);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.game-desc {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Error */
.dos-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  margin: 0 1.5rem 1rem;
  background: rgba(255, 100, 100, 0.1);
  border: 1px solid rgba(255, 100, 100, 0.3);
  border-radius: 8px;
  color: #ff6b6b;
  font-size: 0.85rem;
}

/* Footer */
.dos-footer {
  padding: 1rem 2rem;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
}

.dos-footer p {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.dos-footer .dos-credits {
  margin-top: 0.25rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
}

/* =========================================
   GAME PLAYING STATE
   ========================================= */

.dos-games-app.playing {
  background: #000;
}

.dos-games-app.playing::before {
  display: none;
}

/* Toolbar */
.game-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: linear-gradient(180deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 20, 30, 0.95) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 20;
}

.toolbar-btn {
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.toolbar-btn.back {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.3);
}

.toolbar-btn.back:hover {
  background: rgba(255, 107, 107, 0.2);
}

.now-playing {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

/* Game Container with iframe */
.game-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  min-height: 0;
  overflow: hidden;
  padding: 1rem;
}

/* Wrapper for aspect ratio */
.game-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: calc((100vh - 100px) * 1.33); /* 4:3 aspect ratio, accounting for toolbar */
  max-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

.game-wrapper:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  background: #000;
  padding: 0;
}

.game-wrapper:fullscreen .game-iframe {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

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

.toolbar-btn.external {
  color: #48dbfb;
  border-color: rgba(72, 219, 251, 0.3);
  text-decoration: none;
}

.toolbar-btn.external:hover {
  background: rgba(72, 219, 251, 0.2);
}

/* Controls Hint */
.game-controls-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 20;
}

.game-controls-hint span {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Scrollbar styling */
.games-grid::-webkit-scrollbar {
  width: 8px;
}

.games-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

.games-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.games-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Fullscreen mode */
.dos-canvas-container:fullscreen {
  background: #000;
}

.dos-canvas-container:fullscreen canvas {
  width: auto;
  height: 100vh;
}

.code-activity-app {
  height: 100%;
  color: var(--os-text-primary);
  background: transparent;
}

.code-activity-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 1rem;
  border-bottom: 1px solid var(--os-divider, rgba(255, 255, 255, 0.1));
  flex-shrink: 0;
}

.code-activity-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--os-text-muted, rgba(255, 255, 255, 0.5));
  cursor: pointer;
  transition: all 0.15s;
}

.code-activity-tab:hover {
  background: var(--os-hover-bg, rgba(255, 255, 255, 0.06));
  color: var(--os-text-secondary, rgba(255, 255, 255, 0.7));
}

.code-activity-tab.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent, #a78bfa);
  font-weight: 600;
}

.code-activity-music {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Music for Programming — native player */
.mfp-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0d0d14;
  color: rgba(255, 255, 255, 0.85);
}

.mfp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  background: #0d0d14;
}

.mfp-player {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.mfp-now-playing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mfp-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.mfp-eq-bars span {
  width: 3px;
  background: #4ade80;
  border-radius: 1px;
  animation: mfp-eq 1s ease-in-out infinite;
}

.mfp-eq-bars span:nth-child(1) { height: 5px; animation-delay: 0s; }
.mfp-eq-bars span:nth-child(2) { height: 10px; animation-delay: 0.2s; }
.mfp-eq-bars span:nth-child(3) { height: 6px; animation-delay: 0.4s; }

@keyframes mfp-eq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.mfp-now-info { flex: 1; min-width: 0; }
.mfp-now-title { font-size: 0.8rem; font-weight: 600; color: #4ade80; }
.mfp-now-duration { font-size: 0.65rem; color: rgba(255, 255, 255, 0.35); }

.mfp-audio {
  width: 100%;
  height: 32px;
  border-radius: 6px;
  outline: none;
}

.mfp-audio::-webkit-media-controls-panel { background: rgba(255, 255, 255, 0.06); }

.mfp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mfp-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.mfp-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  margin-left: auto;
}

.mfp-shuffle {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}

.mfp-shuffle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.mfp-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.mfp-list::-webkit-scrollbar { width: 4px; }
.mfp-list::-webkit-scrollbar-track { background: transparent; }
.mfp-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

.mfp-episode {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.mfp-episode:hover { background: rgba(255, 255, 255, 0.05); }
.mfp-episode.active { background: rgba(74, 222, 128, 0.1); color: #4ade80; }

.mfp-ep-num {
  width: 24px;
  text-align: right;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.mfp-episode.active .mfp-ep-num { color: #4ade80; }

.mfp-ep-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfp-ep-dur { font-size: 0.65rem; color: rgba(255, 255, 255, 0.25); flex-shrink: 0; }

.code-activity-app-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ---- Chart Section ---- */

.ca-chart {
  background: var(--os-glass-bg, rgba(255, 255, 255, 0.07));
  border: 1px solid var(--os-glass-border, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
}

.ca-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-bottom: 1px solid var(--os-divider, rgba(255, 255, 255, 0.1));
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  border-radius: 12px 12px 0 0;
}

.ca-periods {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.ca-period-btn {
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--os-glass-border, rgba(255, 255, 255, 0.15));
  color: var(--os-text-muted);
  transition: all 0.15s ease;
}

.ca-period-btn:hover {
  background: var(--os-hover-bg, rgba(255, 255, 255, 0.08));
  color: var(--os-text-secondary);
}

.ca-period-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}

.ca-stats {
  display: flex;
  gap: 1.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--os-divider, rgba(255, 255, 255, 0.08));
}

.ca-stat {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.ca-stat-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--os-text-primary);
}

.ca-stat-value.green { color: #4ade80; }
.ca-stat-value.red { color: #f87171; }

.ca-stat-label {
  font-size: 0.6875rem;
  color: var(--os-text-muted);
}

.ca-sub-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.ca-body {
  padding: 0.75rem 0.5rem 0.25rem;
}

.ca-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--os-text-muted);
  font-size: 0.8125rem;
}

/* ---- Today's Commits ---- */

.ca-today {
  background: var(--os-glass-bg, rgba(255, 255, 255, 0.07));
  border: 1px solid var(--os-glass-border, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
}

.ca-today-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-bottom: 1px solid var(--os-divider, rgba(255, 255, 255, 0.1));
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  border-radius: 12px 12px 0 0;
}

.ca-today-count {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--os-text-muted);
}

.ca-today-groups {
  padding: 0.5rem;
}

/* ---- Area Groups ---- */

.ca-group {
  margin-bottom: 0.35rem;
}

.ca-group-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-secondary);
}

.ca-group-header.clickable {
  cursor: pointer;
}

.ca-group-header.clickable:hover {
  background: var(--os-hover-bg, rgba(255, 255, 255, 0.06));
}

.ca-group-icon { opacity: 0.7; }

.ca-group-name { flex: 1; }

.ca-group-count {
  font-size: 0.65rem;
  color: var(--os-text-muted);
  background: var(--os-icon-bg, rgba(255, 255, 255, 0.08));
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}

.ca-group-chevron { opacity: 0.5; }

.ca-group.blue .ca-group-header { color: rgba(56, 189, 248, 0.95); }
.ca-group.green .ca-group-header { color: rgba(74, 222, 128, 0.95); }
.ca-group.purple .ca-group-header { color: rgba(192, 132, 252, 0.95); }
.ca-group.orange .ca-group-header { color: rgba(251, 146, 60, 0.95); }
.ca-group.teal .ca-group-header { color: rgba(45, 212, 191, 0.95); }
.ca-group.pink .ca-group-header { color: rgba(244, 114, 182, 0.95); }

/* ---- Commit Items ---- */

.ca-group-items {
  padding-left: 1.75rem;
}

.ca-commit-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.15rem 0;
  font-size: 0.73rem;
  line-height: 1.4;
}

.ca-commit-item.muted {
  opacity: 0.45;
}

.ca-commit-time {
  flex-shrink: 0;
  font-size: 0.6rem;
  color: var(--os-text-hint);
  min-width: 3.5em;
}

.ca-commit-msg {
  color: var(--os-text-primary);
}

.ca-commit-lines {
  flex-shrink: 0;
  display: flex;
  gap: 0.3rem;
  font-size: 0.6rem;
  margin-left: auto;
}

.lines-added { color: rgba(74, 222, 128, 0.85); }
.lines-removed { color: rgba(248, 113, 113, 0.75); }

/* ---- Day Detail (click to expand) ---- */

.ca-day-detail {
  border: 1px solid var(--os-glass-border, rgba(255,255,255,0.12));
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0.5rem 0.5rem;
}

.ca-day-detail-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.08);
  border-bottom: 1px solid var(--os-divider);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}

.ca-day-detail-meta {
  margin-left: 0.25rem;
  font-weight: 400;
  color: var(--os-text-muted);
  font-size: 0.7rem;
}

.ca-day-detail-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--os-text-muted);
  padding: 0;
  display: flex;
  align-items: center;
  opacity: 0.6;
}
.ca-day-detail-close:hover { opacity: 1; }

.ca-day-detail-body {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ca-day-area-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.ca-day-area-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ca-day-commit {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.72rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
}

.ca-day-hash {
  font-family: monospace;
  font-size: 0.65rem;
  color: var(--os-text-hint);
  flex-shrink: 0;
}

.ca-day-msg {
  color: var(--os-text-primary);
  line-height: 1.4;
}
/* Psyche Studio */

.ps-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  overflow: hidden;
}

.ps-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
}

/* Header */
.ps-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.ps-title { font-weight: 700; font-size: 15px; }
.ps-brain-name { font-size: 11px; color: rgba(255, 255, 255, 0.3); }

/* Tabs */
.ps-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.ps-tab {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.1s;
}
.ps-tab:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); }
.ps-tab.active { background: rgba(167, 139, 250, 0.2); color: #a78bfa; }

/* Content */
.ps-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.ps-view {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Section */
.ps-section {
  margin-bottom: 16px;
}
.ps-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ps-section-icon {
  color: rgba(255, 255, 255, 0.35);
}
.ps-section-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ps-section-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  margin-left: 21px;
}

/* Row */
.ps-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
}
.ps-row.muted { opacity: 0.5; }
.ps-row-label { color: rgba(255, 255, 255, 0.4); }
.ps-row-value { color: rgba(255, 255, 255, 0.8); font-weight: 500; }

/* Bar */
.ps-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.ps-bar-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  width: 70px;
  flex-shrink: 0;
}
.ps-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.ps-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s;
}
.ps-bar-value {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 600;
}

/* Dominant card */
.ps-dominant-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid;
  margin-bottom: 8px;
}

/* Layer */
.ps-layer {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid;
  margin-bottom: 4px;
  font-size: 10px;
}
.ps-layer-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}

/* Action grid */
.ps-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ps-action-tag {
  padding: 2px 6px;
  font-size: 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Decision */
.ps-decision {
  display: flex;
  justify-content: space-between;
  padding: 2px 8px;
  font-size: 9px;
}
.ps-decision-action { color: rgba(255, 255, 255, 0.7); font-weight: 500; }

/* Card */
.ps-card {
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-card-title {
  font-size: 14px;
  font-weight: 600;
}
.ps-card-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 6px;
}

/* Status dot */
.ps-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Entity list */
.ps-entity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ps-entity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

/* Activity */
.ps-activity-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.ps-activity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ps-activity-app {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

/* Atmosphere grid */
.ps-atm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ps-atm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ps-atm-value {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.ps-atm-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 1px;
}

/* Surfaces */
.ps-surface-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ps-surface-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  padding: 3px 8px;
}
.ps-focused-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  font-weight: 600;
}

/* Proximity tags (Me section + My Person attention) */
.ps-proximity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.ps-proximity-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  background: rgba(167, 139, 250, 0.12);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.25);
}
.ps-proximity-tag.muted {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}
.ps-proximity-tag.attention {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.35);
}

/* Crowdedness pill (Activity section) */
.ps-crowdedness-pill {
  display: inline-block;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid;
  margin-bottom: 8px;
}

/* Motion row (Activity section) */
.ps-motion-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.ps-motion-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.ps-motion-tag.appeared {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.25);
}
.ps-motion-tag.disappeared {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.25);
}

/* ── Behavioral Output — Full Analysis ── */

/* Tab bar */
.ps-bo-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-bo-tab {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.ps-bo-tab:hover { background: rgba(255, 255, 255, 0.03); }
.ps-bo-tab.active { background: rgba(255, 255, 255, 0.04); }
.ps-bo-tab-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ps-bo-tab.active .ps-bo-tab-label { color: rgba(255, 255, 255, 0.6); }
.ps-bo-tab-value {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.ps-bo-tab.active .ps-bo-tab-value { font-weight: 700; }

/* Feeling banner */
.ps-bo-feeling {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ps-bo-feeling-name { font-size: 18px; font-weight: 700; }
.ps-bo-feeling-reason { font-size: 10px; color: rgba(255, 255, 255, 0.35); }

/* Section headers within tabs */
.ps-bo-section-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  margin-top: 16px;
}
.ps-bo-section-label:first-child { margin-top: 0; }

/* Hero — current selection (big) */
.ps-bo-hero {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.ps-bo-hero-left { flex: 0 0 auto; }
.ps-bo-hero-value { font-size: 22px; font-weight: 700; }
.ps-bo-hero-meta { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-top: 4px; }
.ps-bo-hero-right { flex: 1; font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.6; }

/* Catalogue pill grid */
.ps-bo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.ps-bo-pill {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid transparent;
  transition: all 0.15s;
}
.ps-bo-pill.scored {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
}
.ps-bo-pill.active {
  font-weight: 600;
  border: 1px solid;
}

/* Scoring row */
.ps-bo-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.ps-bo-score-row:last-child { border-bottom: none; }
.ps-bo-score-row.winner { padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border-bottom: none; margin-bottom: 4px; }
.ps-bo-score-label {
  min-width: 130px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.ps-bo-score-row.winner .ps-bo-score-label { font-weight: 700; font-size: 14px; }
.ps-bo-score-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  overflow: hidden;
}
.ps-bo-score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ps-bo-score-value {
  min-width: 36px;
  text-align: right;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ps-bo-score-row.winner .ps-bo-score-value { font-size: 14px; }

/* Score breakdown tags */
.ps-bo-breakdown {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 2px 0 2px 138px;
  font-size: 11px;
}
.ps-bo-breakdown-tag { color: rgba(255, 255, 255, 0.35); }
.ps-bo-breakdown-tag.boost { color: #34d399; }
.ps-bo-breakdown-tag.suppress { color: #f87171; }
.ps-bo-breakdown-tag.recent { color: #fb923c; }

/* Feeling→Face mapping rows */
.ps-bo-map-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 8px;
  border-radius: 6px;
}
.ps-bo-map-row.active { background: rgba(255, 255, 255, 0.03); }
.ps-bo-map-name { min-width: 100px; font-size: 13px; }
.ps-bo-map-arrow { color: rgba(255, 255, 255, 0.2); font-size: 12px; }
.ps-bo-map-value { font-size: 13px; }
.ps-bo-map-intensity { font-size: 11px; color: rgba(255, 255, 255, 0.3); margin-left: auto; }

/* Trigger rows (speech, reflexes) */
.ps-bo-trigger-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.ps-bo-trigger-row.active { background: rgba(255, 255, 255, 0.03); }
.ps-bo-trigger-condition { min-width: 180px; font-weight: 500; }
.ps-bo-trigger-arrow { color: rgba(255, 255, 255, 0.2); }
.ps-bo-trigger-output { color: rgba(255, 255, 255, 0.5); }
.ps-bo-trigger-active-badge {
  font-size: 10px;
  font-weight: 600;
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 4px;
}

/* Source category rows (deliberate speech) */
.ps-bo-source-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 8px;
  margin-bottom: 2px;
  font-size: 13px;
}
.ps-bo-source-name { min-width: 160px; font-weight: 600; }
.ps-bo-source-desc { flex: 1; color: rgba(255, 255, 255, 0.4); font-size: 12px; }
.ps-bo-source-count { flex-shrink: 0; color: rgba(255, 255, 255, 0.3); font-size: 11px; }

/* Speech log */
.ps-bo-speech-entry {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
}
.ps-bo-speech-time { color: rgba(255, 255, 255, 0.3); min-width: 40px; font-variant-numeric: tabular-nums; }
.ps-bo-speech-text { color: rgba(255, 255, 255, 0.7); font-style: italic; }
.ps-bo-speech-source { color: rgba(255, 255, 255, 0.25); font-size: 11px; margin-left: auto; }

/* Posture zone cards */
.ps-bo-zone-card {
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.ps-bo-zone-card.active { border-left-color: inherit; }
.ps-bo-zone-label { flex: 0 0 150px; }
.ps-bo-zone-name { font-size: 14px; font-weight: 600; }
.ps-bo-zone-posture { font-size: 12px; color: rgba(255, 255, 255, 0.35); }
.ps-bo-zone-desc { flex: 1; font-size: 12px; color: rgba(255, 255, 255, 0.4); line-height: 1.5; }

/* Stat grid (3 cols) */
.ps-bo-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.ps-bo-stat {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.ps-bo-stat-label { font-size: 10px; color: rgba(255, 255, 255, 0.35); font-weight: 600; margin-bottom: 4px; }
.ps-bo-stat-value { font-size: 16px; font-weight: 600; }

/* Utilities */
.ps-muted { font-size: 9px; color: rgba(255, 255, 255, 0.3); }
/* Trace List */

.trace-list-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.trace-list-item {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.trace-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.trace-list-item.selected {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

.trace-list-item.error {
  border-left: 3px solid #ef4444;
}

.trace-list-item.running {
  border-left: 3px solid #60a5fa;
}

.trace-list-item.success {
  border-left: 3px solid #4ade80;
}

.trace-list-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.trace-list-item-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trace-list-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.trace-list-item-status {
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 9px;
}

.trace-list-item-status.success {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.trace-list-item-status.error {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.trace-list-item-status.running {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.trace-list-empty {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
}

/* Scrollbar */
.trace-list-items::-webkit-scrollbar {
  width: 6px;
}

.trace-list-items::-webkit-scrollbar-track {
  background: transparent;
}

.trace-list-items::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.trace-list-items::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Grouped view */
.trace-list-items.grouped {
  padding: 4px;
}

.trace-list-group {
  margin-bottom: 4px;
}

.trace-list-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s ease;
}

.trace-list-group-header:hover {
  background: rgba(255, 255, 255, 0.08);
}

.trace-list-group-name {
  flex: 1;
}

.trace-list-group-count {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.trace-list-group-running {
  color: #60a5fa;
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.2);
  border-radius: 10px;
}

.trace-list-group-error {
  color: #ef4444;
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 10px;
}

.trace-list-group-items {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 8px;
  margin-top: 4px;
}

.trace-list-group-items .trace-list-item {
  padding: 8px 10px;
}

.trace-list-group-items .trace-list-item-name {
  font-size: 12px;
}
/* Sequence Diagram */

.sequence-diagram {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.sequence-svg {
  display: block;
}

.sequence-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: rgba(255, 255, 255, 0.4);
  gap: 12px;
}

/* SVG event hover/selection */
.seq-event {
  cursor: pointer;
}

.seq-event:hover rect {
  filter: brightness(1.2);
}

.seq-event.selected rect {
  stroke: #60a5fa;
  stroke-width: 2;
}

/* Scrollbar */
.sequence-diagram::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.sequence-diagram::-webkit-scrollbar-track {
  background: transparent;
}

.sequence-diagram::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.sequence-diagram::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Flame Graph */

.flame-graph {
  min-width: 600px;
}

.flame-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: rgba(255, 255, 255, 0.4);
  gap: 12px;
}

.flame-timescale {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.flame-span-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.flame-span-label {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 200px;
  flex-shrink: 0;
}

.flame-span-toggle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
}

.flame-span-toggle:hover {
  color: rgba(255, 255, 255, 0.9);
}

.flame-span-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}

.flame-span-name:hover {
  background: rgba(255, 255, 255, 0.1);
}

.flame-span-name.selected {
  background: rgba(59, 130, 246, 0.2);
}

.flame-span-duration {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  width: 50px;
  text-align: right;
}

.flame-span-bar-container {
  flex: 1;
  height: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
  position: relative;
}

.flame-span-bar {
  position: absolute;
  height: 100%;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.15s ease;
  min-width: 2px;
}

.flame-span-bar:hover {
  opacity: 0.8;
}
/* Span Tree View */

.span-tree {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.span-tree-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.span-tree-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.span-tree-actions {
  display: flex;
  gap: 4px;
}

.span-tree-actions button {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.span-tree-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.span-tree-content {
  flex: 1;
  overflow: auto;
  padding: 8px 0;
}

/* Tree node */
.span-tree-node-wrapper {
  display: flex;
  flex-direction: column;
}

.span-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.1s ease;
  min-height: 32px;
}

.span-tree-node:hover {
  background: rgba(255, 255, 255, 0.03);
}

.span-tree-node.selected {
  background: rgba(59, 130, 246, 0.15);
}

/* Expand button */
.span-tree-expand {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.1s ease;
}

.span-tree-expand:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.span-tree-expand.invisible {
  visibility: hidden;
}

/* Status icon */
.span-tree-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.span-tree-status svg.spin {
  animation: spin 1s linear infinite;
}

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

/* Span name */
.span-tree-name {
  flex: 1;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Machine badge */
.span-tree-machine {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Duration */
.span-tree-duration {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
}

/* Empty state */
.span-tree-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  gap: 12px;
}

/* Scrollbar */
.span-tree-content::-webkit-scrollbar {
  width: 6px;
}

.span-tree-content::-webkit-scrollbar-track {
  background: transparent;
}

.span-tree-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.span-tree-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Machine Swim Lanes */

.machine-swimlanes {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}

/* Toolbar */
.swimlanes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.swimlanes-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.swimlanes-info .separator {
  color: rgba(255, 255, 255, 0.2);
}

.swimlanes-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.swimlanes-zoom button {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.swimlanes-zoom button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.swimlanes-zoom span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  min-width: 40px;
  text-align: center;
}

/* Container */
.swimlanes-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Machine labels (fixed left column) */
.swimlanes-labels {
  width: 80px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.swimlanes-label-header {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.swimlanes-label {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

.swimlanes-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Timeline wrapper (scrollable) */
.swimlanes-timeline-wrapper {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
}

.swimlanes-timeline {
  min-width: 100%;
  display: flex;
  flex-direction: column;
}

/* Time header */
.swimlanes-time-header {
  height: 32px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  z-index: 10;
  overflow: hidden;
}

.swimlanes-time-marker {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
}

.swimlanes-time-marker span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

/* Lanes */
.swimlanes-lane {
  min-height: 40px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
}

.swimlanes-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.05);
}

/* Span bars */
.swimlane-span {
  position: absolute;
  min-width: 40px;
  min-height: 28px;
  border-radius: 4px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.swimlane-span:hover {
  filter: brightness(1.2);
}

.swimlane-span.selected {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.swimlane-span.error {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
}

.swimlane-span.running {
  animation: pulse 1.5s ease-in-out infinite;
}

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

.swimlane-span-name {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.swimlane-span-duration {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

/* Legend */
.swimlanes-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.swimlanes-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.swimlanes-legend-bar {
  width: 24px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid;
}

.swimlanes-legend-bar.error {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

/* Empty state */
.swimlanes-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  gap: 12px;
}

/* Scrollbar */
.swimlanes-timeline-wrapper::-webkit-scrollbar {
  height: 8px;
}

.swimlanes-timeline-wrapper::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

.swimlanes-timeline-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.swimlanes-timeline-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Service Dependency Graph */

.service-graph {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
}

.service-graph-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  gap: 12px;
}

.service-graph-empty p {
  margin: 0;
}

.service-graph-empty-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}

/* Toolbar */
.service-graph-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.service-graph-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

.service-graph-info .separator {
  color: rgba(255, 255, 255, 0.2);
}

.service-graph-controls {
  display: flex;
  gap: 4px;
}

.service-graph-controls button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.service-graph-controls button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.service-graph-controls button.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.service-graph-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* SVG */
.service-graph-svg {
  flex: 1;
  min-height: 0;
}

/* Edges */
.service-edge {
  cursor: pointer;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
}

/* Nodes */
.service-node {
  /* No transform on hover - causes flicker */
}

.service-node .node-glow {
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.service-node .node-bg {
  transition: stroke-width 0.15s ease;
}

.service-node.hovered .node-bg {
  stroke-width: 3;
}

.service-node.hovered .node-label {
  fill: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.service-node text {
  pointer-events: none;
  user-select: none;
}

/* Legend */
.service-graph-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.service-graph-legend .legend-label {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

.service-graph-legend .separator {
  color: rgba(255, 255, 255, 0.15);
}
/* Codebase Dependency Graph */

.codebase-graph {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
}

.codebase-graph-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  gap: 12px;
}

.codebase-graph-empty p {
  margin: 0;
}

.codebase-graph-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}

.spinning {
  animation: spin 1s linear infinite;
}

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

/* Toolbar */
.codebase-graph-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  gap: 12px;
}

.codebase-graph-filters {
  display: flex;
  gap: 4px;
}

.codebase-graph-filters button,
.codebase-graph-layout button {
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.codebase-graph-filters button:hover,
.codebase-graph-layout button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.codebase-graph-filters button.active,
.codebase-graph-layout button.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.codebase-graph-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

.codebase-graph-info .separator {
  color: rgba(255, 255, 255, 0.2);
}

.codebase-graph-layout {
  display: flex;
  gap: 4px;
}

.codebase-graph-layout button {
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Content */
.codebase-graph-content {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.codebase-graph-svg {
  flex: 1;
}

/* Detail Panel */
.codebase-graph-detail {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 220px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px;
  font-size: 11px;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.detail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.detail-name {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-category {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

.detail-path {
  color: rgba(255, 255, 255, 0.4);
  font-family: monospace;
  font-size: 9px;
  margin-bottom: 10px;
  word-break: break-all;
}

.detail-section {
  margin-top: 10px;
}

.detail-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  margin-bottom: 6px;
}

.detail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.detail-item {
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
}

.detail-more {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  padding: 2px 4px;
}

/* Legend */
.codebase-graph-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
/* Detail Panel */

.detail-panel {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 360px;
  background: rgba(20, 20, 22, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 10;
  max-height: calc(100% - 32px);
  overflow-y: auto;
}

.detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  background: rgba(20, 20, 22, 0.98);
  backdrop-filter: blur(8px);
}

.detail-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  min-width: 0;
}

.detail-panel-title h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-panel-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}

.detail-panel-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.detail-panel-content {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sections */
.detail-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-section.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  padding: 10px;
}

.detail-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

/* Rows */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  gap: 12px;
}

.detail-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.detail-value {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
  word-break: break-all;
}

.detail-value.mono {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

/* Status badge */
.detail-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

.detail-status.status-success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.detail-status.status-error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.detail-status.status-running,
.detail-status.status-active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* Machine badge */
.detail-machine {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.detail-machine.mac {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

.detail-machine.nuc {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

/* Code location */
.detail-handler {
  display: block;
  padding: 8px 10px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--accent);
}

.detail-file {
  display: block;
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.detail-endpoint {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

/* User message */
.detail-message-content {
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

/* AI response - distinct styling */
.detail-message-content.ai-response {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.15);
}

/* Error content */
.detail-error-content {
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: #fca5a5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Metadata */
.detail-metadata {
  margin: 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  overflow-x: auto;
  color: rgba(255, 255, 255, 0.7);
  white-space: pre-wrap;
  word-break: break-all;
}

/* Raw JSON Inspector */
.raw-json-inspector {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 4px;
}

.raw-json-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.raw-json-header:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}

.raw-json-header span {
  flex: 1;
}

.raw-json-copy {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.raw-json-copy:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.raw-json-content {
  margin: 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

/* Scrollbar */
.detail-panel::-webkit-scrollbar,
.raw-json-content::-webkit-scrollbar,
.detail-message-content::-webkit-scrollbar {
  width: 6px;
}

.detail-panel::-webkit-scrollbar-track,
.raw-json-content::-webkit-scrollbar-track,
.detail-message-content::-webkit-scrollbar-track {
  background: transparent;
}

.detail-panel::-webkit-scrollbar-thumb,
.raw-json-content::-webkit-scrollbar-thumb,
.detail-message-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.detail-panel::-webkit-scrollbar-thumb:hover,
.raw-json-content::-webkit-scrollbar-thumb:hover,
.detail-message-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Logs View - Real-time system logs */

.logs-view,
.logs-view * {
  box-sizing: border-box;
}

.logs-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  flex: 1;
  background: rgba(0, 0, 0, 0.2);
}

/* Toolbar */
.logs-view .logs-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.logs-view .logs-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 180px;
}

.logs-view .logs-search input {
  flex: 1;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  outline: none;
  min-width: 100px;
}

.logs-view .logs-search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.logs-view .logs-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.logs-view .logs-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.logs-view .logs-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.logs-view .logs-filter-btn.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.logs-view .filter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Level menu */
.logs-view .level-menu {
  position: relative;
}

.logs-view .level-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: rgba(20, 20, 22, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px;
  z-index: 100;
  min-width: 100px;
}

.logs-view .level-option {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.logs-view .level-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.logs-view .level-option.active {
  background: rgba(59, 130, 246, 0.2);
}

/* Actions */
.logs-view .logs-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.logs-view .logs-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.logs-view .logs-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.logs-view .logs-action-btn.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

/* Connection status */
.logs-view .logs-connection-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.logs-view .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.logs-view .status-dot.connected {
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
}

.logs-view .status-dot.disconnected {
  background: #ef4444;
}

/* Logs list container */
.logs-view .logs-list-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.logs-view .logs-list {
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 12px;
  line-height: 1.5;
}

/* Log entry wrapper */
.logs-view .log-entry-wrapper {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logs-view .log-entry-wrapper.selected {
  background: rgba(59, 130, 246, 0.06);
}

/* Log entry */
.logs-view .log-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.1s;
}

.logs-view .log-entry:hover {
  background: rgba(255, 255, 255, 0.03);
}

.logs-view .log-entry.warn {
  background: rgba(245, 158, 11, 0.05);
}

.logs-view .log-entry.error,
.logs-view .log-entry.fatal {
  background: rgba(239, 68, 68, 0.08);
}

.logs-view .log-time {
  width: 70px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}

.logs-view .log-level {
  width: 50px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.logs-view .log-service {
  width: 90px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.logs-view .service-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.logs-view .log-message {
  flex: 1;
  color: rgba(255, 255, 255, 0.85);
  word-break: break-word;
  min-width: 0;
}

.logs-view .log-metadata {
  display: block;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  margin-top: 2px;
  word-break: break-all;
}

/* Log details panel (expanded) */
.logs-view .log-details {
  margin: 0 16px 12px 16px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.logs-view .log-details-row {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  align-items: flex-start;
}

.logs-view .log-details-row:first-child {
  padding-top: 0;
}

.logs-view .log-details-row:last-child {
  padding-bottom: 0;
}

.logs-view .log-details-label {
  width: 70px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.logs-view .log-details-value {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
}

.logs-view .log-details-message {
  white-space: pre-wrap;
}

.logs-view .log-details-json {
  margin: 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

/* Empty state */
.logs-view .logs-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  gap: 8px;
  padding: 40px;
}

.logs-view .logs-empty-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

/* Stats bar */
.logs-view .logs-stats {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.logs-view .logs-stat-value {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  margin-right: 4px;
}

/* Scrollbar */
.logs-view .logs-list-container::-webkit-scrollbar {
  width: 6px;
}

.logs-view .logs-list-container::-webkit-scrollbar-track {
  background: transparent;
}

.logs-view .logs-list-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.logs-view .logs-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Dev Console App */

.dev-console {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

/* Top Toolbar */
.dev-console-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  gap: 16px;
  flex-shrink: 0;
}

.dev-console-toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.dev-console-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Tabs */
.dev-console-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.03);
  padding: 3px;
  border-radius: 6px;
}

.dev-console-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dev-console-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.dev-console-tab.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Trace info in toolbar */
.dev-console-trace-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 0;
}

/* Log filters in toolbar */
.dev-console-log-filters {
  display: flex;
  gap: 6px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.dev-console-log-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dev-console-log-filter:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.dev-console-log-filter.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.dev-console-trace-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dev-console-trace-meta {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  white-space: nowrap;
}

/* Connection status */
.connection-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  white-space: nowrap;
}

.connection-status.connected {
  color: #4ade80;
}

.connection-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.connection-status.connected .connection-dot {
  background: #4ade80;
}

/* View toggle */
.dev-console-view-toggle {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.03);
  padding: 2px;
  border-radius: 6px;
  flex-shrink: 0;
}

.dev-console-view-toggle button {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.dev-console-view-toggle button:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.dev-console-view-toggle button.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Sidebar toggle - positioned on left edge of main area */
.dev-console-main > .sidebar-toggle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dev-console-main > .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

/* Content Area */
.dev-console-content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

/* Full width for logs view when shown */
.dev-console-content > .logs-view {
  width: 100%;
}

/* Sidebar */
.dev-console-sidebar {
  width: 240px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

/* Main Content */
.dev-console-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* Visualization */
.dev-console-visualization {
  flex: 1;
  overflow: auto;
  padding: 16px;
  padding-left: 44px; /* Space for sidebar toggle */
}

.dev-console-visualization.full-height {
  display: flex;
  flex-direction: column;
  padding: 0;
  padding-left: 28px;
}

/* Empty State */
.dev-console-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  gap: 12px;
}

.dev-console-empty p {
  margin: 0;
}

.dev-console-empty-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}

/* Scrollbar */
.dev-console-visualization::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dev-console-visualization::-webkit-scrollbar-track {
  background: transparent;
}

.dev-console-visualization::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.dev-console-visualization::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
.worldview-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.95);
}

/* Header */
.worldview-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.worldview-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.worldview-title h1 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.worldview-title .last-updated {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 0.5rem;
}

.worldview-tabs {
  display: flex;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem;
  border-radius: 8px;
}

.worldview-tabs button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.worldview-tabs button:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
}

.worldview-tabs button.active {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

.refresh-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

/* Content */
.worldview-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* Loading/Error states */
.worldview-loading,
.worldview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
}

.worldview-error button {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  cursor: pointer;
}

.spinning {
  animation: spin 1s linear infinite;
}

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

/* Themes View */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.theme-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.theme-card.selected {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(var(--accent-rgb), 0.4);
}

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

.theme-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.theme-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.signal-count {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
}

.theme-belief {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.5rem 0;
  font-style: italic;
}

.theme-description {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.4;
}

.theme-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-details h4 {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem 0;
}

.theme-signals ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.theme-signals li {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.8rem;
}

.theme-signals li:last-child {
  border-bottom: none;
}

.signal-date {
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  width: 50px;
}

.signal-text {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.no-signals {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.theme-read {
  margin-top: 1rem;
}

.theme-read p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.4;
}

/* Watching (World) section - non-strategic topics */
.watching-world-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.watching-world-section > h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: rgba(255, 255, 255, 0.6);
}

.section-subtitle {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 0.5rem;
}

.themes-grid.watching {
  opacity: 0.85;
}

.theme-card.watching {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-card.watching:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.theme-card.watching.selected {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.watching-status {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Challenging signals section */
.challenging-section {
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
}

.challenging-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: #f87171;
}

.challenging-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.challenging-section li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.signal-challenges {
  font-size: 0.75rem;
  color: #f87171;
}

/* Beliefs View */
.beliefs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.belief-card {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  padding: 1.25rem;
}

.belief-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--accent);
}

.belief-card p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.5;
}

/* Implications */
.implications-section {
  margin-top: 2rem;
}

.implications-section > h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1rem 0;
}

.implications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.implication-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1rem;
}

.implication-card h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: #38bdf8;
}

.implication-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.implication-card li {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  padding: 0.25rem 0;
  padding-left: 1rem;
  position: relative;
}

.implication-card li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.4);
}

/* Timeline View */
.timeline-view h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: rgba(255, 255, 255, 0.7);
}

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

.timeline-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border-left: 3px solid rgba(var(--accent-rgb), 0.5);
}

.timeline-date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  width: 50px;
  flex-shrink: 0;
}

.timeline-content {
  flex: 1;
}

.timeline-theme {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 4px;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.timeline-content p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0.25rem 0;
  line-height: 1.4;
}

.timeline-source {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}
/* =========================================================================
 * Cortex App — Deep expertise builder
 * Dark theme default, body.light overrides at bottom
 * Uses system accent colors: var(--accent), var(--accent-rgb), var(--accent-dark)
 * ========================================================================= */

/* ── Root ─────────────────────────────────────────────────────────────── */
.cortex-app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  background: transparent;
  overflow: hidden;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.cortex-centered {
  align-items: center;
  justify-content: center;
}

/* ── Canvas-first layout ─────────────────────────────────────────── */
.cortex-canvas-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.cortex-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  z-index: 5;
}

.cortex-topbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.cortex-topbar-title .lucide {
  color: rgba(var(--accent-rgb), 0.6);
}

.cortex-topbar-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  margin-left: 4px;
}

.cortex-detail-domain-tag {
  font-size: 10px;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.1);
  padding: 2px 8px;
  border-radius: 8px;
}

.cortex-toolbar {
  display: flex;
  gap: 4px;
}

.cortex-toolbar-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  padding: 4px 7px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.12s;
}

.cortex-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.cortex-toolbar-btn.active {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: rgba(251, 146, 60, 0.8);
}

/* Slide-out detail panel */
.cortex-detail-panel {
  width: 0;
  overflow: hidden;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid transparent;
  display: flex;
  flex-direction: column;
}

.cortex-detail-panel.open {
  width: 380px;
  border-left-color: rgba(255, 255, 255, 0.06);
}

.cortex-detail-panel-header {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px;
  flex-shrink: 0;
}

.cortex-detail-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.cortex-detail-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.cortex-detail-panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 380px;
}

/* Home view */
.cortex-home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
  overflow-y: auto;
}

.cortex-home-empty {
  text-align: center;
  max-width: 500px;
}

.cortex-home-empty h2 { font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.85); margin: 16px 0 8px; }
.cortex-home-empty p { color: rgba(255, 255, 255, 0.4); font-size: 13px; margin-bottom: 24px; }
.cortex-home-empty .lucide { color: rgba(var(--accent-rgb), 0.5); }

.cortex-home-create-inline { display: flex; gap: 8px; }

.cortex-home-input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.cortex-home-input:focus { border-color: rgba(var(--accent-rgb), 0.4); }
.cortex-home-input::placeholder { color: rgba(255, 255, 255, 0.25); }

.cortex-home-create-btn {
  padding: 10px 20px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.cortex-home-create-btn:hover { background: rgba(var(--accent-rgb), 0.3); }
.cortex-home-create-btn:disabled { opacity: 0.4; cursor: default; }

.cortex-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 800px;
}

.cortex-interest-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.15s;
  min-height: 120px;
}

.cortex-interest-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--accent-rgb), 0.2);
  transform: translateY(-2px);
}

.cortex-interest-header { display: flex; justify-content: space-between; align-items: flex-start; }
.cortex-interest-title { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.9); margin: 0; }

.cortex-interest-delete {
  background: none; border: none; color: rgba(255, 255, 255, 0.15);
  cursor: pointer; padding: 2px; border-radius: 3px;
  opacity: 0; transition: opacity 0.15s;
}

.cortex-interest-card:hover .cortex-interest-delete { opacity: 1; }
.cortex-interest-delete:hover { color: rgba(239, 68, 68, 0.7); }

.cortex-interest-stats { display: flex; gap: 12px; font-size: 11px; color: rgba(255, 255, 255, 0.35); }

.cortex-interest-enter {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: rgba(var(--accent-rgb), 0.6); margin-top: auto;
}

.cortex-interest-card:hover .cortex-interest-enter { color: rgba(var(--accent-rgb), 0.9); }

.cortex-interest-card.cortex-interest-add {
  align-items: center; justify-content: center; text-align: center;
  gap: 8px; color: rgba(255, 255, 255, 0.25); border-style: dashed;
}

.cortex-interest-card.cortex-interest-add:hover {
  color: rgba(var(--accent-rgb), 0.7); border-color: rgba(var(--accent-rgb), 0.3);
}

.cortex-home-create-bar { display: flex; gap: 8px; margin-top: 16px; width: 100%; max-width: 800px; }

/* Light overrides for new layout */
body.light .cortex-topbar { background: rgba(0, 0, 0, 0.03); border-bottom-color: rgba(0, 0, 0, 0.08); }
body.light .cortex-toolbar-btn { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.35); }
body.light .cortex-toolbar-btn:hover { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.65); }
body.light .cortex-detail-panel.open { border-left-color: rgba(0, 0, 0, 0.08); }
body.light .cortex-detail-close { color: rgba(0, 0, 0, 0.3); }
body.light .cortex-detail-close:hover { background: rgba(0, 0, 0, 0.06); }
body.light .cortex-home-empty h2 { color: rgba(0, 0, 0, 0.85); }
body.light .cortex-home-empty p { color: rgba(0, 0, 0, 0.4); }
body.light .cortex-home-input { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.85); }
body.light .cortex-home-input::placeholder { color: rgba(0, 0, 0, 0.25); }
body.light .cortex-interest-card { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); }
body.light .cortex-interest-card:hover { background: rgba(0, 0, 0, 0.04); }
body.light .cortex-interest-title { color: rgba(0, 0, 0, 0.85); }
body.light .cortex-interest-stats { color: rgba(0, 0, 0, 0.35); }
body.light .cortex-interest-card.cortex-interest-add { color: rgba(0, 0, 0, 0.2); }

.cortex-loading {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.cortex-sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cortex-sidebar.collapsed {
  width: 40px;
  min-width: 40px;
}

.cortex-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.cortex-sidebar-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
}

.cortex-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.12s ease;
}

.cortex-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

/* Domain selector */
.cortex-domain-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.cortex-domain-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  outline: none;
}

.cortex-domain-select:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.cortex-domain-select option {
  background: #1a1a2e;
  color: rgba(255, 255, 255, 0.9);
}

/* Navigation sections */
.cortex-nav-sections {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
}

.cortex-nav-section {
  margin-bottom: 2px;
}

.cortex-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color 0.12s ease;
}

.cortex-section-header:hover {
  color: rgba(255, 255, 255, 0.85);
}

.cortex-section-label {
  flex: 1;
  text-align: left;
}

.cortex-section-count {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  min-width: 16px;
  text-align: center;
}

.cortex-section-count.badge {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  border-radius: 8px;
  padding: 1px 6px;
}

.cortex-section-items {
  padding: 0 4px;
}

/* Nav item */
.cortex-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px 5px 28px;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.1s ease;
  text-align: left;
}

.cortex-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
}

.cortex-nav-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.cortex-nav-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cortex-nav-item-icon {
  opacity: 0.5;
  flex-shrink: 0;
}

/* Coverage dots */
.cortex-coverage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.cortex-coverage-dot.thin {
  background: rgba(255, 255, 255, 0.2);
}

.cortex-coverage-dot.developing {
  background: rgba(var(--accent-rgb), 0.5);
}

.cortex-coverage-dot.solid {
  background: rgba(var(--accent-rgb), 0.8);
}

.cortex-coverage-dot.deep {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}

.cortex-coverage-dot.large {
  width: 10px;
  height: 10px;
}

/* Add button in nav */
.cortex-nav-add {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px 4px 28px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.12s ease;
}

.cortex-nav-add:hover {
  color: rgba(var(--accent-rgb), 0.8);
}

/* Coverage bar */
.cortex-coverage-bar {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.cortex-coverage-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cortex-coverage-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.cortex-coverage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.6));
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}

/* ── Add form ─────────────────────────────────────────────────────────── */
.cortex-add-form {
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.cortex-add-form.inline {
  padding: 6px 0;
  border-top: none;
  display: flex;
  gap: 6px;
  align-items: center;
}

.cortex-add-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  outline: none;
  transition: border-color 0.15s ease;
}

.cortex-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.cortex-add-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.cortex-add-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.cortex-add-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  outline: none;
}

.cortex-add-select option {
  background: #1a1a2e;
  color: rgba(255, 255, 255, 0.9);
}

/* Buttons */
.cortex-btn-sm {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.12s ease;
}

.cortex-btn-sm:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.cortex-btn-sm.muted {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

.cortex-btn-sm.muted:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.cortex-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.12s ease;
}

.cortex-btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.cortex-btn-icon.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.cortex-btn-icon.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.cortex-btn-icon.small {
  width: 22px;
  height: 22px;
}

.cortex-btn-icon.tiny {
  width: 18px;
  height: 18px;
  border: none;
  background: none;
}

.cortex-btn-icon.tiny:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Map panel ────────────────────────────────────────────────────────── */
.cortex-map-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.cortex-map-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.cortex-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.cortex-breadcrumb-item {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.cortex-breadcrumb-item:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
}

.cortex-breadcrumb-item.active {
  color: rgba(var(--accent-rgb), 0.9);
}

.cortex-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
  margin: 0 1px;
}

.cortex-breadcrumb-segment {
  display: flex;
  align-items: center;
}

/* ── Parent link ─────────────────────────────────────────────────────── */
.cortex-parent-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cortex-parent-label {
  color: rgba(255, 255, 255, 0.35);
}

/* ── Children list ───────────────────────────────────────────────────── */
.cortex-children-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.cortex-child-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
}

.cortex-child-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cortex-child-count {
  font-size: 9px;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
}

/* ── Sidebar hierarchy ───────────────────────────────────────────────── */
.cortex-nav-item-row {
  display: flex;
  align-items: center;
}

.cortex-nav-item-row .cortex-nav-item {
  flex: 1;
  min-width: 0;
}

.cortex-drill-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.cortex-drill-btn:hover {
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(255, 255, 255, 0.08);
}

.cortex-nav-back {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px !important;
  margin-bottom: 2px;
}

.cortex-nav-back:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}

.cortex-descendant-badge {
  font-size: 9px;
  color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Map toolbar ─────────────────────────────────────────────────── */
.cortex-map-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 4px 8px;
  gap: 4px;
  flex-shrink: 0;
}

.cortex-map-toggle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 3px 6px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.cortex-map-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

.cortex-map-toggle.active {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
  color: rgba(251, 146, 60, 0.8);
}

.cortex-map-canvas-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.cortex-map-canvas-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ── Minimap ─────────────────────────────────────────────────────── */
.cortex-minimap {
  position: absolute !important;
  bottom: 8px;
  left: 8px;
  width: 140px !important;
  height: 100px !important;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 5;
}

.cortex-map-canvas-container:hover .cortex-minimap {
  opacity: 1;
}

/* ── Working pane ─────────────────────────────────────────────────────── */
.cortex-working-pane {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cortex-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.3);
}

.cortex-empty-state h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

.cortex-empty-state p {
  font-size: 12px;
  margin: 0;
}

/* ── Detail view (shared by concept, source, synthesis, gap) ──────── */
.cortex-detail-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}

.cortex-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.cortex-detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cortex-detail-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cortex-detail-icon {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.cortex-detail-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.cortex-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-width: 0;
}

.cortex-detail-section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  width: 100%;
  min-width: 0;
}

.cortex-detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.cortex-detail-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cortex-detail-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.cortex-detail-section-header .cortex-detail-section-title {
  margin-bottom: 0;
}

.cortex-detail-placeholder {
  padding: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

.cortex-detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  margin-bottom: 12px;
}

.cortex-meta-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Coverage badge */
.cortex-coverage-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.cortex-coverage-badge.thin {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

.cortex-coverage-badge.developing {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.8);
}

.cortex-coverage-badge.solid {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}

.cortex-coverage-badge.deep {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}

/* Source type badge */
.cortex-source-type-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

/* Status badge */
.cortex-status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.cortex-status-badge.draft {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

.cortex-status-badge.developing {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.cortex-status-badge.complete {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

/* Status selector */
.cortex-status-selector {
  display: flex;
  gap: 4px;
}

.cortex-status-option {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.12s ease;
}

.cortex-status-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.cortex-status-option.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* Synthesis pipeline */
.cortex-status-pipeline {
  display: flex;
  align-items: center;
  gap: 2px;
}

.cortex-pipeline-step {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.12s ease;
}

.cortex-pipeline-step:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}

.cortex-pipeline-step.past {
  color: rgba(74, 222, 128, 0.5);
  border-color: rgba(74, 222, 128, 0.15);
}

.cortex-pipeline-step.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.cortex-pipeline-arrow {
  color: rgba(255, 255, 255, 0.15);
  margin-left: 4px;
  font-size: 10px;
}

.cortex-status-badge.raw { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.4); }
.cortex-status-badge.ready { background: rgba(74, 222, 128, 0.12); color: rgba(74, 222, 128, 0.8); }
.cortex-status-badge.published { background: rgba(59, 130, 246, 0.12); color: rgba(59, 130, 246, 0.8); }

/* LivePreviewEditor styling within Cortex */
.cortex-live-editor {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  min-height: 150px;
  width: 100%;
  max-width: none;
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
}

.cortex-synthesis-section .cortex-live-editor {
  min-height: 200px;
}

/* Override shared LivePreviewEditor defaults for compact Cortex context */
.cortex-live-editor .cm-editor {
  width: 100%;
  min-width: 0;
  height: auto !important;
}

.cortex-live-editor .cm-content {
  width: 100%;
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  padding-bottom: 2rem !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  box-sizing: border-box;
}

.cortex-live-editor .cm-scroller {
  width: 100%;
  min-width: 0;
  overflow: auto !important;
  max-height: 50vh;
}

.cortex-synthesis-section {
  flex: 1;
}

/* Connections list */
.cortex-connections-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cortex-connection-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 6px;
  position: relative;
  transition: background 0.12s;
}

.cortex-connection-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.cortex-connection-item:hover .cortex-btn-icon.tiny {
  opacity: 1;
}

.cortex-connection-item .cortex-btn-icon.tiny {
  position: absolute;
  top: 6px;
  right: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.cortex-connection-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.12s ease;
}

.cortex-connection-link:hover {
  color: var(--accent);
}

.cortex-connection-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-left: 18px;
}

.cortex-connection-type {
  font-size: 10px;
  color: rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.25px;
}

.cortex-connection-confidence {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 999px;
}

.cortex-connection-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.cortex-relationships-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cortex-relationships-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cortex-relationship-subtitle {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.38);
}

.cortex-connection-form {
  margin-top: 8px;
  flex-wrap: wrap;
}

.cortex-connection-form .cortex-add-select {
  min-width: 130px;
}

.cortex-connection-form .cortex-add-input {
  min-width: 160px;
}

/* Sources list */
.cortex-sources-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cortex-source-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: left;
}

.cortex-source-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
}

.cortex-source-preview {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* Highlights */
.cortex-highlights-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cortex-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.cortex-highlight-bar {
  width: 3px;
  min-height: 16px;
  align-self: stretch;
  background: rgba(var(--accent-rgb), 0.5);
  border-radius: 2px;
  flex-shrink: 0;
}

.cortex-highlight-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

/* Applied list */
.cortex-applied-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cortex-applied-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(74, 222, 128, 0.8);
}

/* ── Excerpts ─────────────────────────────────────────────────────── */
.cortex-excerpts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.cortex-excerpt-item {
  position: relative;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.3);
}

.cortex-excerpt-item:hover .cortex-btn-icon.tiny {
  opacity: 1;
}

.cortex-excerpt-item .cortex-btn-icon.tiny {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.cortex-excerpt-text {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  line-height: 1.5;
  border: none;
}

.cortex-excerpt-source {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
}

.cortex-excerpt-note {
  font-size: 11px;
  color: rgba(var(--accent-rgb), 0.7);
  margin-top: 4px;
}

.cortex-textarea {
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}

.cortex-textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* ── Additional notes ────────────────────────────────────────────── */
.cortex-notes-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.cortex-note-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  text-transform: capitalize;
  width: 100%;
}

.cortex-note-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cortex-note-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: rgba(var(--accent-rgb), 0.9);
}

.cortex-note-item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cortex-note-editor {
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
}

.cortex-live-editor.compact {
  min-height: 120px;
  max-height: 300px;
}

/* ── Quick Add ────────────────────────────────────────────────────── */
.cortex-quick-add-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  z-index: 100;
  backdrop-filter: blur(4px);
}

.cortex-quick-add {
  width: 480px;
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
}

.cortex-quick-add-modes {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.cortex-quick-add-mode {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 5px 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cortex-quick-add-mode:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.cortex-quick-add-mode.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(var(--accent-rgb), 0.9);
}

.cortex-quick-add-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.cortex-quick-add-input:focus {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.cortex-quick-add-input.secondary {
  margin-top: 6px;
  font-size: 12px;
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.7);
}

.cortex-quick-add-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.cortex-quick-add-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cortex-quick-add-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.cortex-quick-add-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cortex-kbd {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  font-size: 9px;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.5);
}

.cortex-quick-add-fab {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.9);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cortex-quick-add-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* ── Cross-domain connections ─────────────────────────────────── */
.cortex-connection-target {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.cortex-cross-domain-search {
  position: relative;
}

.cortex-cross-domain-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(30, 30, 35, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  margin-top: 2px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cortex-cross-domain-result {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}

.cortex-cross-domain-result:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cortex-cross-domain-result.selected {
  background: rgba(var(--accent-rgb), 0.15);
}

.cortex-cross-domain-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cortex-cross-domain-badge {
  font-size: 9px;
  color: rgba(251, 146, 60, 0.8);
  background: rgba(251, 146, 60, 0.12);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

.cortex-connection-item.cross-domain {
  border-left: 2px solid rgba(251, 146, 60, 0.3);
  padding-left: 8px;
}

/* Gap guidance */
.cortex-gap-guidance {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.cortex-gap-resolved {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(74, 222, 128, 0.7);
}

/* ── Welcome view ─────────────────────────────────────────────────────── */
.cortex-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 400px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.cortex-welcome h2 {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.cortex-welcome p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.cortex-welcome-form {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.cortex-welcome-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  outline: none;
}

.cortex-welcome-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.cortex-welcome-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.cortex-welcome-btn {
  padding: 10px 20px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.cortex-welcome-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
}

.cortex-welcome-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* =========================================================================
 * LIGHT THEME OVERRIDES
 * ========================================================================= */

/* Root */
body.light .cortex-app {
  color: rgba(0, 0, 0, 0.85);
}

body.light .cortex-loading {
  color: rgba(0, 0, 0, 0.4);
}

/* Sidebar */
body.light .cortex-sidebar {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.06) 100%);
  border-right-color: rgba(0, 0, 0, 0.1);
}

body.light .cortex-sidebar-header {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light .cortex-sidebar-title {
  color: rgba(0, 0, 0, 0.5);
}

body.light .cortex-sidebar-toggle {
  color: rgba(0, 0, 0, 0.4);
}

body.light .cortex-sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}

/* Domain selector */
body.light .cortex-domain-selector {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light .cortex-domain-select {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
}

body.light .cortex-domain-select option {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.85);
}

/* Section headers */
body.light .cortex-section-header {
  color: rgba(0, 0, 0, 0.55);
}

body.light .cortex-section-header:hover {
  color: rgba(0, 0, 0, 0.8);
}

body.light .cortex-section-count {
  color: rgba(0, 0, 0, 0.35);
}

/* Nav items */
body.light .cortex-nav-item {
  color: rgba(0, 0, 0, 0.65);
}

body.light .cortex-nav-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.9);
}

body.light .cortex-nav-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
}

body.light .cortex-nav-add {
  color: rgba(0, 0, 0, 0.3);
}

body.light .cortex-nav-add:hover {
  color: var(--accent-dark);
}

/* Coverage dots */
body.light .cortex-coverage-dot.thin {
  background: rgba(0, 0, 0, 0.15);
}

/* Coverage bar */
body.light .cortex-coverage-bar {
  border-top-color: rgba(0, 0, 0, 0.1);
}

body.light .cortex-coverage-label {
  color: rgba(0, 0, 0, 0.4);
}

body.light .cortex-coverage-track {
  background: rgba(0, 0, 0, 0.06);
}

/* Add form */
body.light .cortex-add-form {
  border-top-color: rgba(0, 0, 0, 0.1);
}

body.light .cortex-add-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
}

body.light .cortex-add-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

body.light .cortex-add-select {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
}

body.light .cortex-add-select option {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.85);
}

/* Buttons */
body.light .cortex-btn-sm.muted {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.5);
}

body.light .cortex-btn-sm.muted:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}

body.light .cortex-btn-icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.55);
}

body.light .cortex-btn-icon:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.85);
}

body.light .cortex-btn-icon.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}

body.light .cortex-btn-icon.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #dc2626;
}

/* Map panel */
body.light .cortex-breadcrumb {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .cortex-breadcrumb-item {
  color: rgba(0, 0, 0, 0.4);
}

body.light .cortex-breadcrumb-item:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.06);
}

body.light .cortex-breadcrumb-sep {
  color: rgba(0, 0, 0, 0.15);
}

body.light .cortex-parent-link {
  color: rgba(0, 0, 0, 0.35);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .cortex-parent-label {
  color: rgba(0, 0, 0, 0.3);
}

body.light .cortex-drill-btn {
  color: rgba(0, 0, 0, 0.2);
}

body.light .cortex-drill-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

body.light .cortex-nav-back {
  color: rgba(0, 0, 0, 0.35) !important;
}

body.light .cortex-descendant-badge,
body.light .cortex-child-count {
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.1);
}

body.light .cortex-minimap {
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .cortex-map-panel {
  border-right-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

body.light .cortex-map-empty {
  color: rgba(0, 0, 0, 0.2);
}

/* Canvas handles its own light theme rendering */

/* Working pane */
body.light .cortex-empty-state {
  color: rgba(0, 0, 0, 0.25);
}

/* Detail view */
body.light .cortex-detail-header {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light .cortex-detail-title {
  color: rgba(0, 0, 0, 0.9);
}

body.light .cortex-detail-icon {
  color: rgba(0, 0, 0, 0.4);
}

body.light .cortex-detail-section {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light .cortex-detail-section-title {
  color: rgba(0, 0, 0, 0.4);
}

body.light .cortex-detail-placeholder {
  color: rgba(0, 0, 0, 0.3);
}

body.light .cortex-detail-meta {
  color: rgba(0, 0, 0, 0.4);
}

/* Badges */
body.light .cortex-coverage-badge.thin {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}

body.light .cortex-source-type-badge {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}

body.light .cortex-status-badge.draft {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}

/* Editor */
body.light .cortex-live-editor {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Connections */
body.light .cortex-connection-link {
  color: rgba(0, 0, 0, 0.65);
}

body.light .cortex-connection-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--accent-dark);
}

body.light .cortex-connection-label {
  color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.04);
}

body.light .cortex-connection-type {
  color: rgba(var(--accent-rgb), 1);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.2);
}

body.light .cortex-connection-confidence {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.05);
}

body.light .cortex-relationship-subtitle {
  color: rgba(0, 0, 0, 0.4);
}

/* Sources */
body.light .cortex-source-link {
  color: rgba(0, 0, 0, 0.65);
}

body.light .cortex-source-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--accent-dark);
}

body.light .cortex-source-preview {
  color: rgba(0, 0, 0, 0.3);
}

/* Highlights */
body.light .cortex-highlight-item {
  background: rgba(0, 0, 0, 0.02);
}

body.light .cortex-highlight-text {
  color: rgba(0, 0, 0, 0.7);
}

/* Status selector */
body.light .cortex-status-option {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.5);
}

body.light .cortex-status-option:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.8);
}

body.light .cortex-status-option.active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-dark);
}

/* Gap */
body.light .cortex-gap-guidance {
  background: rgba(var(--accent-rgb), 0.04);
  border-color: rgba(var(--accent-rgb), 0.1);
  color: rgba(0, 0, 0, 0.5);
}

/* Welcome */
body.light .cortex-welcome {
  color: rgba(0, 0, 0, 0.5);
}

body.light .cortex-welcome h2 {
  color: rgba(0, 0, 0, 0.85);
}

body.light .cortex-welcome-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
}

body.light .cortex-welcome-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

/* Excerpts (light) */
body.light .cortex-excerpt-item {
  background: rgba(0, 0, 0, 0.02);
  border-left-color: rgba(var(--accent-rgb), 0.25);
}

body.light .cortex-excerpt-text {
  color: rgba(0, 0, 0, 0.65);
}

body.light .cortex-excerpt-source {
  color: rgba(0, 0, 0, 0.3);
}

body.light .cortex-excerpt-note {
  color: rgba(var(--accent-rgb), 0.75);
}

body.light .cortex-textarea {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.85);
}

/* Notes (light) */
body.light .cortex-note-item {
  color: rgba(0, 0, 0, 0.6);
}

body.light .cortex-note-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light .cortex-note-item.active {
  background: rgba(var(--accent-rgb), 0.08);
}

body.light .cortex-note-editor {
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .cortex-cross-domain-results {
  background: rgba(250, 250, 252, 0.97);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

body.light .cortex-cross-domain-result {
  color: rgba(0, 0, 0, 0.75);
}

body.light .cortex-cross-domain-result:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Pipeline (light) */
body.light .cortex-pipeline-step {
  border-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.3);
}

body.light .cortex-pipeline-step:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
}

body.light .cortex-pipeline-arrow {
  color: rgba(0, 0, 0, 0.12);
}

/* Quick Add (light) */
body.light .cortex-quick-add-overlay {
  background: rgba(255, 255, 255, 0.5);
}

body.light .cortex-quick-add {
  background: rgba(250, 250, 252, 0.97);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

body.light .cortex-quick-add-mode {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.45);
}

body.light .cortex-quick-add-mode:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.65);
}

body.light .cortex-quick-add-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.9);
}

body.light .cortex-quick-add-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

body.light .cortex-quick-add-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}

body.light .cortex-quick-add-hint {
  color: rgba(0, 0, 0, 0.3);
}

body.light .cortex-kbd {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
}
/* Publish App */
.publish-app {
  height: 100%;
  color: var(--text-primary, rgba(255,255,255,0.95));
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
}

/* Sidebar */
.publish-sidebar {
  width: 240px;
  min-width: 200px;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.15);
}

.publish-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.publish-sidebar-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.publish-sidebar-actions {
  display: flex;
  gap: 4px;
}

/* Drafts list */
.publish-drafts-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.publish-draft-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  transition: background 0.15s;
}

.publish-draft-item:hover {
  background: rgba(255,255,255,0.06);
}

.publish-draft-item.selected {
  background: rgba(167, 139, 250, 0.15);
  color: rgba(255,255,255,0.95);
}

.publish-draft-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.publish-draft-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.publish-draft-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}

.publish-draft-delete {
  opacity: 0;
  transition: opacity 0.15s;
}

.publish-draft-item:hover .publish-draft-delete {
  opacity: 0.5;
}

.publish-draft-delete:hover {
  opacity: 1 !important;
}

/* Status badges */
.publish-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.publish-status.draft {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
}

.publish-status.ready {
  background: rgba(56, 189, 248, 0.15);
  color: rgba(56, 189, 248, 0.8);
}

.publish-status.published {
  background: rgba(34, 197, 94, 0.15);
  color: rgba(34, 197, 94, 0.8);
}

/* Editor area */
.publish-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 36px;
}

.publish-filename {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

.publish-saving {
  font-size: 11px;
  color: rgba(167, 139, 250, 0.6);
}

.publish-editor-wrapper {
  flex: 1;
  overflow: auto;
}

/* Font size override for CodeMirror */
.publish-editor-wrapper .cm-content {
  font-size: var(--publish-font-size, 15px) !important;
  max-width: none !important;
  margin: 0 !important;
}

.publish-editor-wrapper textarea {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.9);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 20px;
  resize: none;
  outline: none;
}

.publish-editor-wrapper textarea::placeholder {
  color: rgba(255,255,255,0.2);
}

.publish-editor-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255,255,255,0.25);
  font-size: 14px;
}

/* Publish panel (right) */
.publish-panel {
  width: 280px;
  min-width: 240px;
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.15);
  overflow-y: auto;
}

.publish-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.publish-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.publish-panel-section {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.publish-panel-section h4 {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}

/* Reddit section */
.publish-reddit-input {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.publish-reddit-input label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

.publish-reddit-input input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 5px 8px;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  outline: none;
}

.publish-reddit-input input:focus {
  border-color: rgba(167, 139, 250, 0.4);
}

/* Publish button */
.publish-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.publish-btn-reddit {
  background: rgba(255, 69, 0, 0.2);
  color: rgba(255, 140, 90, 0.9);
  border: 1px solid rgba(255, 69, 0, 0.3);
}

.publish-btn-reddit:hover:not(:disabled) {
  background: rgba(255, 69, 0, 0.3);
}

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

/* History */
.publish-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}

.publish-history-platform {
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}

.publish-history-link {
  color: rgba(167, 139, 250, 0.7);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.publish-history-link:hover {
  color: rgba(167, 139, 250, 1);
}

.publish-history-date {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}

/* Footer toggles */
.publish-footer-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
}

.publish-footer-toggle input[type="checkbox"] {
  accent-color: #a78bfa;
}

/* Common button */
.publish-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.4);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.publish-icon-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}

/* Font controls */
.publish-font-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  padding: 2px 4px;
  outline: none;
  cursor: pointer;
}

.publish-font-select:hover {
  border-color: rgba(255,255,255,0.2);
}

.publish-icon-btn.active {
  background: rgba(167, 139, 250, 0.15);
  color: rgba(167, 139, 250, 0.8);
}

/* Outline panel */
.publish-outline-panel {
  width: 200px;
  min-width: 160px;
  border-left: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
  background: rgba(0,0,0,0.1);
}

.publish-outline-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.publish-outline {
  padding: 4px 6px;
}

.publish-outline-item {
  padding: 3px 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s;
}

.publish-outline-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
}

.publish-outline-item.level-1 { padding-left: 8px; font-weight: 600; color: rgba(255,255,255,0.7); font-size: 13px; }
.publish-outline-item.level-2 { padding-left: 16px; }
.publish-outline-item.level-3 { padding-left: 24px; font-size: 11px; }
.publish-outline-item.level-4 { padding-left: 32px; font-size: 11px; }
.publish-outline-item.level-5 { padding-left: 40px; font-size: 11px; }
.publish-outline-item.level-6 { padding-left: 48px; font-size: 11px; }

.publish-outline-empty {
  padding: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
}

/* Subreddit chips */
.publish-subreddit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.publish-subreddit-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(255, 69, 0, 0.12);
  border: 1px solid rgba(255, 69, 0, 0.2);
  border-radius: 12px;
  font-size: 11px;
  color: rgba(255, 140, 90, 0.85);
}

.publish-chip-remove {
  background: none;
  border: none;
  color: rgba(255, 140, 90, 0.5);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.publish-chip-remove:hover {
  color: rgba(255, 140, 90, 1);
}

.publish-subreddit-check {
  width: 14px;
  font-size: 11px;
  color: rgba(167, 139, 250, 0.8);
}

/* Subreddit picker */
.publish-subreddit-picker {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(0,0,0,0.2);
}

.publish-subreddit-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s;
}

.publish-subreddit-option:hover {
  background: rgba(255,255,255,0.06);
}

.publish-subreddit-option.selected {
  background: rgba(167, 139, 250, 0.12);
}

.publish-subreddit-name {
  color: rgba(255,255,255,0.7);
}

.publish-subreddit-option.selected .publish-subreddit-name {
  color: rgba(167, 139, 250, 0.9);
}

.publish-subreddit-members {
  font-size: 10px;
  color: rgba(255,255,255,0.25);
}

/* Loading */
.publish-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: rgba(255,255,255,0.3);
  font-size: 13px;
}

/* Publishing status */
.publish-status-msg {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 8px;
}

.publish-status-msg.success {
  background: rgba(34, 197, 94, 0.1);
  color: rgba(34, 197, 94, 0.8);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.publish-status-msg.error {
  background: rgba(239, 68, 68, 0.1);
  color: rgba(239, 68, 68, 0.8);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
/**
 * Deliberation App Styles
 *
 * Clean, focused interface for structured decision-making.
 * Dark theme with subtle blue/indigo accents.
 */

.delib-app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0f1a 0%, #111827 50%, #0d0f1a 100%);
  color: #e2e8f0;
  font-family: inherit;
}

/* ============================================
   HEADER
   ============================================ */

.delib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
  flex-shrink: 0;
}

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

.delib-header-icon {
  font-size: 1.5rem;
}

.delib-header h1 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--accent);
}

.delib-subtitle {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

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

/* ============================================
   MODEL SELECTOR
   ============================================ */

.delib-model-selector {
  position: relative;
}

.delib-model-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--accent-light);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.delib-model-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.delib-model-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 280px;
  max-height: 480px;
  overflow-y: auto;
  background: rgba(17, 24, 39, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 200;
}

.delib-model-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.delib-model-option:hover,
.delib-model-option.active {
  background: rgba(var(--accent-rgb), 0.15);
}

.delib-model-name {
  font-weight: 500;
}

.delib-model-provider {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* ============================================
   PERSONA PICKER
   ============================================ */

.delib-persona-label {
  font-weight: 500;
}

.delib-persona-model-badge {
  font-size: 0.65rem;
  opacity: 0.6;
  margin-left: 0.35rem;
  padding: 0.1rem 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.delib-picker-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.75rem 0.25rem;
}

.delib-picker-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.25rem 0.5rem;
}

.delib-persona-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delib-persona-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.delib-persona-model-tag {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

.delib-persona-actions {
  display: flex;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.delib-persona-row:hover .delib-persona-actions {
  opacity: 1;
}

.delib-persona-action-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  font-size: 0.85rem;
  border-radius: 4px;
  transition: all 0.12s ease;
  line-height: 1;
}

.delib-persona-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.delib-persona-action-btn.danger:hover {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.delib-new-persona {
  color: var(--accent) !important;
  font-style: italic;
}

.delib-new-persona:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

/* Persona inline form */
.delib-persona-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.delib-persona-form-input,
.delib-persona-form-select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 0.78rem;
  font-family: inherit;
  box-sizing: border-box;
}

.delib-persona-form-input:focus,
.delib-persona-form-select:focus,
.delib-persona-form-textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}

.delib-persona-form-select {
  appearance: auto;
  cursor: pointer;
}

.delib-persona-form-select option {
  background: #1a1d2e;
  color: #e2e8f0;
}

.delib-persona-form-textarea {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 0.78rem;
  font-family: inherit;
  resize: vertical;
  min-height: 50px;
  box-sizing: border-box;
}

.delib-persona-form-textarea::placeholder,
.delib-persona-form-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.delib-persona-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

.delib-btn-small.primary {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent-light);
}

.delib-btn-small.primary:hover {
  background: rgba(var(--accent-rgb), 0.3);
}

.delib-btn-small.primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.delib-model-dropdown::-webkit-scrollbar {
  width: 4px;
}

.delib-model-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.delib-model-dropdown::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 2px;
}

/* ============================================
   BODY LAYOUT
   ============================================ */

.delib-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ============================================
   SIDEBAR
   ============================================ */

.delib-sidebar {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(var(--accent-rgb), 0.1);
  transition: width 0.2s ease;
}

.delib-sidebar.collapsed {
  width: 36px;
}

.delib-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
}

.delib-sidebar-header h3 {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.delib-btn-icon {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.delib-btn-icon:hover {
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.delib-session-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.delib-session-item {
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 0.25rem;
  transition: background 0.15s ease;
}

.delib-session-item:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

.delib-session-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.delib-session-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delib-session-meta {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delib-btn-delete {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 0 0.25rem;
  font-size: 0.75rem;
  opacity: 0;
  transition: all 0.15s ease;
}

.delib-session-item:hover .delib-btn-delete {
  opacity: 1;
}

.delib-btn-delete:hover {
  color: #f87171;
}

.delib-empty-sidebar {
  text-align: center;
  padding: 1.5rem 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   MAIN AREA
   ============================================ */

.delib-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ============================================
   CONTEXT BAR
   ============================================ */

.delib-context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
  flex-shrink: 0;
}

.delib-context-chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  border-radius: 16px;
  font-size: 0.75rem;
}

.delib-context-chip.file {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

.delib-context-chip.text {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--accent-light);
}

.delib-chip-icon {
  font-size: 0.8rem;
}

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

.delib-context-chip button {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  padding: 0 0.15rem;
  font-size: 0.8rem;
  line-height: 1;
}

.delib-context-chip button:hover {
  opacity: 1;
}

.delib-add-context {
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.delib-add-context:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: rgba(255, 255, 255, 0.6);
}

.delib-add-context.quick {
  border-style: solid;
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-light);
  font-weight: 500;
}

.delib-context-chip.data {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.delib-context-chip.area {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}

.delib-context-chip.thread {
  background: rgba(236, 72, 153, 0.1);
  border: 1px solid rgba(236, 72, 153, 0.25);
  color: #f472b6;
}

.delib-context-chip.loading {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  color: rgba(var(--accent-rgb), 0.6);
}

.delib-chip-loading {
  font-size: 0.7rem;
  animation: delib-dot-pulse 1.2s ease-in-out infinite;
}

/* ============================================
   QUICK CONTEXT MENU
   ============================================ */

.delib-quick-menu-wrapper {
  position: relative;
}

.delib-quick-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-height: 420px;
  overflow-y: auto;
  background: rgba(17, 24, 39, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 200;
  padding: 0.35rem;
  animation: delib-fade-in 0.15s ease;
}

.delib-quick-section {
  padding: 0.2rem 0;
}

.delib-quick-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.6rem 0.15rem;
}

.delib-quick-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.delib-quick-item:hover {
  background: rgba(var(--accent-rgb), 0.12);
}

.delib-quick-item:disabled {
  opacity: 0.35;
  cursor: default;
}

.delib-quick-item:disabled:hover {
  background: transparent;
}

.delib-quick-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.3rem 0.5rem;
}

.delib-quick-menu::-webkit-scrollbar {
  width: 4px;
}

.delib-quick-menu::-webkit-scrollbar-track {
  background: transparent;
}

.delib-quick-menu::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 2px;
}

/* ============================================
   THREAD PICKER
   ============================================ */

.delib-thread-list {
  max-height: 300px;
  overflow-y: auto;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.delib-thread-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.delib-thread-item:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.delib-thread-mode {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.delib-thread-info {
  flex: 1;
  min-width: 0;
}

.delib-thread-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delib-thread-meta {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.1rem;
}

/* ============================================
   ROUNDS (Main Scrollable Area)
   ============================================ */

.delib-rounds {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
}

.delib-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.5);
}

.delib-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.delib-empty-state h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: var(--accent);
}

.delib-empty-state p {
  font-size: 0.9rem;
  margin: 0;
  max-width: 400px;
  line-height: 1.5;
}

/* Round */
.delib-round {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: delib-fade-in 0.3s ease;
}

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

/* User input */
.delib-user-input {
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
}

.delib-user-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.delib-user-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  white-space: pre-wrap;
}

/* Perspectives grid */
.delib-perspectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
}

/* Perspective card */
.delib-perspective-card {
  border: 1px solid;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.delib-perspective-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.delib-perspective-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.delib-perspective-name {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.delib-perspective-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.delib-perspective-model {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
}

.delib-pin-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  opacity: 0.4;
  transition: opacity 0.15s ease;
  padding: 0;
}

.delib-pin-btn:hover,
.delib-pin-btn.pinned {
  opacity: 1;
}

.delib-perspective-reasoning {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.delib-perspective-content {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.delib-perspective-content p {
  margin: 0 0 0.5rem;
}

.delib-perspective-content p:last-child {
  margin-bottom: 0;
}

/* Synthesis */
.delib-synthesis {
  padding: 0.75rem 1rem;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
}

.delib-synthesis-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #34d399;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.delib-synthesis p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

/* Next questions */
.delib-next-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.delib-suggested-q {
  padding: 0.35rem 0.75rem;
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  color: var(--accent-light);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.delib-suggested-q:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.35);
}

/* Loading */
.delib-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  justify-content: center;
}

.delib-loading-text {
  font-size: 0.85rem;
  color: rgba(var(--accent-rgb), 0.7);
}

.delib-loading-dots {
  display: flex;
  gap: 3px;
}

.delib-loading-dots span {
  width: 5px;
  height: 5px;
  background: rgba(var(--accent-rgb), 0.6);
  border-radius: 50%;
  animation: delib-dot-pulse 1.2s ease-in-out infinite;
}

.delib-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.delib-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes delib-dot-pulse {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

/* ============================================
   FINAL OUTPUT
   ============================================ */

.delib-final-output {
  margin: 0 1rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  flex-shrink: 0;
  max-height: 300px;
  display: flex;
  flex-direction: column;
}

.delib-final-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.delib-final-actions {
  display: flex;
  gap: 0.35rem;
}

.delib-btn-small {
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.delib-btn-small:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.delib-btn-small.danger:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}

.delib-final-content {
  padding: 0.75rem 1rem;
  overflow-y: auto;
  font-size: 0.88rem;
  line-height: 1.55;
}

.delib-final-content p {
  margin: 0 0 0.5rem;
}

/* ============================================
   INPUT AREA
   ============================================ */

.delib-input-area {
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(var(--accent-rgb), 0.1);
  padding: 0.75rem 1rem;
  flex-shrink: 0;
}

.delib-final-btn {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.delib-final-btn:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.4);
}

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

.delib-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.delib-input-row textarea {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 0.9rem;
  font-family: inherit;
  resize: none;
  min-height: 40px;
  max-height: 150px;
  line-height: 1.4;
}

.delib-input-row textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.12);
}

.delib-input-row textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.delib-input-row textarea:disabled {
  opacity: 0.5;
}

.delib-send-btn {
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent-dark) 100%);
  border: none;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  min-width: 40px;
  transition: all 0.2s ease;
}

.delib-send-btn:hover {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
}

.delib-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================
   MODAL (Text Context)
   ============================================ */

.delib-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.delib-modal {
  background: #1a1d2e;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 16px;
  padding: 1.25rem;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.delib-modal h3 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--accent);
}

.delib-text-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 0.85rem;
  font-family: inherit;
  margin-bottom: 0.5rem;
}

.delib-text-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}

.delib-text-area {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
}

.delib-text-area:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}

.delib-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.delib-btn-cancel {
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.delib-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

.delib-btn-primary {
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent-light);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.delib-btn-primary:hover {
  background: rgba(var(--accent-rgb), 0.3);
}

/* ============================================
   SCROLLBAR
   ============================================ */

.delib-rounds::-webkit-scrollbar,
.delib-session-list::-webkit-scrollbar,
.delib-final-content::-webkit-scrollbar {
  width: 5px;
}

.delib-rounds::-webkit-scrollbar-track,
.delib-session-list::-webkit-scrollbar-track,
.delib-final-content::-webkit-scrollbar-track {
  background: transparent;
}

.delib-rounds::-webkit-scrollbar-thumb,
.delib-session-list::-webkit-scrollbar-thumb,
.delib-final-content::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.25);
  border-radius: 3px;
}

.delib-rounds::-webkit-scrollbar-thumb:hover,
.delib-session-list::-webkit-scrollbar-thumb:hover,
.delib-final-content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.4);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
  .delib-perspectives-grid {
    grid-template-columns: 1fr;
  }

  .delib-sidebar {
    width: 36px;
  }

  .delib-sidebar.collapsed {
    width: 0;
    border: none;
  }
}

/* ============================================
   CONTEXT BUILDER DIALOG
   ============================================ */

.cb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: delib-fade-in 0.15s ease;
}

.cb-dialog {
  background: #1a1d2e;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 16px;
  width: 92%;
  max-width: 800px;
  height: 85%;
  display: flex;
  flex-direction: row;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* Left sidebar */
.cb-sidebar {
  width: 140px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(var(--accent-rgb), 0.1);
  flex-shrink: 0;
}

.cb-sidebar-header {
  padding: 0.75rem 0.75rem 0.5rem;
  flex-shrink: 0;
}

.cb-sidebar-header h2 {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cb-sidebar-tabs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 0.35rem 0.5rem;
  overflow-y: auto;
  flex: 1;
}

.cb-sidebar-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  text-align: left;
}

.cb-sidebar-tab:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
}

.cb-sidebar-tab.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border-left-color: var(--accent);
}

.cb-sidebar-tab svg,
.cb-tab-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.cb-sidebar-tab.active svg {
  opacity: 1;
}

.cb-tab-label {
  font-weight: 500;
}

/* Main panel (right side) */
.cb-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.cb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0.5rem;
  flex-shrink: 0;
}

.cb-header h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}

.cb-selected-count {
  font-size: 0.72rem;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-weight: 500;
}

/* Search */
.cb-search {
  padding: 0.5rem 1rem;
  flex-shrink: 0;
}

.cb-search input {
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 0.8rem;
  font-family: inherit;
}

.cb-search input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.35);
}

.cb-search input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

/* Content area */
.cb-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0.25rem 0;
}

.cb-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-size: 0.85rem;
  color: rgba(var(--accent-rgb), 0.6);
}

.cb-empty {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
}

/* List items */
.cb-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 0.75rem;
}

.cb-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}

.cb-item:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.cb-item.selected {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.cb-item.attached {
  opacity: 0.4;
  cursor: default;
}

.cb-item.attached:hover {
  background: transparent;
}

.cb-item.bulk {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.12);
}

.cb-item.bulk:hover {
  background: rgba(16, 185, 129, 0.1);
}

.cb-item.bulk.selected {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

.cb-item-check {
  font-size: 0.85rem;
  color: rgba(var(--accent-rgb), 0.5);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  margin-top: 0.05rem;
}

.cb-item.selected .cb-item-check {
  color: var(--accent);
}

.cb-item.attached .cb-item-check {
  color: #34d399;
}

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

.cb-item-title {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.cb-item-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.15rem;
  line-height: 1.3;
}

.cb-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.2rem;
}

.cb-tag {
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
}

.cb-tag-area {
  margin-left: auto;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
}

.cb-done {
  color: #34d399;
  font-size: 0.75rem;
}

.cb-thread-icon {
  flex-shrink: 0;
  opacity: 0.5;
}

.cb-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.35rem 0.5rem;
}

.cb-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
  padding: 0.5rem 0.75rem 0.25rem;
}

/* Workbench tab */
.cb-workbench {
  display: flex;
  flex-direction: column;
}

.cb-wb-filter {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.cb-wb-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: all 0.15s;
}

.cb-wb-filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.cb-wb-filter-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.cb-pin {
  margin-left: 0.25rem;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.cb-wb-linked-task {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: rgba(74, 222, 128, 0.06);
  border-radius: 4px;
  font-size: 0.65rem;
  color: rgba(74, 222, 128, 0.7);
}

.cb-wb-task-icon {
  flex-shrink: 0;
  color: #34d399;
}

.cb-wb-task-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Collect tab */
.cb-collect {
  display: flex;
  flex-direction: column;
}

.cb-board-filter {
  display: flex;
  gap: 0.25rem;
  padding: 0.4rem 0.75rem;
  overflow-x: auto;
  flex-shrink: 0;
}

.cb-board-btn {
  padding: 0.25rem 0.55rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.cb-board-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.cb-board-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-light);
}

.cb-card-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Areas */
.cb-area-group {
  margin-bottom: 0.35rem;
}

.cb-area-folder {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.7rem 0.15rem;
}

/* Text tab */
.cb-text-tab {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cb-text-input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 0.85rem;
  font-family: inherit;
  box-sizing: border-box;
}

.cb-text-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}

.cb-text-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.cb-text-area {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  box-sizing: border-box;
}

.cb-text-area:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.4);
}

.cb-text-area::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

/* Footer */
.cb-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(var(--accent-rgb), 0.1);
  flex-shrink: 0;
}

.cb-btn-cancel {
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cb-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

.cb-btn-add {
  padding: 0.4rem 1rem;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent-light);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cb-btn-add:hover {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.cb-btn-add:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Scrollbar */
.cb-content::-webkit-scrollbar {
  width: 5px;
}

.cb-content::-webkit-scrollbar-track {
  background: transparent;
}

.cb-content::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 3px;
}

.cb-content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.35);
}
.brainmap-app {
  width: 100%;
  height: 100%;
  display: flex;
  background: #000;
  overflow: hidden;
}

.brainmap-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
/* Kingdom App Styles */

.kingdom-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0a0a0f;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.kingdom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 10;
}

.kingdom-header h1 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kingdom-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.kingdom-time-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kingdom-range-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
}

.kingdom-range-select:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

.kingdom-range-select:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.kingdom-range-select option {
  background: #1a1a2e;
  color: rgba(255, 255, 255, 0.9);
}

.kingdom-range-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
}

.kingdom-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.kingdom-tab {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.kingdom-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.kingdom-tab.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.kingdom-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.kingdom-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kingdom-loading-text {
  color: rgba(255, 255, 255, 0.5);
  animation: pulse 2s ease-in-out infinite;
}

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

/* ========== TREEMAP VIEW ========== */

.treemap-view {
  height: 100%;
  display: flex;
  position: relative;
}

.treemap-back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.treemap-back:hover {
  background: rgba(255, 255, 255, 0.1);
}

.treemap-container {
  flex: 1;
  position: relative;
  margin: 0.5rem;
}

.treemap-rect {
  position: absolute;
  border-radius: 8px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}

.treemap-rect.depth-0 {
  border-radius: 12px;
  border-width: 2px;
}

.treemap-rect.has-children {
  cursor: zoom-in;
}

.treemap-rect.hovered {
  transform: scale(1.01);
  z-index: 10;
}

.treemap-rect.selected {
  border-color: #fff !important;
  border-width: 2px;
  z-index: 11;
}

.treemap-label {
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.treemap-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
}

.treemap-mass {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.treemap-recent {
  font-size: 0.65rem;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.treemap-trend {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.treemap-detail {
  width: 280px;
  background: rgba(15, 15, 20, 0.95);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem;
  overflow-y: auto;
}

.treemap-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.treemap-detail-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color);
}

.treemap-detail-header button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
}

.treemap-detail-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1rem;
}

.treemap-detail-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.treemap-detail-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.treemap-detail-items li {
  font-size: 0.75rem;
  display: flex;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
}

.treemap-detail-items .item-type {
  color: var(--color);
  opacity: 0.7;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.treemap-detail-items .item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== HEATMAP VIEW ========== */

.heatmap-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.5rem;
}

.heatmap-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.heatmap-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.heatmap-row-label {
  width: 80px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

.heatmap-cells {
  flex: 1;
  display: flex;
  gap: 0.5rem;
}

.heatmap-cell {
  flex: 1;
  min-width: 80px;
  min-height: 80px;
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.heatmap-cell:hover {
  transform: translateY(-2px);
  border-color: var(--cell-color);
}

.heatmap-cell.selected {
  border-color: #fff;
  border-width: 2px;
}

.heatmap-cell-bg {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s;
}

.heatmap-cell-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--cell-color) 0%, transparent 70%);
  opacity: 0.3;
  animation: cellPulse 2s ease-in-out infinite;
}

@keyframes cellPulse {
  0%, 100% { opacity: 0.2; transform: scale(0.95); }
  50% { opacity: 0.4; transform: scale(1); }
}

.heatmap-cell-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  gap: 0.25rem;
}

.heatmap-cell-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
}

.heatmap-cell-mass {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cell-color);
}

.heatmap-cell-recent {
  font-size: 0.65rem;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.2);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.heatmap-cell-trend {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.heatmap-detail {
  position: absolute;
  right: 1rem;
  top: 1rem;
  bottom: 1rem;
  width: 280px;
  background: rgba(15, 15, 20, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  overflow-y: auto;
  z-index: 20;
  animation: slideIn 0.2s ease;
}

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

.heatmap-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.heatmap-detail-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color);
}

.heatmap-detail-header button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.25rem;
  cursor: pointer;
}

.heatmap-detail-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1rem;
}

.heatmap-detail-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.heatmap-detail-stats .stat {
  display: flex;
  flex-direction: column;
}

.heatmap-detail-stats .stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color);
}

.heatmap-detail-stats .stat-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.heatmap-detail-stats .stat-trend {
  font-size: 0.8rem;
  font-weight: 500;
}

.heatmap-detail-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.heatmap-detail-items li {
  font-size: 0.75rem;
  display: flex;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
}

.heatmap-detail-items .item-type {
  color: var(--color);
  opacity: 0.7;
  font-size: 0.65rem;
  text-transform: uppercase;
}

/* ========== TIMELINE VIEW (Enhanced) ========== */

.timeline-view-enhanced {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #0a0a0f;
}

/* Header row with day markers */
.timeline-header-row {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
}

.timeline-tree-header {
  width: 200px;
  min-width: 200px;
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.timeline-track-header {
  flex: 1;
  position: relative;
  height: 36px;
}

.timeline-day-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.timeline-day-marker .marker-line {
  width: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
}

.timeline-day-marker .marker-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

.timeline-day-marker.today .marker-label {
  color: var(--accent);
  font-weight: 600;
}

.timeline-day-marker.today .marker-line {
  background: rgba(var(--accent-rgb), 0.3);
}

/* Scrollable content area */
.timeline-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: clip;
}

/* Individual row */
.timeline-row {
  display: flex;
  min-height: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s ease;
}

.timeline-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.timeline-row.selected {
  background: rgba(var(--accent-rgb), 0.08);
}

.timeline-row.has-activity {
  min-height: 40px;
}

/* Tree node (left side) */
.timeline-tree-node {
  width: 200px;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}

.tree-toggle {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.tree-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.tree-toggle svg {
  transition: transform 0.2s ease;
}

.tree-spacer {
  width: 20px;
  flex-shrink: 0;
}

.tree-node-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem 0.35rem 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
  overflow: hidden;
}

.tree-node-content:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tree-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tree-node-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-node-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.tree-node-children-indicator {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  margin-left: -0.25rem;
}

.tree-node-dot.active {
  animation: dotPulse 2s ease-in-out infinite;
}

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

/* Timeline track (right side) */
.timeline-track {
  flex: 1;
  position: relative;
  min-height: 36px;
}

.track-intensity {
  position: absolute;
  inset: 4px 0;
  border-radius: 4px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.track-intensity.pulsing {
  animation: trackPulse 3s ease-in-out infinite;
}

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

/* Row with recent activity gets subtle left border glow */
.timeline-row.has-recent .timeline-tree-node {
  border-left: 2px solid var(--row-color);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--row-color) calc(var(--intensity) * 15%), transparent) 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

.timeline-mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mark-color);
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 2;
}

.timeline-mark::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--mark-color);
  opacity: 0;
  transition: opacity 0.15s;
}

.timeline-mark:hover,
.timeline-mark.hovered {
  transform: translate(-50%, -50%) scale(1.3);
  z-index: 10;
}

.timeline-mark:hover::before,
.timeline-mark.hovered::before {
  opacity: 0.2;
}

.timeline-mark.commit {
  border-radius: 3px;
  width: 8px;
  height: 8px;
}

.timeline-mark.thought {
  border-radius: 50%;
}

.timeline-mark.soul {
  border-radius: 50%;
  box-shadow: 0 0 6px var(--mark-color);
}

.timeline-mark.task {
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 7px;
  height: 7px;
}

.timeline-mark.task:hover,
.timeline-mark.task.hovered {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.3);
}

/* Recent marks are brighter and pulse */
.timeline-mark.recent {
  box-shadow: 0 0 8px var(--mark-color), 0 0 4px var(--mark-color);
  animation: markPulse 2s ease-in-out infinite;
}

@keyframes markPulse {
  0%, 100% { box-shadow: 0 0 6px var(--mark-color), 0 0 3px var(--mark-color); }
  50% { box-shadow: 0 0 12px var(--mark-color), 0 0 6px var(--mark-color); }
}

/* Tooltip */
.timeline-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  min-width: 180px;
  max-width: 280px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.timeline-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15, 15, 20, 0.98);
}

.timeline-tooltip .tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.timeline-tooltip .tooltip-type {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mark-color, var(--accent));
  letter-spacing: 0.05em;
}

.timeline-tooltip .tooltip-time {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
}

.timeline-tooltip .tooltip-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  word-break: break-word;
}

/* Trend indicator */
.track-trend {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Detail panel */
.timeline-detail-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  background: rgba(15, 15, 20, 0.98);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.25rem;
  overflow-y: auto;
  z-index: 20;
  animation: slideInRight 0.2s ease;
}

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

.timeline-detail-panel .detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.timeline-detail-panel .detail-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.timeline-detail-panel .detail-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.timeline-detail-panel .detail-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.timeline-detail-panel .detail-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

.timeline-detail-panel .detail-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

.timeline-detail-panel .detail-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.timeline-detail-panel .detail-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.timeline-detail-panel .detail-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.timeline-detail-panel .detail-stats .stat-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color);
}

.timeline-detail-panel .detail-stats .stat-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.timeline-detail-panel .detail-stats .stat-trend {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: capitalize;
}

.timeline-detail-panel .detail-items h4 {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}

.timeline-detail-panel .detail-items ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.timeline-detail-panel .detail-items li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 2px solid var(--color);
}

.timeline-detail-panel .detail-items .item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeline-detail-panel .detail-items .item-type {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color);
  opacity: 0.8;
}

.timeline-detail-panel .detail-items .item-date {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

.timeline-detail-panel .detail-items .item-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* Legacy timeline styles (for other views if needed) */
.timeline-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  position: relative;
}

/* ========== RINGS VIEW ========== */

.rings-view {
  height: 100%;
  position: relative;
}

.rings-view canvas {
  width: 100%;
  height: 100%;
}

.rings-labels {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  pointer-events: none;
}

.ring-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.rings-detail {
  position: absolute;
  right: 1rem;
  top: 1rem;
  bottom: 1rem;
  width: 280px;
  background: rgba(15, 15, 20, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  overflow-y: auto;
  z-index: 20;
  animation: slideIn 0.2s ease;
}

.rings-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.rings-detail-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color);
}

.rings-detail-header button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.25rem;
  cursor: pointer;
}

.rings-detail-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1rem;
}

.rings-detail-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rings-detail-stats .stat {
  display: flex;
  flex-direction: column;
}

.rings-detail-stats .stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color);
}

.rings-detail-stats .stat-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.rings-detail-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rings-detail-items li {
  font-size: 0.75rem;
  display: flex;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
}

.rings-detail-items .item-type {
  color: var(--color);
  opacity: 0.7;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.rings-detail-items .item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== SHARED TREND COLORS ========== */

.trend-growing { color: #4ade80; background-color: #4ade80; }
.trend-active { color: #34d399; background-color: #34d399; }
.trend-stable { color: #fbbf24; background-color: #fbbf24; }
.trend-fading { color: #f87171; background-color: #f87171; }
.trend-dormant { color: #64748b; background-color: #64748b; }

/* ========== TODAY VIEW ========== */

.today-view {
  height: 100%;
  display: flex;
  overflow: hidden;
}

.today-main {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.today-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.today-section .section-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.today-section .section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.today-section .section-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.today-now .section-header h2 {
  color: var(--accent);
}

.today-empty {
  text-align: center;
  padding: 3rem 2rem;
  color: rgba(255, 255, 255, 0.4);
}

.today-empty.small {
  padding: 1rem;
}

.today-empty .empty-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 1rem;
}

.today-empty .empty-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.5rem;
}

.today-territories {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.today-territories.compact {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.today-territory {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--territory-color);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.today-territory:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.today-territory.selected {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--territory-color);
}

.today-territory.compact {
  padding: 0.5rem 0.75rem;
  border-left-width: 2px;
}

.today-territory .territory-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.today-territory.compact .territory-header {
  margin-bottom: 0;
}

.today-territory .territory-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.today-territory .territory-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

.today-territory .territory-count {
  font-size: 0.7rem;
  color: var(--territory-color);
  margin-left: auto;
  font-weight: 600;
}

.today-territory .territory-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.today-territory .territory-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.today-territory .item-time {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.65rem;
  min-width: 50px;
}

.today-territory .item-type {
  color: var(--territory-color);
  font-size: 0.6rem;
  text-transform: uppercase;
  font-weight: 600;
  min-width: 45px;
}

.today-territory .item-text {
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.today-territory .territory-more {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  padding-top: 0.25rem;
}

.today-summary .summary-stats {
  display: flex;
  gap: 2rem;
}

.today-summary .summary-stat {
  display: flex;
  flex-direction: column;
}

.today-summary .stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent);
}

.today-summary .stat-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.today-detail {
  width: 300px;
  background: rgba(15, 15, 20, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem;
  overflow-y: auto;
}

.today-detail .detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.today-detail .detail-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.today-detail .detail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.today-detail h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color);
}

.today-detail .detail-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.25rem;
  cursor: pointer;
}

.today-detail .detail-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1rem;
  line-height: 1.5;
}

.today-detail .detail-items h4 {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.today-detail .detail-items ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.today-detail .detail-items li {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 2px solid var(--color);
}

.today-detail .detail-items .item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.today-detail .detail-items .item-type {
  font-size: 0.6rem;
  color: var(--color);
  text-transform: uppercase;
  font-weight: 600;
}

.today-detail .detail-items .item-date {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

.today-detail .detail-items .item-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* ========== ENERGY VIEW ========== */

.energy-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.energy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.energy-title h2 {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.energy-total {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.energy-windows {
  display: flex;
  gap: 0.25rem;
}

.window-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}

.window-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.window-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.energy-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.energy-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.energy-bars {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.energy-empty {
  text-align: center;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.4);
}

.energy-bar {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: background 0.15s;
}

.energy-bar:hover {
  background: rgba(255, 255, 255, 0.03);
}

.energy-bar.selected {
  background: rgba(255, 255, 255, 0.05);
}

.energy-bar.top-three .bar-name {
  font-weight: 600;
}

.energy-bar .bar-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.energy-bar .bar-rank {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  min-width: 24px;
}

.energy-bar.top-three .bar-rank {
  color: var(--bar-color);
}

.energy-bar .bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.energy-bar .bar-name {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
}

.energy-bar .bar-energy {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bar-color);
}

.energy-bar .bar-percent {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  min-width: 35px;
  text-align: right;
}

.energy-bar .bar-track {
  height: 24px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.energy-bar .bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.energy-bar .bar-sparkline {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.energy-bar .sparkline-dot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.6;
}

.energy-legend {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.energy-legend h4 {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.energy-legend .legend-items {
  display: flex;
  gap: 1rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.energy-legend .legend-items strong {
  color: var(--accent);
}

.energy-detail {
  width: 300px;
  background: rgba(15, 15, 20, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem;
  overflow-y: auto;
}

.energy-detail .detail-header,
.energy-detail .detail-title,
.energy-detail .detail-dot,
.energy-detail .detail-close,
.energy-detail .detail-desc,
.energy-detail .detail-stats,
.energy-detail .detail-items {
  /* Reuse today-detail styles */
}

.energy-detail .detail-header { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.energy-detail .detail-title { display: flex; align-items: center; gap: 0.5rem; }
.energy-detail .detail-dot { width: 10px; height: 10px; border-radius: 50%; }
.energy-detail h3 { margin: 0; font-size: 1rem; color: var(--color); }
.energy-detail .detail-close { background: none; border: none; color: rgba(255, 255, 255, 0.4); font-size: 1.25rem; cursor: pointer; }
.energy-detail .detail-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); margin: 0 0 1rem; }
.energy-detail .detail-stats { display: flex; gap: 1.5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.energy-detail .stat { display: flex; flex-direction: column; }
.energy-detail .stat-value { font-size: 1.25rem; font-weight: 600; color: var(--color); }
.energy-detail .stat-label { font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; }
.energy-detail .detail-items h4 { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; margin: 0 0 0.75rem; }
.energy-detail .detail-items ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.energy-detail .detail-items li { padding: 0.5rem; background: rgba(255, 255, 255, 0.03); border-radius: 6px; border-left: 2px solid var(--color); }
.energy-detail .detail-items .item-header { display: flex; justify-content: space-between; margin-bottom: 0.25rem; }
.energy-detail .detail-items .item-type { font-size: 0.6rem; color: var(--color); text-transform: uppercase; font-weight: 600; }
.energy-detail .detail-items .item-date { font-size: 0.6rem; color: rgba(255, 255, 255, 0.35); }
.energy-detail .detail-items .item-text { font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); line-height: 1.4; }

.energy-detail .detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
  gap: 0.5rem;
}

.energy-detail .detail-empty p {
  margin: 0;
}

.energy-detail .detail-hint {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.2);
}

/* Group/child energy bars */
.energy-bar.group-bar {
  background: rgba(255, 255, 255, 0.02);
}

.energy-bar.group-bar:hover {
  background: rgba(255, 255, 255, 0.04);
}

.energy-bar .bar-name .group-toggle {
  margin-left: 0.35rem;
  font-size: 0.7rem;
  opacity: 0.5;
}

.group-children {
  margin-left: 1.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.energy-bar.child-bar {
  padding: 0.35rem 0.5rem;
}

.energy-bar.child-bar .bar-track {
  height: 18px;
}

.energy-bar.child-bar .bar-label {
  gap: 0.35rem;
}

.energy-bar .bar-indent {
  width: 24px;
}

.energy-bar.child-bar .bar-name {
  font-size: 0.75rem;
}

.energy-bar.child-bar .bar-energy {
  font-size: 0.8rem;
}

.energy-bar.child-bar .bar-percent {
  font-size: 0.6rem;
}

/* ========== HOURLY VIEW ========== */

.hourly-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hourly-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hourly-header h2 {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.hourly-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.hourly-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hourly-grid {
  flex: 1;
  padding: 1rem 1.5rem;
  overflow: auto;
}

.hourly-grid .grid-header {
  display: flex;
  margin-bottom: 0.5rem;
}

.hourly-grid .grid-corner {
  width: 100px;
  flex-shrink: 0;
}

.hourly-grid .grid-day-label {
  flex: 1;
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.25rem;
}

.hourly-grid .grid-day-label.today {
  color: var(--accent);
  font-weight: 600;
}

.hourly-grid .grid-row {
  display: flex;
  margin-bottom: 0.25rem;
}

.hourly-grid .grid-territory-label {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  padding-right: 0.5rem;
}

.hourly-grid .territory-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.hourly-grid .grid-day {
  flex: 1;
  display: flex;
  gap: 2px;
  padding: 0 2px;
}

.hourly-grid .grid-cell {
  flex: 1;
  height: 28px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}

.hourly-grid .grid-cell:hover {
  border-color: rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.hourly-grid .grid-cell.selected {
  border-color: #fff;
}

.hourly-grid .cell-count {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.hourly-grid .cell-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

.hourly-grid .cell-tooltip .tooltip-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.25rem;
}

.hourly-grid .cell-tooltip .tooltip-body {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
}

.hourly-grid .grid-hour-legend {
  display: flex;
  margin-top: 0.5rem;
}

.hourly-grid .hour-labels {
  flex: 1;
  display: flex;
  justify-content: space-around;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.25);
}

.hourly-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hourly-legend .legend-label {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
}

.hourly-legend .legend-scale {
  display: flex;
  gap: 2px;
}

.hourly-legend .legend-cell {
  width: 14px;
  height: 14px;
  border-radius: 2px;
}

.hourly-detail {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: rgba(15, 15, 20, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  overflow-y: auto;
  z-index: 20;
}

.hourly-detail .detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.hourly-detail .detail-title h3 { margin: 0; font-size: 1rem; color: var(--color); }
.hourly-detail .detail-time { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); }
.hourly-detail .detail-close { background: none; border: none; color: rgba(255, 255, 255, 0.4); font-size: 1.25rem; cursor: pointer; }
.hourly-detail .detail-items ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.hourly-detail .detail-items li { padding: 0.5rem; background: rgba(255, 255, 255, 0.03); border-radius: 6px; border-left: 2px solid var(--color); }
.hourly-detail .detail-items .item-header { display: flex; justify-content: space-between; margin-bottom: 0.25rem; }
.hourly-detail .detail-items .item-type { font-size: 0.6rem; color: var(--color); text-transform: uppercase; }
.hourly-detail .detail-items .item-time { font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); }
.hourly-detail .detail-items .item-text { font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); line-height: 1.4; }

/* ========== SESSIONS VIEW ========== */

.sessions-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sessions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sessions-title h2 {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.sessions-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.sessions-filters {
  display: flex;
  gap: 0.25rem;
}

.filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.filter-btn.active {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

.sessions-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sessions-list {
  flex: 1;
  padding: 1rem 1.5rem;
  overflow-y: auto;
}

.sessions-empty {
  text-align: center;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.4);
}

.session-date-header {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 0 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.75rem;
}

.session-date-header:first-child {
  padding-top: 0;
}

.session-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--session-color);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.session-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.session-card.selected {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--session-color);
}

.session-card .session-time {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.session-card .time-start,
.session-card .time-end {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.session-card .time-separator {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
}

.session-card .time-duration {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--session-color);
  font-weight: 600;
}

.session-card .session-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.session-card .session-territories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.session-card .session-territory {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.session-card .t-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.session-card .t-name {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
}

.session-card .t-count {
  font-size: 0.6rem;
  color: var(--t-color);
  font-weight: 600;
}

.session-card .session-more {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
}

.session-card .session-summary {
  display: flex;
  gap: 1rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

.session-card .session-mini-timeline {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  position: relative;
  margin-top: 0.5rem;
}

.session-card .mini-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.sessions-detail {
  width: 320px;
  background: rgba(15, 15, 20, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem;
  overflow-y: auto;
}

.sessions-detail .detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.sessions-detail .detail-title h3 { margin: 0; font-size: 1rem; color: var(--color); }
.sessions-detail .detail-time { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.25rem; }
.sessions-detail .detail-close { background: none; border: none; color: rgba(255, 255, 255, 0.4); font-size: 1.25rem; cursor: pointer; }

.sessions-detail .detail-stats { display: flex; gap: 1.5rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.sessions-detail .stat { display: flex; flex-direction: column; }
.sessions-detail .stat-value { font-size: 1.25rem; font-weight: 600; color: var(--color); }
.sessions-detail .stat-label { font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; }

.sessions-detail .detail-breakdown { margin-bottom: 1.25rem; }
.sessions-detail .detail-breakdown h4 { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; margin: 0 0 0.75rem; }

.sessions-detail .breakdown-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sessions-detail .breakdown-row .t-dot { width: 6px; height: 6px; border-radius: 50%; }
.sessions-detail .breakdown-row .t-name { font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); min-width: 70px; }
.sessions-detail .breakdown-row .t-count { font-size: 0.7rem; color: var(--t-color); font-weight: 600; min-width: 20px; }
.sessions-detail .breakdown-row .t-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; overflow: hidden; }
.sessions-detail .breakdown-row .t-fill { height: 100%; border-radius: 3px; }

.sessions-detail .detail-items h4 { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; margin: 0 0 0.75rem; }
.sessions-detail .detail-items ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sessions-detail .detail-items li { padding: 0.5rem; background: rgba(255, 255, 255, 0.03); border-radius: 6px; border-left: 2px solid var(--color); }
.sessions-detail .detail-items .item-header { display: flex; justify-content: space-between; margin-bottom: 0.15rem; }
.sessions-detail .detail-items .item-territory { font-size: 0.65rem; color: rgba(255, 255, 255, 0.5); }
.sessions-detail .detail-items .item-time { font-size: 0.6rem; color: rgba(255, 255, 255, 0.35); }
.sessions-detail .detail-items .item-content { display: flex; gap: 0.5rem; }
.sessions-detail .detail-items .item-type { font-size: 0.6rem; color: var(--color); text-transform: uppercase; font-weight: 600; min-width: 45px; }
.sessions-detail .detail-items .item-text { font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); line-height: 1.4; }

.sessions-detail .detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
}

.sessions-detail .detail-empty p {
  margin: 0;
}

/* ============================================
   PULSE VIEW - Live Activity Stream
   ============================================ */

.pulse-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pulse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pulse-title {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.pulse-title h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(135deg, var(--accent) 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pulse-stats {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.pulse-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.pulse-stats .stat-item.hot {
  color: var(--accent);
}

.pulse-stats .stat-item .stat-value {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.pulse-stats .stat-item .stat-icon {
  font-size: 0.85rem;
}

.pulse-filters {
  display: flex;
  gap: 0.35rem;
}

.pulse-filters .filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
}

.pulse-filters .filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.pulse-filters .filter-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

/* Stream */
.pulse-stream {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pulse-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  gap: 0.75rem;
}

.pulse-empty .empty-icon {
  font-size: 2.5rem;
  opacity: 0.5;
}

/* Blocks */
.pulse-block {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  overflow: hidden;
}

.block-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.block-time {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  min-width: 80px;
}

.block-territories {
  display: flex;
  gap: 0.35rem;
  flex: 1;
  flex-wrap: wrap;
}

.territory-chip {
  font-size: 0.6rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.block-count {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* Items */
.block-items {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pulse-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  transition: all 0.2s;
  cursor: default;
}

.pulse-item:hover,
.pulse-item.hovered {
  background: rgba(255, 255, 255, 0.04);
}

/* Pulse animation */
.item-pulse {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.pulse-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  z-index: 2;
}

.pulse-ring {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid;
  opacity: 0;
  top: 0;
  left: 0;
}

.pulse-item.hot .pulse-ring {
  animation: pulse-ring 1.5s ease-out infinite;
}

.pulse-item.warm .pulse-ring {
  animation: pulse-ring 2.5s ease-out infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

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

.item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.item-type-icon {
  font-size: 0.85rem;
}

.item-territory {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}

.item-time {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
  margin-left: auto;
}

.item-text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  word-break: break-word;
}

.item-duration {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Intensity states */
.pulse-item.hot .item-text {
  color: rgba(255, 255, 255, 0.9);
}

.pulse-item.warm .item-text {
  color: rgba(255, 255, 255, 0.8);
}

.pulse-item.cool .item-text {
  color: rgba(255, 255, 255, 0.65);
}

.pulse-item.cold .item-text {
  color: rgba(255, 255, 255, 0.5);
}

.pulse-item.cold .pulse-dot {
  opacity: 0.5;
}

/* Wave visualization */
.pulse-wave {
  height: 40px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0 1rem;
}

.pulse-wave svg {
  width: 100%;
  height: 100%;
}

/* ===================================
   ATTENTION VIEW STYLES
   =================================== */

.attention-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.attention-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.attention-title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.attention-title h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.attention-total {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.attention-filters {
  display: flex;
  gap: 0.5rem;
}

.attention-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Tree Panel */
.attention-tree {
  min-width: 300px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* Resizable Divider */
.attention-divider {
  width: 8px;
  background: rgba(255, 255, 255, 0.03);
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.attention-divider:hover {
  background: rgba(255, 255, 255, 0.08);
}

.attention-divider:hover .divider-handle {
  background: rgba(var(--accent-rgb), 0.6);
}

.divider-handle {
  width: 3px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  transition: background 0.15s;
}

.tree-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}

.tree-header span:nth-child(1) {
  flex: 1; /* Territory */
}

.tree-header span:nth-child(2) {
  width: 40px;
  text-align: right;
  flex-shrink: 0; /* Count */
}

.tree-header span:nth-child(3) {
  width: 55px;
  text-align: right;
  flex-shrink: 0; /* Time */
}

.tree-header span:nth-child(4) {
  width: 45px;
  text-align: right;
  flex-shrink: 0; /* % */
}

.tree-header span:nth-child(5) {
  width: 80px;
  flex-shrink: 0; /* Bar column spacer */
}

.tree-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.tree-node {
  /* Container for recursive nodes */
}

.tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  transition: background 0.15s;
}

.tree-indent {
  flex-shrink: 0;
  /* Dynamic width set via inline style */
}

.tree-label-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.tree-stats-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Scope to attention-view to avoid conflicts with ops-navigator */
.attention-view .tree-item {
  background: transparent;
}

.attention-view .tree-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.attention-view .tree-item.selected {
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
}

.attention-view .tree-item.selected:hover {
  background: rgba(var(--accent-rgb), 0.15);
}

/* Items without activity - dimmed */
.attention-view .tree-item.inactive {
  opacity: 0.4;
}

.attention-view .tree-item.inactive:hover {
  opacity: 0.6;
}

/* Items with activity - normal state, override ops-navigator bleeding styles */
.attention-view .tree-item.active {
  background: transparent;
  color: inherit;
}

.tree-toggle {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tree-toggle:hover {
  color: rgba(255, 255, 255, 0.8);
}

.tree-spacer {
  width: 16px;
}

.tree-color {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.tree-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* tree-stats removed - stats are now direct grid children */

.tree-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
  width: 40px;
  flex-shrink: 0;
}

.tree-duration {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
  width: 55px;
  flex-shrink: 0;
}

.tree-percentage {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
  width: 45px;
  flex-shrink: 0;
}

.tree-bar-bg {
  height: 5px;
  width: 80px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.tree-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Detail Panel */
.attention-detail {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.1);
  min-width: 300px;
  flex-shrink: 0;
}

.detail-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.detail-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.detail-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.detail-description {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.detail-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

.stat-card .stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.25rem;
}

.stat-card .stat-label {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-breakdown,
.detail-items {
  margin-bottom: 1.5rem;
}

.detail-breakdown h4,
.detail-items h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.breakdown-list,
.items-list {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.breakdown-row:last-child {
  border-bottom: none;
}

.breakdown-type {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: capitalize;
}

.breakdown-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.item-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

.item-type {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  flex-shrink: 0;
}

.item-time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  min-width: 60px;
}

.item-area {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 3px;
  color: rgba(var(--accent-rgb), 0.85);
  text-transform: lowercase;
  flex-shrink: 0;
}

/* Tree area items (dynamic breakdown) */
.tree-area-item {
  opacity: 0.85;
}

.tree-area-name {
  font-style: italic;
  font-size: 0.8rem;
}

.tree-color-area {
  width: 6px !important;
  height: 6px !important;
}

.item-text {
  flex: 1;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-duration {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

/* ========================================
   Scrollbar Styling
   ======================================== */

.kingdom-content::-webkit-scrollbar,
.treemap-detail::-webkit-scrollbar,
.timeline-scroll-area::-webkit-scrollbar,
.today-main::-webkit-scrollbar,
.today-detail::-webkit-scrollbar,
.energy-bars::-webkit-scrollbar,
.energy-detail::-webkit-scrollbar,
.sessions-list::-webkit-scrollbar,
.sessions-detail::-webkit-scrollbar,
.pulse-stream::-webkit-scrollbar,
.tree-content::-webkit-scrollbar,
.attention-detail::-webkit-scrollbar,
.heatmap-grid::-webkit-scrollbar,
.heatmap-detail::-webkit-scrollbar,
.hourly-main::-webkit-scrollbar {
  width: 8px;
}

.kingdom-content::-webkit-scrollbar-track,
.treemap-detail::-webkit-scrollbar-track,
.timeline-scroll-area::-webkit-scrollbar-track,
.today-main::-webkit-scrollbar-track,
.today-detail::-webkit-scrollbar-track,
.energy-bars::-webkit-scrollbar-track,
.energy-detail::-webkit-scrollbar-track,
.sessions-list::-webkit-scrollbar-track,
.sessions-detail::-webkit-scrollbar-track,
.pulse-stream::-webkit-scrollbar-track,
.tree-content::-webkit-scrollbar-track,
.attention-detail::-webkit-scrollbar-track,
.heatmap-grid::-webkit-scrollbar-track,
.heatmap-detail::-webkit-scrollbar-track,
.hourly-main::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.kingdom-content::-webkit-scrollbar-thumb,
.treemap-detail::-webkit-scrollbar-thumb,
.timeline-scroll-area::-webkit-scrollbar-thumb,
.today-main::-webkit-scrollbar-thumb,
.today-detail::-webkit-scrollbar-thumb,
.energy-bars::-webkit-scrollbar-thumb,
.energy-detail::-webkit-scrollbar-thumb,
.sessions-list::-webkit-scrollbar-thumb,
.sessions-detail::-webkit-scrollbar-thumb,
.pulse-stream::-webkit-scrollbar-thumb,
.tree-content::-webkit-scrollbar-thumb,
.attention-detail::-webkit-scrollbar-thumb,
.heatmap-grid::-webkit-scrollbar-thumb,
.heatmap-detail::-webkit-scrollbar-thumb,
.hourly-main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.kingdom-content::-webkit-scrollbar-thumb:hover,
.treemap-detail::-webkit-scrollbar-thumb:hover,
.timeline-scroll-area::-webkit-scrollbar-thumb:hover,
.today-main::-webkit-scrollbar-thumb:hover,
.today-detail::-webkit-scrollbar-thumb:hover,
.energy-bars::-webkit-scrollbar-thumb:hover,
.energy-detail::-webkit-scrollbar-thumb:hover,
.sessions-list::-webkit-scrollbar-thumb:hover,
.sessions-detail::-webkit-scrollbar-thumb:hover,
.pulse-stream::-webkit-scrollbar-thumb:hover,
.tree-content::-webkit-scrollbar-thumb:hover,
.attention-detail::-webkit-scrollbar-thumb:hover,
.heatmap-grid::-webkit-scrollbar-thumb:hover,
.heatmap-detail::-webkit-scrollbar-thumb:hover,
.hourly-main::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
.social-graph {
  display: flex;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.95);
}

.social-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.6);
}

.social-loading .spin {
  animation: spin 1s linear infinite;
}

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

/* Sidebar */
.social-sidebar {
  width: 200px;
  min-width: 200px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
}

.social-sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.account-select {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  font-size: 0.875rem;
}

.account-select option {
  background: #1a1a2e;
}

.category-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-align: left;
  font-size: 0.8rem;
  transition: all 0.15s ease;
}

.category-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.category-item.active {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.category-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.category-count {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* Main */
.social-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.social-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: white;
  font-size: 0.875rem;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.sort-select {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: white;
  font-size: 0.8rem;
}

.sort-select option {
  background: #1a1a2e;
}

.user-count {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* User List */
.user-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.user-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}

.user-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.user-card.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

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

.user-name {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.user-name .verified {
  color: #1d9bf0;
}

.user-handle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.user-bio {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.user-stats {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.25rem;
}

.sync-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  padding: 0.25rem;
  border-radius: 4px;
}

/* Details Panel */
.social-details {
  width: 280px;
  min-width: 280px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  overflow-y: auto;
}

.details-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  position: relative;
}

.details-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.details-name {
  font-weight: 600;
  font-size: 1rem;
}

.details-handle {
  font-size: 0.875rem;
  color: #1d9bf0;
  text-decoration: none;
}

.details-handle:hover {
  text-decoration: underline;
}

.close-details {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0.25rem;
}

.close-details:hover {
  color: white;
}

.details-bio {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  margin-bottom: 1rem;
}

.details-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.stat-value {
  font-weight: 600;
  font-size: 1rem;
}

.stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.details-section {
  margin-bottom: 1.25rem;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-header button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0.25rem;
}

.section-header button:hover {
  color: white;
}

.notes-content {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  white-space: pre-wrap;
}

.no-notes {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.notes-edit textarea {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  font-size: 0.8rem;
  font-family: inherit;
  resize: vertical;
}

.notes-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
}

.notes-actions button {
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.notes-actions button.primary {
  background: var(--accent);
}

.notes-actions button:hover {
  opacity: 0.9;
}

.sync-accounts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sync-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.sync-checkbox input {
  accent-color: #4ade80;
}

/* Followed by badges in user list */
.followed-by-badges {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.account-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-badge:nth-child(2) {
  background: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.account-badge:nth-child(3) {
  background: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

/* Followed by list in details */
.followed-by-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.followed-by-tag {
  padding: 0.25rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  border-radius: 4px;
  font-size: 0.75rem;
}

/* Already following state */
.sync-checkbox.already-following {
  opacity: 0.7;
}

.following-label {
  font-size: 0.65rem;
  color: #4ade80;
  margin-left: auto;
}
/**
 * Graph View App Styles
 */

.graph-view-app {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #0a0a0f;
  overflow: hidden;
}

.graph-canvas {
  display: block;
  cursor: grab;
}

.graph-canvas:active {
  cursor: grabbing;
}

/* Loading state */
.graph-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.6);
}

.graph-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: graphSpin 1s linear infinite;
}

@keyframes graphSpin {
  to { transform: rotate(360deg); }
}

/* Error state */
.graph-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

.graph-error button {
  padding: 0.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all 0.15s;
}

.graph-error button:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Stats overlay */
.graph-stats {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Help text */
.graph-help {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Occurrences Panel */
.graph-occurrences-panel {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 380px;
  max-height: calc(100vh - 120px);
  background: rgba(15, 15, 20, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: panelSlideIn 0.2s ease-out;
}

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

.graph-occurrences-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.graph-occurrences-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.graph-tag-badge {
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
}

.graph-occurrences-count {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.graph-occurrences-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.15s;
}

.graph-occurrences-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Connected tags */
.graph-connected-tags {
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.graph-connected-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.5rem;
}

.graph-connected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.graph-connected-tag {
  padding: 0.2rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
}

.graph-connected-tag:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.graph-connected-more {
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Occurrences list */
.graph-occurrences-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.graph-occurrences-loading,
.graph-occurrences-empty {
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

.graph-occurrence-item {
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: all 0.15s;
}

.graph-occurrence-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.graph-occurrence-file {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.5rem;
}

.graph-occurrence-content {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}

.graph-occurrence-meta {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
}

/* Scrollbar */
.graph-occurrences-list::-webkit-scrollbar {
  width: 6px;
}

.graph-occurrences-list::-webkit-scrollbar-track {
  background: transparent;
}

.graph-occurrences-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.graph-occurrences-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Protocol App */
.protocol-app {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background: rgba(13, 14, 18, 0.98);
  color: white;
  overflow: hidden;
}

/* Sidebar */
.protocol-sidebar {
  width: 240px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  padding: 20px 16px;
  flex-shrink: 0;
}

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

.protocol-day-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.protocol-day-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
}

.protocol-day-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--os-accent, #4a9eff);
  line-height: 1;
}

.protocol-date-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s;
}

.protocol-date-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.protocol-date-picker {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px;
}

.protocol-date-picker label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}

.protocol-date-picker input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 10px;
  color: white;
  font-size: 0.85rem;
}

.protocol-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.protocol-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  font-size: 0.85rem;
  outline: none;
}

.protocol-search input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.protocol-search svg {
  color: rgba(255, 255, 255, 0.3);
}

.protocol-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--os-accent, #4a9eff);
  border: none;
  border-radius: 10px;
  padding: 12px;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 20px;
}

.protocol-add-btn:hover {
  filter: brightness(1.1);
}

.protocol-add-btn.active {
  background: #ef4444;
}

.protocol-nav-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 10px;
  padding-left: 4px;
}

.protocol-month-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.protocol-month-list::-webkit-scrollbar {
  display: none;
}

.protocol-month-link {
  text-align: left;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.protocol-month-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}

.protocol-sidebar-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.protocol-total {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

/* Main Content */
.protocol-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

/* New Entry Form */
.protocol-new-entry {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 32px;
}

.protocol-entry-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.protocol-entry-meta {
  display: flex;
  gap: 24px;
  align-items: flex-end;
}

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

.protocol-input-group label,
.protocol-day-preview label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
}

.protocol-input-group input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 12px;
  color: white;
  font-size: 0.85rem;
  color-scheme: dark;
}

.protocol-day-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.protocol-day-preview span:last-child {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--os-accent, #4a9eff);
}

.protocol-new-entry textarea,
.protocol-edit-form textarea {
  width: 100%;
  min-height: 100px;
  background: transparent;
  border: none;
  color: white;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  margin-bottom: 16px;
}

.protocol-new-entry textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.protocol-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.protocol-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.protocol-btn.primary {
  background: var(--os-accent, #4a9eff);
  border: none;
  color: white;
}

.protocol-btn.primary:hover {
  filter: brightness(1.1);
}

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

.protocol-btn.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.protocol-btn.secondary:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Timeline */
.protocol-timeline {
  padding-bottom: 40px;
}

.protocol-month-group {
  margin-bottom: 48px;
}

.protocol-month-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.protocol-month-header span {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.protocol-month-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
}

.protocol-notes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.protocol-timeline-item {
  position: relative;
  padding-left: 32px;
}

.protocol-marker {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.protocol-marker-dot {
  width: 10px;
  height: 10px;
  background: var(--os-accent, #4a9eff);
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 12px rgba(74, 158, 255, 0.4);
}

.protocol-marker-line {
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: -16px;
  width: 2px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 1;
}

.protocol-timeline-item:last-child .protocol-marker-line {
  display: none;
}

.protocol-note-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px 20px;
  transition: all 0.2s;
}

.protocol-note-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.protocol-note-card.editing {
  border-color: var(--os-accent, #4a9eff);
  background: rgba(255, 255, 255, 0.04);
}

.protocol-note-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.protocol-note-day {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--os-accent, #4a9eff);
}

.protocol-note-date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.protocol-note-relative {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.25);
  margin-left: auto;
}

.protocol-note-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.protocol-note-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

.protocol-note-card:hover .protocol-note-actions {
  opacity: 1;
}

.protocol-note-actions button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.protocol-note-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.protocol-delete-confirm {
  display: flex;
  gap: 4px;
}

.protocol-delete-confirm button:first-child:hover {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.protocol-delete-confirm button:last-child:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Empty State */
.protocol-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
  gap: 16px;
}

.protocol-empty p {
  font-size: 0.9rem;
  max-width: 280px;
}

/* Edit Form */
.protocol-edit-form {
  margin-top: -8px;
}

.protocol-edit-form textarea {
  margin-bottom: 12px;
}

/* ── Light Theme ── */
body.light .protocol-app {
  background: rgba(248, 249, 252, 0.98);
  color: #1a1a2e;
}

body.light .protocol-sidebar {
  background: rgba(0, 0, 0, 0.03);
  border-right-color: rgba(0, 0, 0, 0.08);
}

body.light .protocol-day-label {
  color: rgba(0, 0, 0, 0.4);
}

body.light .protocol-date-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

body.light .protocol-date-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}

body.light .protocol-date-picker {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .protocol-date-picker label {
  color: rgba(0, 0, 0, 0.4);
}

body.light .protocol-date-picker input {
  background: white;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a2e;
  color-scheme: light;
}

body.light .protocol-search {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .protocol-search input {
  color: #1a1a2e;
}

body.light .protocol-search input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

body.light .protocol-search svg {
  color: rgba(0, 0, 0, 0.3);
}

body.light .protocol-nav-label {
  color: rgba(0, 0, 0, 0.3);
}

body.light .protocol-month-link {
  color: rgba(0, 0, 0, 0.5);
}

body.light .protocol-month-link:hover {
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.04);
}

body.light .protocol-sidebar-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}

body.light .protocol-total {
  color: rgba(0, 0, 0, 0.4);
}

body.light .protocol-month-header span {
  color: rgba(0, 0, 0, 0.5);
}

body.light .protocol-month-line {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
}

body.light .protocol-marker-line {
  background: rgba(0, 0, 0, 0.08);
}

body.light .protocol-note-card {
  background: white;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

body.light .protocol-note-card:hover {
  background: white;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.light .protocol-note-card.editing {
  background: rgba(74, 158, 255, 0.03);
}

body.light .protocol-note-date {
  color: rgba(0, 0, 0, 0.4);
}

body.light .protocol-note-relative {
  color: rgba(0, 0, 0, 0.3);
}

body.light .protocol-note-body {
  color: rgba(0, 0, 0, 0.8);
}

body.light .protocol-note-actions button {
  color: rgba(0, 0, 0, 0.25);
}

body.light .protocol-note-actions button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a2e;
}

body.light .protocol-new-entry {
  background: white;
  border-color: rgba(74, 158, 255, 0.3);
}

body.light .protocol-entry-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light .protocol-input-group label,
body.light .protocol-day-preview label {
  color: rgba(0, 0, 0, 0.4);
}

body.light .protocol-input-group input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a2e;
  color-scheme: light;
}

body.light .protocol-new-entry textarea,
body.light .protocol-edit-form textarea {
  color: #1a1a2e;
}

body.light .protocol-new-entry textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

body.light .protocol-btn.secondary {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.5);
}

body.light .protocol-btn.secondary:hover {
  border-color: rgba(0, 0, 0, 0.2);
  color: #1a1a2e;
}

body.light .protocol-empty {
  color: rgba(0, 0, 0, 0.25);
}
/**
 * Parts Council App Styles
 * 
 * A beautiful interface for inner council work with:
 * - Visual parts map organized by cluster
 * - Dark theme with purple/gold accents
 * - Smooth animations and transitions
 */

.council-chat-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg,
    #0f0a19 0%,
    #1a1025 50%,
    #0f0a19 100%
  );
  color: #e2e8f0;
  font-family: inherit;
}

/* ============================================
   HEADER
   ============================================ */

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}

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

.chat-header-icon {
  font-size: 1.75rem;
}

.chat-header h1 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.chat-subtitle {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  font-style: italic;
}

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

.loading-indicator {
  font-size: 0.75rem;
  color: rgba(250, 204, 21, 0.8);
  animation: pulse-text 1.5s ease-in-out infinite;
}

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

/* View Toggle */
.view-toggle {
  display: flex;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 0.25rem;
}

.view-btn {
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.view-btn.active {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-light);
}

/* ============================================
   BUTTONS
   ============================================ */

.chat-btn {
  padding: 0.5rem;
  border: none;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-light);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.chat-btn.ghost {
  background: transparent;
}

.chat-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.chat-btn.send {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent-dark) 100%);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  min-width: 44px;
}

.chat-btn.send:hover {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
}

.chat-btn.send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================
   PARTS MAP VIEW
   ============================================ */

.parts-map {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Throne Center */
.throne-center {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.throne-avatar-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 2.5rem;
  background: radial-gradient(ellipse at center,
    rgba(250, 204, 21, 0.15) 0%,
    rgba(250, 204, 21, 0.05) 50%,
    transparent 70%
  );
  border: 2px solid rgba(250, 204, 21, 0.4);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.throne-avatar-large:hover {
  background: radial-gradient(ellipse at center,
    rgba(250, 204, 21, 0.25) 0%,
    rgba(250, 204, 21, 0.1) 50%,
    transparent 70%
  );
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.2);
  transform: scale(1.02);
}

.throne-emoji {
  font-size: 3rem;
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.5));
}

.throne-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fbbf24;
}

.throne-subtitle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Clusters Grid */
.clusters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Cluster Card */
.cluster-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cluster-card:hover {
  border-color: var(--cluster-color, rgba(var(--accent-rgb), 0.3));
}

.cluster-card.expanded {
  border-color: var(--cluster-color, rgba(var(--accent-rgb), 0.4));
  background: rgba(255, 255, 255, 0.05);
}

.cluster-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  background: transparent;
  border: none;
  color: #e2e8f0;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}

.cluster-header:hover {
  background: rgba(var(--cluster-color), 0.1);
}

.cluster-emoji {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.cluster-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cluster-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cluster-color, #e2e8f0);
}

.cluster-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.cluster-toggle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
}

/* Cluster Parts (expanded) */
.cluster-parts {
  padding: 0 1rem 1rem;
  animation: expand-in 0.2s ease;
}

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

.cluster-description {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.parts-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.part-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: #e2e8f0;
  transition: all 0.2s ease;
}

.part-item:hover {
  background: rgba(var(--part-color), 0.15);
  border-color: var(--part-color, rgba(var(--accent-rgb), 0.3));
  transform: translateX(4px);
}

.part-emoji {
  font-size: 1.25rem;
  width: 32px;
  text-align: center;
}

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

.part-name {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--part-color, #e2e8f0);
}

.part-wants {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Featured Parts */
.featured-parts {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--accent-rgb), 0.15);
}

.featured-parts h3 {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.featured-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.featured-part {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  cursor: pointer;
  color: #e2e8f0;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.featured-part:hover {
  background: rgba(var(--part-color), 0.15);
  border-color: var(--part-color, rgba(var(--accent-rgb), 0.4));
  transform: scale(1.02);
}

.featured-emoji {
  font-size: 1.1rem;
}

.featured-name {
  font-weight: 500;
  color: var(--part-color, rgba(255, 255, 255, 0.9));
}

/* ============================================
   CHAT VIEW - Messages Area
   ============================================ */

.chat-messages {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.6);
}

.chat-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.chat-empty h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: var(--accent-light);
}

.chat-empty p {
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
  max-width: 320px;
  line-height: 1.5;
}

.chat-empty-hints {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 8px;
}

.hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.hint-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  font-weight: 600;
  color: var(--accent);
  font-family: monospace;
}

.context-loaded-notice {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 8px;
  font-size: 0.8rem;
  color: #34d399;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Message Bubbles */
.chat-message {
  display: flex;
  gap: 0.75rem;
  animation: message-in 0.3s ease;
}

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

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.user-avatar {
  background: rgba(var(--accent-rgb), 0.2);
  border: 2px solid rgba(var(--accent-rgb), 0.4);
}

.part-avatar {
  border: 2px solid;
}

.throne-avatar {
  background: radial-gradient(circle at 30% 30%, 
    rgba(250, 204, 21, 0.3) 0%, 
    rgba(250, 204, 21, 0.1) 70%
  );
  border: 2px solid rgba(250, 204, 21, 0.5);
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.2);
}

.throne-avatar.thinking {
  animation: throne-pulse 1.5s ease-in-out infinite;
}

@keyframes throne-pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(250, 204, 21, 0.4);
  }
}

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

.message-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.message-sender {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

.throne-sender {
  color: #fbbf24;
}

.message-time {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
}

.message-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 12px 12px 12px;
  max-width: 85%;
}

.chat-message.user .message-text {
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.part-text {
  font-style: italic;
  border-left: 3px solid;
  border-left-color: inherit;
}

.throne-text {
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.15);
  color: rgba(255, 255, 255, 0.95);
}

.message-system {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.5rem;
  font-style: italic;
}

/* Message Actions */
.message-actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

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

.msg-action-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.msg-action-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* Save Notice */
.save-notice {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1.25rem;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 20px;
  color: #34d399;
  font-size: 0.8rem;
  z-index: 10001;
  animation: notice-in 0.2s ease;
}

@keyframes notice-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Typing Indicator */
.typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.75rem 1rem;
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.15);
  border-radius: 0 12px 12px 12px;
  width: fit-content;
}

.typing-text {
  color: rgba(250, 204, 21, 0.7);
  font-size: 0.9rem;
  margin-right: 4px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: rgba(250, 204, 21, 0.6);
  border-radius: 50%;
  animation: typing-pulse 1.2s ease-in-out infinite;
}

/* nth-child counts from 1, text is 1, dots are 2,3,4 */
.typing-dot:nth-child(2) { animation-delay: 0s; }
.typing-dot:nth-child(3) { animation-delay: 0.2s; }
.typing-dot:nth-child(4) { animation-delay: 0.4s; }

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

/* ============================================
   CONTEXT CHIPS
   ============================================ */

.context-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}

.context-chip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--accent-light);
}

.context-chip-hash {
  opacity: 0.6;
}

.context-chip-icon {
  font-size: 0.9rem;
}

.context-chip-count {
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 10px;
  margin-left: 0.25rem;
}

.context-chip button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  margin-left: 0.25rem;
  font-size: 1rem;
  line-height: 1;
}

.context-chip button:hover {
  color: rgba(255, 255, 255, 0.8);
}

.context-chip.file-context {
  background: rgba(250, 204, 21, 0.1);
  border-color: rgba(250, 204, 21, 0.3);
  color: #fcd34d;
}

/* ============================================
   INPUT AREA
   ============================================ */

.chat-input-area {
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(var(--accent-rgb), 0.15);
  padding: 0.75rem 1rem;
}

.speaking-as {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid;
  border-radius: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.speaking-as button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0 0.25rem;
  font-size: 0.9rem;
}

.speaking-as button:hover {
  color: rgba(255, 255, 255, 0.8);
}

.chat-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.chat-input-wrapper {
  flex: 1;
  position: relative;
}

.chat-input-wrapper textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font-size: 0.95rem;
  font-family: inherit;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  line-height: 1.4;
}

.chat-input-wrapper textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.15);
}

.chat-input-wrapper textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.chat-input-wrapper textarea:disabled {
  opacity: 0.6;
}

/* ============================================
   AUTOCOMPLETE MENUS
   ============================================ */

.autocomplete-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(20, 15, 35, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  animation: menu-slide-up 0.15s ease;
  z-index: 100;
}

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

.autocomplete-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.autocomplete-icon {
  font-weight: 600;
  color: var(--accent);
}

.autocomplete-search {
  margin-left: auto;
  color: var(--accent);
  font-style: italic;
}

.autocomplete-loading {
  margin-left: auto;
  color: var(--accent);
  animation: pulse-text 1s ease-in-out infinite;
}

.autocomplete-list {
  max-height: 280px;
  overflow-y: auto;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background: rgba(var(--accent-rgb), 0.15);
}

.autocomplete-emoji {
  font-size: 1.25rem;
  width: 28px;
  text-align: center;
}

.autocomplete-hash {
  color: var(--accent);
  opacity: 0.7;
}

.autocomplete-name {
  font-weight: 500;
  color: #e2e8f0;
}

.autocomplete-desc {
  margin-left: auto;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.autocomplete-hint {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

.autocomplete-hint span {
  color: rgba(255, 255, 255, 0.6);
  font-family: monospace;
}

/* Hashtag menu specific */
.hashtag-menu .autocomplete-icon {
  color: #34d399;
}

.hashtag-menu .autocomplete-item.selected {
  background: rgba(52, 211, 153, 0.15);
}

/* ============================================
   SCROLLBAR
   ============================================ */

.chat-messages::-webkit-scrollbar,
.parts-map::-webkit-scrollbar,
.autocomplete-list::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track,
.parts-map::-webkit-scrollbar-track,
.autocomplete-list::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb,
.parts-map::-webkit-scrollbar-thumb,
.autocomplete-list::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.parts-map::-webkit-scrollbar-thumb:hover,
.autocomplete-list::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.5);
}

/* ============================================
   CONSTELLATION VIEW
   ============================================ */

.constellation-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  cursor: grab;
  background: radial-gradient(ellipse at center,
    rgba(15, 10, 30, 1) 0%,
    rgba(10, 5, 20, 1) 100%
  );
}

.constellation-container:active {
  cursor: grabbing;
}

/* Starfield background */
.constellation-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}

.star:nth-child(3n) {
  width: 1px;
  height: 1px;
  opacity: 0.5;
}

.star:nth-child(5n) {
  width: 3px;
  height: 3px;
  opacity: 0.3;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* SVG connection lines */
.constellation-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.connection-line {
  transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

/* Throne node at center */
.throne-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.75rem;
  background: rgba(20, 15, 35, 0.9);
  border: 2px solid rgba(250, 204, 21, 0.5);
  border-radius: 50%;
  width: 90px;
  height: 90px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
}

.throne-node:hover {
  border-color: rgba(250, 204, 21, 0.8);
  transform: translate(-50%, -50%) scale(1.1) !important;
}

.throne-node.selected {
  border-color: #fbbf24;
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.5);
}

.throne-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle,
    rgba(250, 204, 21, 0.3) 0%,
    rgba(250, 204, 21, 0.1) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: throne-glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

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

.throne-node .throne-emoji {
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.6));
}

.throne-node .throne-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Cluster nodes */
.cluster-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.6rem;
  background: rgba(20, 15, 35, 0.85);
  border: 2px solid var(--cluster-color, rgba(var(--accent-rgb), 0.4));
  border-radius: 14px;
  min-width: 60px;
  max-width: 75px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 50;
}

.cluster-node:hover,
.cluster-node.hovered {
  background: rgba(30, 25, 50, 0.95);
  border-color: var(--cluster-color);
  transform: translate(-50%, -50%) scale(1.15) !important;
  z-index: 60;
}

.cluster-node.expanded {
  background: rgba(40, 30, 60, 0.98);
  border-color: var(--cluster-color);
  box-shadow: 0 0 25px color-mix(in srgb, var(--cluster-color) 40%, transparent);
  z-index: 70;
}

.cluster-ring {
  position: absolute;
  inset: -8px;
  border: 1px solid var(--cluster-color, rgba(var(--accent-rgb), 0.2));
  border-radius: 20px;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.cluster-node:hover .cluster-ring,
.cluster-node.expanded .cluster-ring {
  opacity: 1;
  animation: ring-pulse 2s ease-in-out infinite;
}

@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.6; }
}

.cluster-node .cluster-emoji {
  font-size: 1.2rem;
}

.cluster-node .cluster-name {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--cluster-color, #e2e8f0);
  text-align: center;
  line-height: 1.2;
  max-width: 65px;
  word-wrap: break-word;
}

.cluster-node .cluster-count {
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.1rem 0.25rem;
  border-radius: 6px;
}

/* Part nodes (moons around clusters) */
.part-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.3rem 0.4rem;
  background: rgba(25, 20, 40, 0.9);
  border: 1.5px solid var(--part-color, rgba(var(--accent-rgb), 0.3));
  border-radius: 10px;
  min-width: 48px;
  max-width: 60px;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: part-appear 0.3s ease backwards;
  z-index: 40;
}

@keyframes part-appear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.85);
  }
}

.part-node:hover {
  background: rgba(35, 30, 55, 0.98);
  border-color: var(--part-color);
  transform: translate(-50%, -50%) scale(1) !important;
  z-index: 80;
  box-shadow: 0 0 15px color-mix(in srgb, var(--part-color) 30%, transparent);
}

.part-node.selected {
  border-color: var(--part-color);
  background: color-mix(in srgb, var(--part-color) 20%, rgba(25, 20, 40, 0.95));
  box-shadow: 0 0 20px color-mix(in srgb, var(--part-color) 40%, transparent);
}

.part-node .part-emoji {
  font-size: 1rem;
}

.part-node .part-name {
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--part-color, rgba(255, 255, 255, 0.9));
  text-align: center;
  max-width: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

/* Controls */
.constellation-controls {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 200;
}

.control-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: rgba(30, 25, 50, 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent-light);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.control-btn.reset {
  font-size: 1rem;
}

/* Ring labels */
.ring-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 50;
}

.ring-label-inner {
  color: rgba(var(--accent-rgb), 0.4);
}

.ring-label-outer {
  color: rgba(239, 68, 68, 0.3);
}

/* Facet vs Part cluster styling */
.cluster-node.cluster-facet .cluster-ring {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.cluster-node.cluster-facet:hover .cluster-ring,
.cluster-node.cluster-facet.expanded .cluster-ring {
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
}

/* Facet vs Part node styling */
.part-node.node-facet {
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.part-node.node-facet:hover {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
}

.part-node.node-part {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Legend dot */
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 6px;
}

/* Type badge in info panel */
.panel-type-badge {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.badge-facet {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.badge-part {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Legend */
.constellation-legend {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  background: rgba(20, 15, 35, 0.85);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 10px;
  z-index: 200;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

.legend-icon {
  width: 20px;
  text-align: center;
  font-size: 0.9rem;
}

/* Cluster info panel */
.cluster-info-panel {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1rem;
  background: rgba(20, 15, 35, 0.95);
  border: 1px solid var(--cluster-color, rgba(var(--accent-rgb), 0.3));
  border-radius: 12px;
  max-width: 280px;
  text-align: center;
  z-index: 200;
  animation: panel-fade-in 0.2s ease;
}

@keyframes panel-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.panel-emoji {
  font-size: 1.25rem;
}

.panel-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cluster-color, #e2e8f0);
}

.panel-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 0.35rem;
  line-height: 1.4;
}

.panel-hint {
  font-size: 0.7rem;
  color: rgba(var(--accent-rgb), 0.8);
  font-style: italic;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
  .message-text {
    max-width: 95%;
  }
  
  .constellation-legend {
    display: none;
  }
  
  .cluster-info-panel {
    max-width: 90%;
    font-size: 0.9em;
  }
  
  .throne-node {
    width: 80px;
    height: 80px;
  }
  
  .throne-node .throne-emoji {
    font-size: 1.6rem;
  }
}
.bird-flock-app {
  width: 100%;
  height: 100%;
  background: #1a1a2e;
  position: relative;
  overflow: hidden;
}

.flock-container {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.flock-container canvas {
  display: block;
}

.flock-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #a0a0c0;
  font-family: 'SF Mono', 'Monaco', monospace;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(160, 160, 192, 0.2);
  border-top-color: var(--accent-dark);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.flock-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ff6b6b;
  font-family: 'SF Mono', 'Monaco', monospace;
}

.flock-error h3 {
  margin: 0 0 8px 0;
}

.flock-error p {
  margin: 0;
  color: #888;
  font-size: 14px;
}

.flock-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(26, 26, 46, 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  min-width: 180px;
}

.control-btn {
  padding: 10px 16px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 8px;
  color: #e0e0ff;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-btn:hover {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.6);
}

.control-btn.playing {
  background: rgba(var(--accent-rgb), 0.4);
  border-color: var(--accent-dark);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.control-group label {
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.control-group .slider {
  width: 100%;
  height: 4px;
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 2px;
  appearance: none;
  cursor: pointer;
}

.control-group .slider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--accent-dark);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.control-group .slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.control-group .value {
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: 12px;
  color: var(--accent-dark);
  text-align: right;
}

.flock-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: 12px;
  color: rgba(160, 160, 192, 0.6);
  padding: 8px 16px;
  background: rgba(26, 26, 46, 0.7);
  border-radius: 20px;
  pointer-events: none;
}
.memex-device-app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 25%, rgba(31, 68, 92, 0.55), transparent 42%),
    radial-gradient(circle at 80% 10%, rgba(14, 85, 121, 0.45), transparent 38%),
    linear-gradient(160deg, #071117 0%, #0c1e2a 40%, #040b10 100%);
}

.memex-device-scene {
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.memex-device-scene canvas {
  display: block;
}

.memex-device-hud {
  position: absolute;
  top: 14px;
  left: 14px;
  min-width: 260px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(132, 227, 255, 0.22);
  background: rgba(3, 18, 28, 0.75);
  backdrop-filter: blur(12px);
  color: #dff7ff;
  font-family: 'SF Mono', 'Monaco', 'Fira Code', monospace;
}

.memex-device-title {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9be9ff;
}

.memex-device-status {
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(209, 241, 255, 0.84);
}

.memex-device-status strong {
  color: #53ffb8;
}

.memex-device-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.memex-device-button {
  border: 1px solid rgba(132, 227, 255, 0.25);
  border-radius: 8px;
  background: rgba(31, 110, 151, 0.2);
  color: #d8f5ff;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.memex-device-button:hover {
  background: rgba(37, 143, 197, 0.32);
  border-color: rgba(132, 227, 255, 0.44);
}

.memex-device-button:active {
  transform: translateY(1px);
}

.memex-device-button.active {
  border-color: rgba(119, 255, 201, 0.7);
  background: rgba(30, 160, 112, 0.3);
  color: #d9fff0;
}

.memex-device-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.memex-device-slider-row label {
  min-width: 70px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(209, 241, 255, 0.84);
  text-transform: uppercase;
}

.memex-device-slider-row input[type='range'] {
  flex: 1;
  accent-color: #4ad8ff;
}

.memex-device-slider-row output {
  width: 28px;
  text-align: right;
  font-size: 11px;
  color: #9be9ff;
}

.memex-device-hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-family: 'SF Mono', 'Monaco', 'Fira Code', monospace;
  font-size: 11px;
  color: rgba(203, 238, 250, 0.62);
  background: rgba(4, 16, 24, 0.55);
  border: 1px solid rgba(155, 233, 255, 0.15);
  border-radius: 999px;
  padding: 7px 11px;
  pointer-events: none;
}

.memex-device-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'SF Mono', 'Monaco', monospace;
  color: #ffc4c4;
  background: rgba(16, 0, 0, 0.55);
  text-align: center;
}

@media (max-width: 720px) {
  .memex-device-hud {
    top: 10px;
    left: 10px;
    right: 10px;
    min-width: unset;
  }

  .memex-device-hint {
    right: 10px;
    bottom: 10px;
    font-size: 10px;
    padding: 6px 9px;
  }
}
.time-spiral-app {
  width: 100%;
  height: 100%;
  background: #050508;
  position: relative;
  overflow: hidden;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.spiral-container {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.spiral-container:active {
  cursor: grabbing;
}

.spiral-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Loading */
.spiral-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent-dark);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Controls */
.spiral-controls {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 8px 16px;
  background: rgba(15, 15, 26, 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.view-modes {
  display: flex;
  gap: 4px;
}

.mode-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(var(--accent-rgb), 0.1);
}

.mode-btn.active {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.5);
}

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

.zoom-controls button {
  width: 28px;
  height: 28px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-controls button:hover {
  background: rgba(var(--accent-rgb), 0.3);
}

.zoom-controls span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  min-width: 40px;
  text-align: center;
  font-family: 'SF Mono', Monaco, monospace;
}

/* AI Controls */
.ai-controls {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

.analyze-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.3));
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 8px;
  color: #e0e0ff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.analyze-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.4), rgba(var(--accent-rgb), 0.4));
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2);
}

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

.analyze-btn.analyzing {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.2));
}

.analyze-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--accent-rgb), 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.analyzed-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'SF Mono', Monaco, monospace;
}

/* Legend */
.mood-legend {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 12px 16px;
  background: rgba(15, 15, 26, 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  max-width: 200px;
}

.legend-title {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: capitalize;
}

/* Stats */
.spiral-stats {
  position: absolute;
  bottom: 60px;
  left: 16px;
  display: flex;
  gap: 20px;
  padding: 12px 16px;
  background: rgba(15, 15, 26, 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

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

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-dark);
  font-family: 'SF Mono', Monaco, monospace;
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

/* Tooltip */
.entry-tooltip {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 16px;
  background: rgba(15, 15, 26, 0.95);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  pointer-events: none;
  text-align: center;
  min-width: 200px;
}

.tooltip-date {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
}

.tooltip-mood {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.tooltip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.tooltip-tag {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
}

/* Entry Panel */
.entry-panel {
  position: absolute;
  top: 16px;
  bottom: 60px;
  right: 16px;
  width: 340px;
  padding: 20px;
  background: rgba(15, 15, 26, 0.95);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  overflow-y: auto;
  animation: slideIn 0.3s ease;
}

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

.panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.panel-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.panel-date {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
  padding-right: 30px;
}

.panel-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-mood {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 6px;
}

.panel-words {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
}

.panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.panel-tag {
  font-size: 11px;
  padding: 4px 8px;
  background: rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  color: var(--accent-light);
}

.panel-content {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  white-space: pre-wrap;
  border-top: 1px solid rgba(var(--accent-rgb), 0.2);
  padding-top: 16px;
}

/* Hint */
.spiral-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  padding: 8px 16px;
  background: rgba(15, 15, 26, 0.7);
  border-radius: 20px;
}

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

.entry-panel::-webkit-scrollbar-track {
  background: transparent;
}

.entry-panel::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 3px;
}

.entry-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.5);
}

.sandbox-app-somatic-map {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 900px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.9);
  padding: 1rem;
}

.somatic-map-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.5);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(var(--accent-rgb), 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.app-header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(135deg, var(--accent), #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-header p {
  color: rgba(255, 255, 255, 0.5);
  margin: 0.25rem 0 0 0;
  font-size: 0.9rem;
}

.close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Scoped to somatic-map app to prevent global style leakage */
.somatic-map .app-content {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  flex: 1;
  min-height: 0;
}

.sensation-picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.sensation-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.sensation-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--sensation-color);
  color: white;
}

.sensation-btn.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--sensation-color);
  color: white;
  box-shadow: 0 0 15px var(--sensation-color) 40;
}

.sensation-btn .emoji {
  font-size: 1.2rem;
}

.sensation-btn .label {
  font-size: 0.95rem;
  font-weight: 500;
}

.stats {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.stats .count {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.stats .label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.clear-btn {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.5rem;
  color: rgba(239, 68, 68, 0.6);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.clear-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: #ef4444;
}

.body-canvas-container {
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.05) 0%, transparent 70%);
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.body-svg {
  height: 90%;
  max-width: 100%;
  cursor: crosshair;
}

.body-outline {
  transition: stroke 0.3s;
}

.body-svg:hover .body-outline {
  stroke: rgba(255, 255, 255, 0.25);
}

.sensation-node {
  cursor: pointer;
  pointer-events: all;
  filter: drop-shadow(0 0 5px currentColor);
}

.sensation-node:hover {
  r: 6;
  opacity: 1;
}

.app-footer {
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 1rem;
}

.app-footer p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  text-align: right;
  font-family: 'SF Mono', Monaco, monospace;
}
.sandbox-app-ritual-mandala {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1000px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    overflow: hidden;
}

.mandala-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--accent-rgb), 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

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

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.app-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    background: linear-gradient(135deg, var(--accent), #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.app-header p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
}

/* Scoped to ritual-mandala app to prevent global style leakage */
.ritual-mandala .app-content {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

canvas {
    max-width: 100%;
    max-height: 100%;
}

.mandala-legend {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-item .label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-box {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    gap: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

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

.stat .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
}

.stat .label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.app-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    font-style: italic;
}

.close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}.sandbox-app-relationship-constellation {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    overflow: hidden;
}

.constellation-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--accent-rgb), 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

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

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.app-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    background: linear-gradient(135deg, var(--accent), #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.app-header p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
}

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

.add-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent));
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Scoped to relationship-constellation app to prevent global style leakage */
.relationship-constellation .app-content {
    flex: 1;
    position: relative;
    min-height: 0;
}

.canvas-container {
    position: absolute;
    inset: 0;
}

.canvas-container canvas {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.legend-panel {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.legend-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.legend-title {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.legend-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-item .ring {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid;
    background: transparent;
}

.detail-panel,
.add-panel {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 280px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    padding: 1.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
}

.panel-close:hover {
    color: white;
}

.detail-panel h3,
.add-panel h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.detail-meta {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tag {
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
}

.tag.outline {
    background: transparent;
    border: 1.5px solid;
}

.notes {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.remove-btn {
    width: 100%;
    padding: 0.6rem;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-btn:hover {
    background: rgba(239, 68, 68, 0.25);
}

.add-panel input,
.add-panel select,
.add-panel textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: white;
    font-size: 0.9rem;
    font-family: inherit;
}

.add-panel input::placeholder,
.add-panel textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.add-panel textarea {
    min-height: 60px;
    resize: vertical;
}

.add-panel select {
    cursor: pointer;
}

.save-btn {
    width: 100%;
    padding: 0.7rem;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    border: none;
    color: white;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.app-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.app-footer p {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    font-style: italic;
}.sandbox-app-north-star-compass {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.9);
    padding: 1.25rem;
    overflow: hidden;
    background: #020204;
}

/* Loading State */
.compass-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1.5rem;
}

.north-star-loader {
    position: relative;
    width: 60px;
    height: 60px;
}

.loader-rays {
    position: absolute;
    inset: 0;
    animation: rotate-rays 4s linear infinite;
}

.loader-rays::before,
.loader-rays::after {
    content: '';
    position: absolute;
    background: linear-gradient(to bottom, rgba(255, 215, 100, 0.8), transparent);
    width: 2px;
    height: 25px;
    left: 50%;
    transform: translateX(-50%);
}

.loader-rays::before {
    top: -20px;
}

.loader-rays::after {
    bottom: -20px;
    transform: translateX(-50%) rotate(180deg);
}

.loader-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #fff 0%, #ffd700 50%, #ff9500 100%);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(255, 215, 100, 0.6);
    animation: pulse-core 2s ease-in-out infinite;
}

@keyframes rotate-rays {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-core {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

.compass-loading p {
    color: rgba(255, 215, 100, 0.6);
    font-size: 0.9rem;
    font-style: italic;
}

/* Header */
.compass-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.compass-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, #ffd700 0%, #ff9500 50%, #ffd700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

.subtitle {
    color: rgba(255, 255, 255, 0.35);
    margin: 0.35rem 0 0 0;
    font-size: 0.85rem;
    font-style: italic;
    letter-spacing: 0.02em;
}

.close-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

/* Content Layout */
.compass-content {
    flex: 1;
    display: flex;
    gap: 1.25rem;
    min-height: 0;
}

.canvas-container {
    flex: 1;
    position: relative;
    min-width: 0;
    border-radius: 1.25rem;
    overflow: hidden;
}

.canvas-container canvas {
    width: 100%;
    height: 100%;
}

/* North Star Label */
.north-star-label {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 320px;
    z-index: 10;
}

.star-text {
    cursor: pointer;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 215, 100, 0.15);
    border-radius: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.star-text:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 215, 100, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(255, 215, 100, 0.1);
}

.star-icon {
    color: #ffd700;
    font-size: 1.1rem;
    margin-right: 0.6rem;
    animation: twinkle 2s ease-in-out infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(0.9);
    }
}

.star-content {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
}

.edit-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.25);
    opacity: 0;
    transition: opacity 0.2s;
}

.star-text:hover .edit-hint {
    opacity: 1;
}

.define-star-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    background: linear-gradient(135deg, rgba(255, 215, 100, 0.1), rgba(255, 140, 0, 0.05));
    border: 1px solid rgba(255, 215, 100, 0.25);
    border-radius: 2rem;
    color: #ffd700;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.define-star-btn:hover {
    background: linear-gradient(135deg, rgba(255, 215, 100, 0.2), rgba(255, 140, 0, 0.1));
    border-color: rgba(255, 215, 100, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(255, 215, 100, 0.15);
}

.btn-icon {
    font-size: 1.2rem;
    animation: twinkle 2s ease-in-out infinite;
}

/* Goals Panel */
.goals-panel {
    width: 300px;
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

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

.goals-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.title-icon {
    color: var(--accent);
    font-size: 0.9rem;
}

.goals-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.add-goal-btn {
    width: 32px;
    height: 32px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 10px;
    color: var(--accent);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.add-goal-btn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: scale(1.1);
}

.goals-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

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

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
}

.stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.08);
}

.goals-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.no-goals {
    text-align: center;
    padding: 2.5rem 1rem;
    color: rgba(255, 255, 255, 0.3);
}

.no-goals-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.3;
}

.no-goals p {
    margin: 0 0 0.35rem 0;
    font-size: 0.95rem;
}

.no-goals small {
    font-size: 0.8rem;
    opacity: 0.7;
}

.goal-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.goal-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.goal-item.aligned {
    border-left: 3px solid rgba(var(--accent-rgb), 0.6);
}

.goal-item.misaligned {
    border-left: 3px solid rgba(255, 150, 100, 0.5);
}

.goal-item.completed {
    opacity: 0.4;
}

.goal-item.completed .goal-text {
    text-decoration: line-through;
}

.goal-check {
    width: 22px;
    height: 22px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 6px;
    color: var(--accent);
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.goal-check:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.goal-item.completed .goal-check {
    background: rgba(var(--accent-rgb), 0.3);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.goal-text {
    flex: 1;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.goal-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.2);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: all 0.2s;
}

.goal-item:hover .goal-remove {
    opacity: 1;
}

.goal-remove:hover {
    color: #ef4444;
}

/* Modals */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: modal-fade-in 0.2s ease-out;
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal {
    width: 90%;
    max-width: 440px;
    background: linear-gradient(145deg, rgba(20, 20, 28, 0.98), rgba(12, 12, 18, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.25rem;
    padding: 1.75rem;
    animation: modal-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

.modal-icon {
    color: #ffd700;
    font-size: 1.25rem;
}

.modal h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.modal-hint {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
}

.modal input,
.modal textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    color: white;
    font-size: 0.95rem;
    font-family: inherit;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.modal input:focus,
.modal textarea:focus {
    outline: none;
    border-color: rgba(255, 215, 100, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.modal textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

.modal input::placeholder,
.modal textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.aligned-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    cursor: pointer;
}

.aligned-toggle input {
    display: none;
}

.toggle-track {
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    position: relative;
    transition: all 0.25s;
}

.aligned-toggle input:checked+.toggle-track {
    background: rgba(var(--accent-rgb), 0.4);
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transition: all 0.25s;
}

.aligned-toggle input:checked+.toggle-track .toggle-thumb {
    left: 23px;
    background: var(--accent);
}

.toggle-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.cancel-btn {
    padding: 0.7rem 1.25rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.625rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cancel-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.save-btn {
    padding: 0.7rem 1.5rem;
    background: linear-gradient(135deg, #ffd700, #ff9500);
    border: none;
    border-radius: 0.625rem;
    color: #000;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
}

.save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.25);
}

/* Footer */
.compass-footer {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.compass-footer p {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.25);
    text-align: center;
    font-style: italic;
    letter-spacing: 0.01em;
}.admin-app {
  height: 100%;
  display: flex;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

.admin-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: rgba(255, 255, 255, 0.5);
}

/* Sidebar */
.admin-sidebar {
  width: 240px;
  min-width: 240px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-nav {
  display: flex;
  gap: 2px;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-nav-btn {
  flex: 1;
  padding: 6px 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}

.admin-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.admin-nav-btn.active {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
}

/* User list */
.admin-user-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

.admin-user-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 2px;
  transition: background 0.15s;
}

.admin-user-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.admin-user-item.active {
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
}

.admin-user-name {
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-user-email {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.admin-user-meta {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}

/* Main content */
.admin-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.admin-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
}

.admin-empty-small {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
  padding: 12px 0;
}

/* User detail */
.admin-detail-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.admin-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.admin-detail-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.admin-detail-meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.admin-detail-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.admin-btn {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.admin-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.admin-btn.danger {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.2);
}

.admin-btn.danger:hover {
  background: rgba(248, 113, 113, 0.1);
}

/* Detail sections */
.admin-detail-section {
  margin-bottom: 24px;
}

.admin-detail-section h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 8px 0;
}

.admin-google-account {
  padding: 6px 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.admin-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* Log entries */
.admin-log-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-log-entry {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 8px;
  font-size: 0.75rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  border-radius: 4px;
}

.admin-log-entry:hover {
  background: rgba(255, 255, 255, 0.03);
}

.admin-log-time {
  color: rgba(255, 255, 255, 0.3);
  min-width: 75px;
  flex-shrink: 0;
}

.admin-log-type {
  min-width: 55px;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.admin-log-type.error { color: #f87171; }
.admin-log-type.request { color: #38bdf8; }
.admin-log-type.ai { color: #a78bfa; }

.admin-log-user {
  color: #38bdf8;
  min-width: 100px;
  flex-shrink: 0;
  font-size: 0.7rem;
}

.admin-log-detail {
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-log-error {
  color: #f87171;
  margin-left: 8px;
}

/* Section header */
.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.admin-section-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* System stats */
.admin-system h2 {
  margin: 0 0 20px 0;
  font-size: 1rem;
  font-weight: 600;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.admin-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.admin-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.admin-stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Errors tab */
.admin-errors .error-entry {
  border-left: 2px solid rgba(248, 113, 113, 0.3);
  padding-left: 10px;
}
/* Nabu Verify — Vitest-inspired test runner UI */
.nabu-verify {
  height: 100%;
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  --nv-pass: #4ade80;
  --nv-fail: #f87171;
  --nv-warn: #fbbf24;
  --nv-running: var(--accent);
  --nv-muted: rgba(255, 255, 255, 0.35);
  --nv-border: rgba(255, 255, 255, 0.06);
  --nv-bg-subtle: rgba(255, 255, 255, 0.02);
  --nv-bg-hover: rgba(255, 255, 255, 0.04);
}

/* ═══ Sidebar ═══ */
.nv-sidebar {
  width: 200px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--nv-border);
  background: rgba(0, 0, 0, 0.12);
}

.nv-sidebar-header {
  padding: 8px 10px;
  border-bottom: 1px solid var(--nv-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Env Segmented Control */
.nv-env-picker {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}
.nv-env-btn {
  flex: 1;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 500;
  background: none;
  border: none;
  color: var(--nv-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.nv-env-btn:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.06); }
.nv-env-btn:hover:not(:disabled) { color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.03); }
.nv-env-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nv-env-btn.active { background: rgba(var(--accent-rgb), 0.12); color: var(--nv-running); font-weight: 600; }
.nv-env-btn.nv-env-prod.active { background: rgba(251, 191, 36, 0.1); color: var(--nv-warn); }
.nv-prod-warning {
  font-size: 9px;
  color: var(--nv-warn);
  text-align: center;
  padding: 3px;
  background: rgba(251, 191, 36, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(251, 191, 36, 0.12);
}

/* Connection */
.nv-conn-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--nv-border);
}
.nv-conn-row { display: flex; align-items: center; gap: 6px; }
.nv-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.nv-status-dot.connected { background: var(--nv-pass); box-shadow: 0 0 5px rgba(74, 222, 128, 0.4); }
.nv-status-dot.connecting { background: var(--nv-warn); animation: nv-pulse 1s infinite; }
.nv-status-dot.disconnected { background: rgba(255, 255, 255, 0.2); }
@keyframes nv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.nv-conn-label { font-size: 11px; font-weight: 500; flex: 1; }
.nv-conn-action {
  font-size: 9px;
  color: rgba(248, 113, 113, 0.5);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.nv-conn-action:hover { color: var(--nv-fail); }
.nv-conn-detail { font-size: 9px; color: rgba(255, 255, 255, 0.18); word-break: break-all; }
.nv-conn-form { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.nv-error {
  font-size: 9px;
  color: var(--nv-fail);
  padding: 3px 5px;
  background: rgba(248, 113, 113, 0.08);
  border-radius: 4px;
  border: 1px solid rgba(248, 113, 113, 0.15);
}
.nv-input {
  width: 100%;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.nv-input:focus { border-color: rgba(var(--accent-rgb), 0.35); }
.nv-input::placeholder { color: rgba(255, 255, 255, 0.2); }
.nv-input:disabled { opacity: 0.5; }

/* ═══ Sidebar Settings ═══ */
.nv-sidebar-settings {
  padding: 6px 10px;
  border-bottom: 1px solid var(--nv-border);
}
.nv-sidebar-setting-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  user-select: none;
}
.nv-sidebar-setting-row:hover { color: rgba(255, 255, 255, 0.8); }
.nv-sidebar-setting-row input[type="checkbox"] { margin: 0; }

/* ═══ Test File Tree (sidebar) ═══ */
.nv-file-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.nv-tree-group {
  margin-bottom: 1px;
}

.nv-tree-group-header {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 3px 6px 3px 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  user-select: none;
  transition: background 0.1s;
}
.nv-tree-group-header:hover { background: var(--nv-bg-hover); }

.nv-tree-group-check {
  margin-right: 2px;
}

.nv-tree-arrow {
  width: 14px;
  font-size: 10px;
  text-align: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.2);
  transition: transform 0.12s;
  display: inline-block;
}
.nv-tree-arrow.open { transform: rotate(90deg); }

.nv-tree-group-label { flex: 1; }

.nv-tree-group-badge {
  font-size: 9px;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 500;
}
.nv-tree-group-badge.pass { color: var(--nv-pass); background: rgba(74, 222, 128, 0.08); }
.nv-tree-group-badge.fail { color: var(--nv-fail); background: rgba(248, 113, 113, 0.08); }
.nv-tree-group-badge.warn { color: var(--nv-warn); background: rgba(251, 191, 36, 0.08); }
.nv-tree-group-badge.running { color: var(--nv-running); background: rgba(var(--accent-rgb), 0.08); }
.nv-tree-group-badge.disabled { color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.06); font-size: 8px; }

.nv-tree-group-count {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.15);
  margin-left: 4px;
}

/* Tree leaf / test item */
.nv-tree-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 26px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}
.nv-tree-item:hover { background: var(--nv-bg-hover); }
.nv-tree-item.selected { background: rgba(var(--accent-rgb), 0.1); color: rgba(255, 255, 255, 0.85); }
.nv-tree-item.disabled { opacity: 0.25; cursor: not-allowed; }

.nv-tree-item-icon {
  width: 12px;
  text-align: center;
  flex-shrink: 0;
  font-size: 9px;
}
.nv-tree-item-icon.pass { color: var(--nv-pass); }
.nv-tree-item-icon.fail { color: var(--nv-fail); }
.nv-tree-item-icon.warn { color: var(--nv-warn); }
.nv-tree-item-icon.running { color: var(--nv-running); }

.nv-tree-item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nv-tree-item-dur {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.15);
  font-family: 'SF Mono', 'Fira Code', monospace;
  flex-shrink: 0;
}

.nv-tree-check {
  accent-color: var(--nv-running);
  margin: 0;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Sidebar footer */
.nv-sidebar-footer {
  padding: 6px 10px;
  border-top: 1px solid var(--nv-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nv-checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 10px;
  color: var(--nv-muted);
}
.nv-checkbox input[type="checkbox"] { accent-color: var(--nv-running); margin: 0; width: 11px; height: 11px; }

.nv-btn {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.12s;
  font-family: inherit;
}
.nv-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); }
.nv-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.nv-btn-run {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--nv-running);
  font-weight: 600;
}
.nv-btn-run:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.18); }

.nv-btn-connect {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.2);
  color: var(--nv-pass);
}
.nv-btn-connect:hover:not(:disabled) { background: rgba(74, 222, 128, 0.15); }

.nv-btn-xs { padding: 2px 6px; font-size: 9px; border-radius: 4px; }
.nv-btn-sm { padding: 4px 10px; font-size: 11px; border-radius: 5px; display: flex; align-items: center; gap: 4px; }

.nv-btn-text {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  font-size: 9px;
  padding: 1px 4px;
  font-family: inherit;
  border-radius: 3px;
}
.nv-btn-text:hover { color: rgba(255, 255, 255, 0.5); background: var(--nv-bg-hover); }

/* ═══ Center Panel ═══ */
.nv-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Toolbar — Vitest-style filter bar */
.nv-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--nv-border);
  background: rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.nv-filter-pills {
  display: flex;
  gap: 3px;
}

.nv-filter-pill {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nv-filter-pill .nv-pill-count {
  font-size: 9px;
  font-weight: 600;
  min-width: 14px;
  text-align: center;
}

.nv-filter-pill.pass { color: var(--nv-pass); }
.nv-filter-pill.pass.active { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.2); }
.nv-filter-pill.fail { color: var(--nv-fail); }
.nv-filter-pill.fail.active { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.2); }
.nv-filter-pill.warn { color: var(--nv-warn); }
.nv-filter-pill.warn.active { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.2); }

.nv-filter-pill:hover { background: var(--nv-bg-hover); }

.nv-toolbar-spacer { flex: 1; }

/* Settings gear */
.nv-btn-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.12s;
}
.nv-btn-icon:hover { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); }
.nv-btn-icon.active { color: var(--nv-running); background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.25); }

.nv-toolbar-duration {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.nv-toolbar-actions { display: flex; align-items: center; gap: 6px; }
.nv-btn-ai { background: rgba(56, 189, 248, 0.06); border-color: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.nv-btn-ai:hover:not(:disabled) { background: rgba(56, 189, 248, 0.12); }

.nv-run-all-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
  white-space: nowrap;
}
.nv-run-all-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
}
.nv-run-all-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ═══ Test List — Vitest flat list ═══ */
.nv-test-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.nv-test-list-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.12);
  font-size: 12px;
}

/* Category group header in center list */
.nv-cat-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
}
.nv-cat-header:hover { color: rgba(255, 255, 255, 0.4); }

.nv-cat-header-stats {
  display: flex;
  gap: 4px;
  font-size: 9px;
  font-weight: 500;
  margin-left: auto;
}

.nv-cat-run-btn {
  opacity: 0;
  transition: opacity 0.12s;
}
.nv-cat-header:hover .nv-cat-run-btn { opacity: 1; }

/* Individual test row — Vitest style */
.nv-test-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 20px;
  cursor: pointer;
  transition: background 0.1s;
  border-left: 2px solid transparent;
  min-height: 28px;
}
.nv-test-row:hover { background: var(--nv-bg-hover); }
.nv-test-row.selected {
  background: rgba(var(--accent-rgb), 0.06);
  border-left-color: var(--nv-running);
}
.nv-test-row.status-pass { border-left-color: var(--nv-pass); }
.nv-test-row.status-fail { border-left-color: var(--nv-fail); }
.nv-test-row.status-warn { border-left-color: var(--nv-warn); }
.nv-test-row.status-running { border-left-color: var(--nv-running); }

.nv-test-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: 11px;
}
.nv-test-icon.pass { color: var(--nv-pass); }
.nv-test-icon.fail { color: var(--nv-fail); }
.nv-test-icon.warn { color: var(--nv-warn); }
.nv-test-icon.running { color: var(--nv-running); }
.nv-test-icon.pending { color: rgba(255, 255, 255, 0.1); }

.nv-test-info { flex: 1; min-width: 0; }
.nv-test-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nv-test-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.nv-test-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nv-test-duration {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Duration bar — visual indicator */
.nv-dur-bar {
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
  overflow: hidden;
}
.nv-dur-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}
.nv-dur-bar-fill.fast { background: var(--nv-pass); }
.nv-dur-bar-fill.medium { background: var(--nv-warn); }
.nv-dur-bar-fill.slow { background: var(--nv-fail); }

.nv-test-run-btn {
  opacity: 0.6;
  transition: opacity 0.12s, background 0.12s;
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.25);
  background: rgba(var(--accent-rgb), 0.08);
  flex-shrink: 0;
}
.nv-test-row:hover .nv-test-run-btn { opacity: 1; }
.nv-test-run-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* ═══ Test Detail Dialog (modal overlay) ═══ */
.nv-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: nv-fade-in 0.15s ease-out;
}

@keyframes nv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nv-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.nv-dialog {
  background: rgba(28, 28, 32, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  width: 520px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  animation: nv-slide-up 0.15s ease-out;
}

.nv-dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--nv-border);
  flex-shrink: 0;
}

.nv-dialog-title-group {
  flex: 1;
  min-width: 0;
}

.nv-dialog-title {
  font-size: 14px;
  font-weight: 600;
  display: block;
}

.nv-dialog-category {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nv-dialog-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nv-dialog-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
  font-family: inherit;
  line-height: 1;
}
.nv-dialog-close:hover { color: rgba(255, 255, 255, 0.6); }

.nv-dialog-body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nv-dialog-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 6px;
  font-weight: 600;
}

.nv-dialog-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.nv-dialog-why {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
  font-style: italic;
}

.nv-dialog-logs {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 6px 8px;
  max-height: 160px;
  overflow-y: auto;
}

.nv-dialog-logs .nv-log-entry {
  font-size: 10px;
}

.nv-dialog-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  padding-top: 8px;
  border-top: 1px solid var(--nv-border);
}

.nv-dialog-badge {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nv-dialog-badge.warn {
  background: rgba(251, 191, 36, 0.12);
  color: var(--nv-warn);
}
.nv-dialog-badge.info {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
}

.nv-dialog-run-btn {
  width: 100%;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
  margin-top: 2px;
}
.nv-dialog-run-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.5);
}
.nv-dialog-run-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Steps — Playwright-like action list */
.nv-steps { display: flex; flex-direction: column; gap: 1px; }

.nv-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
}

.nv-step-icon {
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  font-size: 10px;
}
.nv-step-icon.pass { color: var(--nv-pass); }
.nv-step-icon.fail { color: var(--nv-fail); }
.nv-step-icon.warn { color: var(--nv-warn); }
.nv-step-icon.running { color: var(--nv-running); }
.nv-step-icon.pending { color: rgba(255, 255, 255, 0.1); }

.nv-step-label { color: rgba(255, 255, 255, 0.6); flex: 1; }
.nv-step.pending .nv-step-label { color: rgba(255, 255, 255, 0.15); }

.nv-step-detail {
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  text-align: right;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══ Resize Handle ═══ */
.nv-resize-handle {
  width: 4px;
  cursor: col-resize;
  flex-shrink: 0;
  background: transparent;
  transition: background 0.12s;
  position: relative;
}
.nv-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 24px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.12s;
}
.nv-resize-handle:hover { background: rgba(var(--accent-rgb), 0.06); }
.nv-resize-handle:hover::after { background: rgba(var(--accent-rgb), 0.3); height: 40px; }

/* ═══ Log Panel ═══ */
.nv-log-panel {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--nv-border);
  background: rgba(0, 0, 0, 0.15);
}

.nv-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-bottom: 1px solid var(--nv-border);
  flex-shrink: 0;
}
.nv-log-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.3);
}
.nv-log-actions { display: flex; gap: 1px; }

.nv-log-body {
  flex: 1;
  overflow-y: auto;
  padding: 2px 0;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 10px;
  line-height: 1.5;
}

.nv-log-empty {
  padding: 2rem 1rem;
  color: rgba(255, 255, 255, 0.1);
  text-align: center;
  font-family: inherit;
  font-size: 11px;
}

.nv-log-entry {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 8px;
  min-height: 17px;
}
.nv-log-entry:hover { background: rgba(255, 255, 255, 0.015); }

.nv-log-time { color: rgba(255, 255, 255, 0.1); flex-shrink: 0; font-size: 9px; }
.nv-log-indicator { width: 10px; text-align: center; flex-shrink: 0; font-size: 9px; }
.nv-log-message {
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nv-log-detail {
  color: rgba(255, 255, 255, 0.18);
  margin-left: 3px;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nv-log-pass .nv-log-indicator { color: var(--nv-pass); }
.nv-log-pass .nv-log-message { color: var(--nv-pass); }
.nv-log-fail .nv-log-indicator { color: var(--nv-fail); }
.nv-log-fail .nv-log-message { color: var(--nv-fail); }
.nv-log-warn .nv-log-indicator { color: var(--nv-warn); }
.nv-log-warn .nv-log-message { color: var(--nv-warn); }
.nv-log-info .nv-log-indicator { color: rgba(255, 255, 255, 0.15); }
.nv-log-detail-entry .nv-log-message { color: rgba(255, 255, 255, 0.3); padding-left: 6px; }
.nv-log-separator { height: 1px; background: rgba(255, 255, 255, 0.025); margin: 2px 8px; }

/* Spinners */
.nv-spinner, .nv-spinner-sm {
  display: inline-block;
  border: 1.5px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--nv-running);
  border-radius: 50%;
  animation: nv-spin 0.6s linear infinite;
}
.nv-spinner { width: 12px; height: 12px; }
.nv-spinner-sm { width: 8px; height: 8px; border-width: 1.5px; }
@keyframes nv-spin { to { transform: rotate(360deg); } }

/* Scrollbars */
.nv-file-tree::-webkit-scrollbar,
.nv-test-list::-webkit-scrollbar,
.nv-log-body::-webkit-scrollbar,
.nv-dialog-body::-webkit-scrollbar,
.nv-dialog-logs::-webkit-scrollbar { width: 4px; }
.nv-file-tree::-webkit-scrollbar-track,
.nv-test-list::-webkit-scrollbar-track,
.nv-log-body::-webkit-scrollbar-track,
.nv-dialog-body::-webkit-scrollbar-track,
.nv-dialog-logs::-webkit-scrollbar-track { background: transparent; }
.nv-file-tree::-webkit-scrollbar-thumb,
.nv-test-list::-webkit-scrollbar-thumb,
.nv-log-body::-webkit-scrollbar-thumb,
.nv-dialog-body::-webkit-scrollbar-thumb,
.nv-dialog-logs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 2px; }

/* Status utility */
.nv-status-pass { color: var(--nv-pass); }
.nv-status-fail { color: var(--nv-fail); }
.nv-status-warn { color: var(--nv-warn); }
.nv-status-running { color: var(--nv-running); }
/**
 * Example App Styles
 * 
 * All styles are scoped with .sandbox-app-example-app
 * to prevent conflicts with the main dashboard.
 */

.sandbox-app-example-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

.sandbox-app-example-app .example-header {
  text-align: center;
  margin-bottom: 2rem;
}

.sandbox-app-example-app .example-header h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sandbox-app-example-app .example-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.sandbox-app-example-app .example-description code {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.sandbox-app-example-app .example-input-section {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.sandbox-app-example-app .example-input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.sandbox-app-example-app .example-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.sandbox-app-example-app .example-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.sandbox-app-example-app .example-add-btn {
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}

.sandbox-app-example-app .example-add-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.sandbox-app-example-app .example-add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sandbox-app-example-app .example-entries {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sandbox-app-example-app .example-entry {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: background 0.15s;
}

.sandbox-app-example-app .example-entry:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sandbox-app-example-app .example-entry-text {
  flex: 1;
  font-size: 0.95rem;
}

.sandbox-app-example-app .example-entry-time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.sandbox-app-example-app .example-delete-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.sandbox-app-example-app .example-delete-btn:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

.sandbox-app-example-app .example-empty {
  text-align: center;
  padding: 3rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
}

.sandbox-app-example-app .example-loading {
  text-align: center;
  padding: 4rem;
  color: rgba(255, 255, 255, 0.5);
}

.sandbox-app-example-app .example-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.sandbox-app-example-app .example-clear-btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.sandbox-app-example-app .example-clear-btn:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.4);
}

/* Modal Styles */
.sandbox-app-example-app .example-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.sandbox-app-example-app .example-modal {
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: modalScaleIn 0.2s ease-out;
}

@keyframes modalScaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.sandbox-app-example-app .example-modal h3 {
  margin-top: 0;
  font-size: 1.25rem;
  color: #f87171;
}

.sandbox-app-example-app .example-modal p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  margin: 1rem 0 2rem;
  line-height: 1.5;
}

.sandbox-app-example-app .example-modal-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.sandbox-app-example-app .example-cancel-btn {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.sandbox-app-example-app .example-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sandbox-app-example-app .example-confirm-btn {
  padding: 0.75rem 1.5rem;
  background: #ef4444;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}

.sandbox-app-example-app .example-confirm-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.sandbox-app-example-app .example-footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}
.test-app {
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--text-primary, #fff);
  perspective: 2000px;
}

/* Tree Styles */
@keyframes treeSway {
  0%, 100% {
    transform: translateY(-50%) rotate(-2deg);
  }
  50% {
    transform: translateY(-50%) rotate(2deg);
  }
}

@keyframes leafRustle {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  25% {
    transform: translateX(-50%) scale(1.05) translateY(-2px);
  }
  75% {
    transform: translateX(-50%) scale(0.95) translateY(2px);
  }
}

/* Tire Styles */
@keyframes tireRoll {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.test-app h1 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.test-app p {
  margin: 0 0 1.5rem 0;
  opacity: 0.7;
}

.test-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* 3D Cube Styles */
.cube-container {
  width: 100px;
  height: 100px;
  perspective: 800px;
  margin: 40px auto;
  transform-style: preserve-3d;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* animation: rotate 8s infinite linear; */
}

.cube-face {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid #22c55e;
  background: rgba(34, 197, 94, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
}

.front  { transform: rotateY(  0deg) translateZ(50px); }
.back   { transform: rotateY(180deg) translateZ(50px); }
.right  { transform: rotateY( 90deg) translateZ(50px); }
.left   { transform: rotateY(-90deg) translateZ(50px); }
.top    { transform: rotateX( 90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }

/* Second cube - red styling */
.cube:nth-child(2) .cube-face {
  background: rgba(220, 50, 50, 0.2);
  border: 2px solid #dc3232;
}

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

/* 3D Heart Styles */
.heart-container {
  width: 80px;
  height: 80px;
  perspective: 800px;
  margin: 20px auto;
  transform-style: preserve-3d;
}

.heart {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* animation: heartRotate 6s infinite linear; */
}

.heart-shape {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin-left: -30px;
  margin-top: -30px;
}

.heart-shape:before,
.heart-shape:after {
  content: '';
  position: absolute;
  width: 30px;
  height: 48px;
  background: #e91e63;
  border-radius: 30px 30px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart-shape:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

.heart-shape:before {
  left: 30px;
}

.heart-face {
  position: absolute;
  width: 100%;
  height: 100%;
}

.heart-face:nth-child(1) { transform: rotateY(0deg) translateZ(20px); }
.heart-face:nth-child(2) { transform: rotateY(60deg) translateZ(20px); }
.heart-face:nth-child(3) { transform: rotateY(120deg) translateZ(20px); }
.heart-face:nth-child(4) { transform: rotateY(180deg) translateZ(20px); }
.heart-face:nth-child(5) { transform: rotateY(240deg) translateZ(20px); }
.heart-face:nth-child(6) { transform: rotateY(300deg) translateZ(20px); }

.heart-face:nth-child(2) .heart-shape:before,
.heart-face:nth-child(2) .heart-shape:after {
  background: #f06292;
}

.heart-face:nth-child(3) .heart-shape:before,
.heart-face:nth-child(3) .heart-shape:after {
  background: #ec407a;
}

.heart-face:nth-child(4) .heart-shape:before,
.heart-face:nth-child(4) .heart-shape:after {
  background: #e91e63;
}

.heart-face:nth-child(5) .heart-shape:before,
.heart-face:nth-child(5) .heart-shape:after {
  background: #d81b60;
}

.heart-face:nth-child(6) .heart-shape:before,
.heart-face:nth-child(6) .heart-shape:after {
  background: #c2185b;
}

@keyframes heartRotate {
  from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* 3D Fish Styles */
.fish-container {
  width: 150px;
  height: 100px;
  perspective: 600px;
  margin: 40px auto;
}

.fish {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* animation: fishSwim 5s infinite ease-in-out; */
}

.fish-body {
  position: absolute;
  width: 100px;
  height: 60px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ffd166 100%);
  border-radius: 50% 40% 40% 50% / 60% 60% 40% 40%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(15px);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  transform-style: preserve-3d;
}

/* Multiple body layers for 3D depth */
.fish-body:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ff8e53 0%, #ff6b6b 50%, #ff8e53 100%);
  border-radius: inherit;
  transform: translateZ(-30px);
  opacity: 0.9;
}

.fish-body:after {
  content: '';
  position: absolute;
  width: 95%;
  height: 90%;
  background: linear-gradient(135deg, #ffd166 0%, #ff8e53 50%, #ff6b6b 100%);
  border-radius: inherit;
  transform: translate(2.5%, 5%) translateZ(0px);
  opacity: 0.8;
}

.fish-eye {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #333;
  border-radius: 50%;
  right: 15px;
  top: 15px;
  border: 3px solid white;
}

.fish-eye:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: white;
  border-radius: 50%;
  top: 2px;
  right: 2px;
}

.fish-tail {
  position: absolute;
  width: 50px;
  height: 50px;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  transform-style: preserve-3d;
}

/* 3D tail fin with multiple planes */
.fish-tail:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 40px solid #ff8e53;
  transform: translateZ(10px);
  filter: drop-shadow(0 2px 8px rgba(255, 142, 83, 0.3));
}

.fish-tail:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 35px solid #ff6b6b;
  transform: translateZ(-10px) translateY(5px);
  opacity: 0.9;
}

.fish-fin-top {
  position: absolute;
  width: 30px;
  height: 25px;
  left: 50%;
  top: -20px;
  transform: translateX(-50%) rotateZ(10deg);
  transform-style: preserve-3d;
}

.fish-fin-top:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid #ff6b6b;
  transform: translateZ(5px);
}

.fish-fin-top:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid #ff8e53;
  transform: translateZ(-5px) translateX(3px);
  opacity: 0.9;
}

.fish-fin-bottom {
  position: absolute;
  width: 20px;
  height: 18px;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%) rotateZ(-10deg);
  transform-style: preserve-3d;
}

.fish-fin-bottom:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid #ff6b6b;
  transform: translateZ(5px);
}

.fish-fin-bottom:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 15px solid #ff8e53;
  transform: translateZ(-5px) translateX(2px);
  opacity: 0.9;
}

@keyframes fishSwim {
  0%, 100% {
    transform: rotateY(0deg) rotateZ(0deg) translateX(0px);
  }
  25% {
    transform: rotateY(180deg) rotateZ(5deg) translateX(30px);
  }
  50% {
    transform: rotateY(360deg) rotateZ(-5deg) translateX(0px);
  }
  75% {
    transform: rotateY(180deg) rotateZ(5deg) translateX(-30px);
  }
}

/* 3D Stick Figure Styles */
.stickman-container {
  width: 100px;
  height: 150px;
  perspective: 600px;
  margin: 40px auto;
  position: relative;
}

.stickman {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* animation: stickDance 4s infinite ease-in-out; */
}

.stickman-head {
  position: absolute;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 35% 35%, #4a90e2, #2563eb);
  border-radius: 50%;
  left: 50%;
  top: 10px;
  transform: translateX(-50%) translateZ(15px);
  box-shadow: 
    0 2px 10px rgba(74, 144, 226, 0.5),
    inset -2px -2px 4px rgba(0, 0, 0, 0.2),
    inset 2px 2px 4px rgba(255, 255, 255, 0.3);
  transform-style: preserve-3d;
}

.stickman-head:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: translateZ(-30px);
  opacity: 0.7;
}

.stickman-body {
  position: absolute;
  width: 4px;
  height: 50px;
  background: linear-gradient(180deg, #4a90e2 0%, #2563eb 100%);
  left: 50%;
  top: 38px;
  transform: translateX(-50%);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.stickman-arm {
  position: absolute;
  width: 3px;
  height: 35px;
  background: linear-gradient(180deg, #4a90e2 0%, #2563eb 100%);
  top: 45px;
  border-radius: 2px;
  transform-origin: top center;
  box-shadow: 0 1px 5px rgba(37, 99, 235, 0.3);
}

.stickman-arm-left {
  left: 38px;
  transform: rotate(-30deg);
  /* animation: waveLeft 2s infinite ease-in-out; */
}

.stickman-arm-right {
  right: 38px;
  transform: rotate(30deg);
  /* animation: waveRight 2s infinite ease-in-out 0.5s; */
}

.stickman-leg {
  position: absolute;
  width: 3px;
  height: 40px;
  background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%);
  top: 85px;
  border-radius: 2px;
  transform-origin: top center;
  box-shadow: 0 1px 5px rgba(30, 64, 175, 0.3);
}

.stickman-leg-left {
  left: 44px;
  transform: rotate(-15deg);
  /* animation: walkLeft 2s infinite ease-in-out; */
}

.stickman-leg-right {
  right: 44px;
  transform: rotate(15deg);
  /* animation: walkRight 2s infinite ease-in-out 0.5s; */
}

@keyframes stickDance {
  0%, 100% {
    transform: rotateY(0deg) translateY(0);
  }
  25% {
    transform: rotateY(-180deg) translateY(-10px);
  }
  50% {
    transform: rotateY(-360deg) translateY(0);
  }
  75% {
    transform: rotateY(-180deg) translateY(-5px);
  }
}

@keyframes waveLeft {
  0%, 100% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-60deg);
  }
}

@keyframes waveRight {
  0%, 100% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(60deg);
  }
}

@keyframes walkLeft {
  0%, 100% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(-5deg);
  }
}

@keyframes walkRight {
  0%, 100% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

/* 3D Guitar Styles */
.guitar-container {
  width: 200px;
  height: 300px;
  perspective: 800px;
  margin: 40px auto;
  position: relative;
}

.guitar {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* animation: guitarRotate 8s infinite ease-in-out; */
}

.guitar-body {
  position: absolute;
  width: 120px;
  height: 160px;
  background: linear-gradient(135deg, #8b4513, #cd853f, #daa520);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(20px);
  box-shadow: 
    inset -5px -5px 15px rgba(0, 0, 0, 0.3),
    inset 5px 5px 15px rgba(255, 255, 255, 0.1),
    0 10px 30px rgba(139, 69, 19, 0.4);
  border: 2px solid #654321;
  transform-style: preserve-3d;
}

.guitar-body:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: translateZ(-40px);
  opacity: 0.8;
  border: inherit;
}

.guitar-hole {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #1a1a1a;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(0, 0, 0, 0.5);
}

.guitar-neck {
  position: absolute;
  width: 40px;
  height: 140px;
  background: linear-gradient(180deg, #3e2723, #5d4037);
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 
    inset -2px 0 5px rgba(0, 0, 0, 0.3),
    inset 2px 0 5px rgba(255, 255, 255, 0.1);
  border-radius: 5px 5px 0 0;
}

.guitar-fret {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #c0c0c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.guitar-head {
  position: absolute;
  width: 60px;
  height: 40px;
  background: linear-gradient(135deg, #3e2723, #5d4037);
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px 10px 5px 5px;
  box-shadow: 
    inset -2px -2px 5px rgba(0, 0, 0, 0.3),
    inset 2px 2px 5px rgba(255, 255, 255, 0.1);
}

.guitar-peg {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #e0e0e0, #9e9e9e);
  border-radius: 50%;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

.guitar-peg-left {
  left: -5px;
}

.guitar-peg-right {
  right: -5px;
}

.guitar-strings {
  position: absolute;
  width: 100%;
  height: 280px;
  top: 0;
  pointer-events: none;
}

.guitar-string {
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, #c0c0c0, #808080, #c0c0c0);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  transform-origin: bottom center;
  /* animation: stringVibrate 0.5s ease-in-out infinite alternate; */
  animation-delay: calc(var(--string-index, 0) * 0.1s);
}

.guitar-string:nth-child(1) { --string-index: 0; }
.guitar-string:nth-child(2) { --string-index: 1; }
.guitar-string:nth-child(3) { --string-index: 2; }
.guitar-string:nth-child(4) { --string-index: 3; }
.guitar-string:nth-child(5) { --string-index: 4; }
.guitar-string:nth-child(6) { --string-index: 5; }

@keyframes guitarRotate {
  0%, 100% {
    transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
  }
  25% {
    transform: rotateY(45deg) rotateX(10deg) translateZ(20px);
  }
  50% {
    transform: rotateY(0deg) rotateX(-10deg) translateZ(0px);
  }
  75% {
    transform: rotateY(-45deg) rotateX(10deg) translateZ(20px);
  }
}

@keyframes stringVibrate {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0.5px);
  }
}
/* ── App Switcher — Vertical Spinning Wheel ── */
.app-switcher-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: switcherFadeIn 0.1s ease-out;
}

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

.app-switcher-overlay.dismissing {
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.app-switcher-stage {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}

.app-switcher-wheel-container {
  width: 200px;
  height: 180px;
  perspective: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.app-switcher-wheel {
  position: relative;
  width: 190px;
  height: 40px;
  transform-style: preserve-3d;
}

.app-switcher-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 10px;
  background: var(--os-glass-bg-solid);
  border: 1px solid var(--os-glass-border);
  border-radius: 12px;
  box-sizing: border-box;
}

.app-switcher-card.selected {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.2);
}

.app-switcher-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--os-text-primary);
  flex-shrink: 0;
}

.app-switcher-card.selected .app-switcher-card-icon {
  color: var(--accent);
}

/* Preview thumbnail — right of wheel */
.app-switcher-preview {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--os-glass-border);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  animation: previewFadeIn 0.2s ease-out;
  width: 440px;
  height: 280px;
  flex-shrink: 0;
}

.app-switcher-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes previewFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.app-switcher-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--os-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-switcher-card.selected .app-switcher-card-name {
  color: var(--os-text-primary);
}

/* Single app — no wheel needed */
.app-switcher-single {
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-switcher-single .app-switcher-card {
  position: relative;
}

.app-switcher-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--os-text-primary);
  text-align: center;
  min-height: 18px;
}
/* ── Command Center — Exposé with real windows ── */

/* Backdrop — dims desktop, below menubar */
.command-center-backdrop {
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999980;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ccFadeIn 0.08s ease-out;
  transition: background 0.15s ease, backdrop-filter 0.15s ease;
  display: flex;
}

/* Layout: top strip + main area */
.command-center-backdrop {
  flex-direction: column;
}

/* Main area — window tiles */
.command-center-main {
  flex: 1;
  position: relative;
}

/* Top strip — desktop tiles */
.command-center-sidebar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 14px 24px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep scrolling */
.command-center-sidebar::-webkit-scrollbar {
  height: 4px;
}

.command-center-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.command-center-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.command-center-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.command-center-sidebar-title {
  display: none;
}

.command-center-desktop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.2s ease;
  min-width: 200px;
  min-height: 120px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Blurred wallpaper background per tile */
.command-center-desktop-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tile-bg);
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(1.1);
  z-index: 0;
  border-radius: inherit;
}

.command-center-desktop-item > * {
  position: relative;
  z-index: 1;
}

.command-center-desktop-item:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.command-center-desktop-item:hover::before {
  filter: brightness(0.65) saturate(1.2);
}

.command-center-desktop-item.active {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.25);
}

.command-center-desktop-item.active::before {
  filter: brightness(0.7) saturate(1.2);
}

.command-center-desktop-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.command-center-desktop-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.command-center-desktop-item.active .command-center-desktop-name {
  color: #fff;
  font-weight: 400;
}

.command-center-desktop-name svg {
  opacity: 0.5;
}

.command-center-desktop-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
}

/* Close button states */
.cc-action-btn.close.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cc-action-btn.close.disabled:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.3);
}

.cc-action-btn.close:not(.disabled):hover {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.95);
}

/* Toast for "Unpin desktop first" */
.cc-pinned-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  z-index: 9999999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cc-pinned-toast.show {
  opacity: 1;
}

/* Actions row — always at bottom of tile, visible on hover */
.command-center-desktop-actions {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.command-center-desktop-item:hover .command-center-desktop-actions {
  opacity: 1;
}

.cc-action-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.cc-action-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.95);
}

.cc-action-btn.pinned {
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.12);
}

.cc-action-btn.pinned:hover {
  color: rgba(var(--accent-rgb), 1);
  background: rgba(var(--accent-rgb), 0.22);
}

.cc-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.18);
  color: rgba(239, 68, 68, 0.95);
}


/* Drag reorder */
.command-center-desktop-item.dragging {
  opacity: 0.3;
}

.command-center-desktop-item.drop-above {
  box-shadow: -2px 0 0 0 rgba(var(--accent-rgb), 0.6);
}

.command-center-desktop-item.drop-below {
  box-shadow: 2px 0 0 0 rgba(var(--accent-rgb), 0.6);
}

/* Rename input — inline, matches name typography */
.command-center-space-rename {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  font-family: inherit;
  outline: none;
  padding: 0 0 2px;
  width: 100%;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.command-center-desktop-apps {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.command-center-desktop-app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0;
}

.command-center-desktop-app svg {
  flex-shrink: 0;
}

.command-center-desktop-app.more {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  background: none;
  width: auto;
  padding: 0 2px;
}

.command-center-desktop-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 200px;
  min-height: 100px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: none;
  color: rgba(255, 255, 255, 0.25);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.command-center-desktop-add:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* Space label (shown above window tiles) */
.command-center-space-label {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  z-index: 999995;
  pointer-events: none;
}

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

/* Spaces strip — macOS Sequoia style: text tabs, pill on active */
.command-center-spaces {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 999995;
}

.command-center-space-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  position: relative;
}

.command-center-space-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}

.command-center-space-tab.active {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.command-center-space-name {
  cursor: pointer;
}

.command-center-space-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.1s ease, background 0.1s ease, color 0.1s ease;
}

.command-center-space-tab:hover .command-center-space-delete {
  opacity: 1;
}

.command-center-space-delete:hover {
  background: rgba(255, 60, 60, 0.8);
  color: #fff;
}

.command-center-space-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: color 0.1s ease, background 0.1s ease, border-color 0.1s ease;
}

.command-center-space-add:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Labels below each window */
.command-center-window-label {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 999991;
  animation: ccLabelIn 0.1s ease-out 0.05s backwards;
}

@keyframes ccLabelIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.command-center-window-label svg {
  opacity: 0.5;
  flex-shrink: 0;
}


/* Other-space window cards — shown when previewing a different desktop */
.command-center-other-space {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 600px;
}

.command-center-other-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
  min-width: 100px;
}

.command-center-other-card:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

/* Empty state — no windows open */
.command-center-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.command-center-empty-text {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}

.command-center-empty-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
}

.command-center-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  white-space: nowrap;
  pointer-events: none;
}

/* Override window overflow during expose so badge + label can escape */
.window.expose {
  overflow: visible !important;
}

/* Block all interaction with window content during expose */
.window.expose .window-body {
  pointer-events: none !important;
}

.window.expose .window-titlebar {
  pointer-events: none !important;
}

/* Close button — inline in the label pill, appears on hover */
.window-expose-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease, background 0.1s ease, color 0.1s ease;
}

.window.expose:hover .window-expose-close {
  opacity: 1;
}

.window-expose-close:hover {
  background: rgba(255, 60, 60, 0.85);
  border-color: rgba(255, 80, 80, 0.5);
  color: #fff;
}

/* Keyboard shortcut number inline with label */
.window-expose-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Anchor: zero-size point at center of window */
.window-expose-label-anchor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 10;
  pointer-events: none;
}

/* Label at center of window preview */
.window-expose-label {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center center;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  translate: -50% -50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.1s ease, background 0.1s ease;
}

/* Scale up label on window hover */
.window-expose-label-anchor {
  transition: transform 0.1s ease;
}

.window.expose:hover .window-expose-label-anchor {
  transform: scale(1.3);
}

.window.expose:hover .window-expose-label {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.3);
}

.window-expose-label svg {
  opacity: 0.5;
  flex-shrink: 0;
}

/* Window hover effect during expose */
.window.expose:hover {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.5), 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  z-index: 999999 !important;
}
.lab-factory {
  display: flex;
  height: 100%;
  font-family: system-ui;
  color: rgba(255, 255, 255, 0.9);
}

/* ─── Sidebar ─── */
.lab-sidebar {
  width: 180px;
  min-width: 180px;
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.lab-sidebar-title {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lab-module-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-align: left;
  border-left: 2px solid transparent;
}
.lab-module-btn:hover { background: rgba(255, 255, 255, 0.04); }
.lab-module-btn.active {
  background: rgba(56, 189, 248, 0.08);
  border-left-color: rgba(56, 189, 248, 0.5);
  color: rgba(255, 255, 255, 0.95);
}
.lab-module-name { font-size: 13px; font-weight: 500; }
.lab-module-cat { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 2px; }

/* ─── Preview ─── */
.lab-preview {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.15);
}

.lab-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}

/* ─── Resize Handle ─── */
.lab-resize-handle {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
}
.lab-resize-handle:hover,
.lab-resize-handle:active {
  background: rgba(56, 189, 248, 0.3);
}

/* ─── Right Panel (Controls) ─── */
.lab-controls {
  min-width: 180px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}

/* ─── Sub Panels (collapsible sections) ─── */
.lab-panel {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lab-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lab-panel-header:hover { color: rgba(255, 255, 255, 0.7); }
.lab-panel-header .lab-panel-arrow {
  font-size: 10px;
  transition: transform 0.15s;
}
.lab-panel.collapsed .lab-panel-arrow { transform: rotate(-90deg); }
.lab-panel-body {
  padding: 6px 12px 12px;
}
.lab-panel.collapsed .lab-panel-body { display: none; }

/* ─── Parameters ─── */
.lab-params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 16px;
}
.lab-param {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lab-param.slider {
  flex-direction: column;
  align-items: stretch;
}
.lab-param label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.lab-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lab-slider-row input[type="range"] {
  flex: 1;
  height: 4px;
  accent-color: rgba(56, 189, 248, 0.7);
}
.lab-param-value {
  font-size: 11px;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.8);
  min-width: 28px;
  text-align: right;
}
.lab-param input[type="checkbox"] {
  accent-color: rgba(56, 189, 248, 0.7);
  width: 16px;
  height: 16px;
}
.lab-param select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  padding: 3px 6px;
  font-size: 12px;
}

/* ─── Scenarios ─── */
.lab-scenario-btn {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-align: left;
  margin-bottom: 6px;
}
.lab-scenario-btn:hover { background: rgba(255, 255, 255, 0.06); }
.lab-scenario-btn.active { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.06); }
.lab-scenario-name { font-size: 12px; font-weight: 500; }
.lab-scenario-desc { font-size: 10px; color: rgba(255, 255, 255, 0.35); margin-top: 2px; }

/* ─── Tests ─── */
.lab-run-tests {
  padding: 5px 12px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 5px;
  color: rgba(56, 189, 248, 0.9);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
}
.lab-run-tests:hover { background: rgba(56, 189, 248, 0.25); }

.lab-test-result {
  padding: 4px 0;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lab-test-result.pass { color: rgba(74, 222, 128, 0.9); }
.lab-test-result.fail { color: rgba(248, 113, 113, 0.9); }
.lab-test-result.pending { color: rgba(255, 255, 255, 0.35); }
.lab-test-error { font-size: 10px; color: rgba(248, 113, 113, 0.6); padding-left: 20px; }
.lab-empty-tab { color: rgba(255, 255, 255, 0.25); font-size: 12px; padding: 10px 0; }

/* ─── Specs ─── */
.lab-specs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lab-spec-section {
  margin-bottom: 8px;
}
.lab-spec-section-title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 0 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 4px;
}
.lab-spec-item {
  display: flex;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  padding: 1px 0 1px 6px;
}
.lab-spec-bullet {
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* ─── Docs ─── */
.lab-docs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lab-doc-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}
.lab-doc-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.lab-doc-icon {
  flex-shrink: 0;
  font-size: 10px;
  opacity: 0.5;
}
.lab-doc-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lab-docs-section {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 6px 2px;
  margin-top: 4px;
}
.lab-docs-section:first-child {
  margin-top: 0;
  padding-top: 0;
}

/* Portal target for built-in controls */
.lab-portal-target { width: 100%; }
.lab-portal-target .lp-lab-config-panel {
  position: static;
  width: 100%;
  height: auto;
  overflow: visible;
  border: none;
  background: transparent;
}
/* Launchpad Overlay - App launcher */
.launchpad-overlay {
  position: fixed;
  inset: 0;
  background: var(--os-overlay-bg);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 48px;
  z-index: 9999999;
  animation: launchpadFadeIn 0.2s ease-out;
}

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

.launchpad-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1050px;
  padding: 0 32px;
  animation: launchpadSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes launchpadSlideIn {
  from { opacity: 0; transform: scale(0.96) translateY(-16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Header with search + close ── */
.launchpad-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.launchpad-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--os-icon-bg);
  border: 1px solid var(--os-divider);
  border-radius: 12px;
  color: var(--os-text-muted);
  transition: all 0.2s ease;
  box-shadow: var(--os-glass-shadow);
}

.launchpad-search:focus-within {
  background: var(--os-icon-bg-hover);
  border-color: var(--os-accent-glow);
  box-shadow: var(--os-glass-shadow), 0 0 0 3px var(--os-accent-glow);
}

.launchpad-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--os-text-primary);
  font-weight: 400;
}

.launchpad-search input::placeholder { color: var(--os-text-muted); }

.launchpad-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: var(--os-icon-bg);
  border-radius: 50%;
  cursor: pointer;
  color: var(--os-text-secondary);
  transition: all 0.15s ease;
}

.launchpad-search-clear:hover {
  background: var(--os-icon-bg-hover);
  color: var(--os-text-primary);
}

.launchpad-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--os-divider);
  background: var(--os-icon-bg);
  color: var(--os-text-muted);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.launchpad-close-btn:hover {
  background: var(--os-icon-bg-hover);
  color: var(--os-text-primary);
}

/* ── Two-panel body ── */
.launchpad-body {
  display: flex;
  gap: 16px;
  max-height: calc(100vh - 180px);
  min-height: 0;
}

/* ── Left: main grid ── */
.launchpad-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--os-divider) transparent;
}

.launchpad-main::-webkit-scrollbar { width: 5px; }
.launchpad-main::-webkit-scrollbar-track { background: transparent; }
.launchpad-main::-webkit-scrollbar-thumb { background: var(--os-divider); border-radius: 3px; }

/* ── Section ── */
.launchpad-section + .launchpad-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--os-divider);
}

.launchpad-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--os-text-muted);
}

.launchpad-section-header svg { opacity: 0.5; }

.launchpad-section-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--os-text-hint);
}

/* ── Grid ── */
.launchpad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px;
  width: 100%;
}

/* ── App tile ── */
.launchpad-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  transition: background 0.12s ease;
}

.launchpad-app:hover {
  background: var(--os-hover-bg);
}

.launchpad-app.selected {
  background: var(--os-active-bg);
}

/* ── App icon ── */
.launchpad-app-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--os-icon-bg);
  border: 1px solid var(--os-divider);
  border-radius: 16px;
  color: var(--os-text-primary);
  transition: all 0.15s ease;
}

.launchpad-app-icon svg {
  width: 26px;
  height: 26px;
}

.launchpad-app.selected .launchpad-app-icon {
  border-color: var(--os-accent-glow);
  box-shadow: 0 4px 16px var(--os-accent-glow);
  background: var(--os-active-bg);
}

.launchpad-app:active .launchpad-app-icon {
  transform: scale(0.93);
  transition-duration: 0.08s;
}

/* ── App name ── */
.launchpad-app-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--os-text-secondary);
  text-align: center;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.launchpad-app.selected .launchpad-app-name,
.launchpad-app:hover .launchpad-app-name {
  color: var(--os-text-primary);
}

/* ── Running indicator ── */
.launchpad-app.running .launchpad-app-icon {
  border-color: rgba(74, 222, 128, 0.5);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.12);
}

/* ── Right sidebar ── */
.launchpad-sidebar {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: none;
}

.launchpad-sidebar::-webkit-scrollbar { display: none; }

.launchpad-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--os-icon-bg);
  border: 1px solid var(--os-divider);
  border-radius: 12px;
  padding: 8px 6px;
}

.launchpad-sidebar-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--os-text-muted);
}

.launchpad-sidebar-header svg { opacity: 0.5; }

.launchpad-sidebar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.launchpad-sidebar-dot.open {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}

.launchpad-sidebar-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--os-text-hint);
  margin-left: auto;
}

.launchpad-sidebar-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.launchpad-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
  text-align: left;
}

.launchpad-sidebar-item:hover {
  background: var(--os-hover-bg);
}

.launchpad-sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--os-icon-bg-hover);
  border: 1px solid var(--os-divider);
  border-radius: 8px;
  color: var(--os-text-primary);
  flex-shrink: 0;
}

.launchpad-sidebar-item.running .launchpad-sidebar-icon {
  border-color: rgba(74, 222, 128, 0.4);
}

.launchpad-sidebar-name {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--os-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.launchpad-sidebar-item:hover .launchpad-sidebar-name {
  color: var(--os-text-primary);
}

.launchpad-sidebar-status {
  font-size: 10px;
  font-weight: 500;
  color: rgba(74, 222, 128, 0.7);
  flex-shrink: 0;
}

/* ── Detail panel (bottom of sidebar) ── */
.launchpad-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--os-icon-bg);
  border: 1px solid var(--os-divider);
  border-radius: 12px;
  margin-top: auto;
}

.launchpad-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--os-icon-bg-hover);
  border-radius: 10px;
  color: var(--os-text-primary);
}

.launchpad-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.launchpad-detail-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--os-text-primary);
}

.launchpad-detail-desc {
  font-size: 11px;
  color: var(--os-text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Empty state ── */
.launchpad-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px;
  color: var(--os-text-muted);
}

.launchpad-empty svg { opacity: 0.3; }
.launchpad-empty p { font-size: 14px; }

/* ── Hint bar ── */
.launchpad-hint {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 8px 20px;
  color: var(--os-text-hint);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── Badges ── */
.launchpad-app-badges {
  position: absolute;
  top: -3px;
  right: -3px;
  display: flex;
  gap: 2px;
}

.launchpad-app-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  color: white;
  border: 2px solid var(--os-glass-bg-solid);
}

.launchpad-app-badge.dock { background: var(--os-accent); }
.launchpad-app-badge.desktop { background: #22c55e; }

/* ── Context Menu ── */
.launchpad-context-menu {
  position: fixed;
  min-width: 180px;
  padding: 6px;
  background: var(--os-context-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 12px;
  border: 1px solid var(--os-glass-border);
  box-shadow: var(--os-glass-shadow);
  z-index: 10000000;
  animation: launchpadContextMenuIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes launchpadContextMenuIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.launchpad-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--os-text-primary);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 7px;
  transition: background 0.1s ease;
}

.launchpad-context-item:hover {
  background: var(--os-active-bg);
}

.launchpad-context-item svg { opacity: 0.6; flex-shrink: 0; }
.launchpad-context-item:hover svg { opacity: 1; }

.launchpad-context-divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--os-divider);
}

/* ── Light theme ── */
body.light .launchpad-app-icon {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(30, 30, 40, 0.85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.light .launchpad-app:hover .launchpad-app-icon,
body.light .launchpad-app.selected .launchpad-app-icon {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(var(--accent-rgb), 0.3);
}

body.light .launchpad-app-name {
  color: rgba(30, 30, 40, 0.7);
}

body.light .launchpad-app-badge {
  border-color: rgba(255, 255, 255, 0.9);
}

body.light .launchpad-sidebar-icon {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(30, 30, 40, 0.85);
}

body.light .launchpad-sidebar-name {
  color: rgba(30, 30, 40, 0.7);
}

body.light .launchpad-sidebar-item:hover .launchpad-sidebar-name {
  color: rgba(30, 30, 40, 0.95);
}
/* Settings Window - Content-specific styles (uses shared Window component)
   Uses centralized OS theme variables from themes.css */

/* Body layout */
.settings-window-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: transparent;
  container-type: inline-size;
}

/* Sidebar */
.settings-sidebar {
  width: 220px;
  min-width: 220px;
  padding: 12px;
  background: var(--os-sidebar-bg);
  border-right: 1px solid var(--os-sidebar-border);
  overflow-y: auto;
}

.settings-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--os-text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 2px;
}

.settings-sidebar-item:hover {
  background: var(--os-sidebar-item-hover);
  color: var(--os-text-primary);
}

.settings-sidebar-item.active {
  background: var(--os-sidebar-item-active);
  color: var(--os-accent-text);
}

.settings-sidebar-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.settings-sidebar-item.active svg {
  opacity: 1;
}

@container (max-width: 720px) {
  .settings-sidebar {
    width: 56px;
    min-width: 56px;
    padding: 10px 6px;
  }

  .settings-sidebar-item {
    justify-content: center;
    gap: 0;
    padding: 10px 8px;
  }

  .settings-sidebar-item span {
    display: none;
  }
}

/* Content */
.settings-content {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
}

.settings-content-section h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--os-text-primary);
}

.settings-description {
  margin: 0 0 24px 0;
  font-size: 13px;
  color: var(--os-text-muted);
}

.settings-hint {
  font-size: 12px;
  color: var(--os-text-hint);
  margin-top: 8px;
}

/* Settings groups */
.settings-group {
  margin-bottom: 20px;
}

.settings-group.half {
  flex: 1;
}

.settings-row {
  display: flex;
  gap: 16px;
}

.settings-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.settings-label-hint {
  font-weight: 400;
  text-transform: none;
  opacity: 0.7;
  margin-left: 6px;
  font-size: 11px;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--os-btn-bg);
  border: 1px solid var(--os-btn-border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--os-text-primary);
  cursor: pointer;
}

.settings-toggle-row:hover {
  background: var(--os-btn-hover);
}

.settings-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-toggle-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--os-text-primary);
}

.settings-toggle-description {
  font-size: 12px;
  color: var(--os-text-muted);
}

/* Toggle switch (macOS-style) */
.settings-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--os-divider);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.settings-toggle:hover {
  background: var(--os-text-hint);
}

.settings-toggle.active {
  background: var(--os-accent);
}

.settings-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.settings-toggle.active .settings-toggle-knob {
  transform: translateX(20px);
}

/* Inputs */
.settings-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--os-input-bg);
  border: 1px solid var(--os-input-border);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 14px;
  transition: all 0.15s ease;
}

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

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

.settings-input-row {
  display: flex;
  gap: 8px;
}

.settings-input-row .settings-input {
  flex: 1;
}

.settings-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--os-input-bg);
  border: 1px solid var(--os-input-border);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 14px;
  cursor: pointer;
}

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

.settings-slider {
  width: 100%;
  height: 6px;
  background: var(--os-divider);
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--os-accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.settings-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--os-accent);
  cursor: pointer;
}

/* Buttons */
.settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--os-btn-bg);
  border: 1px solid var(--os-btn-border);
  border-radius: 8px;
  color: var(--os-text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-btn:hover {
  background: var(--os-btn-hover);
}

.settings-btn.primary {
  background: var(--os-accent-bg);
  border-color: var(--os-accent-glow);
  color: var(--os-accent-text);
}

.settings-btn.primary:hover {
  background: var(--os-active-bg);
}

.settings-btn.danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

.settings-btn.danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

.settings-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--os-icon-bg);
  border: 1px solid var(--os-btn-border);
  border-radius: 6px;
  color: var(--os-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.settings-btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── General Settings Cards ── */
.general-settings {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.general-card {
  background: var(--os-btn-bg);
  border: 1px solid var(--os-btn-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.general-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--os-btn-border);
}

.general-card-header svg {
  opacity: 0.6;
}

.general-card-hint {
  margin-left: auto;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  opacity: 0.6;
}

.general-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 16px;
}

.general-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--os-text-primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.general-row-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--os-text-hint);
}

.general-row-select {
  width: auto;
  min-width: 170px;
  max-width: 230px;
  padding: 8px 12px;
  font-size: 12px;
}

/* Toggle rows inside cards */
.general-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.general-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.general-toggle-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--os-text-primary);
}

.general-toggle-desc {
  font-size: 11.5px;
  color: var(--os-text-hint);
}

.general-toggle-divider {
  height: 1px;
  background: var(--os-btn-border);
  margin: 0 16px;
}

/* Theme chips (compact) */
.theme-options.compact {
  display: flex;
  gap: 6px;
}

.theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: transparent;
  border: 1.5px solid var(--os-btn-border);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-chip:hover {
  border-color: var(--os-text-muted);
  color: var(--os-text-primary);
}

.theme-chip.active {
  background: var(--os-accent-bg);
  border-color: var(--os-accent);
  color: var(--os-accent-text);
}

/* Accent color swatches */
.accent-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.accent-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch-color);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(0, 0, 0, 0.7);
}

.accent-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px var(--swatch-color);
}

.accent-swatch.active {
  border-color: var(--os-text-primary);
  box-shadow: 0 0 0 2px var(--os-glass-bg), 0 0 0 4px var(--swatch-color);
}

.accent-swatch svg {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}

/* Timeout chips (compact) */
.timeout-options.compact {
  display: flex;
  gap: 4px;
}

.timeout-chip {
  padding: 5px 12px;
  background: transparent;
  border: 1.5px solid var(--os-btn-border);
  border-radius: 16px;
  color: var(--os-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.timeout-chip:hover {
  border-color: var(--os-text-muted);
  color: var(--os-text-primary);
}

.timeout-chip.active {
  background: var(--os-accent-bg);
  border-color: var(--os-accent);
  color: var(--os-accent-text);
}

/* Compact button variant */
.settings-btn.compact {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
  gap: 5px;
}

/* Compact input variant */
.settings-input.compact {
  padding: 7px 12px;
  font-size: 13px;
}

/* Wallpaper inline (in card row) */
.wallpaper-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wallpaper-mini-thumb {
  width: 56px;
  height: 34px;
  border-radius: 5px;
  overflow: hidden;
  border: 1.5px solid var(--os-btn-border);
  flex-shrink: 0;
}

.wallpaper-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Location row */
.general-location-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}

.general-location-row .settings-input {
  flex: 1;
}

.general-location-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 12px;
  font-size: 12px;
  font-weight: 500;
}

.general-location-status.success {
  color: #4ade80;
}

.general-location-status.error {
  color: #f87171;
}

/* Wallpaper picker dialog */
.wallpaper-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.wallpaper-dialog {
  width: 820px;
  max-width: 90vw;
  height: 560px;
  max-height: 80vh;
  background: var(--os-glass-bg-solid);
  border: 1px solid var(--os-glass-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.wallpaper-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--os-divider);
}

.wallpaper-dialog-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--os-text-primary);
}

.wallpaper-dialog-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Category sidebar in dialog */
.wallpaper-dialog-categories {
  width: 170px;
  min-width: 170px;
  padding: 8px;
  border-right: 1px solid var(--os-divider);
  overflow-y: auto;
}

.wallpaper-category-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--os-text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  margin-bottom: 1px;
}

.wallpaper-category-btn:hover {
  background: var(--os-sidebar-item-hover);
  color: var(--os-text-primary);
}

.wallpaper-category-btn.active {
  background: var(--os-sidebar-item-active);
  color: var(--os-accent-text);
}

.wallpaper-category-count {
  font-size: 11px;
  color: var(--os-text-hint);
  font-weight: 400;
}

.wallpaper-category-btn.active .wallpaper-category-count {
  color: var(--os-accent-text);
  opacity: 0.7;
}

/* Grid area in dialog */
.wallpaper-dialog-grid-area {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

/* Wallpaper grid */
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.wallpaper-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--os-icon-bg);
  padding: 0;
}

.wallpaper-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wallpaper-thumb:hover {
  border-color: var(--os-text-muted);
  transform: scale(1.02);
}

.wallpaper-thumb.selected {
  border-color: var(--os-accent);
}

.wallpaper-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  color: white;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.wallpaper-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: var(--os-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* AI Model selection - Grouped chip layout */
.ai-model-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-provider-group {
  background: var(--os-btn-bg);
  border: 1px solid var(--os-btn-border);
  border-radius: 12px;
  overflow: hidden;
}

.ai-provider-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--provider-color) 10%, transparent);
  border-bottom: 1px solid var(--os-btn-border);
}

.ai-provider-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--provider-color);
}

.ai-provider-models {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}

.ai-model-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--os-icon-bg);
  border: 1.5px solid transparent;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--os-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-model-chip:hover {
  background: var(--os-hover-bg);
  border-color: var(--os-text-muted);
  color: var(--os-text-primary);
}

.ai-model-chip.active {
  background: color-mix(in srgb, var(--provider-color) 15%, transparent);
  border-color: var(--provider-color);
  color: var(--provider-color);
}

.ai-model-chip.active .ai-model-name {
  font-weight: 600;
}

.ai-model-chip svg {
  flex-shrink: 0;
}

.settings-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--os-text-hint);
  padding: 12px;
  background: var(--os-icon-bg);
  border-radius: 8px;
}

/* About */
.about-info {
  background: var(--os-btn-bg);
  border: 1px solid var(--os-btn-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

.about-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.about-label {
  color: var(--os-text-muted);
  font-size: 13px;
}

.about-value {
  color: var(--os-text-primary);
  font-size: 13px;
  font-weight: 500;
}

/* Scrollbar */
.settings-sidebar::-webkit-scrollbar,
.settings-content::-webkit-scrollbar {
  width: 8px;
}

.settings-sidebar::-webkit-scrollbar-track,
.settings-content::-webkit-scrollbar-track {
  background: transparent;
}

.settings-sidebar::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb {
  background: var(--os-scrollbar-thumb);
  border-radius: 4px;
}

.settings-sidebar::-webkit-scrollbar-thumb:hover,
.settings-content::-webkit-scrollbar-thumb:hover {
  background: var(--os-scrollbar-thumb-hover);
}

/* Status messages */
.settings-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.settings-status.success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.settings-status.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* NUC System */
.nuc-system-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nuc-system-settings h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--os-text-primary);
}

.nuc-system-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.nuc-system-uptime {
  color: var(--os-text-muted);
  font-size: 0.8rem;
}

.nuc-system-loading,
.nuc-system-error {
  padding: 2rem;
  text-align: center;
  color: var(--os-text-muted);
  font-size: 0.9rem;
}

.nuc-system-error {
  color: #ef4444;
}

.nuc-system-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.nuc-system-card {
  background: var(--os-btn-bg);
  border: 1px solid var(--os-btn-border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}

.nuc-system-card h3 {
  margin: 0 0 0.6rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--os-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nuc-system-bar-container {
  height: 6px;
  background: var(--os-icon-bg);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.nuc-system-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.nuc-system-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--os-text-muted);
}

.nuc-system-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--os-divider);
}

.nuc-system-stat-row:last-child {
  border-bottom: none;
}

.nuc-system-stat-label {
  font-size: 0.75rem;
  color: var(--os-text-secondary);
}

.nuc-system-stat-value {
  font-size: 0.75rem;
  color: var(--os-text-primary);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.nuc-system-disk {
  margin-bottom: 0.6rem;
}

.nuc-system-disk:last-child {
  margin-bottom: 0;
}

.nuc-system-disk-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}

.nuc-system-disk-mount {
  font-size: 0.75rem;
  color: var(--os-text-secondary);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.nuc-system-disk-size {
  font-size: 0.7rem;
  color: var(--os-text-muted);
}

.nuc-system-service-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nuc-system-service-badge.active {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.nuc-system-service-badge.inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* System Settings - Tabbed panel */
.system-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border: 1px solid var(--os-btn-border);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
}
.system-tabs::-webkit-scrollbar {
  display: none;
}

.system-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--os-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.system-tab:not(:last-child) {
  border-right: 1px solid var(--os-btn-border);
}

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

.system-tab.active {
  background: var(--os-accent-bg);
  color: var(--os-accent-text);
}

.system-tab-content {
  /* Let inner components handle their own layout */
}

/* Hide the inner h2/description from sub-panels when inside System tabs */
.system-settings .system-tab-content .settings-content-section > h2,
.system-settings .system-tab-content .settings-content-section > .settings-description {
  display: none;
}

/* ── Light Theme ── */
body.light .wallpaper-dialog-overlay {
  background: rgba(0, 0, 0, 0.3);
}

body.light .wallpaper-dialog {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
/* Screensaver - Full-screen wallpaper rotation with clock */

.screensaver {
  position: fixed;
  inset: 0;
  z-index: 999999;
  cursor: pointer;
  overflow: hidden;
}

/* Wallpaper layers */
.screensaver-wallpaper {
  position: absolute;
  inset: 0;
  /* Use the CSS variable set by Desktop.jsx - matches current desktop wallpaper */
  background-image: var(--app-bg-image);
  background-size: cover;
  background-position: center;
  transition: opacity 2s ease-in-out;
}

.screensaver-wallpaper.current {
  z-index: 1;
  opacity: 1;
}

.screensaver-wallpaper.current.fading {
  opacity: 0;
}

.screensaver-wallpaper.next {
  z-index: 0;
  opacity: 0;
}

.screensaver-wallpaper.next.visible {
  opacity: 1;
}

/* Subtle vignette for better text readability */
.screensaver-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}

/* Clock container */
.screensaver-clock {
  position: absolute;
  bottom: 80px;
  left: 60px;
  z-index: 3;
  color: white;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  animation: screensaver-fade-in 1s ease-out;
}

@keyframes screensaver-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Time display */
.screensaver-time {
  font-size: 96px;
  font-weight: 200;
  letter-spacing: -2px;
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}

.screensaver-ampm {
  font-size: 32px;
  font-weight: 300;
  margin-left: 12px;
  opacity: 0.8;
}

/* Date display */
.screensaver-date {
  font-size: 24px;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 8px;
}

/* Dismiss hint */
.screensaver-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  animation: screensaver-hint-pulse 3s ease-in-out infinite;
}

@keyframes screensaver-hint-pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
}

/* Ken Burns effect - subtle slow zoom/pan */
.screensaver-wallpaper {
  animation: ken-burns 30s ease-in-out infinite alternate;
}

@keyframes ken-burns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.1) translate(-2%, -1%);
  }
}

/* Different timing for current vs next to avoid sync */
.screensaver-wallpaper.next {
  animation-duration: 35s;
  animation-direction: alternate-reverse;
}
/* macOS Cmd+Tab style app switcher */
.app-tab-switcher-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

/* Transparent overlay when mission control is also open */
.app-tab-switcher-overlay.over-expose {
  background: none;
  pointer-events: none;
}

.app-tab-switcher-overlay.over-expose .app-tab-switcher-bar {
  pointer-events: auto;
}

.app-tab-switcher-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.app-tab-switcher-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.08s ease, border-color 0.08s ease;
  min-width: 72px;
}

.app-tab-switcher-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.app-tab-switcher-item.selected {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.app-tab-switcher-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.app-tab-switcher-kbd {
  position: absolute;
  bottom: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.app-tab-switcher-item.selected .app-tab-switcher-icon {
  background: rgba(255, 255, 255, 0.12);
}

.app-tab-switcher-name {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* "Open App" button uses same styling as .app-tab-switcher-item via shared class */
.app-tab-switcher-add .app-tab-switcher-icon {
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  background: none;
}

.app-tab-switcher-add.selected .app-tab-switcher-icon {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}
/* Live Preview Lab */

.lp-lab {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.86);
}

.lp-lab:fullscreen {
  width: 100vw;
  height: 100vh;
}

.lp-lab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 10px;
  flex-shrink: 0;
}

.lp-lab-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lp-lab-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-lab-save-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.lp-lab-save-status-saving {
  color: rgba(251, 191, 36, 0.9);
}

.lp-lab-save-status-saved {
  color: rgba(52, 211, 153, 0.95);
}

.lp-lab-save-status-error {
  color: rgba(252, 165, 165, 0.95);
}

.lp-lab-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-lab-modes {
  display: flex;
  gap: 4px;
}

.lp-lab-modes button {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lp-lab-modes button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

.lp-lab-modes button.active {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
  color: rgba(167, 139, 250, 0.96);
}

.lp-lab-zen-toggle {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lp-lab-zen-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

.lp-lab-zen-toggle.active {
  background: rgba(125, 211, 252, 0.18);
  border-color: rgba(125, 211, 252, 0.42);
  color: rgba(125, 211, 252, 0.95);
}

.lp-lab-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
}

.lp-lab-workspace-right-config .lp-lab-editor {
  min-width: 0;
}

.lp-lab-config-panel {
  width: 340px;
  min-width: 290px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  overflow-y: auto;
  padding: 12px;
}

.lp-lab-config-panel .lp-lab-config-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.lp-lab-config-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-lab-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.lp-lab-config-header h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.lp-lab-config-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lp-lab-config-preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}

.lp-lab-config-preset select {
  height: 26px;
  min-width: 148px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.lp-lab-config-preset select:focus {
  outline: none;
  border-color: rgba(125, 211, 252, 0.55);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.28);
}

.lp-lab-config-header button {
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
  cursor: pointer;
}

.lp-lab-config-header button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.lp-lab-config-grid {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.lp-lab-config-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.52);
}

.lp-lab-config-note-saved {
  color: rgba(52, 211, 153, 0.95);
}

.lp-lab-config-note-saving {
  color: rgba(251, 191, 36, 0.9);
}

.lp-lab-config-note-error,
.lp-lab-config-note-empty {
  color: rgba(252, 165, 165, 0.95);
}

.lp-lab-config-note-cleared {
  color: rgba(125, 211, 252, 0.92);
}

.lp-lab-config-note code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
}

.lp-lab-config-inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-lab-config-inline-actions button {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  cursor: pointer;
}

.lp-lab-config-inline-actions button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.lp-lab-config-inline-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lp-lab-config-field {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.66);
}

.lp-lab-config-field input,
.lp-lab-config-field select {
  height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.lp-lab-config-field input:focus,
.lp-lab-config-field select:focus {
  outline: none;
  border-color: rgba(125, 211, 252, 0.55);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.28);
}

.lp-lab-config-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.lp-lab-config-check input[type='checkbox'] {
  width: 14px;
  height: 14px;
  margin: 0;
}

.lp-lab-config-check span {
  line-height: 1.3;
}

.lp-lab-editor {
  flex: 1;
  min-height: 0;
  display: flex;
}

.lp-lab-canonical-editor {
  width: 100%;
  height: 100%;
}

.lp-lab-editor .cm-editor {
  width: 100%;
  height: 100%;
}

/* Keep lab scrollbars subtle and consistent (avoid heavy native gray bars). */
.lp-lab-config-panel,
.lp-lab-editor .cm-scroller {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.lp-lab-config-panel::-webkit-scrollbar,
.lp-lab-editor .cm-scroller::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.lp-lab-config-panel::-webkit-scrollbar-track,
.lp-lab-editor .cm-scroller::-webkit-scrollbar-track {
  background: transparent;
}

.lp-lab-config-panel::-webkit-scrollbar-thumb,
.lp-lab-editor .cm-scroller::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.lp-lab-config-panel::-webkit-scrollbar-thumb:hover,
.lp-lab-editor .cm-scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* Writing experience modes */
.lp-lab.lp-lab-zen .lp-lab-config-panel {
  display: none;
}

.lp-lab.lp-lab-zen .lp-lab-toolbar {
  display: none;
}

.lp-lab.lp-lab-zen .lp-lab-editor .cm-content {
  max-width: 860px;
}

/* Light theme */
body.light .lp-lab {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.82);
}

body.light .lp-lab-config-panel,
body.light .lp-lab-editor .cm-scroller {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

body.light .lp-lab-config-panel::-webkit-scrollbar-thumb,
body.light .lp-lab-editor .cm-scroller::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

body.light .lp-lab-config-panel::-webkit-scrollbar-thumb:hover,
body.light .lp-lab-editor .cm-scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
}

body.light .lp-lab-toolbar {
  border-color: rgba(0, 0, 0, 0.1);
}

body.light .lp-lab-title {
  color: rgba(0, 0, 0, 0.48);
}

body.light .lp-lab-save-status {
  color: rgba(0, 0, 0, 0.48);
}

body.light .lp-lab-save-status-saved {
  color: rgba(5, 150, 105, 0.95);
}

body.light .lp-lab-save-status-saving {
  color: rgba(180, 83, 9, 0.92);
}

body.light .lp-lab-save-status-error {
  color: rgba(220, 38, 38, 0.92);
}

body.light .lp-lab-modes button {
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.58);
}

body.light .lp-lab-modes button:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.76);
}

body.light .lp-lab-modes button.active {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.28);
  color: rgba(79, 70, 229, 0.96);
}

body.light .lp-lab-zen-toggle {
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.58);
}

body.light .lp-lab-zen-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.76);
}

body.light .lp-lab-zen-toggle.active {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.35);
  color: rgba(2, 132, 199, 0.95);
}

body.light .lp-lab-config-panel {
  border-left-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

body.light .lp-lab-config-section {
  border-top-color: rgba(0, 0, 0, 0.1);
}

body.light .lp-lab-config-header button {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
}

body.light .lp-lab-config-preset {
  color: rgba(0, 0, 0, 0.6);
}

body.light .lp-lab-config-preset select {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.86);
}

body.light .lp-lab-config-preset select:focus {
  border-color: rgba(14, 165, 233, 0.52);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.22);
}

body.light .lp-lab-config-header button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.8);
}

body.light .lp-lab-config-field {
  color: rgba(0, 0, 0, 0.65);
}

body.light .lp-lab-config-note {
  color: rgba(0, 0, 0, 0.48);
}

body.light .lp-lab-config-note-saved {
  color: rgba(5, 150, 105, 0.95);
}

body.light .lp-lab-config-note-saving {
  color: rgba(180, 83, 9, 0.95);
}

body.light .lp-lab-config-note-error,
body.light .lp-lab-config-note-empty {
  color: rgba(220, 38, 38, 0.92);
}

body.light .lp-lab-config-note-cleared {
  color: rgba(2, 132, 199, 0.92);
}

body.light .lp-lab-config-inline-actions button {
  border-color: rgba(0, 0, 0, 0.16);
  color: rgba(0, 0, 0, 0.62);
}

body.light .lp-lab-config-inline-actions button:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.82);
}

body.light .lp-lab-config-field input,
body.light .lp-lab-config-field select {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.86);
}

body.light .lp-lab-config-field input:focus,
body.light .lp-lab-config-field select:focus {
  border-color: rgba(14, 165, 233, 0.52);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.22);
}

@media (max-width: 960px) {
  .lp-lab-workspace {
    flex-direction: column;
  }

  .lp-lab-config-panel {
    width: 100%;
    min-width: 0;
    max-height: 300px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  body.light .lp-lab-config-panel {
    border-top-color: rgba(0, 0, 0, 0.1);
  }
}

/* ── Caret test results ───────────────────────────────────────────────────── */

.lp-lab-caret-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  font-family: var(--font-mono, monospace);
}

.lp-lab-caret-summary {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.lp-lab-caret-summary.pass { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.lp-lab-caret-summary.fail { background: rgba(239, 68, 68, 0.12); color: #f87171; }

.lp-lab-caret-suite-header {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a78bfa;
  padding: 6px 4px 2px;
  margin-top: 4px;
  border-top: 1px solid rgba(167, 139, 250, 0.15);
}
.lp-lab-caret-suite-header:first-child { margin-top: 0; border-top: none; }
body.light .lp-lab-caret-suite-header { color: #7c3aed; border-top-color: rgba(124, 58, 237, 0.15); }

.lp-lab-caret-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 4px;
  align-items: start;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1.4;
}

.lp-lab-caret-row.fail { background: rgba(239, 68, 68, 0.07); }
.lp-lab-caret-row.skip { opacity: 0.5; }

.lp-lab-caret-icon { font-size: 0.65rem; margin-top: 1px; }
.lp-lab-caret-row.pass .lp-lab-caret-icon { color: #4ade80; }
.lp-lab-caret-row.fail .lp-lab-caret-icon { color: #f87171; }

.lp-lab-caret-label { color: rgba(255,255,255,0.8); }
body.light .lp-lab-caret-label { color: rgba(0,0,0,0.75); }

.lp-lab-caret-detail {
  grid-column: 2;
  color: rgba(255,255,255,0.45);
  font-size: 0.68rem;
  margin-top: -1px;
}
body.light .lp-lab-caret-detail { color: rgba(0,0,0,0.45); }