/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ============================================
     BRAND COLORS - Change these to rebrand
     ============================================ */

  /* Primary Brand Colors */
  --brand-primary: #5B8FA8;
  --brand-primary-dark: #4A7490;
  --brand-primary-light: #7AA8BE;

  /* Accent Colors */
  --brand-accent: #475569;
  --brand-accent-dark: #334155;

  /* AI/Special Features */
  --brand-ai-primary: var(--brand-primary);
  --brand-ai-secondary: var(--brand-primary-dark);

  /* Neutrals */
  --brand-text-primary: #2C3E50;
  --brand-text-secondary: #6B7876;
  --brand-text-tertiary: #8C9A97;
  --brand-border: #D1D9D7;
  --brand-border-light: #E8ECEB;
  --brand-background: #fafbfc;
  --brand-surface: #FFFFFF;

  /* Semantic Colors */
  --brand-success: #10B981;
  --brand-warning: #F59E0B;
  --brand-error: #EF4444;

  /* ============================================
     FUNCTIONAL MAPPINGS - Don't change these
     ============================================ */

  /* Button colors */
  --color-button-primary: var(--brand-primary);
  --color-button-primary-hover: var(--brand-primary-dark);

  /* Link colors */
  --color-link: var(--brand-primary);
  --color-link-hover: var(--brand-primary-dark);

  /* Text colors */
  --color-text-primary: var(--brand-text-primary);
  --color-text-secondary: var(--brand-text-secondary);
  --color-text-tertiary: var(--brand-text-tertiary);

  /* Background colors */
  --color-bg-page: var(--brand-background);
  --color-bg-card: var(--brand-surface);
  --color-bg-elevated: var(--brand-surface);

  /* Border colors */
  --color-border: var(--brand-border);
  --color-border-light: var(--brand-border-light);

  /* Filter chip colors */
  --color-filter-active-bg: var(--brand-primary);
  --color-filter-active-text: var(--brand-surface);
  --color-filter-inactive-bg: var(--brand-surface);
  --color-filter-inactive-text: var(--brand-text-primary);

  /* AI Summary colors */
  --color-ai-bg-start: var(--brand-ai-primary);
  --color-ai-bg-end: var(--brand-ai-secondary);
  --color-ai-text: var(--brand-surface);

  /* Score badge colors */
  --color-score-text: var(--brand-text-tertiary);
  --color-score-bg: transparent;

  /* Nav tab colors */
  --color-nav-active: var(--brand-primary);
  --color-nav-hover-bg: rgba(91, 143, 168, 0.05);

  /* Status colors */
  --color-success: var(--brand-success);
  --color-warning: var(--brand-warning);
  --color-danger: var(--brand-error);
  --color-info: var(--brand-primary);

  /* Highlight colors */
  --highlight-bg: rgba(91, 143, 168, 0.05);
  --highlight-border: rgba(91, 143, 168, 0.6);
  --highlight-border-throb-start: rgba(91, 143, 168, 0.4);
  --highlight-border-throb-end: rgba(91, 143, 168, 1);
  --highlight-shadow: rgba(91, 143, 168, 0.4);

  /* PDF-specific highlight colors */
  --pdf-text-highlight-bg: rgba(91, 143, 168, 0.15);
  --pdf-text-highlight-border: rgba(91, 143, 168, 0.8);
  --pdf-text-highlight-border-throb-start: rgba(91, 143, 168, 0.5);
  --pdf-text-highlight-border-throb-end: rgba(91, 143, 168, 1);
  --pdf-highlight-border-throb-start: rgba(91, 143, 168, 0.4);
  --pdf-highlight-border-throb-end: rgba(91, 143, 168, 1);
  --pdf-highlight-shadow-end: rgba(91, 143, 168, 0.6);

  /* Search results highlight (lighter than PDF) */
  --search-result-highlight-bg: rgba(91, 143, 168, 0.08);

  /* Legacy compatibility mappings */
  --primary-blue: var(--brand-primary);
  --primary-blue-dark: var(--brand-primary-dark);
  --primary-blue-light: var(--brand-primary-light);
  --accent-coral: var(--brand-accent);
  --accent-coral-dark: var(--brand-accent-dark);
  --dark-slate: var(--brand-text-primary);
  --off-white: var(--brand-background);
  --white: var(--brand-surface);
  --purple-500: var(--brand-primary);
  --purple-600: var(--brand-primary);
  --purple-700: var(--brand-primary-dark);
  --violet-100: rgba(91, 143, 168, 0.1);
  --violet-200: rgba(91, 143, 168, 0.2);
  --gray-50: var(--brand-background);
  --gray-100: var(--brand-border-light);
  --gray-200: var(--brand-border);
  --gray-300: #B5C0BE;
  --gray-400: var(--brand-text-tertiary);
  --gray-500: var(--brand-text-secondary);
  --gray-600: #4A5654;
  --gray-700: var(--brand-text-primary);
  --gray-900: #1A252F;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Border radius - Square design */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
}

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  line-height: 1.65;
}

/* Typography: Load Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap');

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* App container */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
}

/* Top Bar */
.top-bar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.top-bar-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.top-bar-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.top-bar-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.app-logo {
  height: 40px;
  width: auto;
  display: block;
}

.app-title {
  font-size: 1.5rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: var(--brand-primary-dark);
  margin: 0;
  line-height: 1;
  position: relative;
  top: -2px;
}

/* Dropdown Components */
.dropdown-container {
  position: relative;
}

.tooltip-text {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: var(--white);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  animation: tooltipFadeIn 0.2s ease-out;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
  }

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

.tooltip-text::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--gray-900);
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9375rem;
  color: var(--gray-700);
  transition: all 0.2s;
  white-space: nowrap;
}

.dropdown-trigger-domain {
  /* No specific width needed now */
}

.dropdown-trigger-help {
  border: none;
  background: transparent;
  padding: 0.5rem 0.5rem;
  box-shadow: none;
  width: auto;
  min-width: max-content;
}

.dropdown-trigger-help:hover {
  border-color: transparent;
  background: transparent;
}

.dropdown-trigger-help:focus {
  border-color: transparent;
  box-shadow: none;
}

.dropdown-trigger:hover {
  border-color: var(--brand-primary);
  background: var(--color-nav-hover-bg);
}

.dropdown-trigger:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(91, 143, 168, 0.1);
}

.dropdown-label {
  font-weight: 500;
  color: var(--gray-500);
  font-size: 0.875rem;
}

.dropdown-value {
  font-weight: 600;
  color: var(--brand-accent);
  white-space: nowrap;
}

.dataset-total {
  font-weight: 400;
}

.dropdown-arrow {
  font-size: 0.875rem;
  color: var(--gray-500);
  transition: transform 0.2s;
}

.dropdown-trigger:hover .dropdown-arrow {
  color: var(--brand-primary);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 100%;
  z-index: 100;
  overflow: hidden;
  animation: dropdownFadeIn 0.15s ease-out;
}

.dropdown-menu-domain {
  width: max-content;
  min-width: 100%;
}

.dropdown-menu-help {
  right: auto;
  left: 0;
  width: max-content;
  min-width: 140px;
}

.dropdown-menu-models {
  overflow: visible;
}

.dropdown-menu-list {
  min-width: 220px;
  display: flex;
  flex-direction: column;
}

.model-combo-panel {
  position: absolute;
  top: -1px;
  left: 100%;
  min-width: 360px;
  max-width: 420px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

.model-combo-panel-title {
  font-weight: 600;
  color: var(--brand-accent);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.model-combo-panel-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.model-combo-panel-label {
  color: var(--gray-500);
  font-weight: 500;
  white-space: nowrap;
}

.model-combo-panel-value {
  color: var(--gray-800);
  font-weight: 600;
  text-align: right;
  white-space: normal;
  min-width: 0;
  justify-self: end;
  word-break: break-word;
  overflow: visible;
  text-overflow: clip;
  display: block;
}

.model-combo-panel-badge {
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: var(--gray-150);
  color: var(--gray-600);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  justify-self: end;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9375rem;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
}

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

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

.dropdown-item:active {
  background: rgba(91, 143, 168, 0.15);
}

/* Navigation Tabs */
.nav-tabs {
  display: flex;
  gap: 0.5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
  background: transparent;
  border-bottom: none;
  align-items: center;
  justify-content: center;
}

.nav-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-500);
  padding: 0 1rem 0 0.5rem;
  font-family: 'Poppins', sans-serif;
}

.nav-separator {
  color: var(--gray-300);
  padding: 0 1rem;
  font-weight: 300;
}

.nav-tab {
  padding: 1.25rem 2rem;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  color: var(--gray-600);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.nav-tab-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-dropdown {
  display: flex;
  align-items: stretch;
}

.nav-dropdown-menu {
  right: auto;
  left: 0;
  min-width: 180px;
  width: max-content;
}

.nav-tab:hover {
  color: var(--color-nav-active);
  background: var(--color-nav-hover-bg);
}

.nav-tab-active {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
  font-weight: 700;
}

.nav-tab-active:hover {
  background: none;
}

/* Search Container */
.search-container {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--spacing-xl) 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Landing page: position search box roughly 3/4 up the available space */
.search-container.search-container-landing {
  border-bottom: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 25vh;
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Landing content wrapper: holds tagline, form, examples, and filter chips */
.search-landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1400px;
  width: 100%;
  padding: 0 var(--spacing-xl);
}

/* Tagline above the search box */
.search-tagline {
  color: var(--brand-primary);
  font-size: 1.375rem;
  margin: 0 0 2.5rem 0;
  text-align: center;
  font-weight: 500;
}

.search-container.search-container-landing .search-form {
  max-width: 1400px;
  width: 100%;
  gap: var(--spacing-md);
  align-items: flex-start;
}

/* Column wrapper: input + example chips aligned together */
.search-input-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Input wrapper for relative positioning of enter hint */
.search-input-wrapper {
  position: relative;
  display: flex;
}

.search-input-wrapper .search-input {
  width: 100%;
}

/* Filters button floating inside the search input */
.search-input-filters {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 1.3rem;
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.search-input-filters:hover {
  color: var(--brand-primary);
}

/* Pad input right so text doesn't overlap the filters button */
.search-input-wrapper .search-input {
  padding-right: 9rem;
}

/* Mobile: icon only, shorter padding */
@media (max-width: 768px) {
  .search-input-filters .search-input-filters-label {
    display: none;
  }
  .search-input-wrapper .search-input {
    padding-right: 3.5rem;
  }
}

.search-container.search-container-landing .search-input {
  font-size: 1.25rem;
  padding: 0 1.75rem;
  padding-right: 9rem;
  height: 64px;
  display: flex;
  align-items: center;
}

/* Mobile: icon-only filter button, shorter placeholder */
@media (max-width: 640px) {
  .search-input-filters .search-input-filters-label {
    display: none;
  }
  .search-input-wrapper .search-input,
  .search-container.search-container-landing .search-input {
    padding-right: 3.5rem;
    font-size: 1rem;
  }
}

/* Landing search button: solid style */
.search-container.search-container-landing .search-button {
  font-size: 1.25rem;
  padding: 0;
  height: 64px;
  min-width: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Example query chips — centered under the search input */
.search-examples {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.search-examples-label {
  color: var(--gray-400);
  font-size: 0.8125rem;
}

.search-example-chip {
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  color: var(--gray-500);
  font-size: 0.8125rem;
  padding: 0.375rem 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.search-example-chip:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}


/* Results page: normal top search box */
.search-container.search-container-results .search-input {
  font-size: 1.0625rem;
  padding: 1rem 1.25rem;
  height: 56px;
}

.search-container.search-container-results .search-button {
  font-size: 1.0625rem;
  padding: 1rem 1.75rem;
  height: 56px;
  min-width: 180px;
  width: 180px;
}

/* Tab Placeholder Content */
.tab-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  min-height: 400px;
}

.placeholder-content {
  text-align: center;
  max-width: 600px;
}

.placeholder-content h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--dark-slate);
  margin: 0 0 var(--spacing-md) 0;
}

.placeholder-content p {
  font-size: 1.125rem;
  color: var(--gray-500);
  margin: 0;
}

/* Statistics Component */
.statistics-container {
  flex: 1;
  padding: var(--spacing-xl);
  background: var(--off-white);
}

.statistics-content {
  max-width: 1400px;
  margin: 0 auto;
}

.statistics-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-xl) 0;
}

.statistics-title-row .statistics-title {
  margin: 0;
  line-height: 1;
}

.statistics-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--dark-slate);
  margin: 0 0 var(--spacing-xl) 0;
}

.refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}

.refresh-button:hover:not(:disabled) {
  color: var(--primary-blue);
  background-color: rgba(0, 0, 0, 0.05);
}

.refresh-button:disabled {
  cursor: default;
  opacity: 0.5;
}

.refresh-icon {
  display: block;
}

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

.refresh-icon-spinning {
  animation: spin 1s linear infinite;
}

.statistics-loading,
.statistics-error {
  text-align: center;
  padding: var(--spacing-2xl);
  font-size: 1.125rem;
  color: var(--gray-500);
}

.statistics-error {
  color: var(--accent-coral);
}

/* Stats Grid - Key Metrics Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.stat-card {
  background: var(--white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid;
  transition: all 0.2s;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-card-primary {
  border-left-color: var(--primary-blue);
}

.stat-card-success {
  border-left-color: #10B981;
}

.stat-card-info {
  border-left-color: #6366F1;
}

.stat-card-accent {
  border-left-color: var(--accent-coral);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dark-slate);
  margin-bottom: var(--spacing-xs);
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Chart Sections */
.chart-section {
  background: var(--white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-xl);
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Chart toggle buttons */
.chart-toggle-container {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  justify-content: center;
}

.chart-toggle-button {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--white);
  color: var(--dark-slate);
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-toggle-button:hover {
  background: var(--gray-50);
  border-color: var(--primary-blue);
}

.chart-toggle-button.active {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
}

.chart-toggle-button.active:hover {
  background: #0052a3;
}

.chart-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark-slate);
  margin: 0 0 var(--spacing-lg) 0;
}

/* Chart Legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  padding: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.875rem;
  color: var(--dark-slate);
}

.legend-color {
  width: 20px;
  height: 12px;
  border-radius: 2px;
}

.legend-color-indexed {
  background: var(--primary-blue);
}

.legend-color-not-indexed {
  background: var(--gray-300);
}

.legend-label {
  font-weight: 500;
}

.chart-subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark-slate);
  margin-bottom: 0;
  text-align: left;
  font-family: var(--font-heading);
}

.chart-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  padding-right: 60px;
  /* Align legend with right edge of bars (accounting for 60px third column) */
}

.chart-x-axis {
  margin-top: var(--spacing-xs);
  margin-left: calc(200px + var(--spacing-md));
  /* Align with bars: label width (200px) + gap */
}

.chart-x-axis-ticks {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  font-size: 0.875rem;
  color: var(--gray-600);
  font-family: var(--font-body);
  border-top: 1px solid var(--gray-300);
  position: relative;
}

.chart-x-axis-ticks span {
  position: relative;
}

.chart-x-axis-ticks span::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 5px;
  background: var(--gray-400);
}

.chart-x-axis-label {
  text-align: center;
  font-size: 0.875rem;
  color: var(--dark-slate);
  font-weight: 500;
  margin-top: var(--spacing-xs);
  font-family: var(--font-body);
}

/* Reports Table */
.reports-table-container {
  overflow-x: auto;
  margin-top: var(--spacing-md);
}

.reports-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 100%;
}

.reports-table thead {
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-300);
}

.reports-table th {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: 600;
  color: var(--dark-slate);
  font-family: var(--font-heading);
}

.reports-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}

.reports-table tbody tr:hover {
  background: var(--gray-50);
}

.report-title {
  font-weight: 500;
  color: var(--dark-slate);
  max-width: 400px;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: inherit;
  font-weight: 600;
  text-transform: capitalize;
  /* Default fallback for any unrecognized status */
  background: var(--gray-400);
  color: white;
}

.status-badge-success {
  background: #10B981 !important;
  color: white !important;
}

.status-indexed {
  background: var(--color-success);
  color: white;
}

.status-parsed {
  background: var(--color-info);
  color: white;
}

.status-downloaded {
  background: var(--color-warning);
  color: white;
}

.status-queued {
  background: #8B5CF6;
  color: white;
}

/* In-progress statuses with subtle animation */
.status-parsing,
.status-summarizing,
.status-tagging,
.status-indexing {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  color: white;
  animation: pulse-status 2s ease-in-out infinite;
}

@keyframes pulse-status {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.status-unknown,
.status-error,
.status-summarize_failed,
.status-parse_failed,
.status-tag_failed,
.status-index_failed,
.status-download_failed {
  background: var(--color-danger);
  color: white;
}

/* All Documents Table */
.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.table-filter-input {
  flex: 1;
  min-width: 250px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-family: var(--font-body);
  height: 48px;
  /* Enforce explicit height for alignment */
}

.table-filter-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(91, 143, 168, 0.1);
}

.clear-filter-button {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--accent-coral);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.clear-filter-button:hover {
  background: #e66a3c;
}

.table-count {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
  white-space: nowrap;
}

.documents-table-container {
  overflow-x: auto;
  overflow-y: auto;
  margin-top: var(--spacing-md);
  position: relative;
  min-height: 300px;
  max-height: calc(100vh - 380px);
}

.table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
}

.table-loading-spinner {
  background: var(--primary-blue);
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
}

.documents-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  table-layout: fixed;
  min-width: 2180px;
}

.documents-table thead {
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-300);
  position: sticky;
  top: 0;
  z-index: 10;
}

.documents-table th {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: 600;
  color: var(--dark-slate);
  font-family: var(--font-heading);
  white-space: normal;
  vertical-align: bottom;
}

/* Column widths */
.documents-table col.col-title {
  width: 260px;
}

.documents-table col.col-links {
  width: 120px;
}

.documents-table col.col-summary {
  width: 520px;
}

.documents-table col.col-metadata {
  width: 160px;
}

.documents-table col.col-organization {
  width: 160px;
}

.documents-table col.col-status {
  width: 160px;
}

.documents-table col.col-type {
  width: 160px;
}

.documents-table col.col-year {
  width: 120px;
}

.documents-table col.col-language {
  width: 140px;
}

/* Generic styling for all taxonomy columns */
.documents-table col[class*="col-taxonomy-"] {
  width: 280px;
  min-width: 280px;
}

.documents-table col.col-format {
  width: 140px;
}

.documents-table col.col-pages {
  width: 120px;
}

.documents-table col.col-size {
  width: 140px;
}

.documents-table col.col-error {
  width: 160px;
}

.documents-table col.col-updated {
  width: 180px;
}

.documents-table col.col-chunks {
  width: 120px;
}

.documents-table col.col-actions {
  width: 140px;
}

/* New sortable header styles */
.sortable-header {
  padding: 0 !important;
}

.header-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  gap: 8px;
  min-height: 40px;
}

.header-label {
  flex: 1;
  cursor: pointer;
  user-select: none;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.3;
  max-width: 100%;
  white-space: pre-line;
}

.header-label:hover {
  color: var(--primary-blue);
}

.header-label-subtitle {
  display: block;
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 400;
  color: var(--gray-400);
}

.header-icons {
  display: flex;
  gap: 2px;
  align-items: center;
}

.sort-icon-button,
.filter-icon-button {
  background: transparent;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--gray-400);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  opacity: 0.5;
}

.filter-icon-button svg {
  width: 12px;
  height: 12px;
}

.sort-icon-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 0.5;
}

.chevron-up,
.chevron-down {
  display: block;
  color: var(--gray-400);
  transition: color 0.15s;
  font-weight: 400;
  font-size: 9px;
}

.chevron-up.active,
.chevron-down.active {
  color: var(--primary-blue);
}

.filter-icon {
  display: inline-block;
  transform: rotate(90deg);
  font-size: 16px;
  font-weight: 600;
}

.sort-icon-button:hover,
.filter-icon-button:hover {
  background: var(--gray-200);
  color: var(--primary-blue);
}

.filter-icon-button.active {
  background: var(--primary-blue);
  color: white;
}

/* Filter popover */
.filter-popover {
  position: absolute;
  z-index: 1000;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 280px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
}

.filter-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200);
  font-weight: 600;
  color: var(--gray-900);
  text-transform: capitalize;
}

.filter-popover-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--gray-500);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  line-height: 1;
}

.filter-popover-close:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

.filter-popover-content {
  padding: 12px;
  overflow-y: auto;
  max-height: 340px;
}

/* Text filter input */
.filter-text-input input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 12px;
}

.filter-text-input input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(91, 143, 168, 0.1);
}

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

.filter-apply-button,
.filter-clear-button {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-apply-button {
  background: var(--primary-blue);
  color: white;
}

.filter-apply-button:hover {
  background: var(--primary-blue-dark);
}

.filter-clear-button {
  background: var(--gray-200);
  color: var(--gray-700);
}

.filter-clear-button:hover {
  background: var(--gray-300);
}

/* Filter list for categorical columns */
.filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-list-item {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s;
  font-size: 14px;
  color: var(--gray-700);
}

.filter-list-item:hover {
  background: var(--gray-100);
}

.filter-list-item.selected {
  background: var(--primary-blue);
  color: white;
  font-weight: 500;
}

.filter-multiselect {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-multiselect-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
}

.filter-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s;
  font-size: 14px;
  color: var(--gray-700);
}

.filter-checkbox-item:hover {
  background: var(--gray-100);
}

.filter-checkbox-item input[type="checkbox"] {
  cursor: pointer;
}

.filter-select-all {
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 10px;
  margin-bottom: 4px;
  font-weight: 500;
}

.documents-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.documents-table th.sortable:hover {
  background: var(--gray-100);
}

.documents-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
  vertical-align: top;
  height: 100%;
}

.documents-table tbody tr:hover {
  background: var(--gray-50);
}

.doc-title {
  font-weight: 500;
  color: var(--dark-slate);
  max-width: none;
  width: 400px;
  line-height: 1.4;
  word-wrap: break-word;
}

.doc-title-with-thumbnail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.doc-title-thumbnail-container {
  flex-shrink: 0;
  width: 40px;
  height: 52px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  overflow: hidden;
}

.doc-title-thumbnail {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.doc-title-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  color: var(--gray-400);
  font-size: 0.55rem;
  text-align: center;
  line-height: 1.1;
  padding: 0.15rem;
}

.doc-title-text {
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
}

.doc-summary {
  max-width: none;
  width: 100%;
  line-height: 1.4;
  color: var(--gray-600);
  word-wrap: break-word;
}

.documents-table th.summary-column {
  width: 100%;
  white-space: pre-line;
}

.documents-table td.doc-summary {
  width: 100%;
}

.doc-toc {
  text-align: left;
}

.doc-metadata {
  text-align: left;
}

.doc-metadata .doc-link {
  display: block;
  margin-bottom: 4px;
}

.doc-metadata .doc-link:last-child {
  margin-bottom: 0;
}

/* Metadata Modal */
.metadata-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.metadata-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: white;
}

.metadata-table tr {
  border-bottom: 1px solid var(--gray-100);
}

.metadata-table tr:hover {
  background-color: var(--gray-50);
}

.metadata-table tr.metadata-section {
  border-bottom: none;
}

.metadata-table tr.metadata-section:hover {
  background-color: transparent;
}

.metadata-section td {
  background: var(--gray-100);
  color: var(--gray-900);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 14px 16px;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.metadata-key {
  font-weight: 600;
  color: var(--gray-800);
  padding: 10px 16px;
  white-space: normal;
  vertical-align: top;
  width: 40%;
  max-width: 40%;
  word-break: break-word;
}

.metadata-value {
  color: var(--gray-700);
  padding: 10px 16px;
  word-break: break-word;
}

.metadata-divider {
  border-bottom: none;
}

.metadata-table tr.metadata-section-toggle {
  cursor: pointer;
  user-select: none;
  border-bottom: none;
}

.metadata-table tr.metadata-section-toggle td {
  background: transparent;
  color: var(--gray-600);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 10px 16px;
  border-top: none;
  border-bottom: none;
}

.metadata-table tr.metadata-section-toggle:hover td {
  color: var(--gray-800);
}

.metadata-section-icon {
  display: inline-block;
  font-size: 0.65em;
  color: var(--gray-500);
  margin-right: 4px;
}

.metadata-divider td {
  padding: 6px 0;
}

.metadata-divider-line {
  border-top: 1px solid var(--gray-200);
  width: 100%;
}

.toc-link {
  white-space: nowrap;
}

/* TOC Modal Content */
.toc-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.toc-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toc-boundary-note {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.toc-item {
  display: flex;
  align-items: center;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--gray-100);
  gap: 10px;
}

.toc-item-before-boundary {
  background-color: #f8f6ff;
}

.toc-item:hover {
  background-color: var(--gray-50);
}

.toc-level-1 {
  font-weight: 600;
  font-size: 1rem;
  color: var(--gray-900);
  border-bottom-color: var(--gray-200);
}

.toc-level-2 {
  font-weight: 400;
  font-size: 1rem;
  color: var(--gray-900);
  border-bottom-color: var(--gray-200);
}

.toc-level-3 {
  font-weight: 500;
  font-size: 1rem;
  color: var(--gray-800);
}

.toc-level-4 {
  font-weight: 400;
  font-size: 1rem;
  color: var(--gray-700);
}

.toc-level-5 {
  font-weight: 400;
  font-size: 1rem;
  color: var(--gray-600);
}

.toc-level-6 {
  font-weight: 400;
  font-size: 1rem;
  color: var(--gray-500);
}

.toc-title {
  flex: 1;
  min-width: 0;
}

.toc-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.toc-boundary-badge {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #4a3f7a;
  background-color: #ece7fb;
}

.toc-page {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--gray-500);
  font-weight: 400;
  min-width: 100px;
  text-align: right;
}

.toc-page-link {
  color: var(--primary-blue);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: all 0.15s ease;
}

.toc-page-link:hover {
  background-color: var(--primary-blue);
  color: white;
}

/* Section type tags in TOC */
.toc-section-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: capitalize;
  border-radius: 10px;
  background-color: #e0e0e0;
  color: #555;
}

/* Section type tag colors (7 categories) */
.section-tag-front_matter {
  background-color: #e8eaf6;
  color: #3f51b5;
}

.section-tag-executive_summary {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.section-tag-acronyms {
  background-color: #e0f2f1;
  color: #00796b;
}

.section-tag-context {
  background-color: #e8eaf6;
  color: #5e35b1;
}

.section-tag-body {
  background-color: #f5f5f5;
  color: #616161;
}

.section-tag-context {
  background-color: #fff8e1;
  color: #f57c00;
}

.section-tag-methodology {
  background-color: #e3f2fd;
  color: #1565c0;
}

.section-tag-findings {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.section-tag-conclusions {
  background-color: #fff9c4;
  color: #f9a825;
}

.section-tag-recommendations {
  background-color: #fce4ec;
  color: #c2185b;
}

.section-tag-annexes {
  background-color: #efebe9;
  color: #5d4037;
}

.section-tag-appendix {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.section-tag-appendices {
  background-color: #ffe0b2;
  color: #e65100;
}

.section-tag-bibliography {
  background-color: #e1bee7;
  color: #6a1b9a;
}

.doc-error {
  max-width: none;
  width: 200px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-danger);
  font-style: italic;
  word-wrap: break-word;
}

.doc-links {
  /* Removed flex to fix border alignment issue */
}

.doc-link {
  color: var(--primary-blue);
  text-decoration: none;
  font-size: 0.875rem;
  display: block;
  margin-bottom: var(--spacing-xs);
}

.doc-link:last-child {
  margin-bottom: 0;
}

.doc-link:hover {
  text-decoration: underline;
}

.view-chunks-button {
  padding: 4px 12px;
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'Open Sans', sans-serif;
}

.view-chunks-button:hover {
  background: #005299;
}

/* Chunks Modal */
.chunks-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-lg);
}

/* Modal Panel for Summary */
.modal-panel {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.contact-modal {
  max-width: 500px;
}

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

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 32px;
  color: var(--gray-500);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

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

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reprocess-toc-btn {
  background: var(--primary-blue);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.reprocess-toc-btn:hover:not(:disabled) {
  background: var(--primary-blue-dark, #1565c0);
}

.reprocess-toc-btn:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}

/* TOC Modal Action Buttons */
.toc-action-btn {
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.toc-edit-btn {
  background: var(--primary-blue);
  color: white;
}

.toc-edit-btn:hover {
  background: var(--primary-blue-dark, #1565c0);
}

.toc-reprocess-btn {
  background: var(--primary-blue);
  color: white;
}

.toc-reprocess-btn:hover:not(:disabled) {
  background: var(--primary-blue-dark, #1565c0);
}

.toc-reprocess-btn:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}

.toc-save-btn {
  background: #10b981;
  color: white;
}

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

.toc-save-btn:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
  opacity: 0.6;
}

.toc-cancel-btn {
  background: var(--gray-200);
  color: var(--text-primary);
}

.toc-cancel-btn:hover:not(:disabled) {
  background: var(--gray-300);
}

/* TOC Drag Handle - Excel-like drag to fill */
.toc-drag-handle {
  cursor: grab;
  color: var(--text-secondary, #6b7280);
  font-size: 12px;
  font-weight: bold;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
  opacity: 0.4;
  user-select: none;
  line-height: 1;
  letter-spacing: -2px;
}

.toc-drag-handle:hover {
  opacity: 1;
  background: var(--gray-100, #f3f4f6);
  color: var(--primary-blue, #1976d2);
  transform: scale(1.1);
}

.toc-drag-handle:active {
  cursor: grabbing;
  transform: scale(0.95);
}

.toc-drag-handle[draggable="false"] {
  cursor: not-allowed;
  opacity: 0.2;
}

/* Drag over highlight - only on category column */
.toc-item-drag-over .toc-section-tag {
  box-shadow: 0 0 0 2px var(--primary-blue, #1976d2);
  transform: scale(1.05);
  transition: all 0.15s ease;
}

/* TOC Section Tags - Consistent styling */
.toc-section-tag {
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  width: 170px;
  text-align: center;
  box-sizing: border-box;
}

/* TOC Category Dropdown - Styled as Badge */
.toc-section-tag-editable {
  appearance: none;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.15);
  width: 170px;
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toc-section-tag-editable:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.25);
}

.toc-section-tag-editable:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.toc-section-tag-editable:disabled {
  opacity: 0.6;
  cursor: wait;
}

.toc-section-tag-editable option {
  color: #1f2937;
  background: white;
  padding: 8px;
  font-weight: 500;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.summary-content {
  line-height: 1.8;
  color: var(--text-secondary);
  font-size: 15px;
}

.summary-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Markdown content styling */
.markdown-content p {
  margin: 0.5em 0;
}

.markdown-content p:first-child {
  margin-top: 0;
}

.markdown-content p:last-child {
  margin-bottom: 0;
}

.markdown-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.chunks-modal {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.chunks-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 2px solid var(--gray-200);
}

.chunks-modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--dark-slate);
  font-family: var(--font-heading);
}

.chunks-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--gray-500);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
}

.chunks-modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.chunks-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
}

.chunks-loading,
.chunks-empty {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--gray-600);
  font-size: 1rem;
}

.chunks-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.chunk-item {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}

.chunk-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--gray-50);
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}

.chunk-header:hover {
  background: var(--gray-100);
}

.chunk-toggle {
  font-size: 0.75rem;
  color: var(--primary-blue);
  font-weight: bold;
  width: 16px;
  flex-shrink: 0;
}

.chunk-header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chunk-header-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.chunk-header-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-left: 0;
}

.chunk-title {
  font-weight: 600;
  color: var(--dark-slate);
  font-size: 0.9375rem;
}

.chunk-heading {
  font-weight: 400;
  color: var(--gray-600);
  font-style: italic;
  font-size: 0.875rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chunk-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.chunk-pdf-link {
  color: var(--primary-blue);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
}

.chunk-pdf-link:hover {
  text-decoration: underline;
}

/* Section type tags in chunks modal */
.chunk-section-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 10px;
  text-transform: capitalize;
}

.chunk-length {
  font-size: 0.8125rem;
  color: var(--gray-500);
  flex-shrink: 0;
}

.chunk-content {
  padding: var(--spacing-md);
  border-top: 1px solid var(--gray-200);
}

.chunk-text {
  color: var(--gray-700);
  line-height: 1.6;
  white-space: pre-wrap;
  font-size: 0.9375rem;
  margin-bottom: var(--spacing-md);
}

.chunk-metadata {
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.chunk-metadata strong {
  color: var(--dark-slate);
}

/* Sankey Container */
.sankey-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: white;
}

.sankey-container::-webkit-scrollbar {
  height: 8px;
}

.sankey-container::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 4px;
}

.sankey-container::-webkit-scrollbar-thumb {
  background: var(--primary-blue);
  border-radius: 4px;
}

.sankey-container::-webkit-scrollbar-thumb:hover {
  background: var(--primary-blue-dark);
}

/* Bar Charts */
.chart-bars {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.chart-bar-item {
  display: grid;
  grid-template-columns: 200px 1fr 60px;
  gap: var(--spacing-md);
  align-items: center;
}

.chart-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.chart-bar-status {
  font-size: 0.875rem;
  color: var(--dark-slate);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-bar-count {
  font-size: 0.875rem;
  color: var(--gray-500);
  font-weight: 600;
  flex-shrink: 0;
}

.chart-bar-track {
  height: 32px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  display: flex;
  cursor: pointer;
  transition: transform 0.2s ease;
  animation: barGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
}

.chart-bar-track:hover {
  transform: translateX(2px);
}

/* Staggered animation delays for sequential effect */
.chart-bar-item:nth-child(1) .chart-bar-track {
  animation-delay: 0s;
}

.chart-bar-item:nth-child(2) .chart-bar-track {
  animation-delay: 0.1s;
}

.chart-bar-item:nth-child(3) .chart-bar-track {
  animation-delay: 0.2s;
}

.chart-bar-item:nth-child(4) .chart-bar-track {
  animation-delay: 0.3s;
}

.chart-bar-item:nth-child(5) .chart-bar-track {
  animation-delay: 0.4s;
}

.chart-bar-item:nth-child(6) .chart-bar-track {
  animation-delay: 0.5s;
}

.chart-bar-item:nth-child(7) .chart-bar-track {
  animation-delay: 0.6s;
}

.chart-bar-item:nth-child(8) .chart-bar-track {
  animation-delay: 0.7s;
}

.chart-bar-fill {
  height: 100%;
  display: inline-block;
  /* No animation on individual fills - parent track animates */
}

/* Remove individual fill animations */
.chart-bar-item:nth-child(1) .chart-bar-fill {
  /* No animation */
}

.chart-bar-item:nth-child(2) .chart-bar-fill {
  /* No animation */
}

.chart-bar-item:nth-child(3) .chart-bar-fill {
  /* No animation */
}

.chart-bar-item:nth-child(4) .chart-bar-fill {
  /* No animation */
}

.chart-bar-item:nth-child(5) .chart-bar-fill {
  /* No animation */
}

.chart-bar-item:nth-child(6) .chart-bar-fill {
  /* No animation */
}

.chart-bar-item:nth-child(7) .chart-bar-fill {
  /* No animation */
}

.chart-bar-item:nth-child(8) .chart-bar-fill {
  /* No animation */
}

@keyframes barGrow {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Custom Chart Tooltip - Styled like Sankey */
.chart-tooltip {
  position: fixed;
  background: #2C3E50;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.chart-tooltip strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.chart-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
  display: inline-block;
}

.chart-bar-fill-indexed {
  background: var(--primary-blue);
}

.chart-bar-fill-not-indexed {
  background: var(--gray-300);
}

/* Pipeline Status Colors */
.chart-bar-fill.status-indexed {
  background: linear-gradient(90deg, #10B981 0%, #059669 100%);
}

.chart-bar-fill.status-parsed {
  background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
}

.chart-bar-fill.status-downloaded {
  background: linear-gradient(90deg, #8B5CF6 0%, #7C3AED 100%);
}

.chart-bar-fill.status-error {
  background: linear-gradient(90deg, var(--accent-coral) 0%, #FF6B3D 100%);
}

.chart-bar-fill.status-pending {
  background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
}

/* Type & Agency Bar Colors - Removed, using indexed/not-indexed colors */

.chart-bar-percentage {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 600;
  text-align: right;
}

.search-form {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 1rem 1.25rem;
  font-size: 1.125rem;
  border: 3px solid var(--gray-300);
  border-radius: var(--radius-md);
  outline: none;
  background: var(--white);
  color: var(--gray-900);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(91, 143, 168, 0.15);
}

.search-input::placeholder {
  color: var(--gray-400);
}

.search-button {
  padding: 1rem 2.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  background: var(--brand-accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  min-width: 170px;
  /* Wide enough for "Searching..." with padding */
  width: 170px;
  /* Fixed width to prevent any size change */
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-button:hover:not(:disabled) {
  background: var(--brand-accent-dark);
}

.search-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #fafafa;
  border: 1px solid rgba(91, 143, 168, 0.8);
  color: var(--gray-500);
}

/* Main Content */
.main-content {
  flex: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-xl);
  animation: fadeInSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
}

@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--spacing-xl);
  align-items: start;
  animation: fadeIn 0.4s ease-in;
}

.content-grid-no-filters {
  grid-template-columns: 1fr;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Filters Section - scrolls with content */
.filters-section {
  /* No sticky positioning - scrolls with results */
}

.section-heading {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: var(--spacing-lg);
}

/* Filters Card */
.filters-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--spacing-md);
}

.filters-header .section-heading {
  margin: 0;
}

.clear-filters-link {
  background: none;
  border: none;
  color: var(--color-link);
  font-size: 0.875rem;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  transition: color 0.2s ease;
}

.clear-filters-link:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.filter-group {
  margin-bottom: var(--spacing-lg);
}

/* Collapsible Filter Sections */
.filter-section {
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: var(--spacing-sm);
}

.filter-section:last-child {
  border-bottom: none;
}

.filter-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  padding: var(--spacing-xs) 0;
  user-select: none;
}

.filter-section-header:hover .filter-section-title {
  color: var(--gray-900);
}

.filter-section-toggle {
  font-size: 0.75rem;
  color: var(--gray-400);
  width: 12px;
  transition: transform 0.2s;
}

.filter-section-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-section-content {
  margin-top: var(--spacing-sm);
  padding-left: var(--spacing-md);
}

.heatmap-filter-modal .filter-section-content {
  padding-left: 0;
}

/* Checkbox list items */
.filter-checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  cursor: pointer;
  user-select: none;
}

.filter-checkbox-item:hover {
  background: var(--gray-50);
}

.filter-checkbox-item input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.filter-checkbox-label {
  flex: 1;
  font-size: 0.875rem;
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-checkbox-count {
  font-size: 0.75rem;
  color: var(--gray-500);
  flex-shrink: 0;
}

/* Stacked layout for title items with subtitle */
.filter-checkbox-item-stacked {
  flex-direction: column;
  align-items: stretch;
  padding: var(--spacing-sm) 0;
}

.filter-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
}

.filter-checkbox-item-stacked .filter-checkbox-row {
  align-items: flex-start;
}

.filter-checkbox-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.filter-checkbox-item-stacked .filter-checkbox-label {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
}

.filter-checkbox-subtitle {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-style: italic;
}

/* Range filter inputs (numerical fields) */
.filter-range-inputs {
  padding: var(--spacing-sm) 0;
}

.filter-range-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.filter-range-label {
  font-size: 0.8rem;
  color: var(--gray-600);
  min-width: 28px;
  flex-shrink: 0;
}

.filter-range-input {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-sm);
  font-size: 0.8rem;
  color: var(--gray-700);
  background: var(--white, #fff);
  max-width: 120px;
}

.filter-range-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.filter-range-hint {
  font-size: 0.7rem;
  color: var(--gray-400);
  margin-top: var(--spacing-xs);
}

/* Rerank checkbox styling */
.rerank-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gray-700);
  transition: background-color 0.2s ease;
}

.rerank-checkbox-label:hover {
  background: var(--gray-100);
}

.rerank-checkbox {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--primary-blue);
}

.rerank-tooltip {
  color: var(--gray-400);
  font-size: 0.75rem;
  margin-left: auto;
}

.rerank-tooltip:hover {
  color: var(--primary-blue);
}

/* Content filter label */
.content-type-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 8px;
}

/* Content filter radio options */
.content-filter-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-filter-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--gray-700);
  cursor: pointer;
}

.content-filter-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-blue);
}

/* Section type filter checkboxes */
.section-type-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.section-type-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--gray-700);
  cursor: pointer;
}

.section-type-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--primary-blue);
}

/* Search settings groups */
.search-settings-group {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}

.search-settings-group:last-of-type {
  border-bottom: none;
  margin-bottom: var(--spacing-sm);
  padding-bottom: 0;
}

.search-settings-label {
  display: block;
  font-size: 0.8rem;
  color: var(--gray-600);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

/* Recency boost controls */
.recency-slider-group {
  margin-top: var(--spacing-xs);
  padding: var(--spacing-sm);
}

.recency-slider-label {
  display: block;
  font-size: 0.8rem;
  color: var(--gray-600);
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.recency-weight-slider,
.recency-scale-slider {
  width: 100%;
}

/* Grouped setting with sub-settings — faint border wraps the group,
   top border aligns with the top of the grey checkbox bar. */
.settings-subsettings-group {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0 0 var(--spacing-xs) 0;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

/* Remove inner margin so the grey box starts exactly where the container starts */
.settings-subsettings-group > .rerank-checkbox-label:first-child {
  margin-top: 0;
}

/* Field boost controls */
.field-boost-fields {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.field-boost-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: 2px;
}

.field-boost-row .section-type-checkbox {
  margin-bottom: 0;
  flex: 1;
}

.field-boost-input {
  width: 48px;
  padding: 2px 4px;
  font-size: 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-sm);
  text-align: center;
}

/* Filter search input */
.filter-search-input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  border: 1px solid var(--gray-300);
  font-size: 0.875rem;
  outline: none;
}

.filter-search-input:focus {
  border-color: var(--brand-primary);
}

/* Show more button */
.filter-show-more {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: 0.875rem;
  cursor: pointer;
  padding: var(--spacing-xs) 0;
  margin-top: var(--spacing-xs);
  text-align: left;
  width: 100%;
}

.filter-show-more:hover {
  color: var(--brand-primary-dark);
  text-decoration: underline;
}

.slider-group {
  margin-bottom: var(--spacing-lg);
}

.slider-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: var(--spacing-sm);
}

.filter-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: var(--spacing-sm);
}

.filter-select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-900);
  cursor: pointer;
  transition: all 0.2s;
}

.filter-select:hover {
  border-color: var(--primary-blue);
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-blue);
  ring: 3px solid rgba(91, 143, 168, 0.15);
}

/* Selected Filters Display */
.selected-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-200);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--color-filter-active-bg);
  color: var(--color-filter-active-text);
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  line-height: 1.2;
  position: relative;
}

.filter-chip-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.filter-chip-text-container {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.filter-chip-subtitle {
  font-size: 0.7rem;
  opacity: 0.85;
  font-style: italic;
}

/* Custom tooltip */
.filter-chip-with-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--gray-900);
  color: var(--white);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  min-width: 300px;
  max-width: 600px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s, visibility 0s;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}

/* Tooltip subtitle */
.filter-chip-with-tooltip[data-tooltip-subtitle]:not([data-tooltip-subtitle=""])::before {
  content: attr(data-tooltip) '\A' attr(data-tooltip-subtitle);
  white-space: pre-line;
}

.filter-chip-with-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  border: 6px solid transparent;
  border-top-color: var(--gray-900);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s, visibility 0s;
  z-index: 1000;
}

.filter-chip-with-tooltip:hover::before,
.filter-chip-with-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0s, visibility 0s;
}

.filter-chip-label {
  font-weight: 600;
  opacity: 0.9;
}

.filter-chip-value {
  font-weight: 400;
}

.filter-chip-remove {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.filter-chip-remove:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.clear-filters-button {
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  background: rgba(91, 143, 168, 0.1);
  color: var(--primary-blue-dark);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.clear-filters-button:hover {
  background: rgba(91, 143, 168, 0.2);
}

/* Score Slider */
.score-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  margin: var(--spacing-sm) 0;
}

/* Thumb styles */
.score-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  border: 3px solid var(--primary-blue);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.score-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  border: 3px solid var(--primary-blue);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Track styles for Firefox */
.score-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
}

.score-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--gray-600);
  margin-top: -4px;
}

/* Results Section */
.results-section {
  min-height: 400px;
  min-width: 0;
}

/* AI Summary Box */
.ai-summary-box {
  background: #fefce8;
  color: var(--gray-700);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  border: 1px solid var(--gray-200);
}

.ai-summary-box.collapsed {
  padding: var(--spacing-sm) var(--spacing-md);
}

.ai-summary-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
  gap: var(--spacing-xs);
}

.ai-summary-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.375rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: var(--gray-700);
  margin: 0;
}

.ai-summary-hint {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--gray-400);
  margin: 0 0 var(--spacing-xs) 0;
}

.ai-summary-hint-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-xs) 0;
}

.ai-summary-toggle {
  display: none;
  /* Hidden - removed from UI */
  background: none;
  border: none;
  color: var(--gray-500);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0;
  font-weight: 400;
}

.ai-summary-content {
  margin-top: 0;
  min-height: calc(1.7em * 5);
  /* Always maintain 5 line height */
  max-height: calc(1.7em * 5);
  /* 5 lines at 1.7 line-height */
  overflow: hidden;
  transition: max-height 0.3s ease;
  position: relative;
}

/* Fade effect at the bottom when collapsed */
.ai-summary-content:not(.expanded)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  background: linear-gradient(to bottom, rgba(254, 252, 232, 0) 0%, rgba(254, 252, 232, 1) 100%);
  pointer-events: none;
}

.ai-summary-content.expanded {
  max-height: none;
}

/* Center the generating message */
.ai-summary-content .generating-text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(1.7em * 5);
}

.ai-summary-text {
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0;
}

.ai-summary-markdown {
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.7;
  color: var(--gray-700);
}

.ai-summary-markdown p {
  margin: 0 0 0.5em 0;
}

.ai-summary-markdown p:last-child {
  margin-bottom: 0;
}

.ai-summary-markdown strong {
  font-weight: 600;
  color: var(--gray-800);
}

.ai-summary-markdown em {
  font-style: italic;
}

.ai-summary-markdown h3 {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--gray-500);
  margin: 1em 0 0.4em 0;
}

.ai-summary-markdown h4 {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--gray-500);
  margin: 0.8em 0 0.3em 0;
}

.ai-summary-markdown h5 {
  font-size: 1em;
  font-weight: 700;
  color: var(--gray-500);
  margin: 0.6em 0 0.25em 0;
}

.ai-summary-markdown h6 {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--gray-500);
  margin: 0.5em 0 0.2em 0;
}

.ai-summary-markdown ul,
.ai-summary-markdown ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.ai-summary-markdown li {
  margin: 0.25em 0;
}

.ai-summary-citation {
  color: var(--primary-blue);
  text-decoration: none;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
}

.ai-summary-citation:hover {
  text-decoration: underline;
}

.citation-doc-group {
  display: inline-block;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 3px;
  padding: 0 3px;
  font-size: 0.8em;
  line-height: 1.4;
}

.citation-doc-group:hover {
  background: rgba(59, 130, 246, 0.15);
}

.ai-summary-references {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-200);
}

.ai-summary-references h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  margin: 0 0 var(--spacing-sm) 0;
}

.ai-summary-references ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ai-summary-references li {
  margin-bottom: var(--spacing-xs);
  font-size: 0.875rem;
  line-height: 1.5;
}

.ai-summary-references a {
  color: var(--gray-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ai-summary-references a:hover {
  color: var(--primary-blue);
  text-decoration: underline;
}

.ai-summary-ref-link {
  text-decoration: none;
  color: var(--gray-600);
}

.ai-summary-ref-link:hover {
  color: var(--primary-blue);
}

.ai-summary-ref-group {
  margin-bottom: var(--spacing-xs);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gray-600);
}

.ai-summary-ref-group .ai-summary-citation,
.ai-summary-ref-group .citation-doc-group {
  font-size: 0.95em;
}


.ai-summary-expand-button {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.75rem 0;
  font-weight: 400;
  text-decoration: none;
  margin-top: 0;
  display: block;
  width: 100%;
  text-align: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.ai-key-facts-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  overflow: visible;
}

.ai-key-facts-header h3,
.ai-key-facts-header h4,
.ai-key-facts-header h5,
.ai-key-facts-header h6 {
  margin: 0;
}

.ai-find-out-more-btn {
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  color: var(--brand-primary);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 3px 10px;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ai-find-out-more-btn:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--brand-primary);
}

.ai-find-out-more-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.ai-find-out-more-btn {
  position: relative;
}

.ai-find-out-more-btn[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--white);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  min-width: 220px;
  max-width: 320px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  font-weight: 400;
}

.ai-find-out-more-btn[data-tooltip]::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  border: 5px solid transparent;
  border-bottom-color: var(--gray-200);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 1000;
}

.ai-find-out-more-btn[data-tooltip]:hover::before,
.ai-find-out-more-btn[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

li.ai-fact-active {
  position: relative;
  border-radius: var(--radius-md);
  padding: 2px 6px;
  margin-left: -6px;
  background: transparent;
}

li.ai-fact-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  padding: 2px;
  background: linear-gradient(
    90deg,
    #ff0000, #ff7700, #ffdd00, #00ff00, #0077ff, #8800ff, #ff0000
  );
  background-size: 300% 100%;
  animation: rainbow-border 3s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes rainbow-border {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.ai-heading-active {
  position: relative;
  display: inline-block;
  border-radius: var(--radius-md);
  padding: 2px 6px;
}

.ai-heading-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  padding: 2px;
  background: linear-gradient(
    90deg,
    #ff0000, #ff7700, #ffdd00, #00ff00, #0077ff, #8800ff, #ff0000
  );
  background-size: 300% 100%;
  animation: rainbow-border 3s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ai-heading-active h3,
.ai-heading-active h4,
.ai-heading-active h5,
.ai-heading-active h6 {
  margin: 0;
}

.ai-summary-expand-button:hover {
  opacity: 1;
}

/* Generating AI summary color sweep animation */
.generating-text {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 500;
}

.wave-char {
  display: inline-block;
  animation: colorSweep 2s ease-in-out infinite;
  color: var(--gray-700);
}

@keyframes colorSweep {
  0% {
    color: #ef4444;
    /* red */
    text-shadow: 0 0 0.5px #ef4444, 0 0 0.5px #ef4444;
  }

  16.66% {
    color: #f97316;
    /* orange */
    text-shadow: 0 0 0.5px #f97316, 0 0 0.5px #f97316;
  }

  33.33% {
    color: #eab308;
    /* yellow */
    text-shadow: 0 0 0.5px #eab308, 0 0 0.5px #eab308;
  }

  50% {
    color: #22c55e;
    /* green */
    text-shadow: 0 0 0.5px #22c55e, 0 0 0.5px #22c55e;
  }

  66.66% {
    color: #3b82f6;
    /* blue */
    text-shadow: 0 0 0.5px #3b82f6, 0 0 0.5px #3b82f6;
  }

  83.33% {
    color: #a855f7;
    /* purple */
    text-shadow: 0 0 0.5px #a855f7, 0 0 0.5px #a855f7;
  }

  100% {
    color: #ef4444;
    /* red */
    text-shadow: 0 0 0.5px #ef4444, 0 0 0.5px #ef4444;
  }
}

.translating-dropdown {
  animation: colorSweep 2s ease-in-out infinite;
  border: 1px solid currentColor !important;
  border-radius: 4px;
  /* match existing radius if any */
}

.ai-summary-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--gray-200);
  font-size: 0.6875rem;
}

.ai-disclaimer {
  color: var(--gray-500);
  font-style: italic;
}

.view-prompt-link {
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: 0.6875rem;
}

.view-prompt-link:hover {
  color: var(--gray-800);
}

/* ---- AI Summary Drilldown ---- */

.ai-drilldown-nav-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--gray-200);
}

.ai-drilldown-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-sm);
  font-size: 0.8125rem;
}

.ai-drilldown-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  color: var(--brand-primary);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.ai-drilldown-back-btn:hover {
  background: var(--gray-50);
  border-color: var(--brand-primary);
}

.ai-drilldown-context {
  color: var(--gray-500);
  font-style: italic;
  flex: 1;
  min-width: 0;
}

.ai-drilldown-ancestor {
  color: var(--gray-500);
}

.ai-drilldown-current {
  color: var(--gray-700);
  font-weight: 500;
}

.ai-drilldown-sep {
  color: var(--gray-400);
  font-style: normal;
  margin: 0 0.125rem;
}

.dig-deeper-popover {
  display: inline-flex;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  animation: digDeeperFadeIn 0.15s ease-out;
  overflow: hidden;
}

.dig-deeper-popover-btn {
  background: white;
  border: none;
  color: var(--brand-primary);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 4px 10px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.dig-deeper-popover-btn + .dig-deeper-popover-btn {
  border-left: 1px solid var(--gray-300);
}

.dig-deeper-popover-btn:hover {
  background: var(--gray-50);
}

@keyframes digDeeperFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.ai-summary-content {
  position: relative;
}

/* ---- Drilldown Graph Toggle ---- */

.drilldown-graph-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  color: var(--brand-primary);
  cursor: pointer;
  padding: 3px 10px;
  font-size: 0.8125rem;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.drilldown-graph-toggle:hover {
  color: var(--brand-primary);
  border-color: var(--gray-300);
}

.drilldown-graph-toggle.active {
  color: var(--brand-primary);
}

/* ---- Drilldown Graph View ---- */

.drilldown-graph-view {
  padding: var(--spacing-sm) 0;
  overflow-x: auto;
}

.drilldown-graph-svg {
  display: block;
  min-width: 200px;
}

.drilldown-graph-edge {
  stroke: var(--gray-300);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.drilldown-graph-node {
  fill: var(--brand-primary);
  stroke: var(--brand-primary);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.drilldown-graph-node.active {
  fill: var(--brand-primary);
  stroke: var(--brand-primary);
}

.drilldown-graph-node:hover {
  fill: var(--brand-primary);
  stroke: var(--brand-primary-dark, #4a7a90);
}

.drilldown-graph-label {
  font-size: 0.8125rem;
  font-family: 'Open Sans', sans-serif;
  color: var(--gray-500);
  cursor: pointer;
  line-height: 1.4;
  transition: color 0.15s ease;
  word-break: break-word;
}

.drilldown-graph-label.root {
  font-weight: 600;
  color: var(--gray-700);
}

.drilldown-graph-label.active {
  color: var(--brand-primary);
  font-weight: 600;
}

.drilldown-graph-label:hover {
  color: var(--brand-primary);
}

/* Label row with action buttons */
.drilldown-graph-label-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* Node action buttons (+/−) — always visible */
.drilldown-graph-actions {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
  margin-top: 1px;
}
.drilldown-node-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.drilldown-node-btn svg {
  display: block;
}
.drilldown-node-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: rgba(0,0,0,0.03);
}
.drilldown-node-btn.remove:hover {
  border-color: #dc3545;
  color: #dc3545;
  background: rgba(220,53,69,0.05);
}

/* Loading node — rainbow pulse animation */
.drilldown-graph-node.loading {
  animation: node-rainbow-pulse 2s ease-in-out infinite;
}
@keyframes node-rainbow-pulse {
  0%   { fill: #5b9bd5; stroke: #5b9bd5; }
  25%  { fill: #e06c75; stroke: #e06c75; }
  50%  { fill: #e5c07b; stroke: #e5c07b; }
  75%  { fill: #98c379; stroke: #98c379; }
  100% { fill: #5b9bd5; stroke: #5b9bd5; }
}
.drilldown-graph-label.loading {
  font-style: italic;
}
.drilldown-loading-indicator {
  font-size: 0.75rem;
  color: var(--gray-400);
  font-weight: 400;
  animation: loading-fade 1.5s ease-in-out infinite;
}
@keyframes loading-fade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Add-node circle in tree — gray, same size as regular nodes */
.drilldown-graph-node.add-node {
  fill: var(--gray-300);
  stroke: var(--gray-400);
  stroke-width: 2;
  cursor: pointer;
}
.drilldown-graph-node.add-node:hover {
  fill: var(--gray-400);
  stroke: var(--gray-500);
}

/* Add-node label text */
.drilldown-add-node {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--gray-400);
  font-style: italic;
  line-height: 20px;
  padding-top: 0;
}
.drilldown-add-node:hover {
  color: var(--brand-primary);
}

/* Inline query input for adding a node */
.drilldown-add-input {
  font-size: 0.8125rem;
  padding: 3px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  width: 100%;
  max-width: 400px;
  outline: none;
  font-family: inherit;
}
.drilldown-add-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-xl);
}

.modal-content {
  background: var(--white);
  border-radius: var(--radius-md);
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-200);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--gray-800);
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-600);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.modal-close-btn:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

.modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
}

.app-footer {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--white);
  color: var(--gray-500);
  font-size: 0.8125rem;
}

.app[data-active-tab="assistant"] .app-footer {
  display: none;
}

.app-footer a,
.app-footer-link {
  color: var(--gray-600);
  text-decoration: none;
}

.app-footer a:hover,
.app-footer-link:hover {
  color: var(--gray-800);
  text-decoration: underline;
}

.app-footer-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.app-footer-divider {
  color: var(--gray-400);
}

.prompt-text {
  background: var(--gray-50);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--gray-800);
  margin: 0;
}

/* Documentation Page — lock viewport so docs columns fill remaining space exactly */
.app:has(.docs-page) {
  height: 100vh;
  overflow: hidden;
}

.main-content:has(.docs-page) {
  padding: var(--spacing-xl);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.docs-page {
  display: flex;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  gap: var(--spacing-lg);
  height: 100%;
}

/* Subtle scrollbars for docs columns */
.docs-sidebar,
.docs-content,
.docs-toc,
.docs-nav-tree {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

.docs-sidebar::-webkit-scrollbar,
.docs-content::-webkit-scrollbar,
.docs-toc::-webkit-scrollbar,
.docs-nav-tree::-webkit-scrollbar {
  width: 6px;
}

.docs-sidebar::-webkit-scrollbar-track,
.docs-content::-webkit-scrollbar-track,
.docs-toc::-webkit-scrollbar-track,
.docs-nav-tree::-webkit-scrollbar-track {
  background: transparent;
}

.docs-sidebar::-webkit-scrollbar-thumb,
.docs-content::-webkit-scrollbar-thumb,
.docs-toc::-webkit-scrollbar-thumb,
.docs-nav-tree::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.docs-sidebar::-webkit-scrollbar-thumb:hover,
.docs-content::-webkit-scrollbar-thumb:hover,
.docs-toc::-webkit-scrollbar-thumb:hover,
.docs-nav-tree::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.docs-sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1.25rem 0 1rem;
}

.docs-search {
  padding: 0 1rem 1rem;
  border-bottom: 1px solid var(--gray-100);
}

.docs-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--gray-700);
  background: var(--gray-50);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.docs-search-input:focus {
  border-color: var(--brand-primary);
  background: var(--white);
}

.docs-search-input::placeholder {
  color: var(--gray-400);
}

.docs-nav-tree {
  padding: 0.5rem 0;
  flex: 1;
  overflow-y: auto;
}

.docs-nav-folder {
  margin-bottom: 0.25rem;
}

.docs-nav-folder-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-align: left;
}

.docs-nav-folder-header:hover {
  color: var(--gray-800);
}

.docs-nav-folder-arrow {
  font-size: 0.7rem;
  width: 1rem;
  text-align: center;
  color: var(--gray-400);
}

.docs-nav-folder-children {
  display: flex;
  flex-direction: column;
}

.docs-nav-item {
  display: block;
  width: 100%;
  padding: 0.4rem 1rem 0.4rem 2.25rem;
  border: none;
  background: none;
  font-size: 0.875rem;
  color: var(--gray-600);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s, background-color 0.15s;
  line-height: 1.4;
}

.docs-nav-item:hover {
  color: var(--brand-primary-dark);
  background: var(--gray-50);
}

.docs-nav-item.active {
  color: #fff;
  background: var(--brand-primary);
  font-weight: 500;
  border-right: 3px solid var(--brand-primary-dark);
}

.docs-content {
  flex: 1;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  overflow-y: auto;
}

/* Table of Contents - right sidebar (stays on gray background) */
.docs-toc {
  width: 200px;
  min-width: 200px;
  overflow-y: auto;
  padding: 1rem 0.75rem 1.5rem;
}

.docs-toc-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}

.docs-toc-item {
  display: block;
  width: 100%;
  padding: 0.25rem 0.5rem;
  border: none;
  background: none;
  font-size: 0.8rem;
  color: var(--gray-500);
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.docs-toc-item:hover {
  color: var(--gray-700);
}

.docs-toc-item.active {
  color: var(--brand-primary);
  border-left-color: var(--brand-primary);
  font-weight: 500;
}

.docs-toc-indent {
  padding-left: 1.25rem;
}

@media (max-width: 1100px) {
  .docs-toc {
    display: none;
  }
}

@media (max-width: 768px) {
  .app:has(.docs-page) {
    height: auto;
    overflow: visible;
  }

  .main-content:has(.docs-page) {
    overflow: visible;
  }

  .docs-page {
    flex-direction: column;
    height: auto;
  }

  .docs-sidebar {
    width: 100%;
    min-width: unset;
    height: auto;
    max-height: 50vh;
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--gray-200);
  }

  .docs-content {
    padding: 1rem;
  }
}

.docs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: var(--gray-500);
  font-size: 0.95rem;
}

.docs-no-results {
  padding: 1rem;
  color: var(--gray-400);
  font-size: 0.875rem;
  text-align: center;
}

/* About Modal Content */
.about-page-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.about-content {
  line-height: 1.8;
  color: var(--gray-700);
}

.about-content h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.about-content h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.about-content h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.about-content p {
  margin-bottom: 1rem;
}

.about-content strong {
  color: var(--gray-800);
  font-weight: 600;
}

.about-content ul {
  margin: 0.5rem 0 1rem 1.5rem;
  line-height: 1.8;
}

.about-content ol {
  margin: 0.5rem 0 1rem 1.5rem;
  line-height: 1.8;
}

.about-content li {
  margin-bottom: 0.5rem;
}

.about-content code {
  font-size: 0.9em;
  background: var(--gray-100);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

.about-content pre {
  font-size: 0.9em;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.about-content pre code {
  background: none;
  padding: 0;
}

.about-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.about-content th {
  text-align: left;
  font-weight: 600;
  color: var(--gray-800);
  background: var(--gray-50);
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--gray-200);
}

.about-content td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
}

.about-content tr:last-child td {
  border-bottom: none;
}

.info-footer-links {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.info-footer-heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
}

.info-footer-buttons {
  display: flex;
  gap: 1rem;
}

.info-footer-link {
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  padding: 0.5rem 1.25rem;
  color: var(--gray-600);
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.info-footer-link:hover {
  color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}

/* Section heading inside boxes */
.filters-card .section-heading {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  color: var(--gray-700);
}

.search-results-heading {
  font-size: 1.375rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: var(--gray-700);
  margin: 0.75rem 0 0.25rem 0;
}

/* Flex row holding the "Search Results" title and the Export-to-Word button
 * on the same line. */
.search-results-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin: 0.75rem 0 0.25rem 0;
  flex-wrap: wrap;
}
.search-results-heading-row .search-results-heading {
  margin: 0;
}
.search-results-export {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.export-results-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  background: var(--brand-surface);
  color: var(--brand-primary-dark);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.export-results-button:hover:not(:disabled) {
  background: rgba(91, 143, 168, 0.1);
  border-color: var(--brand-primary);
  color: var(--brand-primary-dark);
}
.export-results-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.export-results-error {
  color: #b91c1c;
  font-size: 0.8125rem;
  margin-left: 0.5rem;
}
.dev-fixture-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7c2d12;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 999px;
  vertical-align: middle;
}

.search-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  width: 100%;
  position: relative;
}

/* All dots positioned by JS — rainbow color inherited via currentColor */
.search-loading-wandering {
  animation: rainbowCycle 3s linear infinite;
}

.search-loading-snake-dot {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
}

@keyframes rainbowCycle {
  0%      { color: #ef4444; }
  16.66%  { color: #f97316; }
  33.33%  { color: #eab308; }
  50%     { color: #22c55e; }
  66.66%  { color: #3b82f6; }
  83.33%  { color: #a855f7; }
  100%    { color: #ef4444; }
}

/* Results List */
.results-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Result Cards */
.result-card {
  background: var(--white);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  transition: all 0.2s;
  margin-bottom: 0;
  line-height: 1.65;
}

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

.result-card:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.result-card-selected {
  border-color: var(--primary-blue);
  background: rgba(91, 143, 168, 0.05);
}

.result-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
  line-height: 1.5;
}

.result-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

.result-title-row .result-title {
  margin-bottom: 0;
  flex: 1;
}

.result-page-badge {
  font-size: 0.75rem;
  color: var(--gray-600);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--gray-100);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  border: 1px solid var(--gray-300);
}

.result-subtitle {
  font-size: 0.9375rem;
  color: var(--gray-500);
  margin-bottom: var(--spacing-md);
  line-height: 1.5;
}

.see-more-link {
  background: none;
  border: none;
  color: var(--brand-primary);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  margin-left: 4px;
}

.see-more-link:hover {
  text-decoration: underline;
}

.result-title-link {
  color: var(--brand-primary);
  /* Brand color for clickable title */
  cursor: pointer;
  transition: color 0.2s;
}

.result-title-link:hover {
  color: var(--brand-primary-dark);
  /* Darker brand color on hover */
}

.result-badges {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
}

.badge-org {
  background: var(--gray-100);
  color: var(--gray-700);
}

.badge-year {
  background: var(--gray-100);
  color: var(--gray-700);
}

.badge-page {
  background: var(--gray-100);
  color: var(--gray-700);
}

.result-score {
  font-size: 0.8125rem;
  color: var(--gray-500);
  background: var(--color-score-bg);
  font-weight: 400;
}

.result-page-num {
  font-size: 0.8125rem;
  color: var(--gray-500);
  font-weight: 400;
}

.result-meta-separator {
  font-size: 0.8125rem;
  color: var(--gray-400);
  margin: 0 0.5rem;
}

.result-badges .metadata-link {
  background: none;
  border: none;
  color: var(--color-score-text);
  /* Same gray as score */
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 400;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
}

.result-badges .metadata-link:hover {
  color: var(--gray-700);
  /* Slightly darker on hover */
  text-decoration: underline;
}

.metadata-content {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  font-size: 0.875rem;
}

.metadata-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--gray-300);
}

.metadata-header-title {
  font-weight: 600;
  color: var(--gray-700);
}

.metadata-close {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.metadata-close:hover {
  color: var(--brand-primary-dark);
}

.metadata-field {
  display: flex;
  gap: var(--spacing-sm);
  padding: 0.25rem 0;
}

.metadata-key {
  font-weight: 600;
  color: var(--gray-700);
  min-width: 150px;
}

.metadata-value {
  color: var(--gray-600);
  flex: 1;
}

.metadata-value .metadata-link {
  color: var(--gray-600);
  text-decoration: underline;
  cursor: pointer;
}

.metadata-value .metadata-link:hover {
  color: var(--gray-800);
}

.metadata-json {
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
}

.result-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  font-size: 0.875rem;
}

.result-meta-right {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  margin-left: auto;
}

.result-headings-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--gray-400);
  cursor: pointer;
  transition: color 0.2s;
}

.result-headings-toggle:hover {
  color: var(--gray-600);
}

.result-breadcrumb {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  font-style: italic;
}

.result-snippet-container {
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.7;
  margin: 0;
  white-space: normal;
  word-wrap: break-word;
  background: var(--gray-50);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  margin-top: var(--spacing-sm);
}

.result-headings {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--gray-200);
}

.result-full-summary {
  position: relative;
}

.result-snippet-container em.result-summary-ai-badge {
  float: right;
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 400;
  color: var(--gray-400);
  margin-left: 1rem;
}

.result-snippet {
  margin: 0;
}

.result-snippet p {
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}

.result-snippet> :first-child {
  margin-top: 0;
}

.result-snippet> :last-child {
  margin-bottom: 0;
}

/* Caption (figure/table caption) styling */
.result-snippet-caption {
  font-size: 0.95em;
  font-weight: 600;
  color: var(--gray-700);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  text-align: center;
}

/* Reference (footnote/endnote) styling */
.result-snippet-reference {
  font-size: 0.9em;
  color: var(--gray-600);
  font-style: italic;
  border-left: 2px solid var(--gray-300);
  padding-left: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.result-snippet-reference .reference-number {
  font-size: 0.75em;
  vertical-align: super;
  font-weight: 600;
  font-style: normal;
  margin-right: 0.2em;
}

/* Inline reference numbers within text (e.g., ". 112 ") */
.inline-reference-number {
  font-size: 0.75em;
  vertical-align: super;
  font-weight: 600;
  margin: 0 0.1em;
  cursor: default;
}

/* Markdown formatting in search results */
.result-snippet-container strong,
.result-snippet-container b {
  font-weight: 600;
  color: var(--gray-800);
}

.result-snippet-container em {
  font-style: normal;
  font-weight: 600;
  background-color: transparent;
  color: inherit;
}

.result-snippet-container i {
  font-style: italic;
}

.result-snippet-container code {
  background: var(--gray-200);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.result-snippet-container ul,
.result-snippet-container ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.result-snippet-container li {
  margin: 0.25em 0;
}

.result-snippet-container blockquote {
  border-left: 3px solid var(--gray-300);
  margin: 0.5em 0;
  padding-left: 1em;
  color: var(--gray-600);
  font-style: italic;
}

.result-snippet-container h1,
.result-snippet-container h2,
.result-snippet-container h3,
.result-snippet-container h4,
.result-snippet-container h5,
.result-snippet-container h6 {
  font-weight: 600;
  margin: 0.5em 0 0.25em 0;
  color: var(--gray-800);
  font-size: 1em;
}

.result-snippet-container a {
  color: var(--primary-blue);
  text-decoration: underline;
}

.result-snippet-container a:hover {
  color: var(--primary-blue-dark);
}

/* Table result styling */
.table-result {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: center;
  /* Center align table images */
}

.table-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-blue);
  background: rgba(91, 143, 168, 0.1);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  width: fit-content;
}

.table-wrapper {
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: var(--white);
}

.result-table th,
.result-table td {
  border: 1px solid var(--gray-300);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.result-table th {
  background: var(--gray-100);
  font-weight: 600;
  color: var(--gray-800);
  position: sticky;
  top: 0;
}

.result-table tr:nth-child(even) {
  background: var(--gray-50);
}

.result-table tr:hover {
  background: rgba(91, 143, 168, 0.05);
}

.table-truncated {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-style: italic;
  padding: var(--spacing-sm) 0;
  text-align: center;
}

.table-image-container {
  margin-top: var(--spacing-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}

.table-image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Images container for multiple image thumbnails */
.images-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  align-items: center;
  /* Center align images */
}

/* Add line breaks around figures/tables in search results */
.result-figure-block {
  margin: var(--spacing-sm) 0 var(--spacing-sm);
}

/* Table image thumbnail - clickable, no border */
.table-image-thumbnail-clickable {
  max-width: 33.333%;
  /* Limit to 1/3 of container width */
  max-height: 225px;
  height: auto;
  display: block;
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.images-container .table-image-thumbnail-clickable {
  margin-top: 0;
  /* Remove top margin for images in container */
}

.table-result .table-image-thumbnail-clickable {
  margin-top: var(--spacing-sm);
  /* Keep margin for standalone tables */
}

.table-image-thumbnail-clickable:hover {
  opacity: 0.85;
}

/* Search result highlighting - slightly bolder text */
.search-highlight {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  border: none;
}

.see-more-link {
  display: inline;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-blue);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}

.see-more-link:hover {
  color: var(--primary-blue-dark);
  text-decoration: underline;
}

.no-results {
  text-align: center;
  padding: var(--spacing-2xl);
  color: var(--gray-500);
}

.no-results-message {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-xl);
  color: var(--gray-500);
  background: var(--gray-50);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-lg);
}

.no-results-message h3 {
  color: var(--gray-700);
  margin-bottom: var(--spacing-sm);
  font-size: 1.25rem;
}

.no-results-message p {
  margin: 0;
  font-size: 0.95rem;
}

.no-results-message.welcome-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 300px;
  padding: var(--spacing-3xl) var(--spacing-xl);
}

/* Preview Overlay - Full Screen with Darkened Background */
.preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Preview Panel - Centered Card */
.preview-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  width: 90%;
  max-width: 1200px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease-out;
  transform: translate(0, 0);
  /* Creates containing block for fixed positioning */
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* PDF Viewer Styles */
.pdf-viewer-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  position: relative;
}

/* Mobile-only Close Preview button */
.mobile-close-preview-button {
  display: none;
  /* Hidden by default on desktop */
}

.pdf-viewer-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--spacing-lg);
  flex-shrink: 0;
}

.pdf-viewer-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Changed from flex-start to center for proper alignment */
  margin-bottom: var(--spacing-sm);
  gap: var(--spacing-md);
}

.pdf-thumbnail {
  height: 48px;
  width: auto;
  max-width: 36px;
  object-fit: contain;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pdf-viewer-badges-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.pdf-viewer-badges-row .badge {
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.pdf-viewer-badges-row .pdf-badge-link {
  display: inline;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--primary-blue);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--primary-blue);
  border-radius: var(--radius-sm);
  margin-bottom: 0;
}

.pdf-viewer-badges-row .pdf-badge-link:hover {
  background: var(--primary-blue);
  color: white;
  text-decoration: none;
}

.pdf-viewer-badges-row .result-score {
  font-size: 0.875rem;
  color: var(--color-score-text);
  font-weight: 500;
}

.pdf-metadata-link {
  background: none;
  border: none;
  color: var(--color-score-text);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 400;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s;
  font-family: 'Open Sans', sans-serif;
}

.pdf-metadata-link:hover {
  color: var(--gray-700);
  text-decoration: underline;
}

.pdf-viewer-title-row h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  flex: 1;
  line-height: 1.4;
}

.pdf-viewer-links {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.pdf-viewer-links a {
  color: var(--primary-blue);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  /* Match close button height for consistent alignment */
  line-height: 1;
  margin-bottom: 0 !important;
  /* Override .doc-link margin for alignment */
}

.pdf-viewer-links a:hover {
  color: var(--primary-blue-dark);
  background: var(--color-nav-hover-bg);
}

.pdf-viewer-header .close-button {
  background: rgba(91, 143, 168, 0.1);
  color: var(--primary-blue-dark);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  line-height: 1;
}

.pdf-viewer-header .close-button:hover {
  background: var(--accent-coral);
  color: var(--white);
}

.pdf-viewer-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.pdf-viewer-controls button {
  background: rgba(91, 143, 168, 0.1);
  color: var(--primary-blue-dark);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  flex-shrink: 0;
  transition: all 0.2s;
}

.pdf-viewer-controls button:hover:not(:disabled) {
  background: var(--primary-blue);
  color: var(--white);
}

.pdf-viewer-controls button:disabled {
  background: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
  opacity: 0.6;
}

.page-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.875rem;
  color: var(--gray-600);
  flex-shrink: 0;
}

.page-input {
  width: 3.5rem;
  padding: 0.375rem 0.5rem;
  text-align: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.875rem;
  color: var(--gray-900);
}

.page-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  ring: 2px solid rgba(91, 143, 168, 0.15);
}

/* Floating PDF Zoom Controls - Fixed position sticky to modal viewport */
.pdf-zoom-controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1001;
  /* High z-index to ensure visibility above PDF content and modal */
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--gray-200);
}

.pdf-zoom-button {
  width: 40px;
  height: 40px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-700);
  transition: all 0.2s;
}

.pdf-zoom-button:hover {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--white);
  transform: scale(1.05);
}

.pdf-zoom-button:active {
  transform: scale(0.95);
}

.pdf-zoom-reset {
  font-size: 1.5rem;
}

.pdf-zoom-level {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  padding: 4px 0;
  user-select: none;
}

/* Old Zoom Controls - Remove */
.zoom-controls {
  display: none;
}

.zoom-button {
  display: none;
}

.zoom-level {
  display: none;
}

/* In-PDF Search Controls */
.pdf-search-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--gray-200);
}

.pdf-search-input {
  flex: 1;
  min-width: 200px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: 0.875rem;
  color: var(--gray-900);
}

.pdf-search-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  ring: 2px solid rgba(91, 143, 168, 0.15);
}

.pdf-search-button {
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  transition: all 0.2s;
}

.pdf-search-button:hover:not(:disabled) {
  background: var(--primary-blue-dark);
}

.pdf-search-button:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
  opacity: 0.6;
}

.search-results-info {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
  white-space: nowrap;
}

.search-nav-button {
  background: rgba(91, 143, 168, 0.1);
  color: var(--primary-blue-dark);
  border: none;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s;
  min-width: 2rem;
}

.search-nav-button:hover {
  background: var(--primary-blue);
  color: var(--white);
}

.pdf-viewer-content {
  flex: 1;
  overflow: auto;
  background: var(--gray-100);
  padding: var(--spacing-lg);
  position: relative;
}

.pdf-page-container {
  position: relative;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  background: var(--white);
}

.pdf-viewer-loading,
.pdf-viewer-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--gray-500);
  font-size: 1rem;
}

.pdf-viewer-error button {
  margin-top: var(--spacing-lg);
  padding: 0.625rem 1.25rem;
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  transition: all 0.2s;
}

.pdf-viewer-error button:hover {
  background: var(--primary-blue-dark);
}

/* Text layer and highlights */
.textLayer>span {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer>span.phrase-highlight {
  /* Make highlighted text visible and distinct */
  background-color: var(--pdf-text-highlight-bg) !important;
  color: inherit !important;
  /* Add dark blue border with throbbing animation */
  border: 2px solid var(--pdf-text-highlight-border);
  border-radius: 2px;
  box-sizing: border-box;
  animation: pdf-text-throb 2s ease-in-out infinite;
}

@keyframes pdf-text-throb {

  0%,
  100% {
    border-color: var(--pdf-text-highlight-border-throb-start);
    box-shadow: 0 0 0 rgba(91, 143, 168, 0);
  }

  50% {
    border-color: var(--pdf-text-highlight-border-throb-end);
    box-shadow: 0 0 4px rgba(91, 143, 168, 0.5);
  }
}

/* Continuous highlight overlay for semantic phrases */
.phrase-highlight-overlay {
  position: absolute;
  background-color: rgba(255, 165, 0, 0.6);
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
  /* Above text layer (z-index 2), below bounding boxes (z-index 10) - matches test script */
}

.textLayer ::selection {
  background: rgba(91, 143, 168, 0.3);
}

.highlight-overlay {
  position: absolute;
  pointer-events: none;
  background: var(--highlight-bg);
  border: 2px solid var(--highlight-border);
  box-sizing: border-box;
  z-index: 1;
  animation: highlight-throb 2s ease-in-out infinite;
}

@keyframes highlight-throb {

  0%,
  100% {
    border-color: var(--pdf-highlight-border-throb-start);
    background-color: rgba(91, 143, 168, 0.05);
    box-shadow: 0 0 0 rgba(91, 143, 168, 0);
    opacity: 0;
  }

  50% {
    border-color: var(--pdf-highlight-border-throb-end);
    background-color: rgba(91, 143, 168, 0.15);
    box-shadow: 0 0 8px var(--pdf-highlight-shadow-end);
    opacity: 1;
  }
}


.highlight-indicator {
  position: absolute;
  pointer-events: none;
  background-color: rgba(91, 143, 168, 0.8);
  box-sizing: border-box;
  z-index: 10;
  animation: indicator-throb 2s ease-in-out infinite;
}

@keyframes indicator-throb {

  0%,
  100% {
    background-color: rgba(91, 143, 168, 0.6);
    box-shadow: 0 0 0 rgba(91, 143, 168, 0);
  }

  50% {
    background-color: rgba(91, 143, 168, 1);
    box-shadow: -3px 0 8px rgba(91, 143, 168, 0.6);
  }
}

/* Responsive Design */

/* Mobile Filters Toggle - Only visible on mobile */
.mobile-filters-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-filters-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
  }

  .mobile-filters-toggle:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-md);
  }

  .global-filters-tab {
    display: none;
  }

  .mobile-filters-toggle-icon {
    color: var(--primary-blue);
    font-size: 0.875rem;
  }

  .mobile-filters-toggle-text {
    flex: 1;
  }
}

@media (max-width: 1280px) {
  .preview-panel {
    width: 95%;
    height: 95vh;
  }
}

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

  .filters-section {
    position: static;
    display: none;
    /* Hidden by default on mobile */
    margin-bottom: var(--spacing-lg);
    order: -1;
    /* Show filters above results when expanded */
  }

  .filters-section-expanded {
    display: block;
    /* Show when toggle is clicked */
  }

  .preview-overlay {
    padding: 0;
  }

  .preview-panel {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 640px) {

  .main-content {
    padding: var(--spacing-md);
  }

  /* Top bar: 2-row grid layout — brand+info on row 1, dropdowns on row 2 */
  .top-bar-content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--spacing-xs) var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    align-items: center;
  }

  .top-bar-left {
    display: contents;
  }

  .top-bar-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .top-bar-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    gap: var(--spacing-xs);
  }

  .top-bar-controls .dropdown-container {
    flex: 1;
    min-width: 0;
  }

  .top-bar-right {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .app-title {
    font-size: 1.125rem;
  }

  .app-logo {
    height: 30px;
  }

  .dropdown-trigger {
    min-width: auto !important;
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
    gap: 0.375rem;
    width: 100%;
  }

  .dropdown-trigger .dropdown-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .dropdown-trigger-domain {
    width: 100%;
    min-width: auto;
  }

  .dropdown-label {
    font-size: 0.6875rem;
  }

  .dataset-total {
    display: none;
  }

  /* Dropdown menus — constrain to viewport */
  .dropdown-menu {
    max-width: calc(100vw - 2rem);
  }

  /* Dataset dropdown — anchor to left edge so it doesn't bleed off-screen */
  .dropdown-menu-domain {
    right: auto;
    left: 0;
  }

  /* Info dropdown — anchor to right edge so it doesn't overflow */
  .dropdown-menu-help {
    right: 0;
    left: auto;
  }

  /* Hide model info panel on mobile — just show the model list */
  .model-combo-panel {
    display: none;
  }

  /* Navigation Tabs — wrap to allow Monitor dropdown to escape overflow */
  .nav-tabs {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0 var(--spacing-md);
    justify-content: center;
  }

  .nav-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    white-space: nowrap;
  }

  /* Search form — stack input + button vertically */
  .search-form {
    flex-wrap: wrap;
    padding: 0 var(--spacing-sm);
  }

  .search-input {
    flex: 1 1 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .search-button {
    flex: 1 1 100%;
    width: 100%;
    min-width: auto;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .search-container.search-container-landing .search-form {
    padding: 0 var(--spacing-sm);
  }

  .search-container.search-container-landing .search-button {
    width: 100%;
    min-width: auto;
  }

  .search-container.search-container-landing .search-input {
    font-size: 0.9375rem;
  }

  /* Results */
  .result-card {
    padding: var(--spacing-md);
  }

  .result-title {
    font-size: 1rem;
  }

  /* More Filters tab — hidden on mobile (MobileFiltersToggle used instead) */
  .global-filters-tab {
    display: none;
  }

  /* Statistics Mobile */
  .statistics-container {
    padding: var(--spacing-md);
  }

  .statistics-title {
    font-size: 1.5rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .stat-value {
    font-size: 1.75rem;
  }

  .chart-toggle-container {
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  .chart-toggle-button {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8125rem;
  }

  .chart-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding-right: 0;
  }

  .chart-legend {
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
  }

  .legend-item {
    font-size: 0.75rem;
  }

  .chart-x-axis {
    margin-left: 0;
  }

  .chart-section {
    padding: var(--spacing-md);
  }

  .chart-bar-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .chart-bar-label {
    margin-bottom: var(--spacing-xs);
  }

  .chart-bar-percentage {
    display: none;
  }

  .search-result-filters-hint {
    display: none;
  }

  /* Mobile PDF Viewer Improvements */
  .pdf-viewer-header {
    padding: var(--spacing-sm);
  }

  .pdf-viewer-title-row h4 {
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .pdf-viewer-header .close-button {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .pdf-viewer-controls {
    gap: var(--spacing-xs);
  }

  .pdf-viewer-controls button {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
  }

  .page-info {
    font-size: 0.75rem;
    gap: 0.25rem;
    white-space: nowrap;
  }

  .page-input {
    width: 2.75rem;
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
  }

  /* Adjust floating zoom controls for mobile */
  .pdf-zoom-controls {
    bottom: 70px;
    right: 10px;
    padding: 6px;
    gap: 6px;
  }

  .pdf-zoom-button {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .pdf-zoom-level {
    font-size: 0.7rem;
    padding: 2px 0;
  }

  /* PDF Content - fit to mobile width */
  .pdf-viewer-content {
    padding: var(--spacing-xs);
  }

  .pdf-page-wrapper,
  .pdf-page-container {
    max-width: 100% !important;
    width: 100% !important;
  }

  .pdf-page-wrapper canvas {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .pdf-page-wrapper .textLayer {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Stack PDF search controls vertically on mobile */
  .pdf-search-controls {
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: stretch;
  }

  .pdf-search-input {
    min-width: unset;
    width: 100%;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
  }

  .pdf-search-button {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    width: 100%;
  }

  .search-results-info {
    font-size: 0.75rem;
    text-align: center;
  }

  .search-nav-button {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  /* Mobile Close Preview button */
  .mobile-close-preview-button {
    display: block !important;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 0.75rem 1.5rem;
    background: var(--accent-coral);
    color: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    transition: all 0.2s;
  }

  .mobile-close-preview-button:hover {
    background: var(--accent-coral-dark);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
  }

  .mobile-close-preview-button:active {
    transform: translateY(0);
  }

  /* Pagination — compact for mobile */
  .pagination-controls {
    gap: 0.25rem;
    margin: 1rem 0;
    padding: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination-button {
    min-width: 2rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .pagination-pages {
    gap: 0.125rem;
  }
}

/* Searchable Select Component */
.searchable-select-container {
  position: relative;
}

.selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.selected-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--primary-blue);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.selected-item-text {
  flex: 1;
}

.selected-item-remove {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
}

.selected-item-remove:hover {
  background: rgba(255, 255, 255, 0.2);
}

.clear-all-button {
  background: var(--gray-600);
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s;
}

.clear-all-button:hover {
  background: var(--gray-700);
}

.searchable-select-input-wrapper {
  position: relative;
  display: flex;
  gap: 0.25rem;
}

.searchable-select-input {
  flex: 1;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.searchable-select-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(91, 143, 168, 0.1);
}

.searchable-select-toggle {
  padding: 0.625rem;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--gray-600);
  transition: all 0.2s;
}

.searchable-select-toggle:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.searchable-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}

.searchable-select-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--gray-100);
}

.searchable-select-option:last-child {
  border-bottom: none;
}

.searchable-select-option:hover {
  background: var(--gray-50);
}

.searchable-select-option.selected {
  background: rgba(91, 143, 168, 0.1);
}

.searchable-select-checkbox {
  cursor: pointer;
}

.searchable-select-option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.searchable-select-option-text {
  font-size: 0.875rem;
  color: var(--gray-900);
}

.searchable-select-option-subtitle {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-style: italic;
}

.searchable-select-option-count {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.searchable-select-no-results {
  padding: 1rem;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.875rem;
}

/* Pagination Controls */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0;
  padding: 1rem;
}

.pagination-pages {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.pagination-button {
  min-width: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-text-primary);
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.pagination-button:hover:not(:disabled) {
  background: var(--brand-primary-light);
  color: white;
  border-color: var(--brand-primary);
}

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

.pagination-button-active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
  font-weight: 600;
}

.pagination-ellipsis {
  padding: 0 0.5rem;
  color: var(--brand-text-tertiary);
}

.table-loading {
  padding: 3rem;
  text-align: center;
  color: var(--brand-text-secondary);
  font-size: 1rem;
}

/* Search error message */
.search-error {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  color: #dc2626;
  font-size: 0.9rem;
  text-align: center;
}

/* Timeline Modal Styles */
.timeline-link {
  display: inline-block;
  font-size: inherit;
  color: var(--primary-blue);
  text-decoration: none;
  cursor: pointer;
  margin-top: 4px;
  margin-right: 12px;
}

.timeline-link:hover {
  text-decoration: underline;
}

.timeline-modal {
  max-width: 500px;
}

.timeline-doc-title {
  font-weight: 600;
  color: var(--dark-slate);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.95rem;
  line-height: 1.4;
}

.timeline-container {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 24px;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-bottom: var(--spacing-lg);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.marker-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.marker-icon.success {
  background: #10B981;
  color: white;
}

.marker-icon.failed {
  background: #EF4444;
  color: white;
}

.marker-icon.pending {
  background: var(--gray-200);
  color: var(--gray-500);
  border: 2px dashed var(--gray-400);
}

.timeline-connector {
  position: absolute;
  left: -14px;
  top: 24px;
  bottom: -4px;
  width: 2px;
  background: var(--gray-300);
}

.timeline-connector.completed {
  background: #10B981;
}

.timeline-content {
  flex: 1;
  padding-left: var(--spacing-md);
}

.timeline-label {
  font-weight: 600;
  color: var(--dark-slate);
  font-size: 0.9375rem;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-elapsed {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--primary-color);
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.timeline-item.pending .timeline-label {
  color: var(--gray-500);
}

.timeline-total {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
  font-size: 0.875rem;
  color: var(--gray-700);
  text-align: center;
}

.timeline-total strong {
  color: var(--primary-color);
  font-size: 1rem;
}

.timeline-timestamp {
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.timeline-error {
  font-size: 0.8125rem;
  color: #EF4444;
  margin-top: 4px;
  padding: 4px 8px;
  background: #FEE2E2;
  border-radius: var(--radius-sm);
}

.timeline-meta {
  font-size: 0.8125rem;
  color: var(--gray-600);
  margin-top: 2px;
}

/* Logs Modal Styles */
.logs-modal {
  max-width: 900px;
}

.logs-doc-title {
  font-weight: 600;
  color: var(--dark-slate);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.95rem;
  line-height: 1.4;
}

.logs-content {
  max-height: 60vh;
  overflow: auto;
  overflow-x: auto;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.logs-text {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--dark-slate);
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
  margin: 0;
}

.logs-empty {
  text-align: center;
  color: var(--gray-500);
  padding: var(--spacing-lg);
  font-style: italic;
}

.logs-loading {
  text-align: center;
  color: var(--gray-600);
  padding: var(--spacing-lg);
}

.logs-error {
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  color: #991B1B;
  margin-bottom: var(--spacing-md);
}

.logs-error strong {
  display: block;
  margin-bottom: 4px;
}

/* Reprocess button */
.reprocess-btn {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.reprocess-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.reprocess-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.reprocess-btn:disabled {
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
  opacity: 0.7;
  cursor: wait;
}

/* About Page Content */
.about-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--spacing-md) 0;
  display: block;
}

/* Queue Modal Styles */
.queue-modal {
  width: 900px !important;
  max-width: 95vw !important;
}


.queue-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* overflow-x: auto; Removed horizontal scroll */
  /* padding-bottom: 10px; Removed scroll bar padding */
}

.queue-section {
  width: 100%;
  /* Full width */
  background: var(--gray-50);
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
}

.queue-section h4 {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--brand-text-primary);
  font-size: 1rem;
}

.queue-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 500px;
  overflow-y: auto;
}

.queue-task-item {
  background: white;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 0.9em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.queue-task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--brand-primary-dark);
}

.queue-task-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.queue-task-id {
  font-family: monospace;
  font-size: 0.85em;
  color: var(--gray-500);
}

.queue-task-details {
  font-size: 0.85em;
  color: var(--gray-600);
  word-break: break-all;
  background: var(--gray-50);
  padding: 4px;
  border-radius: 3px;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
}

.last-updated {
  font-size: 0.9em;
  color: var(--gray-500);
}

.refresh-btn {
  padding: 8px 20px;
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}

.refresh-btn:hover {
  background: var(--brand-primary-dark);
}

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

/* Refresh Table Button */
.refresh-table-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  height: 48px;
  min-width: 48px;
  border: 1px solid var(--gray-300);
  background: var(--white);
  border-radius: var(--radius-md);
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 8px;
  box-sizing: border-box;
}

.refresh-table-button:hover {
  background: var(--gray-50);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.refresh-table-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Error Message in Modals */
.error-message {
  background-color: #FEE2E2;
  border: 1px solid #F87171;
  color: #B91C1C;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-weight: 500;
}

/* Heatmap tab */
.heatmap-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow: visible;
  min-height: 75vh;
}

.heatmap-panel-with-tab,
.search-panel-with-tab {
  position: relative;
}

.global-filters-column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.global-filters-tab {
  position: absolute;
  left: -32px;
  top: 15px;
  padding: 10px 8px;
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  border-left: none;
  border-radius: 0 12px 12px 0;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.06em;
  transform: rotate(180deg);
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.global-filters-tab-close {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 1.2rem;
  letter-spacing: 0;
  width: 32px;
  padding: 0;
  border-left: 1px solid var(--gray-200);
  border-right: none;
  border-radius: 12px 0 0 12px;
}

.global-filters-tab-close:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.global-filters-tab:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

/* Hide the vertical "More Filters" side tab on mobile — MobileFiltersToggle is used instead.
   This must appear AFTER the base .global-filters-tab definition to win specificity. */
@media (max-width: 1024px) {
  .global-filters-tab {
    display: none;
  }
}

.heatmap-info-link-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--spacing-xs);
}

.heatmap-info-link {
  background: none;
  border: none;
  color: var(--primary-color, #4a6fa5);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.heatmap-info-link:hover {
  text-decoration: underline;
}

.heatmap-sensitivity-info {
  margin-left: 6px;
}

.heatmap-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.heatmap-controls-row {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-end;
  flex-wrap: nowrap;
}

.heatmap-query-tuning-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  color: var(--gray-500);
  padding: 0.25rem 0;
}

.heatmap-query-tuning-toggle:hover {
  color: var(--gray-700);
}

.heatmap-query-tuning-chevron {
  display: inline-block;
  font-size: 0.625rem;
  transition: transform 0.2s ease;
}

.heatmap-query-tuning-chevron.expanded {
  transform: rotate(90deg);
}

.heatmap-query-controls {
  gap: var(--spacing-sm);
  flex-wrap: nowrap;
  margin-top: var(--spacing-xs);
}

.heatmap-query-controls .heatmap-query-input {
  flex: 1;
  min-width: 400px;
  height: 48px;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 1.125rem;
}

.heatmap-action-buttons {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

.heatmap-download-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 48px;
  min-width: 180px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-800);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}

.heatmap-download-button:hover:not(:disabled) {
  border-color: var(--gray-300);
  background: var(--gray-100);
}

.heatmap-download-button:disabled {
  color: var(--gray-500);
  border-color: var(--gray-200);
  background: var(--gray-100);
  cursor: not-allowed;
  opacity: 0.6;
}

.heatmap-download-button:disabled .heatmap-download-icon {
  color: var(--gray-400);
}

.heatmap-download-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #217346;
}

.heatmap-download-icon svg {
  width: 100%;
  height: 100%;
}

.heatmap-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
  flex-shrink: 1;
}

.heatmap-control label {
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 500;
}

.heatmap-select {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0.75rem 2rem 0.75rem 0.5rem;
  font-size: 0.9rem;
  background: var(--white);
  color: var(--gray-800);
  height: 48px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
}

.heatmap-slider {
  margin-left: auto;
}

.heatmap-slider input {
  width: 200px;
  margin-top: 12px;
}

.heatmap-action {
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.heatmap-action:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

.heatmap-error {
  color: var(--color-danger);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
}

.heatmap-model-warning {
  background: #fef3cd;
  border: 1px solid #ffc107;
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: #664d03;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: var(--spacing-sm);
}

.heatmap-empty {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--gray-500);
}

.heatmap-loading {
  padding: var(--spacing-lg);
  text-align: center;
  font-size: 1.1rem;
}

.heatmap-table-wrapper {
  overflow: visible;
  max-width: 100%;
  width: 100%;
  display: block;
}

.heatmap-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  position: relative;
}

.heatmap-query-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.heatmap-query-row input {
  flex: 1;
  min-width: 220px;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 1.125rem;
}

.heatmap-query-row input:focus,
.heatmap-query-row input:not(:placeholder-shown),
.heatmap-row-controls .heatmap-query-input:focus,
.heatmap-row-controls .heatmap-query-input:not(:placeholder-shown) {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(91, 143, 168, 0.15);
}

.heatmap-query-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%235B8FA8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3Cpath d='M12 12L16 16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1.2rem center;
  background-size: 18px 18px;
  padding-left: 3.5rem !important;
  text-indent: 0.2rem;
  box-sizing: border-box;
}

.heatmap-query-input:not(:placeholder-shown) {
  background-image: none;
  padding-left: 1rem !important;
  text-indent: 0;
}

.heatmap-title-input {
  background-image: none;
  padding-left: 1rem !important;
  text-indent: 0;
}

.heatmap-row-label {
  font-weight: 500;
  color: var(--gray-700);
}

.heatmap-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.heatmap-table th,
.heatmap-table td {
  border: 1px solid var(--gray-200);
  padding: 0.6rem;
  text-align: center;
  position: relative;
  overflow: visible;
}

.heatmap-row-header {
  text-align: left;
  min-width: 360px;
  background: var(--gray-50);
}

.heatmap-field-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.heatmap-field-ai-badge {
  display: block;
  width: 100%;
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 400;
  color: var(--gray-400);
  text-align: center;
}

.heatmap-field-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.heatmap-field-filter-button:hover {
  color: var(--gray-700);
  border-color: var(--gray-200);
  background: var(--white);
}

.heatmap-field-filter-button.is-active {
  color: var(--brand-accent);
  border-color: rgba(91, 143, 168, 0.4);
  background: rgba(91, 143, 168, 0.08);
}

.heatmap-field-filter-button svg {
  width: 14px;
  height: 14px;
}

.heatmap-column-label-row th {
  background: var(--gray-50);
}

.heatmap-column-label {
  text-align: center;
  font-weight: 600;
  color: var(--gray-700);
}

.heatmap-column-label-corner {
  min-width: 360px;
}

.heatmap-column-header {
  vertical-align: bottom;
  height: 120px;
  padding: 0.6rem 0.3rem;
  text-align: center;
}

.heatmap-column-header-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
}

.heatmap-query-cell {
  text-align: left;
  background: var(--gray-50);
  min-width: 360px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.heatmap-modal.heatmap-filter-modal {
  width: min(550px, 100%);
}

.heatmap-filter-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.heatmap-filter-select-all {
  margin-bottom: 0.25rem;
}

.heatmap-filter-modal .filter-section-header {
  pointer-events: none;
  cursor: default;
}

.heatmap-filter-modal .filter-section-toggle {
  display: none;
}

.heatmap-filter-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--gray-200);
}

.heatmap-filter-warning {
  font-size: 0.9rem;
  color: var(--warning-700, #b45309);
}

.heatmap-filter-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.heatmap-filter-cancel-button {
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.heatmap-filter-cancel-button:hover:not(:disabled) {
  background: var(--gray-100);
}

.heatmap-row-controls {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  overflow: visible;
  width: 100%;
  min-width: 0;
}

.heatmap-row-input-wrapper {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.heatmap-title-selection-card {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: 0.9rem;
  line-height: 1.3;
}

.heatmap-title-selection-text {
  display: block;
  flex: 1 1 auto;
  flex: 1;
  min-width: 0;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.heatmap-title-selection-card .heatmap-title-selection-clear {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--gray-300) !important;
  background: transparent !important;
  color: var(--gray-500);
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.heatmap-title-selection-card .heatmap-title-selection-clear svg {
  width: 8px;
  height: 8px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.heatmap-title-selection-clear:hover {
  color: var(--gray-700);
}

.heatmap-title-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
}

.heatmap-title-suggestion {
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--gray-800);
}

.heatmap-title-suggestion:hover {
  background: var(--gray-50);
}

.heatmap-title-suggestion-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.heatmap-title-suggestion-subtitle {
  font-size: 0.8rem;
  color: var(--gray-500);
}

.heatmap-row-controls input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
}

.heatmap-row-controls>button {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
}

.heatmap-row-controls>button svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.heatmap-row-controls button:disabled {
  cursor: not-allowed;
  color: var(--gray-400);
}

.heatmap-search-button {
  height: 48px;
  min-width: 228px;
  padding: 0.75rem 1.5rem;
  flex-shrink: 0;
}

/* Heatmap mobile overrides — must appear AFTER base definitions to win specificity */
@media (max-width: 640px) {
  .heatmap-controls-row {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .heatmap-control {
    min-width: 0;
    flex: 1 1 calc(50% - var(--spacing-sm));
  }

  .heatmap-action-buttons {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .heatmap-download-button {
    min-width: 0;
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .heatmap-search-button {
    min-width: 0;
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .heatmap-query-controls .heatmap-query-input {
    min-width: 0;
  }
}

.heatmap-cell {
  cursor: pointer;
  font-weight: 600;
  color: var(--gray-900);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.heatmap-cell.heatmap-cell-disabled {
  cursor: default;
}

.heatmap-cell:hover {
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}

.heatmap-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.heatmap-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: min(1100px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.heatmap-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.heatmap-modal-header h3 {
  margin: 0;
}

.heatmap-modal-subtitle {
  margin-top: 0.25rem;
  color: var(--gray-500);
  font-size: 0.85rem;
}

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

.heatmap-modal-doc-count {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--gray-200);
}

.heatmap-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--gray-500);
}

.heatmap-modal-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.heatmap-modal-content::-webkit-scrollbar {
  width: 8px;
}

.heatmap-modal-content::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 4px;
}

.heatmap-modal-content::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 4px;
}

.heatmap-modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.heatmap-modal-doc-filters {
  position: relative;
  margin: 0.5rem 1.5rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-50);
  overflow: hidden;
  flex-shrink: 0;
}

.heatmap-modal-doc-filters-hint {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--gray-400);
  white-space: nowrap;
}

.heatmap-modal-org-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem 1rem 0.5rem;
}

.heatmap-modal-org-label {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.15s ease;
}

.heatmap-modal-org-label:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.heatmap-modal-org-label.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
}

.heatmap-modal-thumbnails {
  padding: 0.5rem 1rem 1.25rem;
  background: var(--white);
  position: relative;
  display: flex;
  align-items: center;
}

.heatmap-modal-thumbnails-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.75rem;
}

.heatmap-modal-thumbnails-container {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.25rem 0 0.25rem 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.heatmap-modal-thumbnails-container::-webkit-scrollbar {
  display: none;
}

.heatmap-modal-thumbnail {
  flex-shrink: 0;
  width: 196px;
  height: 96px;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
}

.heatmap-modal-thumbnail:hover {
  border: 2px solid var(--brand-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.heatmap-modal-thumbnail.selected {
  border: 2px solid var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(91, 143, 168, 0.2);
}

.heatmap-modal-thumbnail-image-container {
  flex-shrink: 0;
  width: 74px;
  height: 96px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
}

.heatmap-modal-thumbnail-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--white);
  display: block;
}

.heatmap-modal-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--gray-400);
  font-size: 0.65rem;
}

.heatmap-modal-thumbnail-title {
  flex: 1;
  padding: 0.5rem 0.5rem 0.65rem 0.5rem;
  border-left: 1px solid var(--gray-200);
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
}

.heatmap-modal-thumbnail-doc-title {
  font-size: 0.65rem;
  line-height: 1.2;
  color: var(--gray-700);
  word-wrap: break-word;
}

.heatmap-modal-thumbnail-source {
  font-size: 0.6rem;
  line-height: 1.1;
  color: var(--gray-500);
  font-style: italic;
  word-wrap: break-word;
  margin-top: 0.35rem;
  margin-bottom: 0.15rem;
}

.heatmap-modal-filter-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: rgba(91, 143, 168, 0.1);
  border-top: 1px solid var(--gray-200);
  font-size: 0.85rem;
}

.heatmap-modal-filter-text {
  color: var(--gray-700);
}

.heatmap-modal-filter-text strong {
  color: var(--brand-primary);
}

.heatmap-modal-filter-clear {
  background: none;
  border: none;
  color: var(--brand-primary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.heatmap-modal-filter-clear:hover {
  background: rgba(91, 143, 168, 0.15);
}

.heatmap-modal-body {
  padding: 1.5rem;
  flex: 1;
}

.heatmap-modal-results-title {
  margin: 0.5rem 0 1rem 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary, #333);
}

/* ── Search result filters (org labels + document thumbnails) ── */

.search-result-filters {
  position: relative;
  margin-bottom: 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: visible;
}

.search-result-filters-orgs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem 1rem 0.5rem;
}

.search-result-filters-hint {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--gray-400);
  white-space: nowrap;
}

.search-result-filters-org-label {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.15s ease;
}

.search-result-filters-org-label:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.search-result-filters-org-label.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
}

.search-result-filters-thumbnails {
  padding: 0.5rem 1rem 1.25rem;
  background: var(--white);
  position: relative;
  display: flex;
  align-items: center;
}

.search-result-filters-thumbnails-container {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.25rem 0 0.25rem 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.search-result-filters-thumbnails-container::-webkit-scrollbar {
  display: none;
}

.thumbnail-carousel-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--gray-500);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  z-index: 2;
}

.thumbnail-carousel-arrow:hover {
  color: var(--brand-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.thumbnail-carousel-arrow:active {
  transform: scale(0.92);
}

.thumbnail-carousel-arrow-left {
  margin-right: 0.5rem;
}

.thumbnail-carousel-arrow-right {
  margin-left: 0.5rem;
}

.search-result-filters-thumbnail {
  flex-shrink: 0;
  width: 196px;
  height: 96px;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
}

.search-result-filters-thumbnail:hover {
  border: 2px solid var(--brand-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.search-result-filters-thumbnail.selected {
  border: 2px solid var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(91, 143, 168, 0.2);
}

.search-result-filters-thumbnail-image {
  flex-shrink: 0;
  width: 74px;
  height: 96px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
}

.search-result-filters-thumbnail-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--white);
  display: block;
}

.search-result-filters-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--gray-400);
  font-size: 0.65rem;
}

.search-result-filters-thumbnail-info {
  flex: 1;
  padding: 0.5rem 0.5rem 0.65rem 0.5rem;
  border-left: 1px solid var(--gray-200);
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.search-result-filters-thumbnail-title {
  font-size: 0.65rem;
  line-height: 1.2;
  color: var(--gray-700);
  word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.search-result-filters-thumbnail-source {
  font-size: 0.6rem;
  line-height: 1.1;
  color: var(--gray-500);
  font-style: italic;
  word-wrap: break-word;
  margin-top: 0.35rem;
  margin-bottom: 0.15rem;
}

.search-result-filters-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: rgba(91, 143, 168, 0.1);
  border-top: 1px solid var(--gray-200);
  font-size: 0.85rem;
}

.search-result-filters-indicator-text {
  color: var(--gray-700);
}

.search-result-filters-indicator-text strong {
  color: var(--brand-primary);
}

.search-result-filters-clear {
  background: none;
  border: none;
  color: var(--brand-primary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.search-result-filters-clear:hover {
  background: rgba(91, 143, 168, 0.15);
}

/* ── Modal mobile styles ── */

@media (max-width: 640px) {
  /* Hide thumbnail carousels on mobile */
  .heatmap-modal-thumbnails,
  .search-result-filters-thumbnails {
    display: none;
  }

  .heatmap-modal-doc-filters-hint {
    display: none;
  }

  /* Heatmap modal full-screen on mobile */
  .heatmap-modal-overlay {
    padding: 0;
  }

  .heatmap-modal {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }

  .heatmap-modal-doc-filters {
    margin: 0.5rem 0.75rem;
  }

  .heatmap-modal-org-labels {
    padding: 0.5rem 0.75rem 0.25rem;
  }

  .heatmap-modal-body {
    padding: 0.75rem;
  }

  .heatmap-modal-header {
    padding: 0.75rem;
  }

  /* Floating close button for heatmap modal */
  .heatmap-modal-mobile-close {
    display: block !important;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 0.75rem 1.5rem;
    background: var(--accent-coral);
    color: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    transition: all 0.2s;
  }

  .heatmap-modal-mobile-close:hover {
    background: var(--accent-coral-dark);
  }

  .heatmap-modal-mobile-close:active {
    transform: translateY(0);
  }
}

/* Hide floating close button on desktop */
.heatmap-modal-mobile-close {
  display: none;
}

/* Heatmap rating bar — bottom-right of heatmap grid */
.heatmap-rating-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}
.heatmap-rating-label {
  font-size: 0.82rem;
  color: #666;
}

/* Heatmap cell-counts table (admin panels) */
.heatmap-counts-table {
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 4px;
  min-width: 200px;
}
.heatmap-counts-table th,
.heatmap-counts-table td {
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  text-align: center;
  white-space: nowrap;
}
.heatmap-counts-table th {
  background: #f7fafc;
  font-weight: 600;
  color: #4a5568;
}
.heatmap-counts-table td.heatmap-counts-row-label {
  text-align: left;
  font-weight: 500;
  background: #f7fafc;
  color: #2d3748;
}
.heatmap-counts-table td.zero {
  color: #cbd5e0;
}

/* Timing bar for activity/rating detail panels */
.activity-timing-bar {
  display: flex;
  gap: 1rem;
  padding: 0.35rem 0 0.45rem;
  font-size: 0.82rem;
  color: #555;
}
.activity-timing-bar span {
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  background: #f0f4f8;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.78rem;
}

/* Drilldown tree nested list */
.drilldown-tree-list {
  list-style: none;
  padding-left: 1.2rem;
  margin: 0.25rem 0 0;
}
.drilldown-tree-list li {
  font-size: 0.82rem;
  color: #444;
  padding: 0.1rem 0;
}
.drilldown-tree-list li::before {
  content: '↳ ';
  color: #999;
}

/* ======================================================================
   User Module — Auth, Profile, Admin
   ====================================================================== */

/* User menu trigger (avatar circle) */
.user-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}

.user-menu-trigger:hover {
  background: var(--brand-primary-dark);
}

.user-menu-trigger-anonymous {
  background: transparent;
  color: var(--gray-500);
}

.user-menu-trigger-anonymous:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

/* User dropdown menu */
.user-menu-dropdown {
  min-width: 200px;
  max-width: 300px;
  right: 0;
}

.user-menu-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 100%;
  overflow: hidden;
}

.user-menu-header strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-email {
  font-size: 0.8rem;
  color: var(--gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-logout {
  color: var(--color-error) !important;
}

/* Login / Register Modal */
.login-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.login-modal {
  max-width: 420px;
  width: 90vw;
}

.login-branding {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.25rem 1rem 0.75rem;
}

.login-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.login-brand-name {
  font-size: 1.5rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: var(--brand-primary-dark);
}

.login-tabs {
  display: flex;
  gap: 0;
  flex: 1;
}

.login-tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-500);
  transition: all 0.2s;
}

.login-tab:hover {
  color: var(--brand-primary);
}

.login-tab-active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

/* Auth form styles */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-600);
}

.form-group input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(91, 143, 168, 0.15);
}

.form-group input:disabled {
  background: var(--gray-100);
  color: var(--gray-500);
}

.form-group-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.form-group-row > .form-group {
  flex: 1;
  margin-bottom: 0;
}

.auth-submit {
  width: 100%;
  padding: 0.65rem;
  background: var(--brand-primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s;
  margin-top: 0.5rem;
}

.auth-submit:hover:not(:disabled) {
  background: var(--brand-primary-dark);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-error {
  padding: 0.6rem 0.75rem;
  background: #fef2f2;
  color: var(--color-error);
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-error-dismiss {
  background: none;
  border: none;
  color: var(--color-error);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 0.25rem;
}

.auth-success {
  padding: 0.6rem 0.75rem;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.auth-info {
  padding: 0.6rem 0.75rem;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.auth-callout {
  text-align: center;
  font-size: 0.88rem;
  color: var(--gray-600);
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 1.25rem 0;
  gap: 0.75rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--gray-200);
}

.auth-divider span {
  font-size: 0.8rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-legal-text {
  font-size: 0.78rem;
  color: var(--gray-500);
  text-align: center;
  margin: 0.75rem 0 0.25rem;
  line-height: 1.4;
}

.auth-legal-text a {
  color: var(--primary-blue);
  text-decoration: underline;
}

/* OAuth buttons */
.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.oauth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.oauth-button:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

/* Forgot / Reset password */
.auth-forgot-link {
  text-align: right;
  margin: -0.5rem 0 0.25rem;
  font-size: 0.82rem;
}

.auth-link-button {
  background: none;
  border: none;
  color: var(--primary-blue);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}

.auth-link-button:hover {
  color: var(--brand-primary-dark);
}

.auth-forgot-back {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.85rem;
}

/* Profile modal */
.profile-modal {
  max-width: 500px;
  width: 90vw;
}

.profile-badges {
  display: flex;
  gap: 0.5rem;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-success {
  background: #dcfce7;
  color: #166534;
}

.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.badge-admin {
  background: #dbeafe;
  color: #1e40af;
}

.badge-default {
  background: var(--gray-100);
  color: var(--gray-600);
  margin-left: 0.5rem;
  font-size: 0.7rem;
}

/* Account danger zone (profile modal) */
.account-danger-zone {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
}

.account-danger-zone h4 {
  font-size: 0.85rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 0.75rem;
}

.btn-danger-outline {
  background: transparent;
  color: #dc2626;
  border: 1px solid #dc2626;
  border-radius: var(--radius-md);
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-danger-outline:hover {
  background: #fef2f2;
}

.delete-confirm-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: 1rem;
}

.delete-confirm-box p {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #991b1b;
  line-height: 1.5;
}

.delete-confirm-box label {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-700);
  margin-bottom: 0.4rem;
}

.delete-confirm-box input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

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

.btn-danger {
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

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

.btn-cancel {
  background: transparent;
  color: var(--gray-600);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.btn-cancel:hover {
  background: var(--gray-50);
}

/* Saved Research */
.profile-research {
  margin-top: 0.25rem;
}

.saved-research-row {
  cursor: pointer;
  transition: background 0.15s;
}

.saved-research-row:hover {
  background: var(--gray-50);
}

.saved-research-row td {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-danger-sm {
  background: transparent;
  color: #dc2626;
  border: 1px solid #dc2626;
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-danger-sm:hover:not(:disabled) {
  background: #dc2626;
  color: #fff;
}

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

/* Global summary indicator in tree view */
.global-summary-in-tree {
  margin: 0 0 4px;
}

.global-summary-in-tree-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: none;
  border: 1px solid var(--brand-primary, #2563eb);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-primary, #2563eb);
}

.global-summary-in-tree-toggle:hover {
  background: rgba(37, 99, 235, 0.08);
}

.drilldown-graph-toggle.save-success {
  color: #16a34a;
}

.drilldown-graph-toggle.save-error {
  color: #dc2626;
}

/* Admin panel */
.admin-panel {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.admin-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--brand-background);
  padding-bottom: 0;
}

.admin-panel h2 {
  margin-bottom: var(--spacing-lg);
  font-size: 1.3rem;
  color: var(--gray-800);
}

.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: var(--spacing-xl);
}

.admin-tab {
  padding: 0.6rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-500);
  transition: all 0.2s;
}

.admin-tab:hover {
  color: var(--gray-700);
}

.admin-tab-active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

.admin-tab-content {
  min-height: 400px;
}

.admin-section {
  margin-bottom: var(--spacing-2xl);
}

.admin-section h3 {
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
  color: var(--gray-700);
}

.admin-section h4 {
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  font-size: 0.95rem;
  color: var(--gray-600);
}

.admin-section h4:first-child {
  margin-top: 0;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th,
.admin-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}

.admin-table th {
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-50);
}

.admin-table tr:hover {
  background: var(--gray-50);
}

.admin-row-selected {
  background: #eff6ff !important;
}

/* Groups layout — two-column grid */
.admin-groups-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

.admin-groups-list,
.admin-group-detail {
  min-width: 0; /* prevent grid blowout */
}

.admin-group-detail {
  padding: var(--spacing-lg);
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}

.admin-inline-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: var(--spacing-lg);
}

.admin-inline-form input,
.admin-inline-form select {
  flex: 1;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  background: var(--white);
}

.admin-inline-form input:focus,
.admin-inline-form select:focus {
  outline: none;
  border-color: var(--brand-primary);
}

.admin-select {
  flex: 1;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  background: var(--white);
  cursor: pointer;
}

.admin-select:focus {
  outline: none;
  border-color: var(--brand-primary);
}

.admin-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--spacing-lg);
}

.admin-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.admin-loading {
  padding: 2rem;
  text-align: center;
  color: var(--gray-500);
}

.admin-group-settings {
  padding: var(--spacing-lg);
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}

.admin-group-settings-description {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0 0 var(--spacing-lg) 0;
}

.admin-group-settings-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.admin-group-settings-columns > .filter-section {
  flex: 1 1 280px;
  margin-bottom: 0;
  border-bottom: none;
}

.admin-group-settings > .admin-inline-form {
  margin-top: var(--spacing-lg);
}

.admin-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--spacing-md);
}

.admin-group-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-300);
  background: var(--white);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gray-700);
  transition: all 0.15s ease;
}

.admin-group-chip:hover {
  border-color: var(--primary);
  background: var(--blue-50, #eff6ff);
}

.admin-group-chip.selected {
  border-color: var(--primary);
  background: var(--blue-50, #eff6ff);
  color: var(--primary);
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  margin-left: 0.4rem;
  vertical-align: middle;
}

.badge-default {
  background: #dbeafe;
  color: #1e40af;
}

.btn-sm {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-sm:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.btn-danger {
  color: var(--color-error);
  border-color: #fecaca;
}

.btn-danger:hover {
  background: #fef2f2;
  border-color: var(--color-error);
}

.btn-primary {
  background: var(--primary-blue);
  color: #fff;
  border-color: var(--primary-blue);
}

.btn-primary:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #fff;
}

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

.text-muted {
  color: var(--gray-500);
  font-size: 0.85rem;
}

/* Confirmation modal */
.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.confirm-modal h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: var(--gray-800);
}

.confirm-modal p {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.5;
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Admin download button (consistent with heatmap download) */
.admin-download-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  color: var(--gray-700);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.admin-download-button:hover:not(:disabled) {
  border-color: var(--gray-400);
  background: var(--gray-100);
}

.admin-download-button:disabled {
  color: var(--gray-500);
  border-color: var(--gray-200);
  background: var(--gray-100);
  cursor: not-allowed;
  opacity: 0.6;
}

.admin-download-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #217346;
}

.admin-download-icon svg {
  width: 100%;
  height: 100%;
}

.admin-download-button:disabled .admin-download-icon {
  color: var(--gray-400);
}

/* =============================================
   Admin Expandable Row / Detail Panel Styles
   ============================================= */

/* Rows that can be expanded (have detail data) */
.admin-expandable-row {
  cursor: pointer;
  transition: background 0.15s;
}

.admin-expandable-row:hover {
  background: #f0f7ff !important;
}

/* Parent row when expanded — highlight to show connection */
.admin-expanded-parent {
  background: #e8f0fe !important;
  border-left: 3px solid var(--brand-primary);
}

.admin-expanded-parent:hover {
  background: #dce8f8 !important;
}

/* Expand/collapse chevron icon */
.admin-expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  width: 24px;
  height: 24px;
  color: var(--brand-primary);
  transition: transform 0.2s ease;
}

.admin-expand-icon.expanded {
  transform: rotate(0deg);
}

/* The detail row below the parent */
.admin-expanded-detail {
  background: #fafcff !important;
}

.admin-expanded-detail:hover {
  background: #fafcff !important;
}

/* The cell inside the detail row */
.admin-expanded-cell {
  padding: 1rem 1.25rem 1rem 2.5rem !important;
  border-left: 3px solid var(--brand-primary);
  border-bottom: 2px solid var(--brand-border);
}

/* Section labels inside expanded detail */
.admin-context-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--brand-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Search result card inside expanded detail */
.admin-result-card {
  background: #fff;
  border: 1px solid var(--brand-border-light);
  border-radius: 6px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.admin-result-card:hover {
  border-color: var(--brand-primary-light);
}

/* Clickable title link inside result card */
.admin-result-title-link {
  color: #1a73e8;
  text-decoration: none;
  font-weight: 600;
}

.admin-result-title-link:hover {
  text-decoration: underline;
  color: #0d47a1;
}

/* Meta info line (doc id, chunk id, page, score) */
.admin-result-meta {
  font-size: 0.78rem;
  color: var(--brand-text-tertiary);
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.admin-meta-sep {
  color: var(--brand-border);
  margin: 0 2px;
}

/* Chunk text block inside result card */
.admin-result-chunk-text {
  font-size: 0.82rem;
  color: var(--brand-text-primary);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  padding: 6px 8px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* Show more/less button for result list */
.admin-show-more-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: var(--brand-primary);
  background: none;
  border: 1px solid var(--brand-primary-light);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.admin-show-more-btn:hover {
  background: rgba(91, 143, 168, 0.08);
}

/* AI Summary block inside expanded detail */
.admin-summary-block {
  background: #fff;
  border: 1px solid var(--brand-border-light);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--brand-text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Citation badge — small inline blue pill */
.admin-citation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #1a73e8;
  background: #e8f0fe;
  border-radius: 9px;
  margin: 0 1px;
  vertical-align: middle;
  line-height: 1;
}

/* Clickable citation badge — cursor + hover effect */
a.admin-citation-clickable {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

a.admin-citation-clickable:hover {
  background: #d2e3fc;
  color: #174ea6;
}

/* References section inside admin summary */
.admin-references-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--brand-border-light, #e5e7eb);
}

.admin-references-section h4 {
  font-size: 0.82rem;
  font-weight: 600;
  color: #555;
  margin: 0 0 0.35rem 0;
}

.admin-ref-group {
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #666;
}

.admin-ref-link {
  text-decoration: none;
  color: #666;
}

.admin-ref-link:hover {
  color: #1a73e8;
}

/* Context fields key-value grid */
.admin-context-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.admin-context-key {
  font-weight: 600;
  color: var(--brand-text-secondary);
  text-transform: capitalize;
  white-space: nowrap;
}

.admin-context-value {
  color: var(--brand-text-primary);
  word-break: break-word;
}

/* Filters block inside expanded activity detail */
.admin-filters-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 0.82rem;
  background: #fff;
  border: 1px solid var(--brand-border-light);
  border-radius: 6px;
  padding: 10px 14px;
}

.admin-filter-key {
  font-weight: 600;
  color: var(--brand-text-secondary);
  text-transform: capitalize;
  white-space: nowrap;
}

.admin-filter-value {
  color: var(--brand-text-primary);
  word-break: break-word;
}

/* LangSmith trace link */
.admin-langsmith-link {
  color: #1a73e8;
  text-decoration: none;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-langsmith-link:hover {
  text-decoration: underline;
  color: #0d47a1;
}

/* No data placeholder */
.admin-no-data {
  color: var(--brand-text-tertiary);
  font-size: 0.82rem;
  font-style: italic;
  padding: 8px 0;
}

/* Sortable table header styling */
.admin-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.admin-table th.sortable:hover {
  background: #e8edf2;
}

.admin-table th .sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7rem;
  color: var(--brand-primary);
}

/* Star Rating Component */
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  user-select: none;
}

.star-rating.read-only {
  cursor: default;
}

.star-rating-star {
  color: #d0d0d0;
  transition: color 0.15s ease;
  line-height: 1;
}

.star-rating-star.filled {
  color: #d4a017;
}

.star-rating-star.hovered {
  color: #e8b92a;
}

.star-rating:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Rating Modal */
.rating-modal-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 1rem;
}

.rating-modal-stars .star-rating-star {
  font-size: 28px;
  cursor: pointer;
}

.rating-modal-comment {
  width: 100%;
  min-height: 80px;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  resize: vertical;
  font-family: inherit;
}

.rating-modal-comment:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15);
}

.rating-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* AI Summary rating inline */
.ai-summary-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0;
}

.ai-summary-rating .rating-label {
  font-size: 0.8rem;
  color: var(--gray-500);
}

/* ============================
   Research Assistant Styles
   ============================ */

.assistant-container {
  display: flex;
  height: calc(100vh - 180px);
  min-height: 400px;
  position: relative;
  background: var(--brand-background);
}

.assistant-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* Welcome screen */
.assistant-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--brand-text-secondary);
}

.assistant-welcome-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.assistant-welcome h2 {
  margin: 0 0 0.5rem;
  color: var(--brand-text-primary);
  font-size: 1.5rem;
}

.assistant-welcome p {
  max-width: 500px;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.assistant-welcome-examples {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 500px;
  width: 100%;
}

.assistant-examples-label {
  font-size: 0.8rem;
  color: var(--brand-text-tertiary);
  margin-bottom: -0.15rem;
}

.assistant-example-btn {
  padding: 0.75rem 1rem;
  border: 1px solid var(--brand-border-light);
  border-radius: 8px;
  background: var(--brand-background);
  color: var(--brand-text-secondary);
  font-size: 0.875rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.assistant-example-btn:hover {
  background: white;
  border-color: var(--brand-primary-light);
  color: var(--brand-primary-dark);
}

/* Message list */
.chat-message-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-border) transparent;
}

.chat-message-list::-webkit-scrollbar {
  width: 6px;
}

.chat-message-list::-webkit-scrollbar-track {
  background: transparent;
}

.chat-message-list::-webkit-scrollbar-thumb {
  background-color: var(--brand-border);
  border-radius: 3px;
}

.chat-message-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand-text-secondary);
}

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

.chat-message-user {
  align-self: flex-end;
  max-width: 70%;
}

.chat-message-assistant {
  align-self: flex-start;
  max-width: 100%;
}

.chat-bubble-user {
  background: var(--brand-primary);
  color: white;
  padding: 0.65rem 1rem;
  border-radius: 18px 18px 4px 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  word-break: break-word;
}

/* Assistant response: matches AI summary typography */
.assistant-response {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--brand-text-primary);
  word-break: break-word;
  padding: 0.25rem 0;
}

.assistant-response h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--brand-text-primary);
}

.assistant-response h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  color: var(--brand-text-primary);
}

.assistant-response p {
  margin: 0.5rem 0;
}

.assistant-response ul, .assistant-response ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.assistant-response li {
  margin-bottom: 0.25rem;
}

.assistant-response code {
  background: #f1f5f9;
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
  font-size: 0.85em;
}

.assistant-response blockquote {
  border-left: 3px solid var(--brand-primary-light);
  margin: 0.5rem 0;
  padding: 0.25rem 0.75rem;
  color: var(--brand-text-secondary);
}

/* Sources */
.chat-message-sources {
  margin-top: 0.5rem;
}

.chat-sources-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-text-tertiary);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chat-sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.source-chip-container {
  position: relative;
}

.source-chip {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: #f1f5f9;
  border: 1px solid var(--brand-border-light);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--brand-primary-dark);
  cursor: pointer;
  transition: all 0.15s ease;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-chip:hover {
  background: rgba(91, 143, 168, 0.08);
  border-color: var(--brand-primary-light);
}

.source-preview {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 100;
  background: white;
  border: 1px solid var(--brand-border-light);
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.8rem;
}

.source-preview-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--brand-text-primary);
}

.source-preview-text {
  color: var(--brand-text-secondary);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.source-preview-page,
.source-preview-score {
  font-size: 0.7rem;
  color: var(--brand-text-tertiary);
}

/* Inline citations */
.citation-group {
  white-space: nowrap;
}

.inline-citation {
  display: inline;
  background: none;
  border: none;
  color: var(--primary-blue);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 1px;
  vertical-align: super;
  line-height: 1;
}

.inline-citation:hover {
  color: var(--brand-primary-dark);
  text-decoration: underline;
}

/* Footer row: references (left) + rating stars (right) */
.chat-message-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--gray-200);
}

/* Remove duplicate border when references are inside the footer */
.chat-message-footer .ai-summary-references {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Align stars with the references toggle button */
.chat-message-footer .star-rating {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* Collapsible references section */
.assistant-references {
  margin-top: 0.75rem;
  border-top: 1px solid var(--brand-border-light);
  padding-top: 0.5rem;
}

.assistant-refs-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-text-secondary);
  padding: 0.25rem 0;
  transition: color 0.15s ease;
}

.assistant-refs-toggle:hover {
  color: var(--brand-text-primary);
}

.assistant-refs-toggle-icon {
  font-size: 0.7rem;
  line-height: 1;
}

.assistant-refs-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-left: 0.25rem;
}

.assistant-ref-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--brand-text-secondary);
  line-height: 1.5;
}

.assistant-ref-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-ref-citations {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
}

.ref-citation {
  font-size: 0.7rem;
}

.assistant-ref-page {
  font-size: 0.7rem;
  color: var(--brand-text-tertiary);
  flex-shrink: 0;
}

/* Chat input */
.chat-input-container {
  padding: 0.75rem 1rem 0.5rem;
  background: transparent;
}

.chat-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  border: 2px solid var(--brand-border);
  border-radius: 16px;
  padding: 0.625rem 0.625rem 0.625rem 1rem;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-input-wrapper:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(91, 143, 168, 0.15);
}

.chat-input-textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.3rem 0;
  font-family: inherit;
  max-height: 200px;
  color: var(--brand-text-primary);
}

.chat-input-textarea::placeholder {
  color: var(--brand-text-tertiary);
}

.chat-input-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.chat-input-send-btn,
.chat-input-stop-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.chat-input-send-btn {
  background: var(--brand-primary);
  color: white;
}

.chat-input-send-btn:hover:not(:disabled) {
  background: var(--brand-primary-dark);
}

.chat-input-send-btn:disabled {
  background: var(--brand-border);
  color: var(--brand-text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

.chat-input-stop-btn {
  background: var(--brand-text-secondary);
  color: white;
}

.chat-input-stop-btn:hover {
  background: var(--brand-accent);
}

/* Row below input: chat history (left) + disclaimer (right) */
.chat-input-below {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.3rem;
  padding: 0 0.25rem;
  min-height: 1.2rem;
}

.chat-input-hint {
  font-size: 0.7rem;
  color: var(--brand-text-tertiary);
}

.chat-footer-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.chat-history-toggle {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: var(--brand-text-tertiary);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.chat-history-toggle:hover {
  color: var(--brand-primary);
  background: rgba(91, 143, 168, 0.06);
}

.deep-research-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--brand-text-tertiary);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  white-space: nowrap;
}

.deep-research-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.deep-research-toggle input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Status container for streaming phases */
.assistant-status-container {
  padding: 0.5rem 0;
}

/* Agent status */
.agent-status {
  padding: 0.5rem 0;
}

.agent-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brand-primary);
  font-size: 0.9rem;
}

.agent-status-label {
  font-style: italic;
}

.agent-status-dots .dot {
  animation: dotPulse 1.4s infinite both;
  font-weight: bold;
}

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

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

/* Search progress detail shown during searching phase */
.agent-status-detail {
  margin-top: 0.4rem;
  padding-left: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.agent-status-query {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  padding: 0.15rem 0;
}

.agent-status-query-text {
  color: var(--brand-text-secondary);
  font-style: italic;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-status-query-count {
  color: var(--brand-text-tertiary);
  font-size: 0.7rem;
  white-space: nowrap;
}

.agent-status-query-pending .agent-status-query-count {
  color: var(--brand-primary);
}

.agent-status-pending-dots .dot {
  animation: dotPulse 1.2s infinite;
  font-weight: bold;
}

.agent-status-pending-dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.agent-status-pending-dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

.agent-status-synthesizing {
  font-size: 0.78rem;
  margin-top: 0.25rem;
  padding-left: 0.25rem;
}

.agent-status-synthesizing .agent-status-label {
  color: var(--brand-text-secondary);
  font-style: italic;
}

.agent-status-queries {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

.agent-status-query-chip {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: rgba(91, 143, 168, 0.08);
  border: 1px solid rgba(91, 143, 168, 0.25);
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--brand-primary-dark);
  font-style: italic;
}

/* Tool call panel */
.tool-call-panel {
  margin-bottom: 0.5rem;
}

.tool-call-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  padding: 0.2rem 0;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--brand-text-tertiary);
  transition: color 0.15s ease;
  text-align: left;
}

.tool-call-panel-toggle:hover {
  color: var(--brand-text-secondary);
}

.tool-call-panel-icon {
  font-size: 0.6rem;
  line-height: 1;
}

.tool-call-panel-summary {
  font-weight: 500;
}

.tool-call-panel-code {
  margin-top: 0.375rem;
}

.tool-call-code-block {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--brand-background);
  border-radius: 6px;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--brand-text-secondary);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.tool-call-code-entry {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.tool-call-code-query {
  color: var(--brand-text-primary);
  font-style: italic;
}

.tool-call-code-result {
  color: var(--brand-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.tool-call-code-separator {
  border-top: 1px solid var(--brand-border-light);
  margin: 0.35rem 0;
}

.tool-call-code-param {
  color: var(--brand-text-tertiary);
  font-size: 0.68rem;
}

/* Expandable query rows */
.tool-call-query-row {
  margin-bottom: 0.125rem;
}

.tool-call-code-entry--expandable {
  cursor: pointer;
  border-radius: 3px;
  padding: 0.125rem 0.25rem;
  margin: 0 -0.25rem;
  transition: background 0.1s ease;
}

.tool-call-code-entry--expandable:hover {
  background: rgba(0, 0, 0, 0.04);
}

.tool-call-expand-icon {
  font-size: 0.5rem;
  margin-right: 0.35rem;
  color: var(--brand-text-tertiary);
  flex-shrink: 0;
}

.tool-call-results-cards {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.35rem 0 0.35rem 1.1rem;
}

.tool-call-result-card {
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--brand-border-light);
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.tool-call-result-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--brand-text-primary);
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-call-result-card--clickable {
  cursor: pointer;
  transition: background 0.1s ease;
}

.tool-call-result-card--clickable:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--brand-border);
}

.tool-call-result-text {
  font-size: 0.65rem;
  color: var(--brand-text-tertiary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: normal;
}

.tool-call-result-text--expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Thread history modal */
.thread-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}

.thread-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  width: 520px;
  max-width: 90vw;
  max-height: 70vh;
  overflow: hidden;
  animation: modalSlideUp 0.2s ease;
}

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

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

.thread-sidebar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.thread-sidebar-open {
  /* modal mode */
}

.thread-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0.75rem;
  border-bottom: 1px solid var(--brand-border-light);
}

.thread-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.thread-sidebar-close {
  background: none;
  border: none;
  color: var(--brand-text-tertiary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.thread-sidebar-close:hover {
  background: #f1f5f9;
  color: var(--brand-text-secondary);
}

.thread-sidebar-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-text-secondary);
}

.thread-new-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  background: white;
  color: var(--brand-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.thread-new-btn:hover {
  background: #f1f5f9;
  border-color: var(--brand-text-tertiary);
}

/* Search box in thread modal */
.thread-search {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--brand-border-light);
}

.thread-search-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--brand-text-secondary);
  background: var(--brand-bg-secondary, #f8fafc);
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.thread-search-input:focus {
  border-color: var(--brand-primary);
}

.thread-search-input::placeholder {
  color: var(--brand-text-tertiary);
}

.thread-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-border) transparent;
}

.thread-list::-webkit-scrollbar {
  width: 4px;
}

.thread-list::-webkit-scrollbar-track {
  background: transparent;
}

.thread-list::-webkit-scrollbar-thumb {
  background-color: var(--brand-border);
  border-radius: 2px;
}

.thread-list-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--brand-text-tertiary);
  font-size: 0.8rem;
  line-height: 1.5;
}

.thread-item {
  padding: 0.6rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  margin-bottom: 0.15rem;
  transition: background 0.15s ease;
}

.thread-item:hover {
  background: #f1f5f9;
}

.thread-item-active {
  background: rgba(91, 143, 168, 0.08);
}

.thread-item-active:hover {
  background: rgba(91, 143, 168, 0.08);
}

.thread-item-title {
  font-size: 0.8rem;
  color: var(--brand-text-secondary);
  line-height: 1.4;
  margin-bottom: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.thread-item-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: var(--brand-text-tertiary);
}

.thread-item-actions {
  position: absolute;
  top: 0.4rem;
  right: 0.3rem;
  display: flex;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.thread-item:hover .thread-item-actions {
  opacity: 1;
}

.thread-item-action {
  background: none;
  border: none;
  color: var(--brand-text-tertiary);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thread-item-rename:hover {
  background: rgba(91, 143, 168, 0.1);
  color: var(--brand-primary);
}

.thread-item-delete:hover {
  background: var(--danger-50, #fef2f2);
  color: var(--danger-500, #ef4444);
}

.thread-item-rename-input {
  width: 100%;
  font-size: 0.8rem;
  color: var(--brand-text-secondary);
  line-height: 1.4;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--brand-primary);
  border-radius: 4px;
  background: white;
  outline: none;
  box-sizing: border-box;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .assistant-container {
    height: calc(100vh - 160px);
  }

  .thread-modal {
    width: 90vw;
  }

  .chat-message {
    max-width: 95%;
  }

  .assistant-welcome-examples {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .chat-input-hint {
    display: none;
  }

  .source-preview {
    width: 250px;
  }

  .assistant-welcome h2 {
    font-size: 1.25rem;
  }

  .assistant-welcome-icon {
    font-size: 2rem;
  }
}
