/* Aavishkar.ai Auth Screen - Minimal Scientific Aesthetic */
.auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #fafafa;
  padding: 20px;
  position: relative;
}

/* Subtle purple accent - top left corner only */
.auth-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top left, rgba(158, 35, 163, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.auth-container {
  width: 100%;
  max-width: 400px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  color: #202124;
  position: relative;
}

/* Dark mode support */
[data-theme="dark"] .auth-screen {
  background: #1a1a1a;
}

[data-theme="dark"] .auth-screen::before {
  background: radial-gradient(circle at top left, rgba(158, 35, 163, 0.08) 0%, transparent 70%);
}

[data-theme="dark"] .auth-container {
  background: #2a2a2a;
  border-color: #3a3a3a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .auth-header h1,
[data-theme="dark"] .auth-form h2,
[data-theme="dark"] .beta-features h3,
[data-theme="dark"] .beta-features li span {
  color: #e0e0e0;
}

[data-theme="dark"] .auth-header p,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .auth-toggle,
[data-theme="dark"] .beta-features li {
  color: #9aa0a6;
}

[data-theme="dark"] .form-group input {
  background: #1a1a1a;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

[data-theme="dark"] .form-group input:hover {
  border-color: #9e23a3;
}

[data-theme="dark"] .form-group input:focus {
  background: #1a1a1a;
  border-color: #9e23a3;
}

[data-theme="dark"] .beta-features {
  border-top-color: #3a3a3a;
}

[data-theme="dark"] .demo-login-section {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.08), rgba(111, 45, 189, 0.06));
  border-color: rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .error-message {
  background: rgba(217, 48, 37, 0.1);
  border-color: rgba(217, 48, 37, 0.3);
  color: #f28b82;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.auth-header .logo-text {
  font-family: 'dinmedium', 'Inter', system-ui, sans-serif;
  font-size: 42px;
  font-weight: 700;
  background: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.auth-header .beta-badge {
  background: #9e23a3;
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-header h1 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #202124;
  letter-spacing: -0.5px;
  line-height: 1.3;
}

.auth-header p {
  font-size: 14px;
  color: #5f6368;
  line-height: 1.5;
  font-weight: 400;
  max-width: 320px;
  margin: 0 auto;
}

/* Auth Form */
.auth-form {
  margin-bottom: 24px;
}

.auth-form h2 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 24px;
  text-align: left;
  color: #202124;
}

.error-message {
  padding: 12px 16px;
  margin-bottom: 20px;
  background: #fce8e6;
  border: 1px solid #f28b82;
  border-radius: 8px;
  color: #d93025;
  font-size: 13px;
  font-weight: 400;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #5f6368;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #dadce0;
  background: white;
  color: #202124;
  font-size: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Inter', system-ui, sans-serif;
}

.form-group input::placeholder {
  color: #80868b;
}

.form-group input:hover {
  border-color: #9e23a3;
}

.form-group input:focus {
  outline: none;
  border-color: #9e23a3;
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.1);
  background: white;
}

.auth-submit-button {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, #6f2dbd 0%, #9e23a3 45%, #6f2dbd 100%);
  color: white;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(158, 35, 163, 0.3);
}

.auth-submit-button:hover:not(:disabled) {
  background: linear-gradient(145deg, #9e23a3 0%, #6f2dbd 45%, #9e23a3 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(158, 35, 163, 0.4);
}

.auth-submit-button:disabled {
  background: #dadce0;
  color: #80868b;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.auth-toggle {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: #5f6368;
}

.toggle-button {
  background: none;
  border: none;
  color: #9e23a3;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: color 0.2s ease;
}

.toggle-button:hover {
  color: #6f2dbd;
  text-decoration: underline;
}

/* Demo Login Section - Minimal with Purple Accent */
.demo-login-section {
  margin: 32px 0 24px 0;
  padding: 0;
}

.demo-login-section > p:first-child {
  font-size: 13px;
  font-weight: 500;
  color: #5f6368;
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}

.demo-login-button {
  flex: 1;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  background: white;
  color: #9e23a3;
  border: 1.5px solid #9e23a3;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Inter', system-ui, sans-serif;
}

.demo-login-button:hover:not(:disabled) {
  background: #9e23a3;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(158, 35, 163, 0.25);
}

.demo-login-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

[data-theme="dark"] .demo-login-button {
  background: transparent;
  color: #c87fd0;
  border-color: #9e23a3;
}

[data-theme="dark"] .demo-login-button:hover:not(:disabled) {
  background: #9e23a3;
  color: white;
}

/* Beta Features - Ultra Minimal */
.beta-features {
  padding-top: 20px;
  margin-top: 24px;
}

[data-theme="dark"] .beta-features {
  border-top-color: #3a3a3a;
}

/* Loading Spinner in Button */
.auth-submit-button .loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Responsive for mobile */
@media (max-width: 480px) {
  .auth-container {
    padding: 32px 24px;
  }
  
  .auth-header .logo-text {
    font-size: 36px;
  }
  
  .auth-header h1 {
    font-size: 20px;
  }
  
  .demo-login-button {
    font-size: 13px;
    padding: 10px 16px;
  }
}
/* ===== BETA KNOWLEDGE PANE - EVOLVED FROM ALPHA PATTERNS ===== */

.knowledge-pane {
  --pane-header-height: 64px;
  --pane-header-padding: 8px 16px;
  --pane-header-gap: clamp(6px, 1vw, 12px);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh; /* Prevent overflow */
  width: 100%;
  max-width: 100%; /* Prevent horizontal overflow */
  background: var(--md-surface);
  position: relative;
  overflow: hidden;
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== PANE HEADER (Material Design) ===== */

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pane-header-padding);
  height: var(--pane-header-height);
  min-height: var(--pane-header-height);
  max-height: var(--pane-header-height);
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.08) 0%, rgba(111, 45, 189, 0.05) 100%);
  border-bottom: 1px solid rgba(158, 35, 163, 0.15);
  backdrop-filter: blur(8px);
  position: relative; /* Changed from sticky to prevent top cutoff */
  top: 0;
  z-index: 20;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: var(--pane-header-gap);
  flex-wrap: nowrap;
}

.pane-header-left {
  display: flex;
  align-items: center;
  gap: var(--pane-header-gap);
  flex-wrap: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}

.pane-title {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

/* Instrument UI: calm headers (remove gradients/blur; keep purple for active states) */
html[data-ui-style="instrument"] .knowledge-pane .pane-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
}

html[data-ui-style="instrument"] .knowledge-pane .pane-title {
  text-transform: none;
  letter-spacing: 0;
}

/* ===== UNIFIED HEADER COMPONENTS ===== */

/* Status Chip - Compact pill-style status indicator */
.pane-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.pane-status-chip.ready {
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.2);
  color: #2E7D32;
}

.pane-status-chip.loading {
  background: rgba(158, 35, 163, 0.08);
  border: 1px solid rgba(158, 35, 163, 0.2);
  color: #9e23a3;
}

.pane-status-chip .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pane-status-chip.ready .status-dot {
  background: #4CAF50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

.pane-status-chip.loading .status-dot {
  background: #9e23a3;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Header Meta Text - Subtle info like node counts */
.header-meta-text {
  font-size: 11px;
  font-weight: 500;
  color: rgba(100, 100, 100, 0.8);
  padding: 0 8px;
  white-space: nowrap;
}

/* Header Button Group - Unified container for related buttons */
.header-button-group {
  display: inline-flex;
  align-items: center;
  background: rgba(158, 35, 163, 0.04);
  border: 1px solid rgba(158, 35, 163, 0.12);
  border-radius: 8px;
  padding: 2px;
  gap: 1px;
}

/* Group Separator - Subtle divider within button groups */
.group-separator {
  width: 1px;
  height: 16px;
  background: rgba(158, 35, 163, 0.15);
  margin: 0 2px;
}

/* Header Icon Button - Compact icon-only buttons */
.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(100, 100, 100, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.header-icon-btn:hover {
  background: rgba(158, 35, 163, 0.1);
  color: #9e23a3;
}

.header-icon-btn.active {
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
  box-shadow: 0 1px 3px rgba(158, 35, 163, 0.3);
}

/* Header Pill Button - Icon + text pills */
.header-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 16px;
  color: rgba(80, 80, 80, 0.85);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.header-pill-btn:hover {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.25);
  color: #9e23a3;
}

.header-pill-btn.active {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.15) 0%, rgba(111, 45, 189, 0.1) 100%);
  border-color: rgba(158, 35, 163, 0.35);
  color: #9e23a3;
}

/* Pill Badge - Count indicator on pills */
.pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  color: white;
}

/* Header Primary Button - Main action buttons */
.header-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(158, 35, 163, 0.25);
}

.header-primary-btn:hover {
  background: linear-gradient(135deg, #b028b6 0%, #9e23a3 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(158, 35, 163, 0.35);
}

.header-primary-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(158, 35, 163, 0.2);
}

/* Session Dropdown Wrapper */
.session-dropdown-wrapper {
  min-width: 160px;
  max-width: 200px;
}

/* Header Presence Group */
.header-presence-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.presence-avatars {
  display: flex;
  align-items: center;
  margin-right: 4px;
}

.presence-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: -6px;
  border: 2px solid white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.presence-avatar:first-child {
  margin-left: 0;
}

.presence-avatar:hover {
  transform: scale(1.1);
  z-index: 1;
}

.presence-avatar.typing {
  animation: presence-pulse 1.5s ease-in-out infinite;
}

@keyframes presence-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(158, 35, 163, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(158, 35, 163, 0); }
}

.presence-more {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  margin-left: 4px;
}

.presence-btn {
  gap: 4px;
  width: auto;
  padding: 0 8px;
}

.presence-count {
  font-size: 11px;
  font-weight: 600;
}

/* ===== DARK MODE ===== */

[data-theme="dark"] .pane-status-chip.ready {
  background: rgba(76, 175, 80, 0.12);
  border-color: rgba(76, 175, 80, 0.25);
  color: #81C784;
}

[data-theme="dark"] .pane-status-chip.loading {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.3);
  color: #c77fd1;
}

[data-theme="dark"] .header-meta-text {
  color: rgba(200, 200, 200, 0.7);
}

[data-theme="dark"] .header-button-group {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .group-separator {
  background: rgba(158, 35, 163, 0.25);
}

[data-theme="dark"] .header-icon-btn {
  color: rgba(200, 200, 200, 0.7);
}

[data-theme="dark"] .header-icon-btn:hover {
  background: rgba(158, 35, 163, 0.2);
  color: #c77fd1;
}

[data-theme="dark"] .header-pill-btn {
  border-color: rgba(158, 35, 163, 0.25);
  color: rgba(220, 220, 220, 0.85);
}

[data-theme="dark"] .header-pill-btn:hover {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.35);
  color: #c77fd1;
}

[data-theme="dark"] .header-pill-btn.active {
  background: rgba(158, 35, 163, 0.2);
  border-color: rgba(158, 35, 163, 0.45);
  color: #c77fd1;
}

[data-theme="dark"] .presence-avatar {
  border-color: #1e1e1e;
}

[data-theme="dark"] .presence-more {
  color: #aaa;
}

.pane-header-right {
  display: flex;
  align-items: center;
  gap: var(--pane-header-gap);
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.pane-header-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pane-header-gap);
  flex: 0 1 auto;
  min-width: 0;
}

.header-group {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.8vw, 10px);
  flex-wrap: nowrap;
  min-width: 0;
}

.header-divider {
  width: 1px;
  height: 24px;
  background: rgba(158, 35, 163, 0.2);
}

.header-divider.vertical {
  margin: 0 2px;
}

/* Breadcrumb Navigation - Now contains Context Mode Slider */
.breadcrumb-section {
  width: 100%;
  background: rgba(248, 250, 252, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  flex-wrap: wrap;
}

/* Instrument UI: match pane-header calm surface (avoid "bright add-on" strip) */
html[data-ui-style="instrument"] .knowledge-pane .breadcrumb-section {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #202124;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.breadcrumb-nav .breadcrumb-selected {
  color: #9e23a3;
  font-weight: 600;
}

/* Scope Selector Inline (in breadcrumb section) */
.scope-selector-inline {
  display: flex;
  background: transparent;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  gap: 0;
  flex-shrink: 0;
}

.scope-button-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
}

.scope-button-inline:hover {
  background: rgba(158, 35, 163, 0.08);
  color: #9e23a3;
}

.scope-button-inline.active {
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
  border-color: #9e23a3;
}

[data-theme="dark"] .breadcrumb-section {
  background: rgba(42, 42, 42, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-ui-style="instrument"][data-theme="dark"] .knowledge-pane .breadcrumb-section {
  background: #1e1e1e;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
}

[data-theme="dark"] .breadcrumb-nav {
  color: #e0e0e0;
}

[data-theme="dark"] .breadcrumb-nav .breadcrumb-selected {
  color: #c77fd1;
}

[data-theme="dark"] .scope-button-inline {
  color: #ccc;
}

[data-theme="dark"] .scope-button-inline:hover {
  background: rgba(158, 35, 163, 0.15);
  color: #c77fd1;
}

[data-theme="dark"] .scope-button-inline.active {
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
}

/* Activity Badge (Loading State) */
.activity-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  font-size: 9px;
  font-weight: 600;
  color: #2563eb;
}

.activity-badge-spinner {
  width: 8px;
  height: 8px;
  border: 2px solid #2563eb;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Node Count Indicator */
.node-count-indicator {
  font-size: 11px;
  color: #666;
  font-weight: 500;
}

[data-theme="dark"] .node-count-indicator {
  color: #d0d0d0;
}

/* Activity Badge (Loading State) */
.activity-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  font-size: 9px;
  font-weight: 600;
  color: #2563eb;
}

.activity-badge-spinner {
  width: 8px;
  height: 8px;
  border: 2px solid #2563eb;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

[data-theme="dark"] .activity-badge {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

/* Dark mode for pane headers */
[data-theme="dark"] .pane-header {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.12) 0%, rgba(111, 45, 189, 0.08) 100%);
  border-bottom-color: rgba(158, 35, 163, 0.25);
}

[data-theme="dark"] .pane-title {
  color: #e0e0e0;
}

[data-theme="dark"] .pane-status {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.2);
  color: #81C784;
}

/* ===== ENHANCED SEARCH & CONTROLS (Alpha-inspired) ===== */

.search-container {
  display: flex;
  gap: var(--md-space-2);
  padding: var(--md-space-3) var(--md-space-4);
  background: var(--aav-glass-bg);
  backdrop-filter: var(--aav-glass-backdrop);
  border-bottom: 1px solid var(--aav-glass-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-input {
  flex: 1;
  padding: var(--md-space-3);
  border: 1px solid var(--md-outline-variant);
  border-radius: 8px;
  font-size: var(--md-body-medium);
  background: var(--md-surface);
  color: var(--md-on-surface);
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

.search-input:focus {
  outline: none;
  border-color: var(--aav-primary);
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.2);
}

.search-button {
  padding: var(--md-space-3);
  background: var(--aav-gradient-button);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.search-button:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--md-elevation-2);
}

.knowledge-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  background: var(--md-surface-variant);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden; /* Prevent horizontal overflow */
  flex-wrap: wrap; /* Allow wrapping if needed */
  border-bottom: 1px solid var(--md-outline-variant);
}

/* ===== SCOPE SELECTOR (Alpha-evolved) ===== */

.scope-selector {
  display: flex;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 8px;
  overflow: hidden;
}

.scope-button {
  display: flex;
  align-items: center;
  gap: var(--md-space-1);
  padding: var(--md-space-2) var(--md-space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
  color: var(--md-on-surface-variant);
  font-size: var(--md-label-medium);
  font-weight: 500;
}

.scope-button:hover {
  background: rgba(158, 35, 163, 0.08);
  color: var(--aav-primary);
}

.scope-button.active {
  background: var(--aav-primary);
  color: white;
}

/* ===== VIEW MODE SELECTOR ===== */

.view-mode-selector {
  display: flex;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 8px;
  overflow: hidden;
}

.view-button {
  padding: var(--md-space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
  color: var(--md-on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-button:hover {
  background: rgba(158, 35, 163, 0.08);
  color: var(--aav-primary);
}

.view-button.active {
  background: var(--aav-primary);
  color: white;
}

/* ===== FILTER CONTROLS ===== */

.filter-controls {
  display: flex;
  align-items: center;
  gap: var(--md-space-2);
  color: var(--md-on-surface-variant);
}

.type-filter {
  padding: var(--md-space-2) var(--md-space-3);
  border: 1px solid var(--md-outline-variant);
  border-radius: 6px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-size: var(--md-label-medium);
}

.filter-toggle-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid rgba(158, 35, 163, 0.2);
  background: transparent;
  color: #a0a0a0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.filter-toggle-button:hover {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.3);
  color: #9e23a3;
}

.filter-toggle-button.active {
  background: rgba(158, 35, 163, 0.1);
  border-color: rgba(158, 35, 163, 0.3);
}

.filter-badge {
  background: #9e23a3;
  color: #fff;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}

[data-theme="dark"] .filter-toggle-button {
  color: #ccc;
  border-color: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .filter-toggle-button:hover {
  background: rgba(158, 35, 163, 0.15);
  color: #c77fd1;
}

/* Tree Control Buttons */
.tree-control-button {
  padding: 6px;
  background: transparent;
  border: 1px solid rgba(158, 35, 163, 0.2);
  borderRadius: 5px;
  color: #a0a0a0;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.15s ease;
}

.tree-control-button:hover {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.3);
  color: #9e23a3;
}

.knowledge-content {
  flex: 1;
  overflow: auto;
  position: relative;
}

/* ===== GRAPH VIEW (Alpha ReactFlow Integration) ===== */

.graph-view {
  height: 100%;
  position: relative;
}

/* ReactFlow glass morphism styling */
.beta-reactflow {
  background: transparent !important;
}

.beta-reactflow .react-flow__background {
  background: transparent !important;
}

.beta-reactflow .react-flow__pane {
  background: transparent !important;
}

/* Glass morphism stats overlay */
.graph-stats-overlay {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 16px;
  padding: 12px 20px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.88) 100%
  );
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 12px;
  box-shadow: 
    0 4px 16px rgba(158, 35, 163, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 10;
  pointer-events: none;
}

[data-theme="dark"] .graph-stats-overlay {
  background: linear-gradient(135deg, 
    rgba(30, 30, 40, 0.9) 0%, 
    rgba(20, 20, 30, 0.95) 100%
  );
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

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

.stat-item .stat-value {
  font-family: var(--aav-font-mono, 'JetBrains Mono', monospace);
  font-size: 20px;
  font-weight: 700;
  color: var(--aav-primary);
  line-height: 1;
}

.stat-item .stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

[data-theme="dark"] .stat-item .stat-value {
  color: var(--aav-primary-light);
}

/* Empty graph overlay */
.empty-graph-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.88) 100%
  );
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(158, 35, 163, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 5;
}

[data-theme="dark"] .empty-graph-overlay {
  background: linear-gradient(135deg, 
    rgba(30, 30, 40, 0.9) 0%, 
    rgba(20, 20, 30, 0.95) 100%
  );
}

.empty-graph-overlay h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--md-on-surface);
  margin: 16px 0 8px 0;
}

.empty-graph-overlay p {
  font-size: 13px;
  color: var(--md-on-surface-variant);
  line-height: 1.5;
  margin: 0;
}

/* ReactFlow edge styling - physics-based */
.beta-reactflow .react-flow__edge-path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.beta-reactflow .react-flow__edge:hover .react-flow__edge-path {
  stroke-width: 3px !important;
}

.beta-reactflow .react-flow__edge.selected .react-flow__edge-path {
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 4px currentColor);
}

/* ReactFlow selection styling - Aavishkar purple */
.beta-reactflow .react-flow__selection {
  border: 2px dashed var(--aav-primary) !important;
  background: rgba(158, 35, 163, 0.08) !important;
}

.beta-reactflow .react-flow__node.selected {
  outline: none !important;
}

/* ReactFlow controls styling */
.beta-reactflow .react-flow__controls-button {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(158, 35, 163, 0.2);
  color: var(--aav-primary);
  transition: all 0.2s;
}

.beta-reactflow .react-flow__controls-button:hover {
  background: rgba(255, 255, 255, 1);
  border-color: var(--aav-primary);
  transform: scale(1.05);
}

[data-theme="dark"] .beta-reactflow .react-flow__controls-button {
  background: rgba(30, 30, 40, 0.9);
  border-color: rgba(200, 127, 208, 0.3);
  color: var(--aav-primary-light);
}

/* ReactFlow minimap styling */
.beta-reactflow .react-flow__minimap {
  background: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .beta-reactflow .react-flow__minimap {
  background: rgba(30, 30, 40, 0.95) !important;
}

.loading-graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--md-on-surface-variant);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--md-outline-variant);
  border-top: 3px solid var(--aav-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--md-space-4);
}

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

.interactive-graph {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.graph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--md-space-3) var(--md-space-4);
  background: var(--aav-glass-bg);
  backdrop-filter: var(--aav-glass-backdrop);
  border-bottom: 1px solid var(--aav-glass-border);
}

.graph-stats {
  display: flex;
  gap: var(--md-space-4);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-space-1);
}

.stat-value {
  font-family: var(--aav-font-mono);
  font-size: var(--md-title-medium);
  font-weight: 700;
  color: var(--aav-primary);
}

.stat-label {
  font-size: var(--md-label-small);
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.graph-layout-controls {
  display: flex;
  gap: var(--md-space-2);
}

.layout-button {
  padding: var(--md-space-2) var(--md-space-3);
  background: transparent;
  border: 1px solid var(--md-outline-variant);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
  color: var(--md-on-surface-variant);
  font-size: var(--md-label-small);
}

.layout-button:hover {
  border-color: var(--aav-primary);
  color: var(--aav-primary);
}

.layout-button.active {
  background: var(--aav-primary);
  border-color: var(--aav-primary);
  color: white;
}

.graph-canvas {
  flex: 1;
  position: relative;
  overflow: auto;
  padding: var(--md-space-4);
}

/* ===== ENHANCED GRAPH NODES (Alpha-inspired) ===== */

.graph-node {
  position: relative;
  background: var(--aav-glass-bg);
  backdrop-filter: var(--aav-glass-backdrop);
  border: 1px solid var(--aav-glass-border);
  border-radius: 12px;
  padding: var(--md-space-4);
  cursor: pointer;
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
  margin-bottom: var(--md-space-3);
  box-shadow: var(--md-elevation-1);
  min-height: calc(var(--node-importance) * 40px + 80px);
  border-left: 4px solid var(--aav-primary);
  transform-origin: center;
}

.graph-node:hover {
  border-color: var(--aav-primary);
  box-shadow: var(--md-elevation-3);
  transform: translateY(-2px) scale(1.02);
}

.graph-node.selected {
  border-color: var(--aav-primary);
  background: var(--aav-glass-strong);
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.3), var(--md-elevation-4);
}

.graph-node.hovered {
  z-index: 10;
  transform: translateY(-4px) scale(1.05);
}

.node-icon {
  width: 40px;
  height: 40px;
  background: var(--aav-gradient-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: var(--md-space-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.node-content {
  flex: 1;
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--md-space-2);
}

.node-title {
  font-family: var(--aav-font-primary);
  font-weight: 600;
  font-size: var(--md-title-small);
  color: var(--md-on-surface);
  line-height: 1.3;
  margin: 0;
}

.node-badges {
  display: flex;
  gap: var(--md-space-1);
  flex-shrink: 0;
}

.node-type-badge {
  background: var(--aav-gradient-button);
  color: white;
  padding: var(--md-space-1) var(--md-space-2);
  border-radius: 4px;
  font-size: var(--md-label-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.node-scope-badge {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  padding: var(--md-space-1) var(--md-space-2);
  border-radius: 4px;
  font-size: var(--md-label-small);
  font-weight: 500;
}

.node-meta {
  display: flex;
  gap: var(--md-space-3);
  align-items: center;
  margin-bottom: var(--md-space-2);
}

.connections-count {
  font-family: var(--aav-font-mono);
  font-size: var(--md-label-small);
  color: var(--md-on-surface-variant);
  display: flex;
  align-items: center;
  gap: var(--md-space-1);
}

.node-tags {
  display: flex;
  gap: var(--md-space-1);
  flex-wrap: wrap;
}

.node-tag {
  background: rgba(158, 35, 163, 0.1);
  color: var(--aav-primary);
  padding: var(--md-space-1);
  border-radius: 3px;
  font-size: var(--md-label-small);
  font-weight: 500;
}

/* ===== HOVER-TO-REVEAL PATTERN (Reusable Paradigm) ===== */

.node-description {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.04) 0%, rgba(111, 45, 189, 0.02) 100%);
  border-left: 2px solid rgba(158, 35, 163, 0.3);
  border-radius: 4px;
  padding: 10px;
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  margin-top: 8px;
  backdrop-filter: blur(8px);
}

/* Enhanced metadata card - shows Neo4j/Knowledge Core details */
.node-metadata-card {
  margin-top: 8px;
  padding: 8px;
  background: white;
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(158, 35, 163, 0.1);
}

.metadata-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid rgba(158, 35, 163, 0.05);
  gap: 8px;
}

.metadata-row:last-child {
  border-bottom: none;
}

.metadata-label {
  font-weight: 600;
  color: #9e23a3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9px;
  flex-shrink: 0;
}

.metadata-value {
  color: #666;
  font-family: var(--aav-font-mono, 'JetBrains Mono', monospace);
  text-align: right;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== PEER INDICATORS (Alpha collaboration) ===== */

.peer-indicators {
  position: absolute;
  top: var(--md-space-2);
  right: var(--md-space-2);
  display: flex;
  gap: var(--md-space-1);
  z-index: 5;
}

.peer-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: var(--md-elevation-2);
}

/* ===== GRAPH CONNECTIONS ===== */

.graph-connections {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.graph-edge {
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

.empty-graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--md-on-surface-variant);
  padding: var(--md-space-8);
}

.empty-icon {
  margin-bottom: var(--md-space-4);
  opacity: 0.5;
}

/* ===== GRID VIEW ===== */

.grid-view {
  padding: var(--md-space-4);
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.grid-card {
  background: var(--aav-glass-bg);
  backdrop-filter: var(--aav-glass-backdrop);
  border: 1px solid var(--aav-glass-border);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
  box-shadow: var(--md-elevation-1);
}

.grid-card:hover {
  border-color: var(--aav-primary);
  box-shadow: var(--md-elevation-3);
}

.grid-card.selected {
  border-color: var(--aav-primary);
  background: var(--aav-glass-strong);
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.3), var(--md-elevation-4);
}

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

.card-icon {
  width: 32px;
  height: 32px;
  background: var(--aav-gradient-primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

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

.type-badge {
  background: var(--aav-gradient-button);
  color: white;
  padding: var(--md-space-1) var(--md-space-2);
  border-radius: 4px;
  font-size: var(--md-label-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-title {
  font-family: var(--aav-font-primary);
  font-weight: 600;
  font-size: 13px;
  color: var(--md-on-surface);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.card-description {
  font-size: 11px;
  color: var(--md-on-surface-variant);
  line-height: 1.4;
  margin: 0 0 8px 0;
  max-height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--md-on-surface-variant);
}

.connections {
  font-family: var(--aav-font-mono);
  font-weight: 500;
}

.scope {
  background: var(--md-surface-variant);
  padding: var(--md-space-1) var(--md-space-2);
  border-radius: 4px;
  font-weight: 500;
}

/* ===== LIST VIEW (Alpha-enhanced) ===== */

.list-view {
  padding: var(--md-space-4);
}

.knowledge-list {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-3);
}

.list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  background: var(--aav-glass-bg);
  backdrop-filter: var(--aav-glass-backdrop);
  border: 1px solid var(--aav-glass-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
  box-shadow: var(--md-elevation-1);
  position: relative;
}

.list-item:hover {
  border-color: var(--aav-primary);
  box-shadow: var(--md-elevation-2);
}

.list-item.selected {
  border-color: var(--aav-primary);
  background: var(--aav-glass-strong);
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.3), var(--md-elevation-3);
}

.item-icon {
  width: 32px;
  height: 32px;
  background: var(--aav-gradient-primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

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

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--md-space-2);
  gap: var(--md-space-3);
}

.item-title {
  font-family: var(--aav-font-primary);
  font-weight: 600;
  font-size: 13px;
  color: var(--md-on-surface);
  margin: 0;
  line-height: 1.3;
}

.item-badges {
  display: flex;
  gap: var(--md-space-1);
  flex-shrink: 0;
}

.scope-badge {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  padding: var(--md-space-1) var(--md-space-2);
  border-radius: 4px;
  font-size: var(--md-label-small);
  font-weight: 500;
}

.item-description {
  font-size: 11px;
  color: var(--md-on-surface-variant);
  line-height: 1.4;
  margin: 0 0 8px 0;
  max-height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.item-meta {
  display: flex;
  gap: var(--md-space-3);
  align-items: center;
  flex-wrap: wrap;
}

.connections {
  font-family: var(--aav-font-mono);
  font-size: var(--md-label-small);
  color: var(--md-on-surface-variant);
}

.item-tags {
  display: flex;
  gap: var(--md-space-1);
  flex-wrap: wrap;
}

.tag {
  background: rgba(158, 35, 163, 0.1);
  color: var(--aav-primary);
  padding: var(--md-space-1);
  border-radius: 3px;
  font-size: var(--md-label-small);
  font-weight: 500;
}

.last-modified {
  font-family: var(--aav-font-mono);
  font-size: var(--md-label-small);
  color: var(--md-on-surface-variant);
  opacity: 0.7;
}

.peer-indicators-list {
  position: absolute;
  top: var(--md-space-2);
  right: var(--md-space-2);
  display: flex;
  gap: var(--md-space-1);
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
  .knowledge-controls {
    padding: var(--md-space-2);
    gap: var(--md-space-2);
  }

  .scope-selector {
    flex: 1;
  }

  .knowledge-grid {
    grid-template-columns: 1fr;
  }

  .graph-stats {
    gap: var(--md-space-2);
  }

  .stat-value {
    font-size: var(--md-title-small);
  }
}

/* ===== DARK MODE ENHANCEMENTS ===== */

[data-theme="dark"] .graph-node {
  border-left-color: var(--aav-primary-light);
}

[data-theme="dark"] .node-type-badge {
  background: var(--aav-gradient-secondary);
}

[data-theme="dark"] .node-tag {
  background: rgba(200, 127, 208, 0.15);
  color: var(--aav-primary-light);
}

[data-theme="dark"] .type-badge {
  background: var(--aav-gradient-secondary);
}

[data-theme="dark"] .stat-value {
  color: var(--aav-primary-light);
}

/* ===== ACCESSIBILITY & MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  .graph-node,
  .grid-card,
  .list-item,
  .search-button,
  .scope-button,
  .view-button {
    transition: none !important;
  }

  .loading-spinner {
    animation: none !important;
  }
}

@media (prefers-contrast: high) {
  .graph-node,
  .grid-card,
  .list-item {
    border-width: 2px;
  }

  .graph-node.selected,
  .grid-card.selected,
  .list-item.selected {
    border-width: 3px;
  }
}

/* Focus styles for keyboard navigation */
.graph-node:focus,
.grid-card:focus,
.list-item:focus,
.scope-button:focus,
.view-button:focus {
  outline: 2px solid var(--aav-primary);
  outline-offset: 2px;
}

/* Loading skeletons */
.knowledge-skeleton {
  padding: var(--md-space-4, 16px);
}

.skeleton-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--md-space-4, 16px);
}

.skeleton-control {
  width: 80px;
  height: 32px;
  background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

.skeleton-graph {
  width: 100%;
  height: 300px;
  background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  margin-bottom: var(--md-space-4, 16px);
}

.skeleton-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--md-space-3, 12px);
}

.skeleton-node {
  height: 80px;
  background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

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

/* ===== ACTIVITY BADGE ANIMATIONS (Reusable Pattern) ===== */

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

/* Activity badge base styles */
.activity-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Activity badge variants */
.activity-badge.loading {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #2563eb;
}

.activity-badge.typing {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #7c3aed;
}

.activity-badge.processing {
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.2);
  color: #ea580c;
}

/* Dark mode skeleton overrides */
[data-theme="dark"] .skeleton-control,
[data-theme="dark"] .skeleton-graph,
[data-theme="dark"] .skeleton-node {
  background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

/* ===== PROJECTS VIEW ===== */

.projects-view {
  padding: 24px;
  overflow-y: auto;
  height: 100%;
}

.project-detail-view {
  max-width: 900px;
  margin: 0 auto;
}

/* ===== PROJECTS VIEW (Instrument-first, calmer surfaces) ===== */
.project-header-section {
  padding: 16px;
  border-bottom: 1px solid rgba(158, 35, 163, 0.15);
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.03) 0%, rgba(111, 45, 189, 0.02) 100%);
}

html[data-ui-style="instrument"] .project-header-section {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .project-header-section {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

html[data-ui-style="instrument"][data-theme="dark"] .project-header-section {
  background: transparent;
}

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

.project-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(158, 35, 163, 1);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.project-title-icon {
  color: rgba(158, 35, 163, 1);
  flex-shrink: 0;
}

html[data-ui-style="instrument"] .project-title,
html[data-ui-style="instrument"] .project-title-icon {
  color: rgba(31, 21, 51, 0.95);
}

[data-theme="dark"] .project-title,
[data-theme="dark"] .project-title-icon {
  color: #e8eaed;
}

.project-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.project-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.25);
  font-size: 11px;
  font-weight: 600;
  color: #2e7d32;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.project-status-pill .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf50;
}

/* In instrument mode, keep this subtle (optional context) */
html[data-ui-style="instrument"] .project-status-pill {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(31, 21, 51, 0.65);
  text-transform: none;
  letter-spacing: 0;
}

html[data-ui-style="instrument"] .project-status-pill .status-dot {
  background: rgba(31, 21, 51, 0.35);
}

[data-theme="dark"] .project-status-pill {
  background: rgba(76, 175, 80, 0.16);
  border-color: rgba(76, 175, 80, 0.25);
  color: #81c784;
}

html[data-ui-style="instrument"][data-theme="dark"] .project-status-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(232, 234, 237, 0.7);
}

html[data-ui-style="instrument"][data-theme="dark"] .project-status-pill .status-dot {
  background: rgba(232, 234, 237, 0.35);
}

.project-actions-menu-wrapper {
  position: relative;
}

.project-actions-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--md-surface, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 1000;
  min-width: 180px;
}

[data-theme="dark"] .project-actions-menu {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.project-actions-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(31, 21, 51, 0.9);
}

.project-actions-menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .project-actions-menu-item {
  color: rgba(232, 234, 237, 0.9);
}

[data-theme="dark"] .project-actions-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.project-actions-menu-item.danger {
  color: #d93025;
}

.project-actions-menu-item.danger:hover {
  background: rgba(217, 48, 37, 0.10);
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.project-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.project-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(158, 35, 163, 0.06);
  border: 1px solid rgba(158, 35, 163, 0.15);
  color: rgba(158, 35, 163, 1);
  flex: 0 1 auto;
  min-width: 0;
}

html[data-ui-style="instrument"] .project-meta-pill {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(31, 21, 51, 0.85);
}

[data-theme="dark"] .project-meta-pill {
  background: rgba(158, 35, 163, 0.12);
  border-color: rgba(158, 35, 163, 0.22);
  color: #e8eaed;
}

html[data-ui-style="instrument"][data-theme="dark"] .project-meta-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

.project-goal-pill {
  flex: 1 1 520px;
  align-items: flex-start;
}

.project-meta-label {
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.9;
}

.project-meta-value {
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-goal-textarea {
  flex: 1;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid rgba(158, 35, 163, 0.22);
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  color: rgba(31, 21, 51, 0.95);
  background: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .project-goal-textarea {
  background: rgba(20, 20, 20, 0.7);
  color: #e8eaed;
  border-color: rgba(255, 255, 255, 0.12);
}

.project-primary-btn,
.project-secondary-btn,
.project-tertiary-btn {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.project-primary-btn {
  border: none;
  background: #9e23a3;
  color: #fff;
}

.project-primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.project-secondary-btn {
  border: 1px solid rgba(158, 35, 163, 0.25);
  background: rgba(158, 35, 163, 0.08);
  color: rgba(158, 35, 163, 0.95);
}

.project-tertiary-btn {
  border: 1px solid rgba(158, 35, 163, 0.25);
  background: transparent;
  color: rgba(158, 35, 163, 0.9);
}

html[data-ui-style="instrument"] .project-secondary-btn,
html[data-ui-style="instrument"] .project-tertiary-btn {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(31, 21, 51, 0.85);
  background: rgba(0, 0, 0, 0.02);
}

html[data-ui-style="instrument"] .project-tertiary-btn {
  background: transparent;
}

[data-theme="dark"] .project-secondary-btn,
[data-theme="dark"] .project-tertiary-btn {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(232, 234, 237, 0.85);
}

html[data-ui-style="instrument"][data-theme="dark"] .project-secondary-btn {
  background: rgba(255, 255, 255, 0.05);
}

.project-edit-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-edit-actions-row {
  display: flex;
  gap: 8px;
}

.project-error {
  margin-top: 4px;
  font-size: 11px;
  color: #d93025;
}

.project-view-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(158, 35, 163, 0.15);
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.02) 0%, rgba(111, 45, 189, 0.01) 100%);
}

html[data-ui-style="instrument"] .project-view-toggle-row {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .project-view-toggle-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.01);
}

.project-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: rgba(158, 35, 163, 0.85);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.project-view-toggle-btn:hover {
  background: rgba(158, 35, 163, 0.08);
  color: rgba(158, 35, 163, 1);
}

.project-view-toggle-btn.active {
  background: rgba(158, 35, 163, 0.14);
  color: rgba(158, 35, 163, 1);
}

html[data-ui-style="instrument"] .project-view-toggle-btn {
  color: rgba(31, 21, 51, 0.8);
}

html[data-ui-style="instrument"] .project-view-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(31, 21, 51, 0.95);
}

html[data-ui-style="instrument"] .project-view-toggle-btn.active {
  background: rgba(158, 35, 163, 0.10);
  color: rgba(31, 21, 51, 0.95);
}

[data-theme="dark"] .project-view-toggle-btn {
  color: rgba(232, 234, 237, 0.82);
}

[data-theme="dark"] .project-view-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .project-view-toggle-btn.active {
  background: rgba(158, 35, 163, 0.22);
}

.project-stage-readout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: rgba(158, 35, 163, 0.06);
  border: 1px solid rgba(158, 35, 163, 0.14);
}

html[data-ui-style="instrument"] .project-stage-readout {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .project-stage-readout {
  background: rgba(158, 35, 163, 0.14);
  border-color: rgba(158, 35, 163, 0.20);
}

html[data-ui-style="instrument"][data-theme="dark"] .project-stage-readout {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

.project-stage-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(158, 35, 163, 0.95);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[data-ui-style="instrument"] .project-stage-label {
  color: rgba(31, 21, 51, 0.6);
  text-transform: none;
  letter-spacing: 0;
}

[data-theme="dark"] .project-stage-label {
  color: rgba(232, 234, 237, 0.7);
}

.project-stage-value {
  font-size: 14px;
  font-weight: 700;
  color: rgba(158, 35, 163, 1);
}

html[data-ui-style="instrument"] .project-stage-value {
  color: rgba(31, 21, 51, 0.95);
}

[data-theme="dark"] .project-stage-value {
  color: #e8eaed;
}

.project-stages-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid rgba(158, 35, 163, 0.15);
}

.project-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.project-name {
  font-size: 24px;
  font-weight: 600;
  color: #202124;
  margin: 0;
}

.project-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.project-status-badge.active {
  background: rgba(76, 175, 80, 0.1);
  color: #2E7D32;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.project-description {
  font-size: 14px;
  color: #5f6368;
  margin: 12px 0;
  line-height: 1.6;
}

.project-goal {
  font-size: 14px;
  color: #202124;
  margin: 12px 0;
  padding: 12px;
  background: rgba(158, 35, 163, 0.05);
  border-left: 3px solid #9e23a3;
  border-radius: 4px;
}

.project-scope-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  background: rgba(33, 150, 243, 0.1);
  color: #1976d2;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.workflow-stages-section {
  margin-bottom: 32px;
}

.section-header-with-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.project-view-toggle {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 2px;
}

.toggle-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.toggle-button.active {
  background: rgba(158, 35, 163, 0.1);
  color: #9e23a3;
  font-weight: 600;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #202124;
  margin: 0;
}

.workflow-stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* Stage + KC stack wrapper */
.project-stage-with-kcs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-session-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 0;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(31, 21, 51, 0.8);
}

.project-session-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}

.project-session-error {
  font-size: 11px;
  color: #d93025;
}

.project-session-refresh {
  border: 1px solid rgba(158, 35, 163, 0.3);
  background: rgba(158, 35, 163, 0.08);
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(158, 35, 163, 0.9);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.project-session-refresh:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.project-session-refresh:not(:disabled):hover {
  background: rgba(158, 35, 163, 0.16);
  border-color: rgba(158, 35, 163, 0.4);
}

.project-stage-session-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 4px;
}

.session-chip-more {
  border: 1px dashed rgba(158, 35, 163, 0.4);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  color: rgba(158, 35, 163, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-stage-card {
  padding: 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.workflow-stage-card.current {
  border-width: 3px;
  background: rgba(158, 35, 163, 0.02);
}

.workflow-stage-card.pending {
  opacity: 0.6;
}

.stage-number {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.stage-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stage-status {
  font-size: 11px;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.proofline-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid rgba(158, 35, 163, 0.15);
}

.proofline-info {
  background: rgba(158, 35, 163, 0.03);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(158, 35, 163, 0.1);
}

.proofline-info p {
  font-size: 14px;
  color: #5f6368;
  line-height: 1.6;
  margin-bottom: 20px;
}

.proofline-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.proofline-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #9e23a3;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content strong {
  display: block;
  font-size: 14px;
  color: #202124;
  margin-bottom: 4px;
}

.step-content p {
  font-size: 13px;
  color: #5f6368;
  margin: 0;
}

.projects-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--md-on-surface-variant, #6b7280);
  text-align: center;
}

.projects-empty-state h3 {
  color: var(--md-on-surface, #111827);
  margin-bottom: 8px;
}

[data-theme="dark"] .projects-empty-state {
  color: var(--md-on-surface-variant-dark, #9ca3af);
}

[data-theme="dark"] .projects-empty-state h3 {
  color: var(--md-on-surface-dark, #e5e7eb);
}

/* Dark theme support for Projects view */
[data-theme="dark"] .project-name,
[data-theme="dark"] .section-title,
[data-theme="dark"] .step-content strong {
  color: #e8eaed;
}

[data-theme="dark"] .project-description,
[data-theme="dark"] .project-goal,
[data-theme="dark"] .step-content p {
  color: #bdc1c6;
}

[data-theme="dark"] .workflow-stage-card {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .proofline-info {
  background: rgba(158, 35, 163, 0.1);
  border-color: rgba(158, 35, 163, 0.2);
}

/* KC Grid Styles - Projects View */
.kc-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 4px;
  width: 100%;
}

/* Print styles */
@media print {
  .knowledge-controls,
  .graph-header {
    display: none;
  }

  .knowledge-content {
    overflow: visible;
  }
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__pane.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow .react-flow__edges {
  pointer-events: none;
  overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
  stroke: #b1b1b7;
  stroke-width: 1;
  fill: none;
}
.react-flow__edge {
  pointer-events: visibleStroke;
  cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    -webkit-animation: none;
            animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge:focus .react-flow__edge-path,
  .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555;
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge-textbg {
    fill: white;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__connectionline {
  z-index: 1001;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__node.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: -webkit-grab;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 100%;
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
  }
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%);
  }
.react-flow__attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@-webkit-keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1a192b;
  background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
    }
.react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: 0 0 0 0.5px #1a192b;
    }
.react-flow__node-group {
  background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
    border: none;
    background: #fefefe;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 5px;
  }
.react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__minimap {
  background-color: #fff;
}
.react-flow__minimap svg {
  display: block;
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: #3367d9;
  transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: #3367d9;
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
/**
 * Custom Graph Nodes Styling
 * 
 * Combines:
 * - Alpha's glass morphism effects
 * - Beta's Material Design 3 aesthetic
 * - Aavishkar purple branding
 */

/* ===== BASE NODE STYLING ===== */

.custom-node {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.88) 100%
  );
  backdrop-filter: blur(12px) saturate(180%);
  border: 2px solid rgba(158, 35, 163, 0.15);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 
    0 4px 16px rgba(158, 35, 163, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  cursor: pointer;
}

.custom-node:hover {
  border-color: rgba(158, 35, 163, 0.4);
  box-shadow: 
    0 8px 24px rgba(158, 35, 163, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-2px) scale(1.02);
}

.custom-node.selected {
  border-color: var(--aav-primary);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(255, 255, 255, 0.92) 100%
  );
  box-shadow: 
    0 0 0 3px rgba(158, 35, 163, 0.2),
    0 12px 32px rgba(158, 35, 163, 0.25);
}

/* Citation highlight state with pulse animation */
.custom-node.highlighted {
  border-color: #4CAF50 !important;
  background: linear-gradient(135deg, 
    rgba(76, 175, 80, 0.15) 0%, 
    rgba(76, 175, 80, 0.08) 100%
  );
  box-shadow: 
    0 0 0 4px rgba(76, 175, 80, 0.3),
    0 12px 32px rgba(76, 175, 80, 0.35);
  animation: citationPulse 2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100 !important;
}

@keyframes citationPulse {
  0%, 100% {
    box-shadow: 
      0 0 0 4px rgba(76, 175, 80, 0.3),
      0 12px 32px rgba(76, 175, 80, 0.35);
  }
  50% {
    box-shadow: 
      0 0 0 8px rgba(76, 175, 80, 0.5),
      0 16px 40px rgba(76, 175, 80, 0.5);
    transform: scale(1.05);
  }
}

/* Dark mode support */
[data-theme="dark"] .custom-node {
  background: linear-gradient(135deg, 
    rgba(30, 30, 40, 0.85) 0%, 
    rgba(20, 20, 30, 0.9) 100%
  );
  border-color: rgba(200, 127, 208, 0.3);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .custom-node:hover {
  border-color: rgba(200, 127, 208, 0.5);
  box-shadow: 
    0 8px 24px rgba(158, 35, 163, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ===== NODE TYPE VARIANTS ===== */

.document-node {
  border-left: 4px solid #2563EB;
  background: linear-gradient(135deg, 
    rgba(37, 99, 235, 0.05) 0%, 
    rgba(255, 255, 255, 0.95) 20%, 
    rgba(255, 255, 255, 0.88) 100%
  );
}

.chunk-node {
  border-left: 4px solid #059669;
  background: linear-gradient(135deg, 
    rgba(5, 150, 105, 0.05) 0%, 
    rgba(255, 255, 255, 0.95) 20%, 
    rgba(255, 255, 255, 0.88) 100%
  );
}

.entity-node {
  border-left: 4px solid #7C3AED;
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.05) 0%, 
    rgba(255, 255, 255, 0.95) 20%, 
    rgba(255, 255, 255, 0.88) 100%
  );
}

/* Entity type color variants */
.entity-node.entity-concept {
  border-left-color: #9333EA;
}

.entity-node.entity-methodology {
  border-left-color: #2563EB;
}

.entity-node.entity-finding {
  border-left-color: #059669;
}

/* ===== NODE HEADER SECTION ===== */

.node-header-section {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.node-header-section.compact {
  margin-bottom: 6px;
}

.node-icon-container {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.document-icon {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
}

.chunk-icon {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.entity-icon {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}

.entity-icon.entity-concept {
  background: linear-gradient(135deg, #9333EA 0%, #7E22CE 100%);
}

.entity-icon.entity-methodology {
  background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
}

.entity-icon.entity-finding {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

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

.node-type-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aav-primary);
  opacity: 0.8;
  margin-bottom: 2px;
}

.node-title {
  font-family: var(--aav-font-primary, 'Inter', system-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.node-title.small {
  font-size: 13px;
  -webkit-line-clamp: 1;
}

[data-theme="dark"] .node-title {
  color: #e0e0e0;
}

[data-theme="dark"] .node-type-label {
  color: var(--aav-primary-light);
}

/* ===== COLLAPSE BUTTON ===== */

.collapse-button {
  background: rgba(158, 35, 163, 0.1);
  border: 1px solid rgba(158, 35, 163, 0.2);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--aav-primary);
  flex-shrink: 0;
}

.collapse-button:hover {
  background: rgba(158, 35, 163, 0.2);
  border-color: var(--aav-primary);
  transform: scale(1.1);
}

/* ===== NODE METADATA ===== */

.node-metadata {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(158, 35, 163, 0.1);
}

.metadata-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.metadata-label {
  font-weight: 600;
  color: #666;
  font-size: 10px;
}

.metadata-value {
  font-family: var(--aav-font-mono, 'JetBrains Mono', monospace);
  font-weight: 500;
  color: var(--aav-primary);
  font-size: 10px;
}

.metadata-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.file-ext-badge {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(29, 78, 216, 0.15) 100%);
  color: #2563EB;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.status-badge {
  border: 1px solid;
}

.status-badge.status-completed {
  background: rgba(34, 197, 94, 0.1);
  color: #16A34A;
  border-color: rgba(34, 197, 94, 0.2);
}

.status-badge.status-processing {
  background: rgba(251, 146, 60, 0.1);
  color: #EA580C;
  border-color: rgba(251, 146, 60, 0.2);
}

/* ===== CONTENT PREVIEW (Chunk-specific) ===== */

.node-content-preview {
  margin-top: 6px;
}

.content-text {
  font-size: 11px;
  line-height: 1.5;
  color: #555;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.chunk-node:not(.expanded) .content-text {
  -webkit-line-clamp: 2;
}

.chunk-node.expanded .content-text {
  -webkit-line-clamp: 5;
}

[data-theme="dark"] .content-text {
  color: rgba(255, 255, 255, 0.7);
}

/* ===== HOVER-TO-REVEAL METADATA ===== */

.node-metadata-reveal {
  margin-top: 8px;
  padding: 8px;
  background: rgba(158, 35, 163, 0.05);
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: slideDown 0.2s ease;
}

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

/* ===== SCOPE INDICATOR ===== */

.node-scope-indicator {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.scope-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.scope-badge.scope-mine {
  background: rgba(168, 85, 247, 0.1);
  color: #7C3AED;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.scope-badge.scope-team {
  background: rgba(59, 130, 246, 0.1);
  color: #2563EB;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ===== COLLABORATION FEATURES ===== */

.peer-selection-ring {
  position: absolute;
  inset: -4px;
  border: 3px solid rgba(16, 185, 129, 0.6);
  border-radius: 14px;
  pointer-events: none;
  animation: peerPulse 2s ease-in-out infinite;
}

@keyframes peerPulse {
  0%, 100% {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3);
  }
  50% {
    border-color: rgba(16, 185, 129, 0.8);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1);
  }
}

.citation-glow-effect {
  position: absolute;
  inset: -6px;
  border: 3px solid rgba(255, 215, 0, 0.8);
  border-radius: 16px;
  pointer-events: none;
  animation: citationGlow 1.5s ease-out;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

@keyframes citationGlow {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.3;
    transform: scale(1.05);
  }
}

/* ===== REACTFLOW HANDLE STYLING ===== */

.node-handle {
  width: 10px;
  height: 10px;
  background: var(--aav-primary);
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(158, 35, 163, 0.3);
}

.node-handle:hover {
  background: var(--aav-secondary);
  transform: scale(1.3);
}

/* ===== DARK MODE ADJUSTMENTS ===== */

[data-theme="dark"] .document-node {
  background: linear-gradient(135deg, 
    rgba(37, 99, 235, 0.08) 0%, 
    rgba(30, 30, 40, 0.85) 20%, 
    rgba(20, 20, 30, 0.9) 100%
  );
}

[data-theme="dark"] .chunk-node {
  background: linear-gradient(135deg, 
    rgba(5, 150, 105, 0.08) 0%, 
    rgba(30, 30, 40, 0.85) 20%, 
    rgba(20, 20, 30, 0.9) 100%
  );
}

[data-theme="dark"] .entity-node {
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.08) 0%, 
    rgba(30, 30, 40, 0.85) 20%, 
    rgba(20, 20, 30, 0.9) 100%
  );
}

[data-theme="dark"] .metadata-label {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .metadata-value {
  color: var(--aav-primary-light);
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
  .custom-node {
    min-width: 200px !important;
    max-width: 240px !important;
  }
  
  .node-title {
    font-size: 13px;
  }
  
  .node-icon-container {
    width: 32px;
    height: 32px;
  }
}

/* ===== ACCESSIBILITY ===== */

.custom-node:focus {
  outline: 2px solid var(--aav-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .custom-node,
  .collapse-button,
  .peer-selection-ring,
  .citation-glow-effect {
    transition: none !important;
    animation: none !important;
  }
}

/**
 * Delete Confirmation Modal Styles
 * Material Design 3 styling matching DocumentUploadModal.css
 */

.delete-confirmation-modal code {
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
}

.delete-confirmation-modal .spinner {
  display: inline-block;
}

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

/**
 * SelectionToolbar - Inline banner styling
 * Google Drive style with purple gradient theme
 */

.selection-toolbar {
  width: 100%;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(158, 35, 163, 0.2);
  background: linear-gradient(
    135deg,
    rgba(158, 35, 163, 0.15) 0%,
    rgba(111, 45, 189, 0.1) 100%
  );
  animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.selection-toolbar.dark {
  border-bottom-color: rgba(158, 35, 163, 0.3);
  background: linear-gradient(
    135deg,
    rgba(158, 35, 163, 0.2) 0%,
    rgba(111, 45, 189, 0.15) 100%
  );
}

.selection-toolbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Selection count */
.selection-count {
  display: flex;
  align-items: center;
  gap: 10px;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: rgba(158, 35, 163, 0.9);
  color: white;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(158, 35, 163, 0.3);
}

.count-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(158, 35, 163, 1);
  letter-spacing: 0.3px;
}

.selection-toolbar.dark .count-label {
  color: rgba(158, 35, 163, 0.95);
}

/* Actions */
.selection-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--aav-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.action-button:active {
  transform: translateY(0);
}

/* Delete button */
.delete-button {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  color: #f44336;
}

.delete-button:hover {
  background: rgba(244, 67, 54, 0.2);
  border-color: rgba(244, 67, 54, 0.5);
}

.selection-toolbar.dark .delete-button {
  background: rgba(244, 67, 54, 0.15);
  border-color: rgba(244, 67, 54, 0.4);
}

.selection-toolbar.dark .delete-button:hover {
  background: rgba(244, 67, 54, 0.25);
  border-color: rgba(244, 67, 54, 0.6);
}

/* Clear button */
.clear-button {
  background: transparent;
  border: 1px solid rgba(158, 35, 163, 0.3);
  color: rgba(158, 35, 163, 0.9);
}

.clear-button:hover {
  background: rgba(158, 35, 163, 0.1);
  border-color: rgba(158, 35, 163, 0.5);
}

.selection-toolbar.dark .clear-button {
  border-color: rgba(158, 35, 163, 0.4);
  color: rgba(158, 35, 163, 0.95);
}

.selection-toolbar.dark .clear-button:hover {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.6);
}

/* Action divider */
.action-divider {
  width: 1px;
  height: 20px;
  background: rgba(158, 35, 163, 0.2);
}

.selection-toolbar.dark .action-divider {
  background: rgba(158, 35, 163, 0.3);
}

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

/* Responsive */
@media (max-width: 768px) {
  .selection-toolbar-content {
    flex-direction: column;
    gap: 12px;
  }

  .selection-actions {
    width: 100%;
    justify-content: space-between;
  }

  .action-button span {
    display: none;
  }

  .action-button {
    padding: 8px;
  }
}
/**
 * Knowledge Card Mini Styles - Compact KC Display
 *
 * Used in KnowledgePane Projects/Proofline views
 * Theme-aligned with KnowledgeCardsTab.css
 */

.kc-mini {
  /* Light theme: subtle card on MD surface */
  background-color: var(--md-surface, #ffffff);
  border: 1px solid rgba(158, 35, 163, 0.14);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 80px;
  max-height: 120px;
}

.kc-mini:hover {
  border-color: var(--aav-primary, #9e23a3);
  box-shadow: 0 4px 12px rgba(158, 35, 163, 0.16);
  transform: translateY(-1px);
}

/* Instrument UI: calmer hover (no lift/glow) */
html[data-ui-style="instrument"] .kc-mini {
  border-color: rgba(0, 0, 0, 0.10);
}

html[data-ui-style="instrument"] .kc-mini:hover {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: none;
}

html[data-ui-style="instrument"] .kc-mini-title {
  color: rgba(31, 21, 51, 0.95);
}

[data-theme="dark"] html[data-ui-style="instrument"] .kc-mini {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

[data-theme="dark"] html[data-ui-style="instrument"] .kc-mini:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.kc-mini:focus {
  outline: 2px solid var(--aav-primary, #9e23a3);
  outline-offset: 2px;
}

/* Draft vs Committed visual distinction */
.kc-mini-draft {
  border-left: 3px solid #f59e0b; /* Orange for drafts */
}

.kc-mini-committed {
  border-left: 3px solid #10b981; /* Green for committed */
}

/* Header with title and status icon */
.kc-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.kc-mini-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-on-surface, #1f2933);
  line-height: 1.3;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Max 2 lines */
  -webkit-box-orient: vertical;
}

.kc-mini-status-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.kc-mini-status-icon.draft {
  color: #f59e0b;
}

.kc-mini-status-icon.committed {
  color: #10b981;
}

/* Footer with stage badge and commit ID */
.kc-mini-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kc-mini-stage-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Stage badge colors (match KnowledgeCardsTab) */
.kc-mini-stage-badge.stage-ideation {
  background-color: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.kc-mini-stage-badge.stage-lit-review {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.kc-mini-stage-badge.stage-hypothesis {
  background-color: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
}

.kc-mini-stage-badge.stage-planning {
  background-color: rgba(234, 179, 8, 0.1);
  color: #eab308;
}

.kc-mini-stage-badge.stage-analysis {
  background-color: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

.kc-mini-stage-badge.stage-writeup {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.kc-mini-commit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--text-tertiary, #666);
  font-family: 'Monaco', 'Courier New', monospace;
}

.kc-mini-commit svg {
  opacity: 0.7;
}

/* Optional preview text */
.kc-mini-preview {
  margin: 0;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant, #6b7280);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Max 2 lines */
  -webkit-box-orient: vertical;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .kc-mini {
    min-height: 70px;
    max-height: 110px;
    padding: 0.6rem;
  }

  .kc-mini-title {
    font-size: 0.8rem;
  }

  .kc-mini-preview {
    font-size: 0.7rem;
    -webkit-line-clamp: 1; /* 1 line on mobile */
  }
}

/* Accessibility: keyboard focus */
.kc-mini:focus-visible {
  outline: 2px solid var(--aav-primary, #9e23a3);
  outline-offset: 2px;
}

/* Dark theme overrides – denser cards on dark surface */
[data-theme="dark"] .kc-mini {
  background-color: var(--bg-secondary, #252525);
  border-color: var(--border-color, #333);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .kc-mini-title {
  color: var(--text-primary, #e5e5e5);
}

[data-theme="dark"] .kc-mini-preview {
  color: var(--text-secondary, #9ca3af);
}
/**
 * Commit Timeline Styles - Git-like Timeline View
 *
 * Git-inspired timeline for Proofline view commit history
 */

.commit-timeline {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(0.75rem * var(--proofline-zoom-scale, 1)) calc(1rem * var(--proofline-zoom-scale, 1));
  overflow-y: auto;
}

/* Timeline Header */
.timeline-header {
  display: flex;
  align-items: center;
  gap: calc(0.6rem * var(--proofline-zoom-scale, 1));
  padding-bottom: calc(1rem * var(--proofline-zoom-scale, 1));
  margin-bottom: calc(1.2rem * var(--proofline-zoom-scale, 1.2));
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  color: var(--md-on-surface, #111827);
}

.timeline-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  flex: 1;
}

.timeline-header .commit-count {
  font-size: 0.875rem;
  color: var(--md-on-surface-variant, #6b7280);
  background: var(--md-surface-variant, #f3e8ff);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(158, 35, 163, 0.2);
}

/* Instrument UI: calmer header pill */
html[data-ui-style="instrument"] .timeline-header .commit-count {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.10);
  color: rgba(31, 21, 51, 0.65);
}

[data-theme="dark"] .timeline-header .commit-count {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.timeline-direction {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(51, 65, 85, 0.7);
  margin-bottom: 0.75rem;
}

.timeline-direction .direction-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(148, 163, 184, 0.2) 0%,
    rgba(148, 163, 184, 0.8) 50%,
    rgba(148, 163, 184, 0.2) 100%
  );
}

/* Timeline List */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--proofline-gap, 2rem);
  position: relative;
}

/* Individual Commit Entry */
.timeline-commit {
  display: flex;
  gap: calc(0.85rem * var(--proofline-zoom-scale, 1));
  position: relative;
}

/* Timeline Visual Elements */
.timeline-line {
  position: absolute;
  left: var(--proofline-node-line-left, 16px);
  top: var(--proofline-node-size, 32px);
  bottom: calc(-1 * var(--proofline-gap, 2rem));
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(158, 35, 163, 0.9) 0%,
    rgba(158, 35, 163, 0.2) 100%
  );
}

/* Instrument UI: remove “neon” line */
html[data-ui-style="instrument"] .timeline-line {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.20) 0%,
    rgba(0, 0, 0, 0.06) 100%
  );
}

[data-theme="dark"] html[data-ui-style="instrument"] .timeline-line {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
}

.timeline-node {
  width: var(--proofline-node-size, 32px);
  height: var(--proofline-node-size, 32px);
  border-radius: 50%;
  background: var(--md-surface, #ffffff);
  border: 2px solid var(--aav-primary, #9e23a3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--aav-primary, #9e23a3);
  box-shadow: 0 0 12px rgba(158, 35, 163, 0.3);
  z-index: 1;
  position: relative;
}

/* Instrument UI: no glow; neutral node with subtle accent on hover */
html[data-ui-style="instrument"] .timeline-node {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(31, 21, 51, 0.70);
  box-shadow: none;
}

html[data-ui-style="instrument"] .timeline-commit:hover .timeline-node {
  border-color: rgba(158, 35, 163, 0.35);
  color: #9e23a3;
}

[data-theme="dark"] html[data-ui-style="instrument"] .timeline-node {
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(232, 234, 237, 0.75);
}

/* Commit Content */
.timeline-content {
  flex: 1;
  background: var(--md-surface, #ffffff);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: var(--proofline-card-radius, 10px);
  padding: calc(var(--proofline-card-padding, 0.9rem) * 0.85)
    calc(var(--proofline-card-padding, 0.9rem) + 0.2rem);
  transition: all 0.2s ease;
}

.timeline-content:hover {
  border-color: var(--aav-primary, #9e23a3);
  box-shadow: 0 4px 14px rgba(148, 163, 184, 0.35);
}

html[data-ui-style="instrument"] .timeline-content:hover {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Commit Header */
.commit-header {
  margin-bottom: 0.75rem;
}

.commit-meta {
  display: flex;
  align-items: center;
  gap: calc(0.6rem * var(--proofline-zoom-scale, 1));
  flex-wrap: wrap;
  font-size: calc(0.78rem * var(--proofline-zoom-scale, 1));
}

.commit-id {
  font-family: 'Monaco', 'Courier New', monospace;
  font-weight: 600;
  color: var(--aav-primary, #9e23a3);
  background: rgba(158, 35, 163, 0.08);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid rgba(158, 35, 163, 0.2);
}

html[data-ui-style="instrument"] .commit-id {
  color: rgba(31, 21, 51, 0.78);
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.10);
}

.commit-time,
.commit-author {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--md-on-surface-variant, #5b6478);
}

.commit-time svg,
.commit-author svg {
  opacity: 0.7;
}

.commit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  border: 1px solid transparent;
}

.commit-pill .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.commit-pill.fresh {
  background: rgba(34, 197, 94, 0.15);
  color: #0f7a3b;
  border-color: rgba(34, 197, 94, 0.35);
}

.commit-pill.fresh .pill-dot {
  background: #22c55e;
}

.commit-pill.recent {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.3);
}

.commit-pill.recent .pill-dot {
  background: #3b82f6;
}

.commit-pill.archive {
  background: rgba(148, 163, 184, 0.15);
  color: #475569;
  border-color: rgba(148, 163, 184, 0.3);
}

.commit-pill.archive .pill-dot {
  background: #94a3b8;
}

/* Commit Message */
.commit-message {
  margin: 0;
  font-size: 0.78rem;
  color: var(--md-on-surface-variant, #5b6478);
  line-height: 1.4;
  margin: 0.35rem 0 0.65rem 0;
  padding-left: 0.4rem;
  border-left: 2px solid rgba(158, 35, 163, 0.35);
}

/* KCs in Commit */
.commit-kcs {
  margin-top: calc(0.75rem * var(--proofline-zoom-scale, 1));
  padding-top: calc(0.75rem * var(--proofline-zoom-scale, 1));
  border-top: 1px solid var(--border-color, #333);
}

.commit-kcs-header {
  margin-bottom: 0.5rem;
}

.kcs-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(51, 65, 85, 0.75);
}

.commit-kcs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--proofline-grid-min-width, 260px), 1fr));
  gap: calc(0.65rem * var(--proofline-zoom-scale, 1));
}

/* Loading State */
.commit-timeline-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-secondary, #999);
  gap: 1rem;
}

.commit-timeline-loading .loading-icon {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  color: var(--accent-color, #6366f1);
}

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

/* Empty State */
.commit-timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  color: var(--md-on-surface-variant, #6b7280);
  gap: 1rem;
  min-height: 300px;
}

.commit-timeline-empty .empty-icon {
  color: var(--border-color, #333);
  margin-bottom: 0.5rem;
}

.commit-timeline-empty h4 {
  margin: 0;
  color: var(--md-on-surface, #111827);
  font-size: 1.125rem;
  font-weight: 600;
}

.commit-timeline-empty p {
  margin: 0;
  font-size: 0.875rem;
  max-width: 400px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .commit-timeline {
    padding: calc(0.75rem * var(--proofline-zoom-scale, 1));
  }

  .timeline-commit {
    gap: calc(0.75rem * var(--proofline-zoom-scale, 1));
  }

  .timeline-line {
    left: var(--proofline-node-line-left, 14px);
  }

  .timeline-node {
    width: var(--proofline-node-size, 28px);
    height: var(--proofline-node-size, 28px);
  }

  .timeline-content {
    padding: var(--proofline-card-padding, 0.9rem);
  }

  .commit-meta {
    gap: calc(0.5rem * var(--proofline-zoom-scale, 1));
    font-size: 0.75rem;
  }

  .commit-kcs-grid {
    grid-template-columns: 1fr;
    gap: calc(0.5rem * var(--proofline-zoom-scale, 1));
  }
}

/* Dark theme support */
[data-theme="dark"] .timeline-content {
  background: #2a2a2a;
}

[data-theme="dark"] .timeline-node {
  background: #2a2a2a;
}
/* StageCard.css - Stage progression component */

.stage-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  background: var(--md-surface, #fff);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.stage-card + .stage-card {
  margin-top: 8px;
}

.stage-card:hover {
  border-color: rgba(158, 35, 163, 0.45);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

.stage-card.current {
  border-color: rgba(158, 35, 163, 0.6);
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.08), rgba(111, 45, 189, 0.04));
}

.stage-card.completed {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.03);
}

.stage-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.stage-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.15);
  flex-shrink: 0;
}

.stage-card.current .stage-card-icon {
  background: linear-gradient(135deg, #9e23a3, #6f2dbd);
}

.stage-card.completed .stage-card-icon {
  background: #16a34a;
}

.icon-completed,
.icon-current {
  color: #fff;
}

.icon-upcoming {
  color: rgba(75, 85, 99, 0.9);
}

.stage-card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stage-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.stage-card-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.stage-badge.current {
  background: rgba(158, 35, 163, 0.9);
  color: white;
}

.stage-badge.completed {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.stage-card-goal {
  margin: 0;
  font-size: 12px;
  color: rgba(75, 85, 99, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  border-left: 1px solid rgba(148, 163, 184, 0.4);
}

.stage-card-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.count-label {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(75, 85, 99, 0.8);
  font-weight: 600;
}

.count-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.count-value.committed {
  color: #16a34a;
}

.count-divider {
  width: 1px;
  height: 24px;
  background: rgba(148, 163, 184, 0.5);
}

.stage-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 120px;
}

.stage-card-advance-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #9e23a3, #6f2dbd);
  color: white;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.2s ease;
}

/* Instrument UI: flatter surfaces (less gradient fill, more "panel" feel) */
html[data-ui-style="instrument"] .stage-card.current {
  background: rgba(158, 35, 163, 0.05);
}

html[data-ui-style="instrument"] .stage-card.current .stage-card-icon {
  background: rgba(158, 35, 163, 0.85);
}

html[data-ui-style="instrument"] .stage-card-advance-pill {
  background: rgba(158, 35, 163, 0.95);
}

html[data-ui-style="instrument"] .stage-card-advance-pill:hover:not(:disabled) {
  box-shadow: 0 6px 16px rgba(158, 35, 163, 0.25);
}

.stage-card-advance-pill:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(111, 45, 189, 0.3);
}

.stage-card-advance-pill:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.stage-card-status-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(75, 85, 99, 0.9);
  background: rgba(148, 163, 184, 0.18);
}

@media (max-width: 900px) {
  .stage-card {
    flex-wrap: wrap;
    border-radius: 24px;
  }

  .stage-card-meta {
    border-left: none;
    border-top: 1px solid rgba(148, 163, 184, 0.4);
    width: 100%;
    justify-content: center;
    padding-top: 10px;
    margin-top: 10px;
  }

  .stage-card-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
/* StageAdvancementModal.css - Stage progression confirmation */

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

.stage-advancement-modal {
  background: var(--md-surface, #ffffff);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideIn 0.2s ease-out;
}

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

/* Header */
.stage-advancement-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.stage-advancement-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-primary, #111827);
}

.stage-advancement-modal-title svg {
  color: var(--aav-primary, #9e23a3);
}

.stage-advancement-modal-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.stage-advancement-modal-close {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  border-radius: 6px;
  transition: all 0.15s ease;
}

.stage-advancement-modal-close:hover {
  background: var(--bg-hover, #f3f4f6);
  color: var(--text-primary, #111827);
}

/* Body */
.stage-advancement-modal-body {
  padding: 18px 20px 16px;
  overflow-y: auto;
  flex: 1;
}

/* Error Message */
.stage-advancement-modal-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #991b1b;
  font-size: 14px;
}

.stage-advancement-modal-error svg {
  flex-shrink: 0;
}

/* Stage Transition Visualization */
.stage-transition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.06) 0%, rgba(111, 45, 189, 0.04) 100%);
  border-radius: 10px;
  margin-bottom: 16px;
}

.stage-transition-from,
.stage-transition-to {
  flex: 1;
  text-align: center;
}

.stage-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 8px;
  font-weight: 600;
}

.stage-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #111827);
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stage-name.next {
  background: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 100%);
  color: white;
}

.stage-transition-arrow {
  color: var(--aav-primary, #9e23a3);
  flex-shrink: 0;
}

/* Sections */
.stage-advancement-section {
  margin-bottom: 16px;
}

.stage-advancement-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stage-advancement-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  margin: 16px 0 8px 0;
}

/* Exit Criteria */
.stage-advancement-criteria {
  background: rgba(148, 163, 184, 0.08);
  border-radius: 8px;
  padding: 12px;
}

.criteria-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.criteria-item.met {
  background: rgba(22, 163, 74, 0.05);
  border: 1px solid rgba(22, 163, 74, 0.18);
}

.criteria-item.unmet {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.22);
}

.criteria-icon {
  flex-shrink: 0;
}

.criteria-icon.met {
  color: #16a34a;
}

.criteria-icon.unmet {
  color: #dc2626;
}

.criteria-count {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  font-size: 13px;
}

/* Stage Goal */
.stage-advancement-goal {
  background: rgba(148, 163, 184, 0.08);
  border-left: 3px solid var(--aav-primary, #9e23a3);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.stage-advancement-goal p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary, #111827);
}

/* Suggested macros section removed for minimal modal */

/* Warning */
.stage-advancement-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #92400e;
  font-size: 14px;
  line-height: 1.5;
}

.stage-advancement-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.stage-advancement-warning p {
  margin: 0;
}

/* Footer */
.stage-advancement-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  background: var(--md-surface-variant, #f3e8ff);
}

.stage-advancement-modal-button {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.stage-advancement-modal-button.secondary {
  background: transparent;
  color: var(--text-primary, #111827);
  border: 1px solid var(--border-color, #e5e7eb);
}

.stage-advancement-modal-button.secondary:hover:not(:disabled) {
  background: var(--bg-hover, #f3f4f6);
}

.stage-advancement-modal-button.primary {
  background: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 100%);
  color: white;
}

.stage-advancement-modal-button.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #6f2dbd 0%, #9e23a3 100%);
  box-shadow: 0 4px 12px rgba(111, 45, 189, 0.35);
}

.stage-advancement-modal-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 640px) {
  .stage-advancement-modal {
    width: 95%;
    max-height: 90vh;
  }

  .stage-transition {
    flex-direction: column;
    gap: 12px;
  }

  .stage-transition-arrow {
    transform: rotate(90deg);
  }

  .stage-advancement-modal-footer {
    flex-direction: column;
  }

  .stage-advancement-modal-button {
    width: 100%;
  }
}
/**
 * KnowledgeTree.css
 * Styles for the unified tree-based knowledge view
 * Follows Material Design 3 principles with glassmorphism effects
 */

/* Main Tree Container */
.knowledge-tree-view {
  font-family: var(--aav-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  color: var(--md-on-surface, #111827);
  background: linear-gradient(
    135deg,
    rgba(158, 35, 163, 0.01) 0%,
    rgba(111, 45, 189, 0.01) 100%
  );
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  box-sizing: border-box;
}

[data-theme="dark"] .knowledge-tree-view {
  color: var(--md-on-surface-dark, #e5e7eb);
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 1) 0%,
    rgba(17, 24, 39, 1) 100%
  );
}

/* Custom Scrollbar */
.knowledge-tree-view::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.knowledge-tree-view::-webkit-scrollbar-track {
  background: rgba(158, 35, 163, 0.05);
  border-radius: 4px;
}

.knowledge-tree-view::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.3) 0%, rgba(111, 45, 189, 0.3) 100%);
  border-radius: 4px;
  transition: background 0.2s ease;
}

.knowledge-tree-view::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.5) 0%, rgba(111, 45, 189, 0.5) 100%);
}

/* Tree Node Base Styles */
.tree-folder-node,
.tree-document-node,
.tree-section-node,
.tree-entity-node {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Folder Node Styles */
.tree-folder-node .folder-header {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tree-folder-node .folder-header:hover {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.12) 0%, rgba(111, 45, 189, 0.08) 100%) !important;
  border-color: rgba(158, 35, 163, 0.25) !important;
  box-shadow: 0 2px 8px rgba(158, 35, 163, 0.1);
}

.tree-folder-node .folder-header:active {
  transform: scale(0.98);
}

/* Document Node Styles */
.tree-document-node .document-header {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tree-document-node .document-header:hover {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.08) 0%, rgba(111, 45, 189, 0.05) 100%) !important;
  border-color: rgba(158, 35, 163, 0.2) !important;
  box-shadow: 0 2px 6px rgba(158, 35, 163, 0.08);
}

.tree-document-node .document-header:active {
  transform: scale(0.98);
}

/* Section Node Styles */
.tree-section-node .section-header {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tree-section-node .section-header:hover {
  background: linear-gradient(135deg, rgba(111, 45, 189, 0.08) 0%, rgba(158, 35, 163, 0.05) 100%) !important;
  border-color: rgba(111, 45, 189, 0.2) !important;
  box-shadow: 0 1px 4px rgba(111, 45, 189, 0.08);
}

.tree-section-node .section-header:active {
  transform: scale(0.98);
}

/* Entity Node Styles */
.tree-entity-node .entity-display {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tree-entity-node .entity-display:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tree-entity-node .entity-display:active {
  transform: scale(0.98);
}

/* Horizontal Layout Styles */
.tree-folder-node.horizontal,
.tree-document-node.horizontal,
.tree-section-node.horizontal,
.tree-entity-node.horizontal {
  display: inline-block;
  vertical-align: top;
}

/* Expand/Collapse Icon Animation */
.tree-folder-node svg,
.tree-document-node svg,
.tree-section-node svg {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Connecting Lines (Vertical Layout) */
.tree-folder-node > div:last-child,
.tree-document-node > div:last-child,
.tree-section-node > div:last-child {
  position: relative;
}

.tree-folder-node.vertical > div:last-child::before,
.tree-document-node.vertical > div:last-child::before,
.tree-section-node.vertical > div:last-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(158, 35, 163, 0.15), rgba(158, 35, 163, 0.05));
  border-radius: 1px;
}

/* Selection Highlight */
.tree-document-node .document-header.selected,
.tree-section-node .section-header.selected,
.tree-entity-node .entity-display.selected {
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.4);
}

/* Badge Styles */
.tree-folder-node span[style*="border-radius: 12px"],
.tree-document-node span[style*="border-radius"],
.tree-section-node span[style*="border-radius"],
.tree-entity-node span[style*="border-radius"] {
  transition: all 0.2s ease;
}

.tree-folder-node:hover span[style*="border-radius: 12px"],
.tree-document-node:hover span[style*="border-radius"],
.tree-section-node:hover span[style*="border-radius"],
.tree-entity-node:hover span[style*="border-radius"] {
  transform: scale(1.05);
}

/* Loading State */
.knowledge-tree-view.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Empty State */
.knowledge-tree-view .empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--md-on-surface-variant, #6b7280);
}

.knowledge-tree-view .empty-state svg {
  opacity: 0.5;
  margin-bottom: 16px;
  color: var(--aav-primary, #9e23a3);
}

.knowledge-tree-view .empty-state h3 {
  color: var(--md-on-surface, #111827);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.knowledge-tree-view .empty-state p {
  font-size: 13px;
  color: var(--md-on-surface-variant, #6b7280);
}

[data-theme="dark"] .knowledge-tree-view .empty-state h3 {
  color: var(--md-on-surface-dark, #e5e7eb);
}

[data-theme="dark"] .knowledge-tree-view .empty-state p {
  color: var(--md-on-surface-variant-dark, #9ca3af);
}

/* Layout Toggle Button */
.knowledge-tree-view button[title*="layout"] {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.knowledge-tree-view button[title*="layout"]:hover {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.25) 0%, rgba(111, 45, 189, 0.25) 100%) !important;
  border-color: rgba(158, 35, 163, 0.35) !important;
  transform: scale(1.05);
}

.knowledge-tree-view button[title*="layout"]:active {
  transform: scale(0.95);
}

/* Hover Popup Styles */
.tree-folder-node div[style*="position: absolute"],
.tree-document-node div[style*="position: absolute"],
.tree-section-node div[style*="position: absolute"],
.tree-entity-node div[style*="position: absolute"] {
  animation: fadeInUp 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Context Menu Styles */
.tree-document-node div[style*="position: fixed"] {
  animation: fadeInScale 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Context Menu Button Hover */
.tree-document-node div[style*="position: fixed"] button {
  transition: background 0.15s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .knowledge-tree-view {
    padding: 12px;
  }

  .tree-folder-node .folder-header,
  .tree-document-node .document-header,
  .tree-section-node .section-header {
    padding: 8px;
  }

  /* Force vertical layout on mobile */
  .tree-folder-node.horizontal,
  .tree-document-node.horizontal,
  .tree-section-node.horizontal,
  .tree-entity-node.horizontal {
    display: block;
  }
}

/* Accessibility - Focus Styles */
.tree-folder-node .folder-header:focus-visible,
.tree-document-node .document-header:focus-visible,
.tree-section-node .section-header:focus-visible,
.tree-entity-node .entity-display:focus-visible {
  outline: 2px solid rgba(158, 35, 163, 0.6);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .tree-folder-node .folder-header,
  .tree-document-node .document-header,
  .tree-section-node .section-header,
  .tree-entity-node .entity-display {
    border-width: 2px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .tree-folder-node *,
  .tree-document-node *,
  .tree-section-node *,
  .tree-entity-node * {
    animation: none !important;
    transition: none !important;
  }
}

/* Print Styles */
@media print {
  .knowledge-tree-view {
    background: white !important;
    color: black !important;
  }

  .knowledge-tree-view button[title*="layout"] {
    display: none;
  }

  .tree-folder-node .folder-header,
  .tree-document-node .document-header,
  .tree-section-node .section-header {
    border: 1px solid #ddd !important;
    background: white !important;
  }
}
.session-capsule-chip {
  border: 1px solid rgba(158, 35, 163, 0.2);
  background: rgba(158, 35, 163, 0.08);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  color: #1f1533;
  min-width: 0;
}

.session-capsule-chip:hover {
  background: rgba(158, 35, 163, 0.18);
  border-color: rgba(158, 35, 163, 0.35);
  transform: translateY(-1px);
}

/* Instrument UI: calmer chip (less tint, less motion) */
html[data-ui-style="instrument"] .session-capsule-chip {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(158, 35, 163, 0.18);
  transition: background 0.15s ease, border-color 0.15s ease;
}

html[data-ui-style="instrument"] .session-capsule-chip:hover {
  background: rgba(158, 35, 163, 0.06);
  border-color: rgba(158, 35, 163, 0.32);
  transform: none;
}

html[data-ui-style="instrument"] .session-capsule-chip-icon {
  background: rgba(158, 35, 163, 0.08);
}

html[data-ui-style="instrument"] .session-capsule-chip-meta {
  font-family: var(--sci-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}

.session-capsule-chip:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.25);
}

.session-capsule-chip-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(158, 35, 163, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(158, 35, 163, 0.9);
}

.session-capsule-chip-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.session-capsule-chip-title {
  font-size: 12px;
  font-weight: 600;
  color: #1f1533;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-capsule-chip-meta {
  font-size: 10px;
  color: rgba(31, 21, 51, 0.6);
}

/* View-only session styles */
.session-capsule-chip.view-only {
  border-color: rgba(156, 163, 175, 0.25);
  background: rgba(156, 163, 175, 0.08);
}

.session-capsule-chip.view-only:hover {
  background: rgba(156, 163, 175, 0.15);
  border-color: rgba(156, 163, 175, 0.35);
}

.session-capsule-chip-icon.view-only {
  background: rgba(156, 163, 175, 0.15);
  color: #6b7280;
}

.session-capsule-view-only-badge {
  display: inline-flex;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(156, 163, 175, 0.2);
  border-radius: 4px;
  color: #6b7280;
}

/* Dark theme */
[data-theme="dark"] .session-capsule-chip {
  color: #e5deff;
  border-color: rgba(158, 35, 163, 0.3);
  background: rgba(158, 35, 163, 0.12);
}

[data-theme="dark"] .session-capsule-chip:hover {
  background: rgba(158, 35, 163, 0.2);
  border-color: rgba(158, 35, 163, 0.4);
}

[data-theme="dark"] .session-capsule-chip-icon {
  background: rgba(158, 35, 163, 0.2);
  color: rgba(200, 150, 255, 0.9);
}

[data-theme="dark"] .session-capsule-chip-title {
  color: #e5deff;
}

[data-theme="dark"] .session-capsule-chip-meta {
  color: rgba(229, 222, 255, 0.6);
}

[data-theme="dark"] .session-capsule-chip.view-only {
  border-color: rgba(107, 114, 128, 0.3);
  background: rgba(107, 114, 128, 0.1);
}

[data-theme="dark"] .session-capsule-chip.view-only:hover {
  background: rgba(107, 114, 128, 0.18);
  border-color: rgba(107, 114, 128, 0.4);
}

[data-theme="dark"] .session-capsule-chip-icon.view-only {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

[data-theme="dark"] .session-capsule-view-only-badge {
  background: rgba(107, 114, 128, 0.3);
  color: #9ca3af;
}




/**
 * ContextModeSlider v2 Styles
 * 
 * Design: Matches KnowledgePane header-button-group styling
 * - Uses same purple gradient, border colors, and typography
 * - Progressive disclosure sub-options with smooth animations
 * - Compact inline layout that fits in breadcrumb section
 */

/* ========================
   Container
   ======================== */
.context-mode-selector-v2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.context-mode-selector-v2.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ========================
   Primary Mode Row
   ======================== */
.context-mode-primary {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ========================
   Segmented Button Group (matches KnowledgePane .header-button-group)
   ======================== */
.context-mode-button-group {
  display: inline-flex;
  align-items: center;
  background: rgba(158, 35, 163, 0.04);
  border: 1px solid rgba(158, 35, 163, 0.12);
  border-radius: 8px;
  padding: 2px;
  gap: 1px;
}

/* ========================
   Primary Mode Button (matches .header-icon-btn style)
   ======================== */
.context-mode-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(100, 100, 100, 0.8);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.context-mode-btn:hover:not(.active):not(:disabled) {
  background: rgba(158, 35, 163, 0.08);
  color: #9e23a3;
}

.context-mode-btn.active {
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
  box-shadow: 0 1px 3px rgba(158, 35, 163, 0.3);
}

.context-mode-btn:focus-visible {
  outline: 2px solid #9e23a3;
  outline-offset: 2px;
}

.context-mode-btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* Mode Icon */
.mode-icon {
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.context-mode-btn:hover .mode-icon,
.context-mode-btn.active .mode-icon {
  opacity: 1;
}

/* Mode Label */
.mode-label {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* KB Map Badge (small indicator on active modes that auto-inject KB map) */
.kb-map-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  margin-left: 2px;
  animation: kb-badge-pop 0.3s ease;
}

.kb-map-badge svg {
  color: rgba(255, 255, 255, 0.95);
}

@keyframes kb-badge-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Expand Button (chevron to show/hide sub-options) */
.context-mode-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(158, 35, 163, 0.06);
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 6px;
  color: rgba(158, 35, 163, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.context-mode-expand-btn:hover {
  background: rgba(158, 35, 163, 0.12);
  border-color: rgba(158, 35, 163, 0.25);
  color: #9e23a3;
}

.context-mode-expand-btn svg {
  transition: transform 0.2s ease;
}

.context-mode-expand-btn.expanded svg {
  transform: rotate(180deg);
}

/* ========================
   Active Mode Hint
   ======================== */
.context-mode-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 4px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(100, 100, 100, 0.7);
  letter-spacing: 0.01em;
}

.hint-icon {
  opacity: 0.7;
  color: #9e23a3;
}

/* ========================
   Sub-options Panel (Progressive Disclosure)
   ======================== */
.context-mode-suboptions-wrapper {
  overflow: hidden;
}

.context-mode-suboptions {
  display: flex;
  gap: 6px;
  padding: 6px 4px 2px;
}

/* Sub-mode Button */
.context-submode-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(158, 35, 163, 0.04);
  border: 1px solid rgba(158, 35, 163, 0.12);
  border-radius: 6px;
  color: rgba(80, 80, 80, 0.85);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.context-submode-btn:hover:not(.active):not(.disabled) {
  background: rgba(158, 35, 163, 0.1);
  border-color: rgba(158, 35, 163, 0.2);
  color: #9e23a3;
}

.context-submode-btn.active {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.15) 0%, rgba(111, 45, 189, 0.1) 100%);
  border-color: rgba(158, 35, 163, 0.35);
  color: #9e23a3;
  font-weight: 600;
}

.context-submode-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.context-submode-btn:focus-visible {
  outline: 2px solid #9e23a3;
  outline-offset: 2px;
}

.submode-icon {
  opacity: 0.8;
}

.context-submode-btn.active .submode-icon {
  opacity: 1;
}

.submode-label {
  letter-spacing: 0.01em;
}

/* Selection Count Badge */
.selection-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  border-radius: 7px;
  font-size: 9px;
  font-weight: 700;
  color: white;
  animation: count-pop 0.3s ease;
}

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

/* ========================
   Dark Theme Support
   ======================== */
[data-theme="dark"] .context-mode-button-group {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .context-mode-btn {
  color: rgba(200, 200, 200, 0.8);
}

[data-theme="dark"] .context-mode-btn:hover:not(.active):not(:disabled) {
  background: rgba(158, 35, 163, 0.15);
  color: #c77fd1;
}

[data-theme="dark"] .context-mode-btn.active {
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
}

[data-theme="dark"] .context-mode-expand-btn {
  background: rgba(158, 35, 163, 0.1);
  border-color: rgba(158, 35, 163, 0.25);
  color: rgba(200, 127, 208, 0.7);
}

[data-theme="dark"] .context-mode-expand-btn:hover {
  background: rgba(158, 35, 163, 0.2);
  border-color: rgba(158, 35, 163, 0.35);
  color: #c77fd1;
}

[data-theme="dark"] .context-mode-hint {
  color: rgba(200, 200, 200, 0.6);
}

[data-theme="dark"] .hint-icon {
  color: #c77fd1;
}

[data-theme="dark"] .context-submode-btn {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.2);
  color: rgba(200, 200, 200, 0.85);
}

[data-theme="dark"] .context-submode-btn:hover:not(.active):not(.disabled) {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.3);
  color: #c77fd1;
}

[data-theme="dark"] .context-submode-btn.active {
  background: rgba(158, 35, 163, 0.2);
  border-color: rgba(158, 35, 163, 0.45);
  color: #c77fd1;
}

/* ========================
   Responsive Design
   ======================== */
@media (max-width: 500px) {
  .mode-label {
    display: none;
  }

  .context-mode-btn {
    padding: 6px 8px;
  }

  .context-submode-btn {
    padding: 4px 8px;
  }

  .submode-label {
    display: none;
  }
}

/* ========================
   Accessibility
   ======================== */
@media (prefers-reduced-motion: reduce) {
  .context-mode-btn,
  .context-submode-btn,
  .context-mode-expand-btn,
  .context-mode-expand-btn svg,
  .kb-map-badge,
  .selection-count-badge {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-contrast: high) {
  .context-mode-button-group {
    border-width: 2px;
  }

  .context-mode-btn.active {
    outline: 2px solid white;
    outline-offset: -2px;
  }

  .context-submode-btn.active {
    border-width: 2px;
  }
}

/* ========================
   Instrument UI Skin
   Goal: feel native inside KnowledgePane instrument headers
   - Calm surface, no glow/gradients
   - Purple only for meaningful accents
   ======================== */
html[data-ui-style="instrument"] .context-mode-button-group {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

html[data-ui-style="instrument"] .context-mode-btn {
  color: rgba(31, 21, 51, 0.72);
}

html[data-ui-style="instrument"] .context-mode-btn:hover:not(.active):not(:disabled) {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(31, 21, 51, 0.9);
}

html[data-ui-style="instrument"] .context-mode-btn.active {
  background: rgba(158, 35, 163, 0.10);
  color: rgba(31, 21, 51, 0.95);
  box-shadow: none;
}

/* Remove the "extra indicator" in instrument mode (active state is already clear) */
html[data-ui-style="instrument"] .kb-map-badge {
  display: none;
}

html[data-ui-style="instrument"] .context-mode-expand-btn {
  background: transparent;
  border: none;
  color: rgba(31, 21, 51, 0.55);
}

html[data-ui-style="instrument"] .context-mode-expand-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #9e23a3;
}

html[data-ui-style="instrument"] .context-mode-hint {
  color: rgba(31, 21, 51, 0.55);
  padding-left: 2px;
}

html[data-ui-style="instrument"] .hint-icon {
  color: rgba(31, 21, 51, 0.55);
}

html[data-ui-style="instrument"] .context-mode-suboptions {
  padding: 4px 2px 2px;
}

html[data-ui-style="instrument"] .context-submode-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(31, 21, 51, 0.75);
}

html[data-ui-style="instrument"] .context-submode-btn:hover:not(.active):not(.disabled) {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(31, 21, 51, 0.9);
}

html[data-ui-style="instrument"] .context-submode-btn.active {
  background: rgba(158, 35, 163, 0.10);
  border-color: rgba(158, 35, 163, 0.28);
  color: rgba(31, 21, 51, 0.95);
}

html[data-ui-style="instrument"] .selection-count-badge {
  background: #9e23a3;
}

/* Instrument + Dark theme */
html[data-ui-style="instrument"][data-theme="dark"] .context-mode-button-group {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

html[data-ui-style="instrument"][data-theme="dark"] .context-mode-btn {
  color: rgba(232, 234, 237, 0.75);
}

html[data-ui-style="instrument"][data-theme="dark"] .context-mode-btn:hover:not(.active):not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 234, 237, 0.92);
}

html[data-ui-style="instrument"][data-theme="dark"] .context-mode-btn.active {
  background: rgba(158, 35, 163, 0.22);
  color: #e8eaed;
}

html[data-ui-style="instrument"][data-theme="dark"] .context-mode-expand-btn {
  color: rgba(232, 234, 237, 0.6);
}

html[data-ui-style="instrument"][data-theme="dark"] .context-mode-expand-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #c77fd1;
}

html[data-ui-style="instrument"][data-theme="dark"] .context-mode-hint,
html[data-ui-style="instrument"][data-theme="dark"] .hint-icon {
  color: rgba(232, 234, 237, 0.6);
}

html[data-ui-style="instrument"][data-theme="dark"] .context-submode-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(232, 234, 237, 0.78);
}

html[data-ui-style="instrument"][data-theme="dark"] .context-submode-btn:hover:not(.active):not(.disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(232, 234, 237, 0.92);
}

html[data-ui-style="instrument"][data-theme="dark"] .context-submode-btn.active {
  background: rgba(158, 35, 163, 0.22);
  border-color: rgba(158, 35, 163, 0.40);
  color: #e8eaed;
}.workspace-pane {
  --pane-header-height: 64px;
  --pane-header-padding: 8px 16px;
  --pane-header-gap: clamp(6px, 1vw, 12px);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh; /* Prevent overflow */
  width: 100%;
  max-width: 100%; /* Prevent horizontal overflow */
  background: white;
  color: #333;
  overflow: hidden;
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  position: relative;
  min-height: 0; /* Critical for flex containers */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.workspace-pane > * {
  flex-shrink: 0;
}

/* Tab content wrapper must be able to shrink */
.workspace-pane > .tab-content-wrapper {
  flex-shrink: 1;
  min-height: 0;
}

/* ===== PANE HEADER (Material Design - Standardized) ===== */

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pane-header-padding);
  height: var(--pane-header-height);
  min-height: var(--pane-header-height);
  max-height: var(--pane-header-height);
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.08) 0%, rgba(111, 45, 189, 0.05) 100%);
  border-bottom: 1px solid rgba(158, 35, 163, 0.15);
  backdrop-filter: blur(8px);
  position: relative; /* Changed from sticky to prevent top cutoff */
  top: 0;
  z-index: 20;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: var(--pane-header-gap);
  flex-wrap: nowrap;
}

.pane-header-left {
  display: flex;
  align-items: center;
  gap: var(--pane-header-gap);
  flex-wrap: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}

.pane-title {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

/* ===== UNIFIED HEADER COMPONENTS ===== */

/* Status Chip - Compact pill-style status indicator */
.pane-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.pane-status-chip.ready {
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.2);
  color: #2E7D32;
}

.pane-status-chip.loading {
  background: rgba(158, 35, 163, 0.08);
  border: 1px solid rgba(158, 35, 163, 0.2);
  color: #9e23a3;
}

.pane-status-chip .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pane-status-chip.ready .status-dot {
  background: #4CAF50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

.pane-status-chip.loading .status-dot {
  background: #9e23a3;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Header Meta Text - Subtle info like node counts */
.header-meta-text {
  font-size: 11px;
  font-weight: 500;
  color: rgba(100, 100, 100, 0.8);
  padding: 0 8px;
  white-space: nowrap;
}

/* Header Button Group - Unified container for related buttons */
.header-button-group {
  display: inline-flex;
  align-items: center;
  background: rgba(158, 35, 163, 0.04);
  border: 1px solid rgba(158, 35, 163, 0.12);
  border-radius: 8px;
  padding: 2px;
  gap: 1px;
}

/* Group Separator - Subtle divider within button groups */
.group-separator {
  width: 1px;
  height: 16px;
  background: rgba(158, 35, 163, 0.15);
  margin: 0 2px;
}

/* Header Icon Button - Compact icon-only buttons */
.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(100, 100, 100, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}

.header-icon-btn:hover {
  background: rgba(158, 35, 163, 0.1);
  color: #9e23a3;
}

.header-icon-btn.active {
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
  box-shadow: 0 1px 3px rgba(158, 35, 163, 0.3);
}

/* Header Pill Button - Icon + text pills */
.header-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 16px;
  color: rgba(80, 80, 80, 0.85);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.header-pill-btn:hover {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.25);
  color: #9e23a3;
}

.header-pill-btn.active {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.15) 0%, rgba(111, 45, 189, 0.1) 100%);
  border-color: rgba(158, 35, 163, 0.35);
  color: #9e23a3;
}

/* Pill Badge - Count indicator on pills */
.pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  color: white;
}

/* Header Primary Button - Main action buttons */
.header-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(158, 35, 163, 0.25);
}

.header-primary-btn:hover {
  background: linear-gradient(135deg, #b028b6 0%, #9e23a3 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(158, 35, 163, 0.35);
}

.header-primary-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(158, 35, 163, 0.2);
}

/* Session Dropdown Wrapper */
.session-dropdown-wrapper {
  min-width: 160px;
  max-width: 200px;
}

/* Header Presence Group */
.header-presence-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== INSTRUMENT UI: HEADER SESSION CONTROLS (minimal) ===== */

.header-session-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-session-dropdown,
.header-session-share {
  display: flex;
  align-items: center;
}

/* Inline persistence indicator (only shown when saving/saved/error) */
.header-persistence-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(158, 35, 163, 0.12);
  background: rgba(158, 35, 163, 0.04);
  color: rgba(100, 100, 100, 0.7);
}

.header-persistence-indicator.saving {
  color: #9e23a3;
}
.header-persistence-indicator.saved {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.06);
}
.header-persistence-indicator.error {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.06);
}

/* Header "More" menu */
.header-more {
  position: relative;
}

.header-more-menu {
  position: absolute;
  top: 34px;
  right: 0;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 50;
}

.header-more-item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: #222;
  cursor: pointer;
}
.header-more-item:hover {
  background: rgba(158, 35, 163, 0.08);
  color: #9e23a3;
}
.header-more-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.header-more-separator {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 6px 4px;
}

.header-more-meta {
  padding: 6px 10px 4px 10px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.65);
}

/* Instrument UI: calm panel headers (remove gradients/blur, keep purple for active states) */
html[data-ui-style="instrument"] .workspace-pane .pane-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
}

html[data-ui-style="instrument"] .workspace-pane .pane-title {
  text-transform: none;
  letter-spacing: 0;
}

.presence-avatars {
  display: flex;
  align-items: center;
  margin-right: 4px;
}

.presence-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: -6px;
  border: 2px solid white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.presence-avatar:first-child {
  margin-left: 0;
}

.presence-avatar:hover {
  transform: scale(1.1);
  z-index: 1;
}

.presence-avatar.typing {
  animation: presence-pulse 1.5s ease-in-out infinite;
}

@keyframes presence-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(158, 35, 163, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(158, 35, 163, 0); }
}

.presence-more {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  margin-left: 4px;
}

.presence-btn {
  gap: 4px;
  width: auto;
  padding: 0 8px;
}

.presence-count {
  font-size: 11px;
  font-weight: 600;
}

/* ===== DARK MODE FOR UNIFIED COMPONENTS ===== */

[data-theme="dark"] .pane-status-chip.ready {
  background: rgba(76, 175, 80, 0.12);
  border-color: rgba(76, 175, 80, 0.25);
  color: #81C784;
}

[data-theme="dark"] .pane-status-chip.loading {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.3);
  color: #c77fd1;
}

[data-theme="dark"] .header-meta-text {
  color: rgba(200, 200, 200, 0.7);
}

[data-theme="dark"] .header-button-group {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .group-separator {
  background: rgba(158, 35, 163, 0.25);
}

[data-theme="dark"] .header-icon-btn {
  color: rgba(200, 200, 200, 0.7);
}

[data-theme="dark"] .header-icon-btn:hover {
  background: rgba(158, 35, 163, 0.2);
  color: #c77fd1;
}

[data-theme="dark"] .header-pill-btn {
  border-color: rgba(158, 35, 163, 0.25);
  color: rgba(220, 220, 220, 0.85);
}

[data-theme="dark"] .header-pill-btn:hover {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.35);
  color: #c77fd1;
}

[data-theme="dark"] .header-pill-btn.active {
  background: rgba(158, 35, 163, 0.2);
  border-color: rgba(158, 35, 163, 0.45);
  color: #c77fd1;
}

[data-theme="dark"] .presence-avatar {
  border-color: #1e1e1e;
}

[data-theme="dark"] .presence-more {
  color: #aaa;
}

.pane-header-right {
  display: flex;
  align-items: center;
  gap: var(--pane-header-gap);
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.pane-header-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pane-header-gap);
  flex: 0 1 auto;
  min-width: 0;
}

.header-group {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.8vw, 10px);
  flex-wrap: nowrap;
  min-width: 0;
}

.header-divider {
  width: 1px;
  height: 24px;
  background: rgba(158, 35, 163, 0.2);
}

.session-history-inline {
  min-width: 180px;
  max-width: 220px;
}

.active-users-inline {
  display: flex;
  align-items: center;
  gap: 4px;
}

.more-users-count {
  font-size: 11px;
  font-weight: 600;
  color: #666;
}

/* legacy header controls removed */

/* Task 4E: Project stage indicator */
.project-stage-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding: 4px 12px;
  background: rgba(158, 35, 163, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(158, 35, 163, 0.2);
}

.stage-label {
  font-size: 11px;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stage-name {
  font-size: 12px;
  color: #9e23a3;
  font-weight: 600;
}

.next-stage-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 4px;
  color: #2E7D32;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.next-stage-button:hover:not(:disabled) {
  background: rgba(76, 175, 80, 0.2);
  border-color: rgba(76, 175, 80, 0.5);
}

.next-stage-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme="dark"] .project-stage-indicator {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .stage-label {
  color: #bdc1c6;
}

[data-theme="dark"] .stage-name {
  color: #bb86fc;
}

[data-theme="dark"] .next-stage-button {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.4);
  color: #81C784;
}

[data-theme="dark"] .pane-header {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.12) 0%, rgba(111, 45, 189, 0.08) 100%);
  border-bottom-color: rgba(158, 35, 163, 0.25);
}

[data-theme="dark"] .pane-title {
  color: #e0e0e0;
}

[data-theme="dark"] .pane-status {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.2);
  color: #81C784;
}

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

.tab-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 8px 16px;
  min-height: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(250, 250, 250, 0.5);
  box-sizing: border-box;
}

[data-theme="dark"] .tab-navigation {
  background: rgba(30, 30, 40, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Session History Controls */
.session-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--md-outline-variant, rgba(148, 163, 184, 0.35));
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.96) 0%,
    rgba(17, 24, 39, 0.98) 100%
  );
  color: #e5e7eb;
}

[data-theme="light"] .session-controls {
  background: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.98) 0%,
    rgba(241, 245, 249, 0.98) 100%
  );
  color: var(--md-on-surface, #111827);
}

.new-session-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.9) 0%, rgba(111, 45, 189, 0.85) 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.new-session-button:hover {
  background: linear-gradient(135deg, rgba(158, 35, 163, 1) 0%, rgba(111, 45, 189, 0.95) 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(158, 35, 163, 0.3);
}

.new-session-button:active {
  transform: translateY(0);
}

[data-theme="light"] .new-session-button {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.9) 0%, rgba(111, 45, 189, 0.85) 100%);
}

[data-theme="light"] .new-session-button:hover {
  background: linear-gradient(135deg, rgba(158, 35, 163, 1) 0%, rgba(111, 45, 189, 0.95) 100%);
}

/* Tab Content Wrapper - Critical for proper height constraints */
.tab-content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100vh; /* Prevent overflow */
  width: 100%;
  max-width: 100%; /* Prevent horizontal overflow */
  overflow: hidden;
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  position: relative;
  box-sizing: border-box;
}

/* Ensure tab content area can shrink properly */
.workspace-pane .messages-container {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  width: 100%;
}

.workspace-pane .input-area {
  flex-shrink: 0;
  max-height: 120px;
  width: 100%;
}

.tab-controls {
  display: flex;
  gap: 8px;
}

.presence-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.active-users {
  display: flex;
  gap: 4px;
  align-items: center;
}

.user-presence {
  position: relative;
  display: flex;
  align-items: center;
}

.user-presence.clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.user-presence.clickable:hover {
  transform: scale(1.1);
}

.user-presence.clickable:hover .user-avatar {
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4), 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.user-presence.clickable:active {
  transform: scale(0.95);
}

.user-presence.clickable:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
  border-radius: 50%;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #8b5cf6;
  color: white;
  transition: box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.presence-indicator {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid white;
}

.presence-indicator.active {
  background: #10b981;
}

.presence-indicator.away {
  background: #f59e0b;
}

.presence-indicator.offline {
  background: #6b7280;
}

/* Typing indicator for presence */
.presence-indicator.typing {
  background: #3b82f6;
  animation: typing-pulse 1s ease-in-out infinite;
}

.user-presence.is-typing {
  animation: typing-glow 1s ease-in-out infinite;
}

.user-presence.is-typing .user-avatar {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

@keyframes typing-pulse {
  0%, 100% {
    transform: scale(1);
    background: #3b82f6;
  }
  50% {
    transform: scale(1.2);
    background: #60a5fa;
  }
}

@keyframes typing-glow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}

.typing-dots {
  display: none; /* Dots hidden in compact view */
}

/* Collaborator AI Thinking Banner */
.collaborator-thinking-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 8px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 8px;
  font-size: 13px;
  color: #6366f1;
  animation: thinking-fade-in 0.3s ease-out;
}

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

.collaborator-thinking-banner .thinking-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(99, 102, 241, 0.15);
  border-radius: 6px;
}

.collaborator-thinking-banner .thinking-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}

.collaborator-thinking-banner .thinking-dots span {
  width: 4px;
  height: 4px;
  background: #6366f1;
  border-radius: 50%;
  animation: thinking-dot-bounce 1.4s infinite ease-in-out both;
}

.collaborator-thinking-banner .thinking-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.collaborator-thinking-banner .thinking-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes thinking-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.collaborator-thinking-banner .thinking-text {
  flex: 1;
}

.collaborator-thinking-banner .thinking-text strong {
  font-weight: 600;
  color: #4f46e5;
}

.presence-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  color: #666;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.presence-toggle:hover {
  background: #f5f5f5;
  border-color: #8b5cf6;
}

.presence-toggle.active {
  background: #8b5cf6;
  color: white;
  border-color: #8b5cf6;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.tab-button:hover {
  background: rgba(158, 35, 163, 0.08);
  color: #9e23a3;
}

.tab-button.active {
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
  border-color: #9e23a3;
  box-shadow: 0 2px 4px rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .tab-button {
  color: #ccc;
}

[data-theme="dark"] .tab-button:hover {
  background: rgba(158, 35, 163, 0.15);
  color: #c77fd1;
}

[data-theme="dark"] .tab-button.active {
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
}

.message-tools-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 0 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  margin-bottom: 4px;
}

/* Tools Bar Button - Compact action buttons */
.tools-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(158, 35, 163, 0.2);
  background: rgba(158, 35, 163, 0.05);
  color: #6b21a8;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.tools-bar-btn:hover {
  background: rgba(158, 35, 163, 0.12);
  border-color: rgba(158, 35, 163, 0.3);
}

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

/* Tools Bar Separator */
.tools-bar-separator {
  width: 1px;
  height: 16px;
  background: rgba(158, 35, 163, 0.15);
  margin: 0 4px;
}

/* Error-proofing: Persistence Status Indicator */
.persistence-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0 4px;
  transition: opacity 0.2s ease;
}

.persistence-indicator.saving {
  color: rgba(158, 35, 163, 0.6);
}

.persistence-indicator.saving svg {
  animation: spin 1s linear infinite;
}

.persistence-indicator.saved {
  color: #10b981;
  opacity: 0.8;
}

.persistence-indicator.error {
  color: #f59e0b;
  cursor: help;
}

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

/* Session Dropdown Compact Mode */
.session-dropdown-wrapper.compact {
  display: inline-flex;
}

.session-dropdown-wrapper.compact .session-dropdown-trigger {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
  gap: 4px;
}

.session-dropdown-wrapper.compact .session-dropdown-trigger svg {
  width: 12px;
  height: 12px;
}

.font-size-mini-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(158, 35, 163, 0.2);
  background: rgba(158, 35, 163, 0.05);
}

.font-size-mini-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: #6b21a8;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.font-size-mini-button:hover:not(:disabled) {
  background: rgba(158, 35, 163, 0.15);
}

.font-size-mini-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.font-size-mini-value {
  font-size: 10px;
  font-weight: 600;
  color: #6b21a8;
}

.message-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46, 125, 50, 0.08);
  color: #2E7D32;
  border: 1px solid rgba(46, 125, 50, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="dark"] .message-tools-bar {
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0));
}

[data-theme="dark"] .tools-bar-btn {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.3);
  color: #f0e6f3;
}

[data-theme="dark"] .tools-bar-btn:hover {
  background: rgba(158, 35, 163, 0.25);
  border-color: rgba(158, 35, 163, 0.4);
}

[data-theme="dark"] .tools-bar-separator {
  background: rgba(158, 35, 163, 0.25);
}

[data-theme="dark"] .font-size-mini-control {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .font-size-mini-button {
  color: #f0e6f3;
}

[data-theme="dark"] .font-size-mini-value {
  color: #f0e6f3;
}

[data-theme="dark"] .message-count-chip {
  background: rgba(46, 125, 50, 0.2);
  border-color: rgba(46, 125, 50, 0.35);
  color: #9CCC65;
}

.messages-container {
  flex: 1 1 auto; /* Allow shrink and grow */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 16px 16px 16px;
  min-height: 0; /* Critical for flex scroll */
  max-height: 100%; /* Prevent overflow */
  display: flex;
  flex-direction: column;
  position: relative; /* Ensure proper stacking */
  width: 100%;
  box-sizing: border-box;
}

/* Custom scrollbar styling to prevent layout shift */
.messages-container::-webkit-scrollbar {
  width: 8px;
}

.messages-container::-webkit-scrollbar-track {
  background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
  background: rgba(158, 35, 163, 0.3);
  border-radius: 4px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
  background: rgba(158, 35, 163, 0.5);
}

.messages-list {
  padding-top: 16px; /* Maintain spacing at top */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100%;
  color: #666;
  gap: 12px;
  padding-top: 16px; /* Match messages-list padding */
  box-sizing: border-box;
}

.empty-icon {
  color: #ccc;
}

/* Dark mode empty state - Enhanced contrast */
[data-theme="dark"] .empty-state {
  color: #d0d0d0; /* Much better contrast than #666 */
}

[data-theme="dark"] .empty-icon {
  color: #999; /* Lighter icon color */
}

/* .messages-list styles consolidated above - removing duplicate */

.message {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.message.user {
  background: #f8f9fa;
  margin-left: 20%;
}

.message.assistant {
  background: white;
  border-color: #8b5cf6;
}

.message.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.message.peer {
  background: #f8fafc;
  border-left: 3px solid var(--user-color, #8b5cf6);
  margin-right: 20%;
}

/* Collaborator messages (other users in the room) - Slack-style left-aligned */
.message.collaborator {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border-left: 3px solid #2563eb;
  margin-right: 15%;
  margin-left: 0;
}

.message.collaborator .sender {
  color: #2563eb;
  font-weight: 600;
}

/* Shared AI response from another user's query */
.message.shared-agent {
  background: linear-gradient(135deg, #faf5ff 0%, #fef3c7 100%);
  border-left: 3px solid #9333ea;
  margin-right: 10%;
}

.peer-icon {
  color: var(--user-color, #8b5cf6);
  margin-right: 4px;
}

/* Typing indicators */
.typing-indicators {
  padding: 8px 16px;
  margin-bottom: 8px;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 12px;
  font-style: italic;
}

.typing-user {
  font-weight: 500;
}

.typing-dots {
  display: flex;
  gap: 2px;
}

.typing-dots span {
  width: 4px;
  height: 4px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: typing-pulse 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing-pulse {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.message-header {
  display: flex;
  justify-content: between;
  margin-bottom: 6px;
  font-size: 11px;
  color: #666;
}

.sender {
  font-weight: 600;
}

.timestamp {
  font-size: 10px;
}

/* W1.14: Cursor-like compact, readable message sizing */
.message-content {
  font-size: var(--chat-font-size, 12px);
  line-height: 1.6;
  color: #2c2c2c;
}

/* Markdown content styling for better readability */
.message-content .markdown-content {
  font-size: var(--chat-font-size, 12px);
  line-height: 1.6;
}

.message-content .markdown-content p {
  margin: 0.5em 0;
}

.message-content .markdown-content code {
  font-size: calc(var(--chat-font-size, 12px) - 1px);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 4px;
  border-radius: 3px;
}

.message-content .markdown-content pre {
  font-size: calc(var(--chat-font-size, 12px) - 1px);
  line-height: 1.4;
  overflow-x: auto;
}

.message-content .markdown-content h1,
.message-content .markdown-content h2,
.message-content .markdown-content h3 {
  font-size: calc(var(--chat-font-size, 12px) + 1px);
  font-weight: 600;
  margin: 0.75em 0 0.5em;
}

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

.message-content .markdown-content li {
  margin: 0.25em 0;
}

/* W1.14: Streaming indicator for real-time tokens */
.message.streaming .message-content::after {
  content: '▊';
  display: inline-block;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
  color: #8b5cf6;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* NEW: Inline Components Container */
.message-components {
  margin-top: 12px;
}

.citations {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
}

.citations h5 {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #666;
}

.citation-item {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
}

.clickable-citation {
  cursor: pointer;
  border-radius: 4px;
  padding: 6px 8px !important;
  margin: 2px 0;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(158, 35, 163, 0.02);
  position: relative;
}

.clickable-citation:hover {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.3);
  transform: translateX(4px);
}

.clickable-citation:active {
  background: rgba(158, 35, 163, 0.12);
  transform: translateX(2px);
}

.citation-highlight-hint {
  opacity: 0.6;
  font-size: 11px;
  margin-left: auto;
  transition: opacity 0.2s ease;
}

.clickable-citation:hover .citation-highlight-hint {
  opacity: 1;
}

.citation-number {
  color: #8b5cf6;
  font-weight: 600;
}

.input-area {
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  background: white;
  flex-shrink: 0;
  min-height: 60px;
  max-height: 120px;
  overflow: visible; /* Allow content but constrain container */
}

/* Instrument UI: pinned Suggested Queries ("Next step") strip above composer */
.next-step-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-left: 3px solid rgba(158, 35, 163, 0.85);
  background: rgba(158, 35, 163, 0.06);
}

.next-step-strip.disabled {
  opacity: 0.7;
}

.next-step-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.next-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(107, 114, 128, 0.95);
}

.next-step-label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(158, 35, 163, 0.95);
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 0.14);
  margin-right: 8px;
  vertical-align: middle;
}

.next-step-hint {
  font-size: 12px;
  color: rgba(107, 114, 128, 0.9);
}

.next-step-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.next-step-chip {
  max-width: 340px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.next-step-chip:hover:not(:disabled) {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.9);
}

.next-step-chip:focus-visible {
  outline: none;
  border-color: rgba(158, 35, 163, 0.95);
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 0.18);
}

.next-step-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.next-step-more {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: transparent;
  color: rgba(107, 114, 128, 0.95);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}

.next-step-more:hover:not(:disabled) {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.85);
  color: rgba(158, 35, 163, 0.95);
}

html[data-ui-style="instrument"] .input-area {
  background: var(--sci-bg-primary, #ffffff);
  border-top-color: var(--sci-border-light, rgba(148, 163, 184, 0.35));
}

html[data-ui-style="instrument"] .message-input:focus {
  border-color: rgba(158, 35, 163, 0.9);
}

.message-input-container {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.message-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  min-height: 44px;
  max-height: 120px;
}

.message-input:focus {
  outline: none;
  border-color: #8b5cf6;
}

.send-button {
  padding: 12px;
  background: #8b5cf6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.send-button:hover:not(:disabled) {
  background: #7c3aed;
}

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

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Dark mode - Enhanced Contrast for WCAG AA Compliance */
[data-theme="dark"] .workspace-pane {
  background: #1a1a1a;
  color: #e6e1e5; /* Material Design 3 on-surface - better contrast than #e0e0e0 */
}

[data-theme="dark"] .tab-navigation {
  border-bottom-color: #333;
  background: rgba(28, 27, 31, 0.6); /* Darker background for better contrast */
}

[data-theme="dark"] .tab-button {
  color: #e6e1e5; /* Changed from #ccc - much better contrast (WCAG AA) */
}

[data-theme="dark"] .tab-button:hover {
  background: rgba(158, 35, 163, 0.15);
  color: #ffffff; /* Pure white for maximum contrast on hover */
}

[data-theme="dark"] .tab-button.active {
  background: #9e23a3;
  color: #ffffff;
}

[data-theme="dark"] .message {
  border-color: #333;
  color: #e6e1e5; /* Ensure message text is visible */
}

[data-theme="dark"] .message.user {
  background: #2a2a2a;
  color: #e6e1e5;
}

[data-theme="dark"] .message.assistant {
  background: #1f1f1f; /* Slightly lighter than #1a1a1a for better contrast */
  color: #e6e1e5;
  border-color: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .message.error {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
  color: #fca5a5; /* Lighter red for better contrast */
}

[data-theme="dark"] .message.collaborator {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%);
  border-left-color: #3b82f6;
}

[data-theme="dark"] .message.collaborator .sender {
  color: #60a5fa;
}

[data-theme="dark"] .message.shared-agent {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(234, 179, 8, 0.1) 100%);
  border-left-color: #a855f7;
}

[data-theme="dark"] .message-header {
  color: #d0d0d0; /* Changed from #666 - much better contrast */
}

[data-theme="dark"] .sender {
  color: #ffffff; /* Pure white for sender names - maximum contrast */
  font-weight: 600;
}

[data-theme="dark"] .timestamp {
  color: #b0b0b0; /* Lighter grey for timestamps - better than default */
}

[data-theme="dark"] .message-content {
  color: #e6e1e5; /* Changed from #2c2c2c - Material Design 3 on-surface */
  line-height: 1.6;
  font-size: var(--chat-font-size, 12px); /* Inherit font size control */
}

[data-theme="dark"] .message-content .markdown-content {
  color: #e6e1e5;
  font-size: var(--chat-font-size, 12px); /* Inherit font size control */
}

[data-theme="dark"] .message-content .markdown-content p {
  color: #e6e1e5;
}

[data-theme="dark"] .message-content .markdown-content code {
  font-size: calc(var(--chat-font-size, 12px) - 1px); /* Relative to chat font size */
  background: rgba(158, 35, 163, 0.2);
  color: #f0e6f3; /* Light purple-tinted text for code */
  border: 1px solid rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .message-content .markdown-content pre {
  font-size: calc(var(--chat-font-size, 12px) - 1px); /* Relative to chat font size */
  background: rgba(28, 27, 31, 0.8);
  border: 1px solid rgba(158, 35, 163, 0.3);
  color: #e6e1e5;
}

[data-theme="dark"] .message-content .markdown-content h1,
[data-theme="dark"] .message-content .markdown-content h2,
[data-theme="dark"] .message-content .markdown-content h3 {
  font-size: calc(var(--chat-font-size, 12px) + 1px); /* Relative to chat font size */
  color: #ffffff; /* Pure white for headings - maximum contrast */
}

[data-theme="dark"] .message-input {
  background: #2a2a2a;
  border-color: #444; /* Lighter border for better visibility */
  color: #e6e1e5; /* Better contrast for input text */
}

[data-theme="dark"] .message-input::placeholder {
  color: #999; /* Lighter placeholder text */
}

[data-theme="dark"] .message-input:focus {
  border-color: #9e23a3;
  background: #2f2f2f; /* Slightly lighter on focus */
}

[data-theme="dark"] .input-area {
  background: #1a1a1a;
  border-top-color: #333;
}

[data-theme="dark"] .empty-state {
  color: #d0d0d0; /* Changed from #666 - much better contrast */
}

[data-theme="dark"] .empty-state h3 {
  color: #ffffff; /* Pure white for headings */
}

[data-theme="dark"] .empty-state p {
  color: #c0c0c0; /* Lighter grey for descriptions */
}

[data-theme="dark"] .empty-icon {
  color: #999; /* Lighter icon color */
}

[data-theme="dark"] .typing-indicator {
  color: #d0d0d0; /* Better contrast for typing indicators */
}

[data-theme="dark"] .presence-toggle {
  border-color: #444;
  color: #d0d0d0; /* Better contrast */
}

[data-theme="dark"] .presence-toggle:hover {
  background: rgba(158, 35, 163, 0.15);
  border-color: #9e23a3;
  color: #ffffff;
}

/* Enhanced empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--md-space-12, 48px);
  text-align: center;
  height: 100%;
  min-height: 300px;
}

.empty-state h3 {
  margin: var(--md-space-4, 16px) 0 var(--md-space-2, 8px);
  color: var(--md-on-surface, #1c1b1f);
  font-family: var(--aav-font-primary, 'Inter', sans-serif);
}

.empty-state p {
  color: var(--md-on-surface-variant, #49454f);
  margin-bottom: var(--md-space-6, 24px);
}

/* Mode-aware empty state styling */
.empty-state .mode-description {
  font-size: var(--md-body-small, 12px);
  color: var(--md-on-surface-variant, #5f6368);
  margin-top: var(--md-space-1, 4px);
  margin-bottom: var(--md-space-2, 8px);
  opacity: 0.85;
}

.empty-state .project-goal-hint {
  display: block;
  font-size: var(--md-body-small, 12px);
  color: var(--md-on-surface-variant, #5f6368);
  margin-top: var(--md-space-1, 4px);
  font-style: italic;
}

[data-theme="dark"] .empty-state .mode-description,
[data-theme="dark"] .empty-state .project-goal-hint {
  color: #b0b0b0;
}

/* Quick actions */
.quick-actions {
  width: 100%;
  max-width: 400px;
  margin-top: var(--md-space-6, 24px);
}

.quick-actions.suggested-queries {
  /* keep existing layout, but allow instrument skin to add a frame */
}

.quick-actions h4 {
  color: var(--md-on-surface, #1c1b1f);
  margin-bottom: var(--md-space-3, 12px);
  font-size: var(--md-title-small, 14px);
}

.quick-actions.suggested-queries h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-actions.suggested-queries h4::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(158, 35, 163, 0.9);
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 0.12);
}

.suggestion-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-2, 8px);
}

.suggestion-btn {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(158, 35, 163, 0.2);
  border-radius: 8px;
  padding: var(--md-space-3, 12px) var(--md-space-4, 16px);
  color: var(--md-on-surface, #1c1b1f);
  font-size: var(--md-body-medium, 14px);
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(12px);
  text-align: left;
}

.suggestion-btn:focus-visible {
  outline: none;
  border-color: rgba(158, 35, 163, 0.9);
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 0.16);
}

.suggestion-btn:hover {
  background: rgba(158, 35, 163, 0.08);
  border-color: #9e23a3;
  transform: translateY(-1px);
}

/* Instrument UI: make Suggested Queries look like the primary "next step" control */
html[data-ui-style="instrument"] .quick-actions.suggested-queries {
  max-width: 520px;
  margin-top: 14px;
  padding: 10px 10px 12px;
  border: 1px solid var(--sci-border-light, rgba(148, 163, 184, 0.35));
  border-left: 3px solid var(--sci-primary, #9e23a3);
  border-radius: 10px;
  background: var(--sci-bg-accent, rgba(158, 35, 163, 0.06));
}

html[data-ui-style="instrument"] .quick-actions.suggested-queries h4 {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, rgba(148, 163, 184, 0.9));
}

html[data-ui-style="instrument"] .quick-actions.suggested-queries h4::before {
  background: var(--sci-primary, #9e23a3);
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 0.14);
}

html[data-ui-style="instrument"] .suggestion-btn {
  backdrop-filter: none;
  background: var(--sci-bg-primary, #ffffff);
  border-color: var(--sci-border, rgba(148, 163, 184, 0.55));
  color: var(--text-primary, #111827);
}

html[data-ui-style="instrument"] .suggestion-btn:hover {
  background: var(--sci-bg-accent, rgba(158, 35, 163, 0.08));
  border-color: var(--sci-primary, #9e23a3);
  transform: none;
}

html[data-ui-style="instrument"] .suggestion-btn:active {
  transform: translateY(1px);
}

html[data-ui-style="instrument"] .suggestion-btn:focus-visible {
  border-color: var(--sci-primary, #9e23a3);
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 0.18);
}

/* Context info */
.context-info {
  margin-top: var(--md-space-6, 24px);
  padding: var(--md-space-4, 16px);
  background: rgba(158, 35, 163, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(158, 35, 163, 0.15);
  width: 100%;
  max-width: 400px;
}

.context-info h4 {
  color: #9e23a3;
  margin-bottom: var(--md-space-2, 8px);
  font-size: var(--md-title-small, 14px);
}

/* Pipeline info */
.pipeline-info {
  margin-top: var(--md-space-8, 32px);
  padding: var(--md-space-4, 16px);
  background: var(--md-surface-variant, #e7e0ec);
  border-radius: 12px;
}

.pipeline-info h4 {
  color: var(--md-on-surface, #1c1b1f);
  font-family: var(--aav-font-primary, 'Inter', sans-serif);
  margin-bottom: var(--md-space-4, 16px);
  text-align: center;
}

.pipeline-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--md-space-3, 12px);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--md-space-3, 12px);
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 50%, #c87fd0 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: var(--md-space-2, 8px);
}

.step-content strong {
  color: var(--md-on-surface, #1c1b1f);
  font-size: var(--md-title-small, 14px);
  margin-bottom: var(--md-space-1, 4px);
  display: block;
}

.step-content p {
  color: var(--md-on-surface-variant, #49454f);
  font-size: 12px;
  line-height: 1.4;
}

/* Response time indicator */
.response-time {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--md-on-surface-variant, #49454f);
  background: rgba(158, 35, 163, 0.08);
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 8px;
}

/* Technical details */
.technical-details {
  margin-top: var(--md-space-3, 12px);
  padding-top: var(--md-space-3, 12px);
  border-top: 1px solid #e0e0e0;
}

.technical-details summary {
  cursor: pointer;
  color: var(--md-on-surface-variant, #49454f);
  font-size: 12px;
  margin-bottom: var(--md-space-2, 8px);
}

.validation-info {
  padding: var(--md-space-2, 8px);
  background: rgba(158, 35, 163, 0.05);
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 11px;
}

.validation-info p {
  margin: 4px 0;
  color: var(--md-on-surface-variant, #49454f);
}

/* Enhanced citations */
.citations h5 {
  display: flex;
  align-items: center;
  gap: var(--md-space-2, 8px);
  margin: var(--md-space-3, 12px) 0 var(--md-space-2, 8px);
  color: #9e23a3;
  font-size: var(--md-title-small, 14px);
}

.citation-doc {
  font-size: 11px;
  color: var(--md-on-surface-variant, #49454f);
  font-style: italic;
  margin-left: var(--md-space-2, 8px);
}

/* Dark mode overrides - Enhanced Contrast */
[data-theme="dark"] .suggestion-btn {
  background: rgba(28, 27, 31, 0.9);
  border-color: rgba(158, 35, 163, 0.4);
  color: #e6e1e5; /* Better contrast */
}

[data-theme="dark"] .suggestion-btn:hover {
  background: rgba(158, 35, 163, 0.2);
  border-color: #9e23a3;
  color: #ffffff; /* Pure white on hover */
}

[data-theme="dark"] .quick-actions h4 {
  color: #ffffff; /* Pure white for headings */
}

[data-theme="dark"] .context-info {
  background: rgba(158, 35, 163, 0.12);
  border-color: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .context-info h4 {
  color: #c87fd0; /* Lighter purple for better contrast */
}


[data-theme="dark"] .technical-details {
  border-top-color: #444; /* Lighter border */
}

[data-theme="dark"] .technical-details summary {
  color: #d0d0d0; /* Better contrast */
}

[data-theme="dark"] .validation-info {
  background: rgba(158, 35, 163, 0.1);
  border: 1px solid rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .validation-info p {
  color: #d0d0d0; /* Better contrast */
}


[data-theme="dark"] .citations h5 {
  color: #c87fd0; /* Lighter purple for better contrast */
}

[data-theme="dark"] .citation-doc {
  color: #b0b0b0; /* Lighter grey for better contrast */
}

[data-theme="dark"] .response-time {
  color: #d0d0d0; /* Better contrast */
  background: rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .step-content strong {
  color: #ffffff; /* Pure white for emphasis */
}

[data-theme="dark"] .step-content p {
  color: #d0d0d0; /* Better contrast */
}

/* Proofs Tab Loading Fallback */
.proofs-loading-fallback {
  padding: 48px;
  text-align: center;
  color: #9aa0a6;
}

.proofs-loading-fallback p {
  margin-top: 12px;
}

[data-theme="dark"] .proofs-loading-fallback {
  color: #d0d0d0; /* Better contrast */
}

/* Scope Indicator - Dark Mode Support */
.scope-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: #9aa0a6;
}

.scope-indicator.team {
  background: rgba(59, 130, 246, 0.05);
  color: #3b82f6;
}

[data-theme="dark"] .scope-indicator {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #d0d0d0; /* Much better contrast than #9aa0a6 */
}

[data-theme="dark"] .scope-indicator.team {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa; /* Lighter blue for better contrast */
}

/* Message count indicator - Dark Mode */
[data-theme="dark"] .pane-header-right span {
  color: #d0d0d0; /* Better contrast */
}

/* Loading fallback - Dark Mode */
[data-theme="dark"] .loading-fallback {
  color: #d0d0d0; /* Better contrast */
}

/* ===== MESSAGE COPY ACTION ===== */

.message-copy-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(158, 35, 163, 0.1);
}

.copy-response-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(158, 35, 163, 0.2);
  border-radius: 6px;
  color: #9e23a3;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.copy-response-btn:hover {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.4);
}

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

.copy-response-btn:focus-visible {
  outline: 2px solid #9e23a3;
  outline-offset: 2px;
}

/* Dark mode support for copy button */
[data-theme="dark"] .message-copy-action {
  border-top-color: rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .copy-response-btn {
  color: #c77fd1;
  border-color: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .copy-response-btn:hover {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.5);
  color: #f0e6f3;
}

/* ===== PROOFS TAB BADGE & PULSE ANIMATION ===== */

/* Badge on Proofs tab button */
.proofs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.4);
  animation: badge-pop 0.3s ease-out;
}

@keyframes badge-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Pulse animation when there are unviewed bundles */
.header-pill-btn.has-new-bundles {
  animation: proofs-pulse 2s ease-in-out infinite;
  border-color: rgba(245, 158, 11, 0.5);
}

.header-pill-btn.has-new-bundles:not(.active) {
  background: rgba(245, 158, 11, 0.08);
}

@keyframes proofs-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
}

/* ===== REAL-TIME STREAMING SOURCES INDICATOR ===== */

.streaming-sources-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  animation: sources-slide-in 0.3s ease-out;
}

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

.streaming-sources-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 8px;
  color: white;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.streaming-sources-icon .sparkle-animate {
  animation: sparkle-spin 2s linear infinite;
}

@keyframes sparkle-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(90deg) scale(1.1);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  75% {
    transform: rotate(270deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.streaming-sources-text {
  flex: 1;
  font-size: 13px;
  color: #92400e;
  font-weight: 500;
}

.streaming-sources-text strong {
  font-weight: 700;
  color: #b45309;
  font-size: 15px;
}

.streaming-sources-view-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}

.streaming-sources-view-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

.streaming-sources-view-btn:active {
  transform: translateY(0);
}

/* Dark mode support for streaming sources indicator */
[data-theme="dark"] .streaming-sources-indicator {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.08) 100%);
  border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .streaming-sources-text {
  color: #fbbf24;
}

[data-theme="dark"] .streaming-sources-text strong {
  color: #fcd34d;
}

/* Dark mode badge styling */
[data-theme="dark"] .proofs-badge {
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.5);
}

[data-theme="dark"] .header-pill-btn.has-new-bundles:not(.active) {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
}

/* ========================================
   View-Only Session Styles
   For Open project collaborators viewing others' sessions
   ======================================== */

/* View-Only Session Banner */
.view-only-session-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  margin: 0 12px 8px 12px;
  color: #92400e;
  font-size: 13px;
}

.view-only-session-banner svg {
  flex-shrink: 0;
  color: #d97706;
}

.view-only-banner-text {
  flex: 1;
  font-weight: 500;
}

.view-only-exit-btn {
  padding: 6px 12px;
  background: #d97706;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.view-only-exit-btn:hover {
  background: #b45309;
}

/* View-Only Input Area Disabled State */
.input-area.view-only-disabled {
  opacity: 0.7;
  position: relative;
}

.input-area.view-only-disabled .message-input-container {
  pointer-events: none;
}

.input-area.view-only-disabled .message-input {
  background: rgba(156, 163, 175, 0.1);
  cursor: not-allowed;
}

.input-area.view-only-disabled .send-button {
  opacity: 0.5;
  cursor: not-allowed;
}

.input-area.view-only-disabled .kb-map-toggle {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* View-Only Input Hint */
.view-only-input-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 6px;
  margin-bottom: 8px;
  color: #92400e;
  font-size: 12px;
}

.view-only-input-hint svg {
  flex-shrink: 0;
  color: #d97706;
}

/* Dark theme overrides */
[data-theme="dark"] .view-only-session-banner {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%);
  border-color: rgba(251, 191, 36, 0.25);
  color: #fbbf24;
}

[data-theme="dark"] .view-only-session-banner svg {
  color: #fbbf24;
}

[data-theme="dark"] .view-only-exit-btn {
  background: #f59e0b;
  color: #1f2937;
}

[data-theme="dark"] .view-only-exit-btn:hover {
  background: #d97706;
}

[data-theme="dark"] .input-area.view-only-disabled .message-input {
  background: rgba(75, 85, 99, 0.3);
}

[data-theme="dark"] .view-only-input-hint {
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
}

[data-theme="dark"] .view-only-input-hint svg {
  color: #fbbf24;
}/* Additional styles for orchestrator integration */

/* Loading indicator */
.loading-message {
  opacity: 0.9;
}

.loading-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--aav-primary);
}

.loading-indicator .spinner {
  animation: spin 1s linear infinite;
}

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

/* Markdown content styling */
.markdown-content {
  line-height: 1.6;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  margin-top: 16px;
  margin-bottom: 8px;
  color: var(--aav-primary);
}

.markdown-content p {
  margin-bottom: 12px;
}

.markdown-content code {
  background: rgba(158, 35, 163, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.markdown-content pre {
  background: rgba(158, 35, 163, 0.05);
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 12px 0;
}

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

.markdown-content ul,
.markdown-content ol {
  margin-left: 20px;
  margin-bottom: 12px;
}

.markdown-content blockquote {
  border-left: 3px solid var(--aav-primary);
  padding-left: 12px;
  margin: 12px 0;
  color: #666;
  font-style: italic;
}

.markdown-content a {
  color: var(--aav-primary);
  text-decoration: none;
}

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

/* Citation improvements */
.message .citations {
  margin-top: 16px;
  padding: 12px;
  background: rgba(158, 35, 163, 0.05);
  border-radius: 6px;
  border-left: 3px solid var(--aav-primary);
}

.message .citations h5 {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--aav-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.message .citations ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.message .citation-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(158, 35, 163, 0.1);
}

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

.message .citation-number {
  background: var(--aav-primary);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.message .citation-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
}

/* Input Options Row - Scope Indicator + KB Map Toggle */
.input-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

/* Knowledge Map Toggle Button */
.kb-map-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--aav-border);
  background: transparent;
  color: var(--aav-text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.kb-map-toggle:hover {
  background: var(--aav-bg-hover);
  border-color: var(--aav-primary-light);
}

.kb-map-toggle.active {
  background: rgba(158, 35, 163, 0.1);
  border-color: var(--aav-primary);
  color: var(--aav-primary);
}

.kb-map-toggle.active:hover {
  background: rgba(158, 35, 163, 0.15);
}

.kb-map-toggle svg {
  flex-shrink: 0;
}

.kb-map-toggle span {
  white-space: nowrap;
}

/* =====================================================
   Inline Components Styling
   Material Design + Aavishkar Brand (Purple #9e23a3)
   ===================================================== */

/* Code Block Styling */
.code-block-container {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(158, 35, 163, 0.2);
  margin: 12px 0;
  background: #1e1e1e;
}

.code-block-header {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.1), rgba(111, 45, 189, 0.05));
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(158, 35, 163, 0.15);
  backdrop-filter: blur(8px);
}

.code-filename {
  font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
  font-size: 11px;
  color: #9e23a3;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.code-action-btn {
  background: transparent;
  border: none;
  color: #9e23a3;
  cursor: pointer;
  padding: 4px 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  font-size: 11px;
}

.code-action-btn:hover {
  background: rgba(158, 35, 163, 0.1);
}

.code-action-btn:active {
  transform: scale(0.95);
}

.copied-label {
  font-size: 10px;
  font-weight: 600;
  margin-left: 2px;
}

/* Mermaid Diagram Styling */
.mermaid-container {
  background: white;
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
}

.mermaid-title {
  font-size: 14px;
  font-weight: 600;
  color: #9e23a3;
  margin-bottom: 12px;
  font-family: 'dinmedium', sans-serif;
}

.mermaid-diagram {
  text-align: center;
  overflow-x: auto;
}

.mermaid-diagram svg {
  max-width: 100%;
  height: auto;
}

.mermaid-caption {
  font-size: 11px;
  color: #666;
  margin-top: 8px;
  font-style: italic;
  text-align: center;
}

/* Data Table Styling */
.data-table-container {
  overflow-x: auto;
  margin: 12px 0;
  border-radius: 8px;
  border: 1px solid rgba(158, 35, 163, 0.15);
  background: white;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table thead {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.1), rgba(111, 45, 189, 0.05));
}

.data-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: #9e23a3;
  border-bottom: 2px solid rgba(158, 35, 163, 0.3);
  cursor: pointer;
  user-select: none;
  font-family: 'dinmedium', sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.data-table th:hover {
  background: rgba(158, 35, 163, 0.05);
}

.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(158, 35, 163, 0.08);
  font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
  font-size: 12px;
}

.data-table tr:hover {
  background: rgba(158, 35, 163, 0.03);
}

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

.sort-indicator {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.6;
}

.table-caption {
  padding: 8px 12px;
  font-size: 11px;
  color: #666;
  font-style: italic;
  background: rgba(158, 35, 163, 0.02);
  border-top: 1px solid rgba(158, 35, 163, 0.08);
}

/* LaTeX Equation Styling */
.latex-container {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.latex-container.block {
  display: block;
  text-align: center;
  padding: 16px;
  background: rgba(158, 35, 163, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(158, 35, 163, 0.1);
  margin: 12px 0;
}

.latex-label {
  font-size: 10px;
  color: #9e23a3;
  font-weight: 600;
  font-family: 'dinmedium', sans-serif;
}

/* Image Styling */
.image-container {
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(158, 35, 163, 0.15);
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.image-caption {
  padding: 8px 12px;
  font-size: 11px;
  color: #666;
  font-style: italic;
  background: rgba(158, 35, 163, 0.02);
  text-align: center;
}

/* Inline Component Position Variants */
.inline-component.inline {
  display: inline-block;
  max-width: 50%;
  vertical-align: top;
  margin-right: 8px;
}

.inline-component.fullwidth {
  display: block;
  width: 100%;
}

/* Loading state for components */
.component-loading {
  background: linear-gradient(90deg, rgba(158, 35, 163, 0.05), rgba(158, 35, 163, 0.15), rgba(158, 35, 163, 0.05));
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  height: 100px;
  margin: 12px 0;
}

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

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .data-table-container,
  .mermaid-container {
    background: #1a1a1a;
    border-color: rgba(158, 35, 163, 0.3);
  }

  .data-table th {
    color: #c77fd1;
  }

  .data-table td {
    color: #e0e0e0;
  }

  .mermaid-title {
    color: #c77fd1;
  }

  .table-caption,
  .mermaid-caption,
  .image-caption {
    color: #999;
    background: rgba(158, 35, 163, 0.1);
  }
}
/* OrchestratorStatus Component - Compact Collapsible Status Display */
.orchestrator-status {
  width: 100%;
  background: rgba(248, 250, 252, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Header (Always Visible) */
.orchestrator-status-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--aav-font-primary, 'Inter', system-ui);
  transition: background 0.15s ease;
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
}

.orchestrator-status-header:hover {
  background: rgba(158, 35, 163, 0.04);
}

/* Chevron Icon */
.orchestrator-status-chevron {
  display: flex;
  align-items: center;
  color: #666;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

/* Orchestrator Name */
.orchestrator-status-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #202124;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.orchestrator-status-name svg {
  color: #9e23a3;
}

/* Status Badge */
.orchestrator-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.orchestrator-status-badge svg {
  flex-shrink: 0;
}

/* Function Count (collapsed state) */
.orchestrator-status-count {
  margin-left: auto;
  font-size: 11px;
  color: #5f6368;
  font-weight: 500;
}

/* Expanded Content */
.orchestrator-status-content {
  padding: 0 12px 12px 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: expandIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 88px; /* 120px total - 32px header = 88px content */
  overflow-y: auto;
}

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

/* Status Row */
.orchestrator-status-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 12px;
}

.orchestrator-status-label {
  min-width: 64px;
  font-weight: 600;
  color: #5f6368;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding-top: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.orchestrator-status-value {
  flex: 1;
  color: #202124;
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orchestrator-status-plan {
  opacity: 0.6;
  font-size: 11px;
}

/* Function Chips */
.orchestrator-status-functions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.orchestrator-status-function-chip {
  padding: 2px 6px;
  background: rgba(158, 35, 163, 0.08);
  color: #9e23a3;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.orchestrator-status-function-chip.more {
  background: rgba(95, 99, 104, 0.08);
  color: #5f6368;
}

/* Idle State Message */
.orchestrator-status-idle-message {
  font-size: 12px;
  color: #9aa0a6;
  font-style: italic;
  padding: 4px 0;
}

/* Status Icon Animations */
.status-icon.planning {
  animation: spin 1.5s linear infinite;
}

.status-icon.executing {
  animation: pulse 1s ease-in-out infinite;
}

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

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

/* Dark Mode */
[data-theme="dark"] .orchestrator-status {
  background: rgba(42, 42, 42, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .orchestrator-status-header:hover {
  background: rgba(200, 127, 208, 0.08);
}

[data-theme="dark"] .orchestrator-status-chevron {
  color: #9aa0a6;
}

[data-theme="dark"] .orchestrator-status-name {
  color: #e0e0e0;
}

[data-theme="dark"] .orchestrator-status-name svg {
  color: #c87fd0;
}

[data-theme="dark"] .orchestrator-status-count {
  color: #9aa0a6;
}

[data-theme="dark"] .orchestrator-status-label {
  color: #9aa0a6;
}

[data-theme="dark"] .orchestrator-status-value {
  color: #e0e0e0;
}

[data-theme="dark"] .orchestrator-status-function-chip {
  background: rgba(200, 127, 208, 0.12);
  color: #c87fd0;
}

[data-theme="dark"] .orchestrator-status-function-chip.more {
  background: rgba(154, 160, 166, 0.12);
  color: #9aa0a6;
}

[data-theme="dark"] .orchestrator-status-idle-message {
  color: #6b7280;
}

/* Scrollbar Styling (for expanded content with many functions) */
.orchestrator-status-content::-webkit-scrollbar {
  width: 4px;
}

.orchestrator-status-content::-webkit-scrollbar-track {
  background: transparent;
}

.orchestrator-status-content::-webkit-scrollbar-thumb {
  background: rgba(158, 35, 163, 0.2);
  border-radius: 2px;
}

.orchestrator-status-content::-webkit-scrollbar-thumb:hover {
  background: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .orchestrator-status-content::-webkit-scrollbar-thumb {
  background: rgba(200, 127, 208, 0.2);
}

[data-theme="dark"] .orchestrator-status-content::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 127, 208, 0.3);
}

/* ==========================================
   Quality UI Elements (Phase 2 Enhancement)
   ========================================== */

/* Quality Bar (Collapsed Header) */
.quality-bar-container {
  width: 48px;
  height: 14px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 7px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.quality-bar-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.5s ease-out, background-color 0.3s ease;
}

.quality-bar-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

/* Tool Activity Indicator */
.tool-activity {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 8px;
  flex-shrink: 0;
}

.activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.activity-dot.executing {
  animation: activity-pulse 1s ease-in-out infinite;
}

@keyframes activity-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
  }
}

.tool-name-ticker {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #10b981;
}

/* Evidence Indicator (Micro-Badge on Status Badge) */
.evidence-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-left: 4px;
  flex-shrink: 0;
}

.evidence-indicator.sufficient {
  background: #10b981;
  color: white;
}

.evidence-indicator.insufficient {
  background: #f59e0b;
  color: white;
}

/* Quality Row (Expanded) */
.quality-value {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.quality-bar-expanded-container {
  width: 80px;
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.quality-bar-expanded-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease-out, background-color 0.3s ease;
}

.quality-text {
  font-weight: 600;
  font-size: 11px;
}

.evidence-status {
  font-size: 11px;
  font-weight: 500;
}

.evidence-status.sufficient {
  color: #10b981;
}

.evidence-status.insufficient {
  color: #f59e0b;
}

/* Gaps Row */
.gaps-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.gap-text {
  color: #f59e0b;
  font-style: italic;
  font-size: 11px;
}

.gap-more {
  color: #9aa0a6;
  font-size: 10px;
  margin-left: 4px;
}

/* Mode Badge Enhancement */
.orchestrator-status-mode-badge {
  padding: 2px 6px;
  background: rgba(158, 35, 163, 0.1);
  color: #9e23a3;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ==========================================
   Quality UI Dark Mode
   ========================================== */

[data-theme="dark"] .quality-bar-container {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .quality-bar-label {
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .tool-activity {
  background: rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .quality-bar-expanded-container {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .gap-text {
  color: #fbbf24;
}

[data-theme="dark"] .gap-more {
  color: #6b7280;
}

[data-theme="dark"] .orchestrator-status-mode-badge {
  background: rgba(200, 127, 208, 0.15);
  color: #c87fd0;
}

[data-theme="dark"] .evidence-status.sufficient {
  color: #34d399;
}

[data-theme="dark"] .evidence-status.insufficient {
  color: #fbbf24;
}

/* Shimmer Animation (optional, for processing state) */
.orchestrator-status[data-status="executing"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(158, 35, 163, 0.04),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}
/* SessionDropdown.css - Cursor-style session history dropdown */
/* Theme-aware using IDELayout CSS variables */

.session-dropdown {
  position: relative;
  display: inline-block;
  z-index: 50;
}

.session-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 999px;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

/* Instrument UI: compact trigger (icon-only) */
.session-dropdown-trigger.compact {
  width: 28px;
  height: 28px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: none;
}

.session-dropdown-trigger.compact:hover {
  background: rgba(158, 35, 163, 0.1);
  color: #9e23a3;
}

.session-dropdown-trigger.compact .chevron {
  display: none;
}

.session-dropdown-trigger svg {
  color: var(--aav-primary, #9e23a3);
}

.session-dropdown-trigger:hover {
  background: linear-gradient(135deg, rgba(248, 250, 252, 1) 0%, rgba(241, 245, 249, 1) 100%);
  border-color: rgba(158, 35, 163, 0.45);
  color: #111827;
  box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35);
}

.session-dropdown-trigger:active {
  transform: translateY(1px);
}

/* Dark theme adjustments */
[data-theme="dark"] .session-dropdown-trigger {
  background: rgba(31, 41, 55, 1);
  border-color: rgba(148, 163, 184, 0.6);
  color: #e5e7eb;
}

[data-theme="dark"] .session-dropdown-trigger svg {
  color: #e5e7eb;
}

[data-theme="dark"] .session-dropdown-trigger:hover {
  background: linear-gradient(135deg, rgba(55, 65, 81, 1) 0%, rgba(31, 41, 55, 1) 100%);
  border-color: rgba(209, 213, 219, 0.8);
  color: #f9fafb;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.5);
}

.session-dropdown-trigger .chevron {
  transition: transform 0.2s ease;
}

.session-dropdown-trigger .chevron.open {
  transform: rotate(180deg);
}

.session-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(420px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  max-height: 600px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 241, 252, 0.98) 100%);
  border: 1px solid rgba(158, 35, 163, 0.2);
  border-radius: 16px;
  box-shadow:
    0 16px 40px rgba(158, 35, 163, 0.18),
    0 4px 16px rgba(17, 24, 39, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
  z-index: 1200;
  animation: slideDown 0.2s ease;
  backdrop-filter: blur(20px);
}

[data-ui-style="instrument"] .session-dropdown-menu {
  backdrop-filter: none;
}

/* Compact variant: slightly narrower menu to reduce visual weight */
.session-dropdown-menu.compact {
  width: min(360px, calc(100vw - 16px));
}

[data-theme="dark"] .session-dropdown-menu {
  background: rgba(17, 24, 39, 0.95);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.1);
}

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

.session-dropdown-content {
  max-height: 560px;
  overflow-y: auto;
  padding: 8px 0;
}

/* Custom scrollbar */
.session-dropdown-content::-webkit-scrollbar {
  width: 8px;
}

.session-dropdown-content::-webkit-scrollbar-track {
  background: var(--sci-surface-secondary, rgba(255, 255, 255, 0.03));
  border-radius: 4px;
}

.session-dropdown-content::-webkit-scrollbar-thumb {
  background: var(--sci-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
}

.session-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: var(--sci-glass-border-hover, rgba(255, 255, 255, 0.15));
}

/* Loading state */
.session-dropdown-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  color: #a78bfa;
  font-size: 14px;
  font-weight: 500;
}

.session-dropdown-loading .spinner {
  animation: spin 1s linear infinite;
  color: #8b5cf6;
}

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

/* Error state */
.session-dropdown-error {
  padding: 20px 24px;
  color: #fca5a5;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
}

/* Empty state */
.session-dropdown-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  text-align: center;
}

.session-dropdown-empty .empty-icon {
  color: #8b5cf6;
  margin-bottom: 16px;
  opacity: 0.6;
}

.session-dropdown-empty p {
  margin: 0 0 8px 0;
  color: #e9d5ff;
  font-size: 15px;
  font-weight: 600;
}

.session-dropdown-empty .empty-hint {
  color: #a78bfa;
  font-size: 13px;
  opacity: 0.8;
}

/* Session groups */
.session-group {
  margin-bottom: 12px;
}

.session-group:last-child {
  margin-bottom: 0;
}

.session-group-title {
  padding: 8px 18px 6px;
  color: #9e23a3;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.75;
}

[data-theme="dark"] .session-group-title {
  color: #a78bfa;
}

/* Session items */
.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  margin: 2px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.session-item:hover {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.25);
}

.session-item.active {
  background: rgba(158, 35, 163, 0.12);
  border: 1px solid #9e23a3;
}

.session-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0; /* Prevent text overflow */
}

.session-icon {
  flex-shrink: 0;
  color: #a855f7;
}

.session-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* Prevent text overflow */
}

.session-title {
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-meta {
  color: #6b21a8;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

.session-item.active .session-title {
  color: #6b21a8;
  font-weight: 700;
}

.session-item.active .session-icon {
  color: #9333ea;
}

[data-theme="dark"] .session-item {
  border-color: transparent;
}

[data-theme="dark"] .session-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .session-item.active {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
}

[data-theme="dark"] .session-title {
  color: #e9d5ff;
}

[data-theme="dark"] .session-meta {
  color: #c4b5fd;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .session-dropdown-menu {
    min-width: 300px;
    max-width: 90vw;
  }
}

/* Collaborative session indicators */
.collaborative-badge {
  margin-left: 6px;
  font-size: 12px;
  cursor: help;
}

.joined-badge {
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
  color: #3b82f6;
  border-radius: 4px;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .joined-badge {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.4);
}

.collaborator-info {
  color: #7c3aed;
  font-style: italic;
}

[data-theme="dark"] .collaborator-info {
  color: #a78bfa;
}

/* Session items - collaborative highlight */
.session-item.collaborative {
  border-left: 3px solid #8b5cf6;
}

.session-item.joined {
  background: rgba(59, 130, 246, 0.04);
}

.session-item.joined:hover {
  background: rgba(59, 130, 246, 0.08);
}

[data-theme="dark"] .session-item.joined {
  background: rgba(59, 130, 246, 0.08);
}

[data-theme="dark"] .session-item.joined:hover {
  background: rgba(59, 130, 246, 0.12);
}

/* Theme is controlled by CSS variables from IDELayout - no media query overrides needed */

/* View-only session styles - for sessions user can view but not edit */
.session-item.view-only {
  opacity: 0.85;
  background: rgba(156, 163, 175, 0.05);
}

.session-item.view-only:hover {
  background: rgba(156, 163, 175, 0.08);
  cursor: pointer;
}

.session-item.view-only .view-only-icon {
  color: #9ca3af;
}

.view-only-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(156, 163, 175, 0.15);
  border-radius: 4px;
  color: #6b7280;
}

.owner-info {
  color: #9ca3af;
  font-style: italic;
}

[data-theme="dark"] .session-item.view-only {
  opacity: 0.8;
  background: rgba(75, 85, 99, 0.08);
}

[data-theme="dark"] .session-item.view-only:hover {
  background: rgba(75, 85, 99, 0.12);
}

[data-theme="dark"] .view-only-badge {
  background: rgba(75, 85, 99, 0.3);
  color: #9ca3af;
}

[data-theme="dark"] .owner-info {
  color: #6b7280;
}

/* Session Delete Button */
.session-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.session-item:hover .session-delete-btn {
  opacity: 1;
}

.session-delete-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.session-delete-btn:active {
  transform: scale(0.95);
}

[data-theme="dark"] .session-delete-btn {
  color: #6b7280;
}

[data-theme="dark"] .session-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Session Delete Confirmation */
.session-item.pending-delete {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .session-item.pending-delete {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
}

.session-delete-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 0;
}

.delete-confirm-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.delete-warning-icon {
  color: #f59e0b;
  flex-shrink: 0;
}

.delete-confirm-text {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

[data-theme="dark"] .delete-confirm-text {
  color: #e5e7eb;
}

.delete-confirm-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.delete-confirm-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.delete-confirm-btn.cancel {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.delete-confirm-btn.cancel:hover:not(:disabled) {
  background: rgba(107, 114, 128, 0.2);
}

.delete-confirm-btn.confirm {
  background: #ef4444;
  color: white;
}

.delete-confirm-btn.confirm:hover:not(:disabled) {
  background: #dc2626;
}

[data-theme="dark"] .delete-confirm-btn.cancel {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

[data-theme="dark"] .delete-confirm-btn.cancel:hover:not(:disabled) {
  background: rgba(107, 114, 128, 0.3);
}

[data-theme="dark"] .delete-confirm-btn.confirm {
  background: #dc2626;
}

[data-theme="dark"] .delete-confirm-btn.confirm:hover:not(:disabled) {
  background: #b91c1c;
}

/* Session Action Buttons Container */
.session-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.session-item:hover .session-actions {
  opacity: 1;
}

/* Session Action Buttons (Rename & Delete) */
.session-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s ease;
}

.session-action-btn:active {
  transform: scale(0.95);
}

.session-action-btn.rename-btn:hover {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}

.session-action-btn.delete-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

[data-theme="dark"] .session-action-btn {
  color: #6b7280;
}

[data-theme="dark"] .session-action-btn.rename-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

[data-theme="dark"] .session-action-btn.delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Session Rename Modal */
.session-item.pending-rename {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .session-item.pending-rename {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.4);
}

.session-rename-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 0;
}

.rename-modal-content {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.rename-icon {
  color: #8b5cf6;
  flex-shrink: 0;
}

[data-theme="dark"] .rename-icon {
  color: #a78bfa;
}

.rename-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 6px;
  outline: none;
  transition: all 0.15s ease;
}

.rename-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.rename-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rename-input::placeholder {
  color: #9ca3af;
}

[data-theme="dark"] .rename-input {
  color: #f3f4f6;
  background: rgba(31, 41, 55, 0.9);
  border-color: rgba(139, 92, 246, 0.4);
}

[data-theme="dark"] .rename-input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .rename-input::placeholder {
  color: #6b7280;
}

.rename-modal-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.rename-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.rename-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.rename-btn.cancel {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.rename-btn.cancel:hover:not(:disabled) {
  background: rgba(107, 114, 128, 0.2);
  color: #4b5563;
}

.rename-btn.confirm {
  background: #8b5cf6;
  color: white;
}

.rename-btn.confirm:hover:not(:disabled) {
  background: #7c3aed;
}

.rename-btn .spinner {
  animation: spin 1s linear infinite;
}

[data-theme="dark"] .rename-btn.cancel {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

[data-theme="dark"] .rename-btn.cancel:hover:not(:disabled) {
  background: rgba(107, 114, 128, 0.3);
  color: #d1d5db;
}

[data-theme="dark"] .rename-btn.confirm {
  background: #7c3aed;
}

[data-theme="dark"] .rename-btn.confirm:hover:not(:disabled) {
  background: #6d28d9;
}
/* SessionShareDropdown.css - Async session sharing dropdown */
/* Theme-aware using same patterns as SessionDropdown */

.session-share-dropdown {
  position: relative;
  display: inline-flex;
  z-index: 50;
}

/* Trigger Button - matches tools-bar-btn style */
.session-share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(158, 35, 163, 0.08);
  border: 1px solid rgba(158, 35, 163, 0.2);
  color: #9e23a3;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.session-share-trigger svg {
  width: 12px;
  height: 12px;
}

.session-share-trigger:hover {
  background: rgba(158, 35, 163, 0.12);
  border-color: rgba(158, 35, 163, 0.3);
}

.session-share-trigger:active {
  transform: scale(0.97);
}

.session-share-trigger.has-invites {
  border-color: rgba(158, 35, 163, 0.4);
  background: rgba(158, 35, 163, 0.12);
}

.trigger-label {
  font-weight: 600;
}

.invite-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #9e23a3;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
}

.session-share-trigger .chevron {
  transition: transform 0.2s ease;
  color: #9e23a3;
}

.session-share-trigger .chevron.open {
  transform: rotate(180deg);
}

/* Instrument UI: compact trigger (icon-only) */
.session-share-trigger.compact {
  width: 28px;
  height: 28px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: none;
}

.session-share-trigger.compact:hover {
  background: rgba(158, 35, 163, 0.1);
  color: #9e23a3;
}

.session-share-trigger.compact svg {
  width: 14px;
  height: 14px;
}

.session-share-trigger.compact .chevron {
  display: none;
}

/* Dark theme trigger */
[data-theme="dark"] .session-share-trigger {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.3);
  color: #f0e6f3;
}

[data-theme="dark"] .session-share-trigger:hover {
  background: rgba(158, 35, 163, 0.25);
  border-color: rgba(158, 35, 163, 0.4);
}

[data-theme="dark"] .session-share-trigger .chevron {
  color: #f0e6f3;
}

/* Dropdown Menu */
.session-share-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 241, 252, 0.98) 100%);
  border: 1px solid rgba(158, 35, 163, 0.2);
  border-radius: 12px;
  box-shadow:
    0 16px 40px rgba(158, 35, 163, 0.15),
    0 4px 16px rgba(17, 24, 39, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  z-index: 1200;
  overflow: hidden;
  animation: slideDown 0.2s ease;
  backdrop-filter: blur(20px);
}

[data-theme="dark"] .session-share-menu {
  background: rgba(17, 24, 39, 0.95);
  border-color: rgba(158, 35, 163, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(158, 35, 163, 0.1);
}

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

/* Tabs */
.share-tabs {
  display: flex;
  border-bottom: 1px solid rgba(158, 35, 163, 0.15);
  background: rgba(158, 35, 163, 0.03);
}

.share-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.share-tab:hover {
  background: rgba(158, 35, 163, 0.06);
  color: #9e23a3;
}

.share-tab.active {
  color: #9e23a3;
  font-weight: 600;
}

.share-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #9e23a3;
}

.share-tab svg {
  width: 14px;
  height: 14px;
}

[data-theme="dark"] .share-tabs {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .share-tab {
  color: #a0a0a0;
}

[data-theme="dark"] .share-tab:hover {
  background: rgba(158, 35, 163, 0.12);
  color: #e0d0e8;
}

[data-theme="dark"] .share-tab.active {
  color: #e0d0e8;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #9e23a3;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
}

/* Content */
.share-content {
  max-height: 400px;
  overflow-y: auto;
}

/* Invite Section */
.invite-section {
  padding: 12px;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(158, 35, 163, 0.04);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.member-item:hover {
  background: rgba(158, 35, 163, 0.08);
}

.member-item.selected {
  background: rgba(158, 35, 163, 0.12);
  border-color: rgba(158, 35, 163, 0.3);
}

.member-item input[type="checkbox"] {
  display: none;
}

.member-avatar {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 50%;
}

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

.member-name {
  display: block;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-role {
  display: block;
  color: #888;
  font-size: 11px;
  text-transform: capitalize;
}

.member-item .check-icon {
  color: #9e23a3;
}

[data-theme="dark"] .member-item {
  background: rgba(158, 35, 163, 0.08);
}

[data-theme="dark"] .member-item:hover {
  background: rgba(158, 35, 163, 0.15);
}

[data-theme="dark"] .member-item.selected {
  background: rgba(158, 35, 163, 0.2);
  border-color: rgba(158, 35, 163, 0.4);
}

[data-theme="dark"] .member-name {
  color: #e0e0e0;
}

[data-theme="dark"] .member-role {
  color: #a0a0a0;
}

/* Message Input */
.invite-message-box {
  margin-bottom: 12px;
}

.invite-message-input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(158, 35, 163, 0.04);
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 6px;
  color: #333;
  font-size: 12px;
  box-sizing: border-box;
}

.invite-message-input::placeholder {
  color: #888;
}

.invite-message-input:focus {
  outline: none;
  border-color: rgba(158, 35, 163, 0.4);
  background: rgba(158, 35, 163, 0.06);
}

[data-theme="dark"] .invite-message-input {
  background: rgba(158, 35, 163, 0.1);
  border-color: rgba(158, 35, 163, 0.25);
  color: #e0e0e0;
}

[data-theme="dark"] .invite-message-input::placeholder {
  color: #808080;
}

[data-theme="dark"] .invite-message-input:focus {
  border-color: rgba(158, 35, 163, 0.5);
  background: rgba(158, 35, 163, 0.15);
}

/* Send Button */
.send-invites-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.send-invites-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #a82dad 0%, #8a1f8d 100%);
  box-shadow: 0 4px 12px rgba(158, 35, 163, 0.3);
}

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

/* Status Message */
.send-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.send-status.success {
  background: rgba(46, 125, 50, 0.1);
  color: #2E7D32;
  border: 1px solid rgba(46, 125, 50, 0.2);
}

.send-status.error {
  background: rgba(211, 47, 47, 0.1);
  color: #c62828;
  border: 1px solid rgba(211, 47, 47, 0.2);
}

[data-theme="dark"] .send-status.success {
  background: rgba(46, 125, 50, 0.15);
  color: #66bb6a;
}

[data-theme="dark"] .send-status.error {
  background: rgba(211, 47, 47, 0.15);
  color: #ef5350;
}

/* Inbox Section */
.inbox-section {
  padding: 12px;
}

.inbox-loading,
.inbox-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: #888;
  font-size: 13px;
}

.inbox-error {
  color: #c62828;
}

[data-theme="dark"] .inbox-loading {
  color: #a0a0a0;
}

[data-theme="dark"] .inbox-error {
  color: #ef5350;
}

/* Empty States */
.invite-empty,
.inbox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
  color: #888;
}

.invite-empty .empty-icon,
.inbox-empty .empty-icon {
  opacity: 0.4;
  margin-bottom: 12px;
  color: #9e23a3;
}

.invite-empty p,
.inbox-empty p {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.invite-empty .empty-hint,
.inbox-empty .empty-hint {
  font-size: 12px;
  color: #888;
}

[data-theme="dark"] .invite-empty p,
[data-theme="dark"] .inbox-empty p {
  color: #e0e0e0;
}

[data-theme="dark"] .invite-empty .empty-hint,
[data-theme="dark"] .inbox-empty .empty-hint {
  color: #808080;
}

/* Invite List */
.invite-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invite-item {
  background: rgba(158, 35, 163, 0.04);
  border: 1px solid rgba(158, 35, 163, 0.1);
  border-radius: 8px;
  padding: 12px;
}

[data-theme="dark"] .invite-item {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.15);
}

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

.invite-from {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inviter-avatar {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 50%;
}

.inviter-name {
  color: #333;
  font-size: 13px;
  font-weight: 500;
}

[data-theme="dark"] .inviter-name {
  color: #e0e0e0;
}

.invite-time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #888;
  font-size: 11px;
}

[data-theme="dark"] .invite-time {
  color: #808080;
}

.invite-details {
  margin-bottom: 10px;
}

.invite-session {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #333;
  font-size: 13px;
  margin-bottom: 4px;
}

.invite-session svg {
  color: #9e23a3;
}

[data-theme="dark"] .invite-session {
  color: #e0e0e0;
}

.invite-message {
  color: #666;
  font-size: 12px;
  font-style: italic;
  margin: 6px 0;
  padding-left: 20px;
}

[data-theme="dark"] .invite-message {
  color: #a0a0a0;
}

.invite-expires {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.expires-label {
  color: #888;
}

.expires-value {
  color: #e65100;
  font-weight: 500;
}

[data-theme="dark"] .expires-label {
  color: #808080;
}

[data-theme="dark"] .expires-value {
  color: #ffb74d;
}

/* Invite Actions */
.invite-actions {
  display: flex;
  gap: 8px;
}

.invite-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.invite-action-btn.decline {
  background: rgba(158, 35, 163, 0.06);
  color: #666;
  border: 1px solid rgba(158, 35, 163, 0.15);
}

.invite-action-btn.decline:hover:not(:disabled) {
  background: rgba(211, 47, 47, 0.1);
  color: #c62828;
  border-color: rgba(211, 47, 47, 0.3);
}

.invite-action-btn.accept {
  background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
  color: white;
}

.invite-action-btn.accept:hover:not(:disabled) {
  background: linear-gradient(135deg, #388E3C 0%, #2E7D32 100%);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

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

[data-theme="dark"] .invite-action-btn.decline {
  background: rgba(158, 35, 163, 0.1);
  color: #a0a0a0;
  border-color: rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .invite-action-btn.decline:hover:not(:disabled) {
  background: rgba(211, 47, 47, 0.2);
  color: #ef5350;
  border-color: rgba(211, 47, 47, 0.4);
}

/* Spinner Animation */
.spinner {
  animation: spin 1s linear infinite;
}

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

/* Scrollbar */
.share-content::-webkit-scrollbar,
.member-list::-webkit-scrollbar {
  width: 6px;
}

.share-content::-webkit-scrollbar-track,
.member-list::-webkit-scrollbar-track {
  background: transparent;
}

.share-content::-webkit-scrollbar-thumb,
.member-list::-webkit-scrollbar-thumb {
  background: rgba(158, 35, 163, 0.2);
  border-radius: 3px;
}

.share-content::-webkit-scrollbar-thumb:hover,
.member-list::-webkit-scrollbar-thumb:hover {
  background: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .share-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .member-list::-webkit-scrollbar-thumb {
  background: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .share-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .member-list::-webkit-scrollbar-thumb:hover {
  background: rgba(158, 35, 163, 0.4);
}
/* Vertical Sidebar - 80px wide, full height */
.sidebar {
  width: 80px;
  min-width: 80px;
  max-width: 80px; /* Prevent overflow */
  height: 100vh;
  max-height: 100vh; /* Prevent overflow */
  background: #fafbfc;
  border-right: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  position: relative; /* Changed from sticky to prevent top cutoff */
  top: 0;
  left: 0;
  z-index: 100;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  overflow: visible; /* Changed from hidden to allow dropdown to show */
  box-sizing: border-box;
}

/* Instrument UI: slimmer, sleeker sidebar to free horizontal space */
html[data-ui-style="instrument"] .sidebar {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding: 10px 6px;
}

/* Logo Section */
.sidebar-logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  width: 100%;
  padding: 12px 4px 0 4px;
}

html[data-ui-style="instrument"] .sidebar-logo-section {
  margin-bottom: 14px;
  padding-top: 8px;
}

.sidebar-logo-container {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

html[data-ui-style="instrument"] .sidebar-logo-container {
  width: 36px;
  height: 36px;
}

.sidebar-logo {
  height: 44px;
  width: auto;
  max-width: none;
  max-height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(158, 35, 163, 0.2));
}

html[data-ui-style="instrument"] .sidebar-logo {
  height: 36px;
  max-height: 36px;
}

.sidebar-logo-text {
  font-family: 'dinmedium', 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  background: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  letter-spacing: 0.02em;
}

.sidebar-badge-beta {
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 7px;
  font-weight: 600;
  text-transform: uppercase;
  background: #9e23a3;
  color: white;
}

html[data-ui-style="instrument"] .sidebar-badge-beta {
  font-size: 6px;
  padding: 1px 3px;
}

/* System Status Indicator Section - Clean, no borders */
.sidebar-status {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 16px;
}

html[data-ui-style="instrument"] .sidebar-status {
  padding: 10px 0;
  margin-bottom: 12px;
}

.sidebar-status .status-indicator {
  transform: scale(0.85);
  white-space: nowrap;
}

/* Connection Status Compact Display - Clean, no borders */
.sidebar-connection-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  width: 100%;
  margin-bottom: 16px;
}

.sidebar-connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

/* Instrument UI: no neon glow */
html[data-ui-style="instrument"] .sidebar-connection-dot {
  box-shadow: none;
}

.sidebar-connection-text {
  font-size: 8px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Action Buttons Container */
.sidebar-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 0;
  align-items: center;
  margin-bottom: 24px;
}

html[data-ui-style="instrument"] .sidebar-action-buttons {
  gap: 8px;
  margin-bottom: 18px;
}


/* Action Button (Upload - Primary) */
.sidebar-action-button {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 100%);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(158, 35, 163, 0.3);
}

/* Instrument UI: reduce visual weight (use purple as accent, not fill) */
html[data-ui-style="instrument"] .sidebar-action-button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(158, 35, 163, 0.25);
  color: #9e23a3;
  box-shadow: none;
}

html[data-ui-style="instrument"] .sidebar-action-button:hover {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.4);
  transform: translateY(-1px);
}

.sidebar-action-button:hover {
  background: linear-gradient(135deg, #b028b6 0%, #8339d4 100%);
  box-shadow: 0 4px 8px rgba(158, 35, 163, 0.4);
  transform: translateY(-2px);
}

.sidebar-action-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(158, 35, 163, 0.3);
}

/* Secondary Action Button (Search, etc.) */
.sidebar-action-button-secondary {
  background: linear-gradient(135deg, #7f1b83 0%, #9e23a3 100%);
  border: 1px solid rgba(158, 35, 163, 0.4);
  color: white;
  box-shadow: 0 2px 4px rgba(158, 35, 163, 0.3);
}

html[data-ui-style="instrument"] .sidebar-action-button-secondary {
  background: transparent;
  border: 1px solid rgba(158, 35, 163, 0.25);
  color: #9e23a3;
  box-shadow: none;
}

.sidebar-action-button-secondary:hover {
  background: linear-gradient(135deg, #9e23a3 0%, #b028b6 100%);
  border-color: rgba(158, 35, 163, 0.6);
  box-shadow: 0 4px 8px rgba(158, 35, 163, 0.4);
  transform: translateY(-2px);
}

.sidebar-action-button-secondary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(158, 35, 163, 0.3);
}

/* Spacer to push content to bottom */
.sidebar-spacer {
  flex: 1;
  min-height: 20px;
}

/* Clock Display - Removed (no longer needed) */
.sidebar-clock {
  display: none;
}

.sidebar-time {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  letter-spacing: 0.02em;
}

/* Footer Logo - Removed (no longer needed) */
.sidebar-footer-logo {
  display: none;
}

/* User Menu Section (bottom) */
.sidebar-user-menu {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin-top: auto;
}

.sidebar-user-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 48px;
}

html[data-ui-style="instrument"] .sidebar-user-button {
  width: 40px;
  border-radius: 10px;
  padding: 6px 4px;
}

.sidebar-user-button:hover:not(:disabled) {
  background: rgba(158, 35, 163, 0.08);
}

.sidebar-user-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  borderRadius: 50%;
  background: linear-gradient(135deg, #9e23a3, #6f2dbd);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  fontSize: 14px;
  fontWeight: 600;
  flex-shrink: 0;
}

html[data-ui-style="instrument"] .sidebar-user-avatar {
  width: 28px;
  height: 28px;
}

.sidebar-user-chevron {
  opacity: 0.6;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-user-chevron.open {
  transform: rotate(180deg);
}

/* User Dropdown Menu - Material Design */
.sidebar-user-dropdown {
  position: fixed;
  background: #ffffff;
  border: none;
  border-radius: 8px;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  z-index: 10000;
  min-width: 300px;
  max-width: 320px;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  animation: dropdownSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--aav-font-secondary, 'Inter', system-ui, sans-serif);
}

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

/* User Info Section - Minimal Header */
.sidebar-user-info {
  padding: 20px 16px 16px 16px;
}

.sidebar-user-name {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.4;
}

.sidebar-user-role {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.sidebar-user-email {
  font-size: 13px;
  color: #6b7280;
  font-weight: 400;
  margin-bottom: 8px;
  line-height: 1.4;
}

.sidebar-user-env {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-env-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Divider - Subtle */
.sidebar-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 8px 0;
}

/* Team Section - Clean Typography */
.sidebar-team-header {
  padding: 12px 16px 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.4;
}

.sidebar-team-count {
  margin-left: 6px;
  opacity: 0.7;
  font-weight: 400;
  text-transform: none;
}

.sidebar-team-members {
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
}

.sidebar-loading {
  padding: 20px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}

.sidebar-team-member {
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 400;
  background: transparent;
  border: none;
  color: #1a1a1a;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0;
}

.sidebar-team-member:hover:not(:disabled):not(.current) {
  background: rgba(158, 35, 163, 0.04);
}

.sidebar-team-member:disabled {
  cursor: default;
}

.sidebar-team-member.current {
  background: rgba(158, 35, 163, 0.06);
}

.sidebar-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.sidebar-member-info {
  flex: 1;
  min-width: 0;
}

.sidebar-member-name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.sidebar-member-email {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.sidebar-member-role {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

.sidebar-member-current-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aav-primary, #9e23a3);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.1);
}

/* Menu Links Section - Material Design */
.sidebar-menu-section {
  padding: 4px 0;
}

.sidebar-menu-link {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--aav-primary-light, #c87fd0);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: background 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0;
  line-height: 1.4;
}

.sidebar-menu-link:hover:not(.disabled) {
  background: rgba(158, 35, 163, 0.06);
  color: var(--aav-primary, #9e23a3);
}

.sidebar-menu-link.disabled {
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.5;
}

.sidebar-menu-link.signout {
  color: #dc2626;
}

.sidebar-menu-link.signout:hover {
  background: rgba(220, 38, 38, 0.06);
  color: #b91c1c;
}

.sidebar-menu-badge {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.6;
  font-weight: 400;
}

/* Dark Mode - Material Design */
[data-theme="dark"] .sidebar {
  background: #1e1e1e;
  border-right-color: #2a2a2a;
}

[data-theme="dark"] .sidebar-user-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sidebar-user-dropdown {
  background: #252525;
  border: none;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sidebar-user-name {
  color: #f5f5f5;
}

[data-theme="dark"] .sidebar-user-email {
  color: #a3a3a3;
}

[data-theme="dark"] .sidebar-user-env {
  color: #737373;
}

[data-theme="dark"] .sidebar-divider {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sidebar-team-header {
  color: #a3a3a3;
}

[data-theme="dark"] .sidebar-loading {
  color: #a3a3a3;
}

[data-theme="dark"] .sidebar-team-member {
  color: #f5f5f5;
}

[data-theme="dark"] .sidebar-team-member:hover:not(:disabled):not(.current) {
  background: rgba(158, 35, 163, 0.12);
}

[data-theme="dark"] .sidebar-team-member.current {
  background: rgba(158, 35, 163, 0.16);
}

[data-theme="dark"] .sidebar-member-name {
  color: #f5f5f5;
}

[data-theme="dark"] .sidebar-member-email {
  color: #737373;
}

[data-theme="dark"] .sidebar-menu-link {
  color: #c87fd0;
}

[data-theme="dark"] .sidebar-menu-link:hover:not(.disabled) {
  background: rgba(158, 35, 163, 0.12);
  color: #d4a3db;
}

[data-theme="dark"] .sidebar-menu-link.disabled {
  color: #525252;
}

[data-theme="dark"] .sidebar-menu-link.signout {
  color: #f87171;
}

[data-theme="dark"] .sidebar-menu-link.signout:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #fca5a5;
}

[data-theme="dark"] .sidebar-time {
  color: #a3a3a3;
}

[data-theme="dark"] .sidebar-clock svg {
  color: #a3a3a3 !important;
}

[data-theme="dark"] .sidebar-action-button-secondary {
  background: linear-gradient(135deg, #9e23a3 0%, #b028b6 100%);
  border-color: rgba(158, 35, 163, 0.5);
  box-shadow: 0 2px 4px rgba(158, 35, 163, 0.4);
}

[data-theme="dark"] .sidebar-action-button-secondary:hover {
  background: linear-gradient(135deg, #b028b6 0%, #c87fd0 100%);
  border-color: rgba(158, 35, 163, 0.7);
  box-shadow: 0 4px 8px rgba(158, 35, 163, 0.5);
}
/* Scientific Status Bar with Aavishkar.ai Design System - MINIMAL */
.sci-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: var(--aav-glass-bg);
  backdrop-filter: var(--aav-glass-backdrop);
  -webkit-backdrop-filter: var(--aav-glass-backdrop);
  border-top: 1px solid var(--aav-glass-border);
  font-size: 10px;
  color: var(--md-on-surface-variant);
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  box-shadow: var(--aav-glass-shadow);
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
  flex-shrink: 0;
  z-index: 10;
}

.sci-status-bar.expanded {
  height: auto;
  max-height: 60px;
  padding: 6px 12px;
}

.sci-status-essential {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: nowrap;
  overflow: hidden;
}

.sci-status-debug {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(158, 35, 163, 0.1);
  margin-top: 4px;
}

.sci-status-item {
  display: flex;
  align-items: center;
  gap: var(--md-space-1);
  padding: var(--md-space-1) var(--md-space-2);
  border-radius: 6px;
  transition: all var(--md-motion-duration-short2) var(--md-motion-easing-standard);
  position: relative;
}

.sci-status-item:hover {
  background: rgba(158, 35, 163, 0.08);
  color: var(--aav-primary);
  transform: translateY(-1px);
}

.sci-status-spacer {
  flex: 1;
}

.sci-status-user-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9e23a3, #6f2dbd);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.sci-status-user-name {
  font-weight: 500;
  color: var(--md-on-surface);
  font-size: 11px;
}

.sci-status-team-name {
  font-weight: 400;
  color: var(--md-on-surface-variant);
  font-size: 11px;
}

.sci-status-collaborator-count {
  font-size: 10px;
  color: var(--md-on-surface-variant);
  opacity: 0.7;
  margin-left: 2px;
}

/* Contract Status Indicators */
.sci-status-contract-compliant {
  color: var(--sci-success);
}

.sci-status-contract-violation {
  color: var(--sci-error);
  animation: pulse-error 2s infinite;
}

.sci-status-contract-validating {
  color: var(--sci-warning);
  animation: pulse-warning 1.5s infinite;
}

.sci-status-response-fast {
  color: var(--sci-success);
}

.sci-status-response-medium {
  color: var(--sci-warning);
}

.sci-status-response-slow {
  color: var(--sci-error);
}

/* Performance Metrics */
.sci-status-metrics {
  font-family: var(--aav-font-mono);
  font-size: var(--md-label-small);
  background: rgba(158, 35, 163, 0.05);
  padding: 2px var(--md-space-1);
  border-radius: 4px;
  border: 1px solid rgba(158, 35, 163, 0.1);
}

/* Animations */
@keyframes pulse-error {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

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

/* Dark Mode */
[data-theme="dark"] .sci-status-bar {
  background: var(--aav-glass-bg);
  border-top-color: var(--aav-glass-border);
  color: var(--md-on-surface-variant);
}

[data-theme="dark"] .sci-status-time {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .sci-status-metrics {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.15);
}

/* Info Cards on Hover */
.sci-status-item[title] {
  cursor: help;
}

.sci-status-item[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--aav-glass-strong);
  color: var(--md-on-surface);
  padding: var(--md-space-2) var(--md-space-3);
  border-radius: 6px;
  font-size: var(--md-label-medium);
  white-space: nowrap;
  z-index: 100;
  box-shadow: var(--md-elevation-3);
  border: 1px solid var(--aav-glass-border);
  opacity: 0;
  animation: tooltip-appear var(--md-motion-duration-medium2) var(--md-motion-easing-decelerate) forwards;
}

@keyframes tooltip-appear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
/**
 * Aavishkar.ai Material Design System for LabOS Beta
 * 
 * Comprehensive design system that combines:
 * - Aavishkar.ai brand identity (gradients, colors, typography)
 * - Material Design 3 principles (elevation, motion, accessibility)
 * - Scientific minimal aesthetics (clean, attention-minimal)
 * - Dark/Light mode support
 */

/* ===== BRAND IDENTITY & THEME SYSTEM ===== */

:root {
  /* Aavishkar.ai Brand Colors */
  --aav-primary: #9e23a3;
  --aav-primary-dark: #7f1b83;
  --aav-primary-light: #c87fd0;
  --aav-secondary: #6f2dbd;
  --aav-accent: #d4af37;
  --aav-gradient-primary: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 50%, #c87fd0 100%);
  --aav-gradient-secondary: linear-gradient(135deg, #6f2dbd 0%, #9e23a3 50%, #d4af37 100%);
  --aav-gradient-button: linear-gradient(145deg, #6f2dbd 0%, #9e23a3 45%, #6f2dbd 100%);

  /* Light Mode Colors */
  --md-primary: #6750a4;
  --md-on-primary: #ffffff;
  --md-primary-container: #eaddff;
  --md-on-primary-container: #21005d;
  
  --md-secondary: #625b71;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e8def8;
  --md-on-secondary-container: #1d192b;
  
  --md-background: #fffbfe;
  --md-on-background: #1c1b1f;
  --md-surface: #fffbfe;
  --md-on-surface: #1c1b1f;
  --md-surface-variant: #e7e0ec;
  --md-on-surface-variant: #49454f;
  --md-outline: #79747e;
  --md-outline-variant: #cab6d0;

  /* Glass Effects (Light Mode) */
  --aav-glass-bg: rgba(255, 255, 255, 0.75);
  --aav-glass-border: rgba(158, 35, 163, 0.2);
  --aav-glass-backdrop: blur(12px) saturate(120%);
  --aav-glass-shadow: 0 2px 6px rgba(158, 35, 163, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);

  /* Scientific Status Colors */
  --sci-success: #10b981;
  --sci-warning: #f59e0b;
  --sci-error: #ef4444;
  --sci-info: #3b82f6;
  --sci-neutral: #6b7280;

  /* Typography */
  --aav-font-primary: 'dinmedium', 'Inter', system-ui, -apple-system, sans-serif;
  --aav-font-secondary: 'gill-sans', 'Inter', system-ui, sans-serif;
  --aav-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  
  /* Material Design Typography Scale */
  --md-display-large: 57px;
  --md-headline-large: 32px;
  --md-title-large: 22px;
  --md-title-medium: 16px;
  --md-title-small: 14px;
  --md-body-large: 16px;
  --md-body-medium: 14px;
  --md-label-large: 14px;
  --md-label-medium: 12px;
  --md-label-small: 11px;

  /* Material Design Elevation */
  --md-elevation-0: none;
  --md-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-elevation-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-elevation-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);

  /* Motion System */
  --md-motion-duration-short1: 50ms;
  --md-motion-duration-short2: 100ms;
  --md-motion-duration-short3: 150ms;
  --md-motion-duration-short4: 200ms;
  --md-motion-duration-medium1: 250ms;
  --md-motion-duration-medium2: 300ms;
  --md-motion-duration-medium3: 350ms;
  --md-motion-duration-medium4: 400ms;
  
  --md-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0, 1.0);
  --md-motion-easing-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);
  --md-motion-easing-emphasize: cubic-bezier(0.2, 0.0, 0, 1.0);

  /* Spacing System (Material Design 8dp grid) */
  --md-space-1: 4px;
  --md-space-2: 8px;
  --md-space-3: 12px;
  --md-space-4: 16px;
  --md-space-5: 20px;
  --md-space-6: 24px;
  --md-space-8: 32px;
  --md-space-10: 40px;
  --md-space-12: 48px;
  --md-space-16: 64px;
}

/* ===== DARK MODE THEME ===== */

[data-theme="dark"] {
  /* Dark Mode Colors */
  --md-background: #1c1b1f;
  --md-on-background: #e6e1e5;
  --md-surface: #1c1b1f;
  --md-on-surface: #e6e1e5;
  --md-surface-variant: #49454f;
  --md-on-surface-variant: #cab6d0;
  --md-outline: #938f99;
  --md-outline-variant: #49454f;
  
  --md-primary-container: #4f378b;
  --md-on-primary-container: #eaddff;
  --md-secondary-container: #4a4458;
  --md-on-secondary-container: #e8def8;

  /* Dark Mode Glass Effects */
  --aav-glass-bg: rgba(28, 27, 31, 0.8);
  --aav-glass-border: rgba(158, 35, 163, 0.3);
  --aav-glass-backdrop: blur(12px) saturate(120%);
  --aav-glass-shadow: 0 2px 6px rgba(158, 35, 163, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Dark Mode Elevation (stronger shadows) */
  --md-elevation-1: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 4px 1px rgba(0, 0, 0, 0.25);
  --md-elevation-2: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 2px 8px 2px rgba(0, 0, 0, 0.25);
  --md-elevation-3: 0px 1px 4px 0px rgba(0, 0, 0, 0.5), 0px 4px 12px 3px rgba(0, 0, 0, 0.25);
}

/* ===== AAVISHKAR.AI LOGO COMPONENT ===== */

.aav-logo-container {
  display: flex;
  align-items: center;
  gap: var(--md-space-3);
  overflow: visible;
}

.aav-logo-image {
  height: 36px;
  width: auto;
  max-width: none;
  max-height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1));
  overflow: visible;
}

.aav-logo-text {
  font-family: var(--aav-font-primary);
  font-size: var(--md-title-large);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 0 10px rgba(158, 35, 163, 0.3);
  display: flex;
  align-items: center;
}

.aav-logo-lab {
  background: var(--aav-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aav-logo-os {
  background: var(--aav-gradient-secondary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: 0.15em;
}

.aav-beta-badge {
  background: var(--aav-gradient-button);
  color: white;
  padding: var(--md-space-1) var(--md-space-2);
  border-radius: 6px;
  font-size: var(--md-label-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--md-elevation-2);
}

/* ===== LAYOUT CONSOLE (Floating Toolbar) ===== */

.layout-console {
  position: fixed;
  right: var(--md-space-2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--md-space-2);
  background: var(--aav-glass-bg);
  backdrop-filter: var(--aav-glass-backdrop);
  -webkit-backdrop-filter: var(--aav-glass-backdrop);
  border: 1px solid var(--aav-glass-border);
  border-radius: 12px;
  padding: var(--md-space-2);
  box-shadow: var(--aav-glass-shadow);
  z-index: 1000;
  opacity: 0.85;
  transition: all var(--md-motion-duration-medium2) var(--md-motion-easing-standard);
}

.layout-console:hover {
  opacity: 1;
  transform: translateY(-50%) translateX(-2px);
  box-shadow: 0 4px 12px rgba(158, 35, 163, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.layout-console-button {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--md-on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
  position: relative;
}

.layout-console-button:hover {
  background: rgba(158, 35, 163, 0.12);
  color: var(--aav-primary);
  transform: scale(1.1);
}

.layout-console-button:active {
  transform: scale(0.95);
}

.layout-console-button.active {
  background: rgba(158, 35, 163, 0.2);
  color: var(--aav-primary);
}

/* Layout Console Additional Styling */
.layout-console-separator {
  height: 1px;
  background: var(--md-outline-variant);
  margin: var(--md-space-2) var(--md-space-1);
  opacity: 0.5;
}

.layout-console-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.layout-console-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--md-space-1);
}

.layout-console-mode {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-on-surface-variant);
  border-radius: 4px;
  transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

.layout-console-mode:hover {
  background: rgba(158, 35, 163, 0.08);
  color: var(--aav-primary);
}

/* ===== MATERIAL DESIGN COMPONENTS ===== */

.md-button {
  font-family: var(--aav-font-secondary);
  font-size: var(--md-label-large);
  font-weight: 500;
  height: 40px;
  padding: 0 var(--md-space-6);
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: all var(--md-motion-duration-short4) var(--md-motion-easing-standard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-space-2);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.md-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--md-elevation-2);
}

.aav-button-primary {
  background: var(--aav-gradient-button);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--md-elevation-2);
}

.aav-button-primary:hover {
  background: linear-gradient(145deg, #5b25a0 0%, #8a1f90 45%, #5b25a0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--md-elevation-4);
}

/* ===== GLASS MORPHISM SYSTEM ===== */

.aav-glass {
  background: var(--aav-glass-bg);
  backdrop-filter: var(--aav-glass-backdrop);
  -webkit-backdrop-filter: var(--aav-glass-backdrop);
  border: 1px solid var(--aav-glass-border);
  box-shadow: var(--aav-glass-shadow);
}

.aav-glass-strong {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

[data-theme="dark"] .aav-glass-strong {
  background: rgba(28, 27, 31, 0.9);
}

.aav-glass-subtle {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
}

[data-theme="dark"] .aav-glass-subtle {
  background: rgba(28, 27, 31, 0.6);
}

/* Auto-appearing Info Cards */
.aav-info-card {
  background: var(--aav-glass-bg);
  backdrop-filter: var(--aav-glass-backdrop);
  border: 1px solid var(--aav-glass-border);
  border-radius: 8px;
  padding: var(--md-space-3) var(--md-space-4);
  box-shadow: var(--md-elevation-3);
  opacity: 0;
  transform: translateY(4px);
  transition: all var(--md-motion-duration-medium2) var(--md-motion-easing-decelerate);
  pointer-events: none;
  position: absolute;
  z-index: 50;
  max-width: 280px;
  font-size: var(--md-body-small);
  color: var(--md-on-surface);
}

.aav-info-trigger:hover .aav-info-card,
.aav-info-trigger:focus .aav-info-card {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== STATUS COMPONENTS ===== */

.md-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--md-space-2);
  padding: var(--md-space-1) var(--md-space-3);
  border-radius: 16px;
  font-size: var(--md-label-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.md-status-success {
  background: rgba(16, 185, 129, 0.12);
  color: var(--sci-success);
}

.md-status-warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--sci-warning);
}

.md-status-error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--sci-error);
}

.md-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

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

/* ===== SCIENTIFIC IDE COMPONENTS ===== */

.sci-ide-panel {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--md-elevation-1);
}

.sci-ide-panel-header {
  background: var(--md-surface-variant);
  border-bottom: 1px solid var(--md-outline-variant);
  padding: var(--md-space-3) var(--md-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}

.sci-ide-panel-title {
  font-family: var(--aav-font-primary);
  font-size: var(--md-title-small);
  font-weight: 600;
  color: var(--md-on-surface);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sci-ide-panel-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--md-surface);
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
  .layout-console {
    right: var(--md-space-1);
    padding: var(--md-space-1);
  }
  
  .layout-console-button {
    width: 32px;
    height: 32px;
  }
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .md-status-dot {
    animation: none;
  }
}

@media (prefers-contrast: high) {
  .aav-glass {
    border-width: 2px;
  }
  
  .layout-console-button:hover {
    background: var(--aav-primary);
    color: white;
  }
}

/* ===== UTILITY CLASSES ===== */

.text-primary { color: var(--md-on-surface); }
.text-secondary { color: var(--md-on-surface-variant); }
.text-accent { color: var(--aav-primary); }
.text-success { color: var(--sci-success); }
.text-warning { color: var(--sci-warning); }
.text-error { color: var(--sci-error); }

.bg-surface { background: var(--md-surface); }
.bg-surface-variant { background: var(--md-surface-variant); }
.bg-primary { background: var(--aav-primary); }

.sci-text-sm { font-size: var(--md-label-medium); }
.sci-text-secondary { color: var(--md-on-surface-variant); }

/* Status classes for existing components */
.sci-status { @extend .md-status-indicator; }
.sci-status-ready { @extend .md-status-success; }
.sci-status-processing { @extend .md-status-warning; }
.sci-status-error { @extend .md-status-error; }
.sci-status-dot { @extend .md-status-dot; }/* CommandPalette Styles - Scientific Minimal Design */

.sci-command-palette-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  z-index: 1000;
}

.sci-command-palette {
  width: 100%;
  max-width: 600px;
  max-height: 70vh;
  background: var(--sci-surface);
  border: 1px solid var(--sci-border);
  border-radius: 12px;
  box-shadow: var(--sci-shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
.sci-command-header {
  padding: var(--sci-space-4);
  border-bottom: 1px solid var(--sci-border-light);
  background: var(--sci-surface-variant);
}

.sci-command-search {
  display: flex;
  align-items: center;
  gap: var(--sci-space-3);
  position: relative;
}

.sci-command-search-icon {
  color: var(--sci-text-secondary);
  flex-shrink: 0;
}

.sci-command-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--sci-font-family);
  font-size: var(--sci-font-size-lg);
  color: var(--sci-text-primary);
  padding: var(--sci-space-2) 0;
}

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

.sci-command-count {
  font-size: var(--sci-font-size-sm);
  color: var(--sci-text-secondary);
  background: var(--sci-surface);
  padding: var(--sci-space-1) var(--sci-space-2);
  border-radius: 4px;
  font-family: var(--sci-font-mono);
}

/* Command List */
.sci-command-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sci-space-2) 0;
}

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

.sci-command-group:last-child {
  margin-bottom: 0;
}

.sci-command-group-header {
  display: flex;
  align-items: center;
  gap: var(--sci-space-2);
  padding: var(--sci-space-2) var(--sci-space-4);
  font-size: var(--sci-font-size-xs);
  font-weight: 600;
  color: var(--sci-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--sci-surface-variant);
  margin-bottom: var(--sci-space-1);
}

/* Command Items */
.sci-command-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sci-space-3) var(--sci-space-4);
  cursor: pointer;
  transition: var(--sci-transition);
  border-left: 3px solid transparent;
}

.sci-command-item:hover,
.sci-command-item.selected {
  background: var(--sci-surface-variant);
  border-left-color: var(--sci-accent);
}

.sci-command-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sci-command-item.disabled:hover {
  background: transparent;
  border-left-color: transparent;
}

.sci-command-item-main {
  display: flex;
  align-items: center;
  gap: var(--sci-space-3);
  flex: 1;
}

.sci-command-item-icon {
  color: var(--sci-text-secondary);
  flex-shrink: 0;
}

.sci-command-item.selected .sci-command-item-icon {
  color: var(--sci-accent);
}

.sci-command-item-content {
  flex: 1;
}

.sci-command-item-label {
  font-size: var(--sci-font-size-sm);
  font-weight: 500;
  color: var(--sci-text-primary);
  margin-bottom: var(--sci-space-1);
}

.sci-command-item-description {
  font-size: var(--sci-font-size-xs);
  color: var(--sci-text-secondary);
  line-height: 1.4;
}

.sci-command-item-actions {
  display: flex;
  align-items: center;
  gap: var(--sci-space-2);
}

.sci-command-item-shortcut {
  font-size: var(--sci-font-size-xs);
  color: var(--sci-text-muted);
  font-family: var(--sci-font-mono);
  background: var(--sci-surface);
  padding: var(--sci-space-1) var(--sci-space-2);
  border-radius: 4px;
  border: 1px solid var(--sci-border-light);
}

.sci-command-item-arrow {
  color: var(--sci-text-muted);
  opacity: 0;
  transition: var(--sci-transition);
}

.sci-command-item:hover .sci-command-item-arrow,
.sci-command-item.selected .sci-command-item-arrow {
  opacity: 1;
}

/* Empty State */
.sci-command-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sci-space-8) var(--sci-space-4);
  text-align: center;
}

.sci-command-empty-icon {
  color: var(--sci-text-muted);
  margin-bottom: var(--sci-space-4);
}

.sci-command-empty-text {
  font-size: var(--sci-font-size-base);
  font-weight: 500;
  color: var(--sci-text-primary);
  margin-bottom: var(--sci-space-2);
}

.sci-command-empty-description {
  font-size: var(--sci-font-size-sm);
  color: var(--sci-text-secondary);
}

/* Footer */
.sci-command-footer {
  padding: var(--sci-space-3) var(--sci-space-4);
  border-top: 1px solid var(--sci-border-light);
  background: var(--sci-surface-variant);
}

.sci-command-footer-hint {
  display: flex;
  align-items: center;
  gap: var(--sci-space-4);
  font-size: var(--sci-font-size-xs);
  color: var(--sci-text-secondary);
}

.sci-command-key {
  font-family: var(--sci-font-mono);
  background: var(--sci-surface);
  padding: var(--sci-space-1) var(--sci-space-2);
  border-radius: 3px;
  border: 1px solid var(--sci-border-light);
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .sci-command-palette-overlay {
    padding: var(--sci-space-4);
    padding-top: 5vh;
  }
  
  .sci-command-palette {
    max-width: none;
    max-height: 85vh;
  }
  
  .sci-command-header {
    padding: var(--sci-space-3);
  }
  
  .sci-command-input {
    font-size: var(--sci-font-size-base);
  }
  
  .sci-command-item {
    padding: var(--sci-space-3);
  }
  
  .sci-command-item-shortcut {
    display: none;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .sci-command-palette {
    border-width: 2px;
  }
  
  .sci-command-item.selected {
    background: var(--sci-accent);
    color: white;
  }
  
  .sci-command-item.selected .sci-command-item-icon,
  .sci-command-item.selected .sci-command-item-label,
  .sci-command-item.selected .sci-command-item-description {
    color: white;
  }
}

/* Smooth Scrolling */
.sci-command-list {
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
.sci-command-list::-webkit-scrollbar {
  width: 6px;
}

.sci-command-list::-webkit-scrollbar-track {
  background: var(--sci-surface-variant);
}

.sci-command-list::-webkit-scrollbar-thumb {
  background: var(--sci-border);
  border-radius: 3px;
}

.sci-command-list::-webkit-scrollbar-thumb:hover {
  background: var(--sci-text-muted);
}
/**
 * DocumentUploadModal.css - Diegetic Knowledge Library Styling
 *
 * Design Philosophy:
 * - Material Design 3 with file/connector iconography
 * - Conveys the sense of each artifact being carefully processed and ordered
 * - Visual pipeline showing Document → Extraction → Chunking → Embedding → Graph Storage
 * - Minimal UI aligned with Document-Processing-Pipeline-Wiring.md stages
 */

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide-up animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spinning animation for processing indicators */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pulse animation for active indicators */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Connector flow animation */
@keyframes flowRight {
  0% {
    stroke-dashoffset: 20;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Processing stage indicator */
.processing-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(158, 35, 163, 0.05);
  border: 1px solid rgba(158, 35, 163, 0.15);
  font-size: 11px;
  font-weight: 500;
  color: #9e23a3;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.processing-stage.active {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.3);
}

.processing-stage.completed {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}

.processing-stage-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

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

/* Knowledge artifact card */
.knowledge-artifact {
  position: relative;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.knowledge-artifact:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(158, 35, 163, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.knowledge-artifact-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.knowledge-artifact-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.1), rgba(111, 45, 189, 0.1));
  border: 1px solid rgba(158, 35, 163, 0.2);
  border-radius: 6px;
  flex-shrink: 0;
}

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

.knowledge-artifact-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-artifact-meta {
  font-size: 11px;
  color: var(--text-secondary, #9aa0a6);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pipeline visualization */
.pipeline-stages {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  overflow-x: auto;
}

.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 70px;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  color: var(--text-secondary, #9aa0a6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pipeline-stage.active {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.3);
  color: #9e23a3;
}

.pipeline-stage.completed {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}

.pipeline-connector {
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  flex-shrink: 0;
}

.pipeline-connector.active {
  background: linear-gradient(90deg, rgba(158, 35, 163, 0.5), rgba(111, 45, 189, 0.5));
  animation: pulse 1.5s ease-in-out infinite;
}

.pipeline-connector.completed {
  background: rgba(76, 175, 80, 0.5);
}

/* Stage indicator icon */
.stage-indicator {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.stage-indicator svg {
  width: 100%;
  height: 100%;
}

/* Processing result badges */
.processing-result {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.25);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #4CAF50;
}

.processing-result-icon {
  width: 12px;
  height: 12px;
}

/* Visibility badge */
.visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid;
}

.visibility-badge.mine {
  background: rgba(158, 35, 163, 0.1);
  border-color: rgba(158, 35, 163, 0.25);
  color: #9e23a3;
}

.visibility-badge.team {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
  color: #3b82f6;
}

/* Empty state */
.empty-library {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-secondary, #9aa0a6);
}

.empty-library-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.empty-library-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 4px;
}

.empty-library-description {
  font-size: 13px;
  color: var(--text-secondary, #9aa0a6);
}

/* Knowledge metrics */
.knowledge-metrics {
  display: flex;
  gap: 16px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-top: 12px;
}

.knowledge-metric {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.knowledge-metric-icon {
  width: 14px;
  height: 14px;
  color: #9e23a3;
}

.knowledge-metric-value {
  font-weight: 700;
  color: var(--text-primary, #e0e0e0);
}

.knowledge-metric-label {
  color: var(--text-secondary, #9aa0a6);
}
/**
 * TabBar - Browser-style tabs for workspace and project views
 * Design: Material Design 3 + Aavishkar.ai brand colors
 */

.tab-bar {
  display: flex;
  align-items: center;
  height: 36px;
  background: var(--md-surface);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 8px;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative; /* Ensure it stays above sticky pane headers */
  z-index: 50;
}

.tab-list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Tab styling */
.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: rgba(158, 35, 163, 0.05);
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: #5f6368;
  position: relative;
  user-select: none;
}

.tab:hover {
  background: rgba(158, 35, 163, 0.1);
  border-color: rgba(158, 35, 163, 0.3);
  color: #9e23a3;
}

.tab.active {
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  border-color: #9e23a3;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(158, 35, 163, 0.3);
  font-weight: 600;
}

/* Tab icon */
.tab-icon {
  display: flex;
  align-items: center;
  opacity: 0.7;
  color: #5f6368;
}

.tab:hover .tab-icon {
  opacity: 1;
  color: #9e23a3;
}

.tab.active .tab-icon {
  opacity: 1;
  color: #ffffff;
}

/* Tab name */
.tab-name {
  font-weight: 500;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close button */
.tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 2px;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
  color: #5f6368;
}

.tab.active .tab-close {
  color: rgba(255, 255, 255, 0.7);
}

.tab:hover .tab-close {
  opacity: 1;
}

.tab-close:hover {
  background: rgba(255, 0, 0, 0.2);
  color: #ff6b6b;
}

/* New project button */
.tab-new-project {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  background: transparent;
  border: 1px dashed rgba(158, 35, 163, 0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 11px;
  font-weight: 500;
  color: #5f6368;
  white-space: nowrap;
  margin-left: 4px;
}

.tab-new-project:hover {
  background: rgba(158, 35, 163, 0.1);
  border-color: #9e23a3;
  border-style: solid;
  color: #9e23a3;
}

/* Tab type variants */
.workspace-tab.active {
  border-bottom: 3px solid #4CAF50;
}

.project-tab.active {
  border-bottom: 3px solid #ffffff;
}

/* Scrollbar styling for tab overflow */
.tab-bar::-webkit-scrollbar,
.tab-list::-webkit-scrollbar {
  height: 4px;
}

.tab-bar::-webkit-scrollbar-track,
.tab-list::-webkit-scrollbar-track {
  background: transparent;
}

.tab-bar::-webkit-scrollbar-thumb,
.tab-list::-webkit-scrollbar-thumb {
  background: rgba(158, 35, 163, 0.3);
  border-radius: 2px;
}

.tab-bar::-webkit-scrollbar-thumb:hover,
.tab-list::-webkit-scrollbar-thumb:hover {
  background: rgba(158, 35, 163, 0.5);
}

/* Dark mode support */
[data-theme="dark"] .tab-bar {
  background: #1c1b1f;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .tab {
  background: rgba(158, 35, 163, 0.1);
  border-color: rgba(158, 35, 163, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .tab:hover {
  background: rgba(158, 35, 163, 0.2);
  border-color: rgba(158, 35, 163, 0.4);
  color: #c87fd0;
}

[data-theme="dark"] .tab.active {
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  border-color: #9e23a3;
  color: #ffffff;
}

[data-theme="dark"] .tab-icon {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .tab:hover .tab-icon {
  color: #c87fd0;
}

[data-theme="dark"] .tab.active .tab-icon {
  color: #ffffff;
}

[data-theme="dark"] .tab-close {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .tab-new-project {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(158, 35, 163, 0.4);
}

[data-theme="dark"] .tab-new-project:hover {
  background: rgba(158, 35, 163, 0.15);
  border-color: #9e23a3;
  color: #c87fd0;
}
/**
 * ProjectModal - Material Design 3 styling for project creation modal
 * Design: Glassmorphism + Aavishkar.ai brand colors
 */

/* Overlay */
.project-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

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

/* Modal container */
.project-modal {
  background: #ffffff;
  border: 1px solid rgba(158, 35, 163, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
  color: #202124;
}

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

/* Header */
.project-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(158, 35, 163, 0.03);
}

.project-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9e23a3;
}

.project-modal-title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #202124;
}

.project-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #5f6368;
  transition: all 0.15s ease;
}

.project-modal-close:hover {
  background: rgba(255, 0, 0, 0.1);
  color: #ff6b6b;
}

/* Body */
.project-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  background: #ffffff;
}

/* Error message */
.project-modal-error {
  padding: 12px 16px;
  margin-bottom: 20px;
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 6px;
  color: #ff6b6b;
  font-size: 13px;
}

/* Field */
.project-modal-field {
  margin-bottom: 20px;
}

.project-modal-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #202124;
}

.project-modal-field label .required {
  color: #ff6b6b;
  margin-left: 2px;
}

.project-modal-field input,
.project-modal-field textarea {
  width: 100%;
  padding: 10px 12px;
  background: #fafbfc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  color: #202124;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.project-modal-field input:focus,
.project-modal-field textarea:focus {
  outline: none;
  border-color: #9e23a3;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 0.1);
}

.project-modal-field input:disabled,
.project-modal-field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.project-modal-field input::placeholder,
.project-modal-field textarea::placeholder {
  color: #9aa0a6;
}

.project-modal-field textarea {
  resize: vertical;
  min-height: 60px;
}

/* Hint text */
.project-modal-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #9aa0a6;
}

/* Character count indicator */
.char-count {
  display: block;
  text-align: right;
  font-size: 11px;
  color: #9aa0a6;
  margin-top: 4px;
}

.char-count.warning {
  color: #f59e0b;
}

.char-count.error {
  color: #dc2626;
}

[data-theme="dark"] .char-count {
  color: #6b7280;
}

[data-theme="dark"] .char-count.warning {
  color: #fbbf24;
}

[data-theme="dark"] .char-count.error {
  color: #ef4444;
}

/* Footer */
.project-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: #fafbfc;
}

/* Buttons */
.project-modal-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.project-modal-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.project-modal-button.secondary {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #5f6368;
}

.project-modal-button.secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.3);
  color: #202124;
}

.project-modal-button.primary {
  background: #9e23a3;
  color: #ffffff;
}

.project-modal-button.primary:hover:not(:disabled) {
  background: #b52bb3;
  box-shadow: 0 2px 8px rgba(158, 35, 163, 0.4);
  transform: translateY(-1px);
}

/* Scrollbar for body overflow */
.project-modal-body::-webkit-scrollbar {
  width: 6px;
}

.project-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.project-modal-body::-webkit-scrollbar-thumb {
  background: rgba(158, 35, 163, 0.3);
  border-radius: 3px;
}

.project-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(158, 35, 163, 0.5);
}

/* Document Selection (Task 4C) */
.field-hint {
  font-weight: normal;
  color: #9aa0a6;
  font-size: 11px;
  margin-left: 4px;
}

.document-selection-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: #5f6368;
  font-size: 13px;
}

.document-selection-loading .spinner {
  animation: spin 1s linear infinite;
}

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

.document-selection-empty {
  padding: 16px;
  text-align: center;
  color: #9aa0a6;
  font-size: 13px;
}

.document-selection-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background: #fafbfc;
}

/* Select All Header */
.document-selection-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 12px;
  background: rgba(158, 35, 163, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.select-all-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(158, 35, 163, 0.3);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #9e23a3;
  cursor: pointer;
  transition: all 0.15s ease;
}

.select-all-button:hover:not(:disabled) {
  background: rgba(158, 35, 163, 0.1);
  border-color: #9e23a3;
}

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

.select-all-button .checkbox-icon {
  color: #9e23a3;
}

.select-all-button .checkbox-icon.checked {
  color: #9e23a3;
}

.document-selection-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.document-selection-item:hover {
  background: rgba(158, 35, 163, 0.05);
}

.document-selection-item.selected {
  background: rgba(158, 35, 163, 0.1);
}

.document-selection-item input[type="checkbox"] {
  display: none; /* Hide native checkbox */
}

.document-selection-item .checkbox-icon {
  color: #5f6368;
  flex-shrink: 0;
}

.document-selection-item .checkbox-icon.checked {
  color: #9e23a3;
}

.document-selection-item .document-title {
  flex: 1;
  font-size: 13px;
  color: #202124;
  font-weight: 500;
}

.document-selection-item .document-visibility {
  font-size: 11px;
  color: #9aa0a6;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.document-selection-summary {
  padding: 12px 16px;
  background: rgba(158, 35, 163, 0.1);
  border-top: 1px solid rgba(158, 35, 163, 0.2);
  font-size: 12px;
  color: #9e23a3;
  font-weight: 500;
  text-align: center;
}

/* Tag Selector for bulk document selection */
.tag-selector {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(158, 35, 163, 0.03);
  border: 1px solid rgba(158, 35, 163, 0.1);
  border-radius: 8px;
}

.tag-selector-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #5f6368;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-selector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(158, 35, 163, 0.08);
  border: 1px solid rgba(158, 35, 163, 0.15);
  border-radius: 16px;
  color: #9e23a3;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tag-chip:hover:not(:disabled) {
  background: rgba(158, 35, 163, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(158, 35, 163, 0.2);
}

.tag-chip.selected {
  background: #9e23a3;
  color: white;
  border-color: #9e23a3;
}

.tag-chip.selected:hover:not(:disabled) {
  background: #b52bb3;
}

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

.tag-count {
  font-size: 10px;
  opacity: 0.7;
}

/* Dark mode support */
[data-theme="dark"] .project-modal {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

[data-theme="dark"] .project-modal-header {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(158, 35, 163, 0.05);
}

[data-theme="dark"] .project-modal-title h2 {
  color: #e0e0e0;
}

[data-theme="dark"] .project-modal-body {
  background: #2a2a2a;
}

[data-theme="dark"] .project-modal-field label {
  color: #e0e0e0;
}

[data-theme="dark"] .project-modal-field input,
[data-theme="dark"] .project-modal-field textarea {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

[data-theme="dark"] .project-modal-field input:focus,
[data-theme="dark"] .project-modal-field textarea:focus {
  background: #2a2a2a;
}

[data-theme="dark"] .project-modal-field input::placeholder,
[data-theme="dark"] .project-modal-field textarea::placeholder {
  color: #6b6b6b;
}

[data-theme="dark"] .project-modal-footer {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .project-modal-button.secondary {
  border-color: rgba(255, 255, 255, 0.2);
  color: #9aa0a6;
}

[data-theme="dark"] .project-modal-button.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: #e0e0e0;
}

[data-theme="dark"] .document-selection-list {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .document-selection-header {
  background: rgba(158, 35, 163, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .document-selection-item {
  border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .document-selection-item .document-title {
  color: #e0e0e0;
}

[data-theme="dark"] .document-selection-item .document-visibility {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .tag-selector {
  background: rgba(158, 35, 163, 0.05);
  border-color: rgba(158, 35, 163, 0.15);
}

[data-theme="dark"] .tag-selector-label {
  color: #9aa0a6;
}

[data-theme="dark"] .tag-chip {
  background: rgba(158, 35, 163, 0.12);
  border-color: rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .tag-chip:hover:not(:disabled) {
  background: rgba(158, 35, 163, 0.25);
}

/* Tag selector empty state */
.tag-selector-empty {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 12px;
  color: #9aa0a6;
  text-align: center;
}

[data-theme="dark"] .tag-selector-empty {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Visibility Toggle */
.visibility-toggle-group {
  display: flex;
  gap: 12px;
}

.visibility-option {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #fafbfc;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.visibility-option:hover:not(:disabled) {
  border-color: rgba(158, 35, 163, 0.4);
  background: rgba(158, 35, 163, 0.02);
}

.visibility-option.active {
  border-color: #9e23a3;
  background: rgba(158, 35, 163, 0.08);
}

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

.visibility-option svg {
  flex-shrink: 0;
  color: #5f6368;
  margin-top: 2px;
}

.visibility-option.active svg {
  color: #9e23a3;
}

.visibility-option-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.visibility-option-title {
  font-weight: 600;
  font-size: 14px;
  color: #202124;
}

.visibility-option.active .visibility-option-title {
  color: #9e23a3;
}

.visibility-option-desc {
  font-size: 12px;
  color: #5f6368;
  line-height: 1.4;
}

.visibility-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-radius: 8px;
  font-size: 12px;
  color: #e65100;
  line-height: 1.4;
}

.visibility-warning svg {
  flex-shrink: 0;
  color: #ff9800;
  margin-top: 1px;
}

/* Dark mode for visibility toggle */
[data-theme="dark"] .visibility-option {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .visibility-option:hover:not(:disabled) {
  border-color: rgba(158, 35, 163, 0.4);
  background: rgba(158, 35, 163, 0.05);
}

[data-theme="dark"] .visibility-option.active {
  border-color: #9e23a3;
  background: rgba(158, 35, 163, 0.12);
}

[data-theme="dark"] .visibility-option svg {
  color: #9aa0a6;
}

[data-theme="dark"] .visibility-option-title {
  color: #e0e0e0;
}

[data-theme="dark"] .visibility-option-desc {
  color: #9aa0a6;
}

[data-theme="dark"] .visibility-warning {
  background: rgba(255, 152, 0, 0.08);
  border-color: rgba(255, 152, 0, 0.25);
  color: #ffb74d;
}

[data-theme="dark"] .visibility-warning svg {
  color: #ffb74d;
}/**
 * WorkflowStagesSelector - Visual workflow stages selector styling
 * Material Design 3 + Aavishkar.ai brand colors
 */

.workflow-stages-selector {
  width: 100%;
}

.workflow-stages-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workflow-stages-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 8px;
  background: #fafbfc;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.workflow-stages-list:focus-within {
  border-color: #9e23a3;
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 0.1);
}

.workflow-stage-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(158, 35, 163, 0.2);
  position: relative;
}

.workflow-stage-chip:hover {
  box-shadow: 0 4px 8px rgba(158, 35, 163, 0.3);
  transform: translateY(-1px);
}

.workflow-stage-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 2px;
}

.workflow-stage-move {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  padding: 0;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.workflow-stage-move:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.workflow-stage-move:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.workflow-stage-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.workflow-stage-name {
  white-space: nowrap;
  font-weight: 500;
}

.workflow-stage-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: 2px;
}

.workflow-stage-remove:hover {
  background: rgba(255, 0, 0, 0.3);
  transform: scale(1.1);
}

.workflow-stages-add {
  display: flex;
  align-items: center;
}

.workflow-stage-add-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed rgba(158, 35, 163, 0.4);
  border-radius: 6px;
  color: #9e23a3;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.workflow-stage-add-button:hover {
  background: rgba(158, 35, 163, 0.05);
  border-color: #9e23a3;
  border-style: solid;
}

.workflow-stage-add-input {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.workflow-stage-input {
  flex: 1;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid rgba(158, 35, 163, 0.3);
  border-radius: 6px;
  color: #202124;
  font-size: 12px;
  font-family: inherit;
  transition: all 0.15s ease;
}

.workflow-stage-input:focus {
  outline: none;
  border-color: #9e23a3;
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 0.1);
}

.workflow-stage-add-confirm,
.workflow-stage-add-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(158, 35, 163, 0.3);
  border-radius: 6px;
  color: #9e23a3;
  cursor: pointer;
  transition: all 0.15s ease;
}

.workflow-stage-add-confirm:hover:not(:disabled) {
  background: #9e23a3;
  color: white;
  border-color: #9e23a3;
}

.workflow-stage-add-confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.workflow-stage-add-cancel:hover {
  background: rgba(244, 67, 54, 0.1);
  border-color: #f44336;
  color: #f44336;
}

.workflow-stages-hint {
  margin-top: 8px;
  font-size: 11px;
  color: #9aa0a6;
  font-style: italic;
}

/* Dark mode support */
[data-theme="dark"] .workflow-stages-list {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .workflow-stages-list:focus-within {
  border-color: #9e23a3;
}

[data-theme="dark"] .workflow-stage-add-button {
  border-color: rgba(158, 35, 163, 0.4);
  color: #c87fd0;
}

[data-theme="dark"] .workflow-stage-add-button:hover {
  background: rgba(158, 35, 163, 0.1);
}

[data-theme="dark"] .workflow-stage-input {
  background: #2a2a2a;
  border-color: rgba(158, 35, 163, 0.3);
  color: #e0e0e0;
}

[data-theme="dark"] .workflow-stages-hint {
  color: #9aa0a6;
}

/* LabOS Beta IDE Layout - Scientific Control Panel Design */
/* Updated: 2-pane layout with vertical Sidebar (Knowledge 30% | Workspace 70%) */

.sci-ide-layout {
  display: flex;
  flex-direction: row; /* Changed from column - sidebar on left */
  height: 100vh;
  max-height: 100vh;
  width: 100%;
  max-width: 100%; /* Avoid right-edge clipping when borders/padding are present */
  background: #ffffff;
  font-family: var(--aav-font-secondary);
  color: #1a1a1a;
  overflow: hidden;
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  box-sizing: border-box; /* Include padding/borders in width calculation */
  position: relative; /* Ensure proper stacking context */
}

.sci-ide-layout.desktop {
  display: flex;
  flex-direction: row;
}

.sci-ide-layout.mobile {
  display: flex;
  flex-direction: column;
}

/* Main IDE Container - Full Height 2-Panel Layout */
.sci-ide-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  background: transparent;
  height: 100%;
  max-height: 100%; /* Prevent exceeding parent */
  width: 100%;
  max-width: 100%; /* Let flexbox compute width; avoids brittle sidebar-width assumptions */
  min-width: 0; /* Allow flexbox shrinking */
  min-height: 0; /* Critical for flexbox children to respect parent constraints */
  box-sizing: border-box;
  position: relative; /* Ensure proper stacking context */
}

/* TabBar - Fixed height, no shrinking */
.tab-bar {
  flex-shrink: 0;
  flex-grow: 0;
  height: 36px; /* Explicit height matching TabBar.css */
  min-height: 36px;
  max-height: 36px;
}

/* PanelGroup wrapper - Takes remaining space after TabBar */
.panel-group-wrapper {
  flex: 1;
  min-height: 0; /* Critical: allows PanelGroup to shrink below content size */
  min-width: 0;
  width: 100%;
  max-width: 100%; /* Prevent horizontal overflow */
  height: 100%;
  overflow: hidden;
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  display: flex;
  flex-direction: column; /* Ensure PanelGroup fills vertically */
  box-sizing: border-box;
  position: relative;
}

/* PanelGroup itself should fill wrapper */
.panel-group-wrapper > div[data-panel-group] {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
}

/* Panel System - Full Height */
.sci-panel {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  overflow: hidden;
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  border-radius: 0;
  height: 100%;
  max-height: 100vh; /* Prevent overflow beyond viewport */
  width: 100%;
  max-width: 100%; /* Prevent overflow */
  min-width: 0; /* Allow flexbox shrinking */
  min-height: 0; /* Critical: allows panels to shrink below content size */
  box-sizing: border-box;
  position: relative;
}

.sci-knowledge-panel,
.sci-workspace-panel {
  height: 100%;
  max-height: 100%; /* Prevent overflow */
  min-height: 0; /* Critical for flex containers */
}


/* Neon Metallic Purple Resize Handles - Enhanced for User Interaction */
.sci-resize-handle {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.6) 0%, rgba(111, 45, 189, 0.7) 50%, rgba(200, 127, 208, 0.6) 100%);
  box-shadow: 
    0 0 8px rgba(158, 35, 163, 0.4),
    0 0 16px rgba(158, 35, 163, 0.2),
    inset 0 0 4px rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 30;
}

.sci-resize-handle:hover {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.9) 0%, rgba(111, 45, 189, 1) 50%, rgba(200, 127, 208, 0.9) 100%);
  box-shadow: 
    0 0 12px rgba(158, 35, 163, 0.6),
    0 0 24px rgba(158, 35, 163, 0.3),
    0 0 36px rgba(158, 35, 163, 0.15),
    inset 0 0 6px rgba(255, 255, 255, 0.4);
  transform: scale(1.2);
}

.sci-resize-handle:active {
  background: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 50%, #c87fd0 100%);
  box-shadow: 
    0 0 16px rgba(158, 35, 163, 0.8),
    0 0 32px rgba(158, 35, 163, 0.4),
    inset 0 0 8px rgba(255, 255, 255, 0.5);
}

.sci-resize-handle:focus {
  background: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 50%, #c87fd0 100%);
  outline: none;
  box-shadow: 
    0 0 12px rgba(158, 35, 163, 0.6),
    0 0 24px rgba(158, 35, 163, 0.3);
}

/* Horizontal Handle (between Knowledge and Agents+Workspace) */
.sci-resize-handle.horizontal {
  width: 3px;
  cursor: col-resize;
  background: linear-gradient(180deg, 
    rgba(158, 35, 163, 0.5) 0%, 
    rgba(111, 45, 189, 0.7) 20%,
    rgba(158, 35, 163, 0.9) 50%,
    rgba(111, 45, 189, 0.7) 80%,
    rgba(158, 35, 163, 0.5) 100%
  );
}

.sci-resize-handle.horizontal:hover {
  width: 5px;
}

/* Vertical Handle (between Agents and Workspace) */
.sci-resize-handle.vertical {
  height: 3px;
  cursor: row-resize;
  background: linear-gradient(90deg, 
    rgba(158, 35, 163, 0.5) 0%, 
    rgba(111, 45, 189, 0.7) 20%,
    rgba(158, 35, 163, 0.9) 50%,
    rgba(111, 45, 189, 0.7) 80%,
    rgba(158, 35, 163, 0.5) 100%
  );
}

.sci-resize-handle.vertical:hover {
  height: 5px;
}

/* Specific Panel Styling */
.sci-knowledge-panel {
  border-right: none;
}

.sci-assistant-panel {
  border-left: none;
}

.sci-agents-panel {
  border-bottom: none;
}

.sci-workspace-panel {
  border-top: none;
}

/* Mobile Layout - Minimal */
.sci-ide-layout.mobile {
  background: #ffffff;
}

.sci-mobile-tabs {
  display: flex;
  background: #fafbfc;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 16px;
}

.sci-mobile-tab {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

.sci-mobile-tab.active {
  color: var(--sci-primary);
  border-bottom-color: var(--sci-primary);
}

.sci-mobile-tab:hover {
  color: #1a1a1a;
}

/* Dark mode mobile tabs */
[data-theme="dark"] .sci-mobile-tab {
  color: #999;
}

[data-theme="dark"] .sci-mobile-tab.active {
  color: var(--sci-primary-light);
  border-bottom-color: var(--sci-primary-light);
}

[data-theme="dark"] .sci-mobile-tab:hover {
  color: #e6e1e5;
}

.sci-mobile-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #ffffff;
}

/* Glass Info Cards (Auto-appearing) */
.sci-info-overlay {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--sci-space-2);
  background: var(--sci-glass-bg);
  backdrop-filter: var(--sci-backdrop-blur);
  border: 1px solid var(--sci-glass-border);
  border-radius: 8px;
  padding: var(--sci-space-3) var(--sci-space-4);
  box-shadow: var(--sci-shadow-lg);
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
  transition: var(--sci-transition);
  pointer-events: none;
  z-index: 100;
  max-width: 280px;
  font-size: var(--sci-font-size-sm);
  color: var(--sci-text-primary);
}

.sci-info-trigger:hover .sci-info-overlay,
.sci-info-trigger:focus .sci-info-overlay {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Focus States for Accessibility */
.sci-panel:focus-within {
  outline: 2px solid var(--sci-accent);
  outline-offset: -2px;
}

.sci-resize-handle:focus {
  background: var(--sci-accent);
  outline: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
  /* Pane headers now managed within each pane component */
}

@media (max-width: 768px) {
  .sci-ide-layout.desktop {
    display: none;
  }
  
  .sci-ide-layout.mobile {
    display: flex;
  }
  
  .sci-mobile-tab {
    padding: var(--sci-space-2) var(--sci-space-3);
    font-size: var(--sci-font-size-xs);
  }
}

@media (min-width: 769px) {
  .sci-ide-layout.mobile {
    display: none;
  }
  
  .sci-ide-layout.desktop {
    display: flex;
  }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .sci-resize-handle {
    width: 1px;
  }
  
  .sci-resize-handle.vertical {
    height: 1px;
  }
}

/* Minimal Dark Mode */
[data-theme="dark"] .sci-ide-layout {
  background: #1a1a1a;
  color: #e6e1e5;
}

[data-theme="dark"] .sci-panel {
  background: #1a1a1a;
  border-color: #333;
}

/* Dark mode neon purple resize handles */
[data-theme="dark"] .sci-resize-handle {
  background: linear-gradient(135deg, rgba(200, 127, 208, 0.6) 0%, rgba(158, 35, 163, 0.8) 50%, rgba(200, 127, 208, 0.6) 100%);
  box-shadow: 
    0 0 10px rgba(200, 127, 208, 0.5),
    0 0 20px rgba(158, 35, 163, 0.3),
    inset 0 0 6px rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .sci-resize-handle:hover {
  background: linear-gradient(135deg, rgba(200, 127, 208, 0.95) 0%, rgba(158, 35, 163, 1) 50%, rgba(200, 127, 208, 0.95) 100%);
  box-shadow: 
    0 0 16px rgba(200, 127, 208, 0.7),
    0 0 32px rgba(158, 35, 163, 0.4),
    0 0 48px rgba(158, 35, 163, 0.2),
    inset 0 0 8px rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .sci-resize-handle.horizontal {
  background: linear-gradient(180deg, 
    rgba(200, 127, 208, 0.4) 0%, 
    rgba(158, 35, 163, 0.7) 20%,
    rgba(200, 127, 208, 0.9) 50%,
    rgba(158, 35, 163, 0.7) 80%,
    rgba(200, 127, 208, 0.4) 100%
  );
}

[data-theme="dark"] .sci-resize-handle.vertical {
  background: linear-gradient(90deg, 
    rgba(200, 127, 208, 0.4) 0%, 
    rgba(158, 35, 163, 0.7) 20%,
    rgba(200, 127, 208, 0.9) 50%,
    rgba(158, 35, 163, 0.7) 80%,
    rgba(200, 127, 208, 0.4) 100%
  );
}

[data-theme="dark"] .sci-mobile-tabs {
  background: #2a2a2a;
  border-bottom-color: #333;
}

[data-theme="dark"] .sci-mobile-content {
  background: #1a1a1a;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
/**
 * LabOS Beta Minimal Scientific Interface
 * 
 * Aesthetic Philosophy:
 * - Clean white background with strategic purple accents
 * - Minimal, sleek design inspired by Aavishkar.ai
 * - Progressive complexity reveal
 * - No excessive labels or visual noise
 */

/* ===== MINIMAL SCIENTIFIC VARIABLES ===== */

:root {
  /* Aavishkar Brand Colors */
  --aav-primary: #9e23a3;
  --aav-primary-dark: #7f1b83;
  --aav-primary-light: #c87fd0;
  --aav-secondary: #6f2dbd;
  --aav-accent: #d4af37;
  --aav-gradient-primary: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 50%, #c87fd0 100%);
  --aav-gradient-button: linear-gradient(145deg, #6f2dbd 0%, #9e23a3 45%, #6f2dbd 100%);
  
  /* Minimal Scientific Palette */
  --sci-primary: #9e23a3;
  --sci-primary-light: #c87fd0;
  --sci-secondary: #6f2dbd;
  --sci-accent: #d4af37;
  
  /* Clean Minimal Design */
  --sci-bg-primary: #ffffff;
  --sci-bg-secondary: #fafbfc;
  --sci-bg-accent: rgba(158, 35, 163, 0.02);
  --sci-border: rgba(158, 35, 163, 0.08);
  --sci-border-light: rgba(158, 35, 163, 0.04);
  
  /* Typography System */
  --aav-font-primary: 'dinmedium', 'Inter', system-ui, sans-serif;
  --aav-font-secondary: 'Inter', system-ui, sans-serif;
  --aav-font-mono: 'SF Mono', Consolas, monospace;
  --sci-font-display: var(--aav-font-primary);
  --sci-font-body: var(--aav-font-secondary);
  --sci-font-mono: var(--aav-font-mono);
  
  /* Minimal Spacing */
  --sci-space-xs: 4px;
  --sci-space-sm: 8px;
  --sci-space-md: 12px;
  --sci-space-lg: 16px;
  --sci-space-xl: 24px;
  
  /* Minimal Status Colors */
  --sci-status-ready: #10b981;
  --sci-status-active: #3b82f6;
  --sci-status-error: #ef4444;
  
  /* Smooth Transitions */
  --sci-transition: all 0.2s ease;
  --sci-easing: cubic-bezier(0.2, 0.0, 0, 1.0);
}

/* ===== MINIMAL CLEAN DESIGN ===== */

/* Clean Panel Headers */
.sci-panel-header {
  background: var(--sci-bg-primary);
  border-bottom: 1px solid var(--sci-border-light);
  padding: var(--sci-space-lg) var(--sci-space-xl);
  transition: var(--sci-transition);
}

/* Minimal Panel Titles */
.sci-panel-title {
  font-family: var(--sci-font-display);
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: var(--sci-space-sm);
}

/* Progressive Information Reveal */
.sci-details-hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: var(--sci-transition);
}

.sci-panel-header:hover .sci-details-hidden {
  opacity: 0.6;
  max-height: 40px;
  margin-top: var(--sci-space-sm);
}

/* Minimal Status Indicators */
.sci-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sci-space-xs);
  font-size: 11px;
  color: #666;
}

.sci-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sci-status-ready);
}

.sci-status-text {
  font-family: var(--sci-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== MINIMAL CONTENT SYSTEM ===== */

/* Clean Content Areas */
.sci-content {
  background: var(--sci-bg-primary);
  border: 1px solid var(--sci-border-light);
  border-radius: 8px;
  padding: var(--sci-space-lg);
  margin: var(--sci-space-md);
}

.sci-content:hover {
  border-color: var(--sci-border);
  box-shadow: 0 1px 3px rgba(158, 35, 163, 0.1);
}

/* Minimal Detail Reveal */
.sci-details {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: var(--sci-transition);
  font-size: 10px;
  color: #999;
  margin-top: var(--sci-space-sm);
}

.sci-content:hover .sci-details {
  opacity: 1;
  max-height: 30px;
}

/* ===== MINIMAL EMPTY STATES ===== */

.sci-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sci-space-xl);
  text-align: center;
  background: var(--sci-bg-secondary);
  border: 1px solid var(--sci-border-light);
  border-radius: 6px;
  margin: var(--sci-space-lg);
}

.sci-empty-icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--sci-space-md);
  color: #999;
}

.sci-empty-text {
  font-family: var(--sci-font-body);
  font-size: 13px;
  color: #666;
  margin-bottom: var(--sci-space-lg);
}

.sci-action {
  background: var(--sci-primary);
  color: white;
  border: none;
  padding: var(--sci-space-sm) var(--sci-space-lg);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: var(--sci-transition);
}

.sci-action:hover {
  background: var(--sci-secondary);
  transform: translateY(-1px);
}

/* ===== MINIMAL STATUS SYSTEM ===== */

.sci-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sci-space-sm) var(--sci-space-lg);
  background: var(--sci-bg-primary);
  border-top: 1px solid var(--sci-border-light);
  font-family: var(--sci-font-mono);
  font-size: 10px;
  color: #999;
}

.sci-status-item {
  display: flex;
  align-items: center;
  gap: var(--sci-space-xs);
}

.sci-status-time {
  font-family: var(--sci-font-mono);
  font-size: 10px;
  color: #666;
}

/* ===== MINIMAL ITEM SYSTEM ===== */

.sci-item {
  background: var(--sci-bg-primary);
  border: 1px solid var(--sci-border-light);
  border-radius: 4px;
  padding: var(--sci-space-lg);
  cursor: pointer;
  transition: var(--sci-transition);
  margin-bottom: var(--sci-space-sm);
}

.sci-item:hover {
  border-color: var(--sci-primary);
  box-shadow: 0 1px 3px rgba(158, 35, 163, 0.1);
}

.sci-item.selected {
  border-color: var(--sci-primary);
  background: var(--sci-bg-accent);
}

.sci-item-title {
  font-family: var(--sci-font-display);
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: var(--sci-space-xs);
}

.sci-item-meta {
  font-size: 10px;
  color: #999;
  font-family: var(--sci-font-mono);
}

.sci-expand {
  background: transparent;
  border: 1px dashed var(--sci-border);
  border-radius: 4px;
  padding: var(--sci-space-md);
  color: #666;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  transition: var(--sci-transition);
}

.sci-expand:hover {
  border-color: var(--sci-primary);
  color: var(--sci-primary);
}

/* ===== MINIMAL HELP SYSTEM ===== */

.sci-hint {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--sci-space-sm);
  background: #1a1a1a;
  color: white;
  padding: var(--sci-space-xs) var(--sci-space-sm);
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--sci-transition);
  z-index: 100;
}

.sci-hint.visible {
  opacity: 1;
}

/* ===== MINIMAL SPACING ===== */

.sci-container {
  padding: var(--sci-space-lg);
}

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

.sci-separator {
  height: 1px;
  background: var(--sci-border-light);
  margin: var(--sci-space-lg) 0;
}

/* ===== MINIMAL WELCOME ===== */

.sci-welcome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--sci-transition);
}

.sci-welcome.visible {
  opacity: 1;
}

.sci-welcome-card {
  background: white;
  border: 1px solid var(--sci-border);
  border-radius: 8px;
  padding: var(--sci-space-xl);
  max-width: 320px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.sci-welcome-title {
  font-family: var(--sci-font-display);
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: var(--sci-space-md);
}

.sci-welcome-text {
  font-size: 13px;
  color: #666;
  margin-bottom: var(--sci-space-lg);
  line-height: 1.4;
}

/* ===== MINIMAL INTERACTIONS ===== */

.sci-interactive {
  transition: var(--sci-transition);
  cursor: pointer;
}

.sci-interactive:hover {
  transform: translateY(-1px);
}

.sci-loading {
  opacity: 0.6;
  position: relative;
}

.sci-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(158, 35, 163, 0.1), transparent);
  animation: sci-pulse 1.5s infinite;
}

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

/* ===== MINIMAL CONTROLS ===== */

.sci-input {
  background: var(--sci-bg-primary);
  border: 1px solid var(--sci-border-light);
  border-radius: 4px;
  padding: var(--sci-space-md);
  font-size: 13px;
  color: #1a1a1a;
  transition: var(--sci-transition);
  width: 100%;
}

.sci-input:focus {
  outline: none;
  border-color: var(--sci-primary);
  box-shadow: 0 0 0 1px rgba(158, 35, 163, 0.2);
}

.sci-button {
  background: var(--sci-bg-primary);
  border: 1px solid var(--sci-border);
  border-radius: 4px;
  padding: var(--sci-space-sm) var(--sci-space-md);
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: var(--sci-transition);
  display: inline-flex;
  align-items: center;
  gap: var(--sci-space-xs);
}

.sci-button:hover {
  border-color: var(--sci-primary);
  color: var(--sci-primary);
}

.sci-button-primary {
  background: var(--sci-primary);
  color: white;
  border-color: var(--sci-primary);
}

.sci-button-primary:hover {
  background: var(--sci-secondary);
}

/* ===== AAVISHKAR BRAND INTEGRATION ===== */

.aav-logo-text {
  font-family: var(--aav-font-primary);
  font-weight: 700;
  background: var(--aav-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aav-badge {
  background: var(--aav-primary);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.aav-button-primary {
  background: var(--aav-gradient-button);
  color: white;
  border: none;
  transition: all 0.2s ease;
}

.aav-button-primary:hover {
  background: linear-gradient(145deg, #5b25a0 0%, #8a1f90 45%, #5b25a0 100%);
  transform: translateY(-1px);
}

/* ===== RESPONSIVE SCIENTIFIC INTERFACE ===== */

@media (max-width: 768px) {
  .sci-panel-header {
    padding: var(--sci-space-md) var(--sci-space-lg);
  }
  
  .sci-empty-state {
    padding: var(--sci-space-2xl);
    margin: var(--sci-space-lg);
  }
  
  .sci-empty-icon {
    width: 36px;
    height: 36px;
  }
}

/* ===== MINIMAL DARK MODE ===== */

[data-theme="dark"] {
  /* Dark Mode Palette */
  --sci-primary: #c87fd0;
  --sci-primary-light: #e0a7e8;
  --sci-secondary: #8b5cf6;
  
  /* Dark Backgrounds */
  --sci-bg-primary: #1a1a1a;
  --sci-bg-secondary: #2a2a2a;
  --sci-bg-accent: rgba(200, 127, 208, 0.05);
  --sci-border: rgba(200, 127, 208, 0.2);
  --sci-border-light: rgba(200, 127, 208, 0.1);
  
  /* Dark Status */
  --sci-status-ready: #34d399;
  --sci-status-active: #60a5fa;
  --sci-status-error: #f87171;

/* ===== COMPREHENSIVE DARK MODE ===== */

[data-theme="dark"] {
  --aav-primary: #c87fd0;
  --aav-primary-light: #e0a7e8;
  --aav-secondary: #8b5cf6;
  --sci-primary: #c87fd0;
  --sci-primary-light: #e0a7e8;
  --sci-secondary: #8b5cf6;
}

[data-theme="dark"] .sci-panel-title {
  color: #e6e1e5;
}

[data-theme="dark"] .sci-input {
  background: var(--sci-bg-primary);
  color: #e6e1e5;
  border-color: var(--sci-border);
}

[data-theme="dark"] .sci-item {
  background: var(--sci-bg-primary);
  border-color: var(--sci-border-light);
}

[data-theme="dark"] .sci-item-title {
  color: #e6e1e5;
}

[data-theme="dark"] .sci-status-bar {
  background: var(--sci-bg-primary);
  border-top-color: var(--sci-border-light);
}

[data-theme="dark"] .sci-welcome-card {
  background: var(--sci-bg-primary);
  border-color: var(--sci-border);
}

[data-theme="dark"] .sci-welcome-title {
  color: #e6e1e5;
}

[data-theme="dark"] .sci-welcome-text {
  color: #999;
}

/* ===== MINIMAL LAYOUT INTEGRATION ===== */

/* Layout console integration */
[data-theme="dark"] .layout-console {
  background: var(--sci-bg-primary);
  border-color: var(--sci-border);
}


@media (prefers-contrast: high) {
  .sci-border {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
/**
 * LoadingSpinner - Material Design 3 + Aavishkar Branding
 * Full-screen loading state with glass morphism card
 */

/* ===== FULL SCREEN CONTAINER ===== */
.loading-screen-m3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Aavishkar gradient background */
  background: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 50%, #4a1a7a 100%);

  /* Subtle animated gradient */
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  z-index: 9999;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== GLASS CARD ===== */
.loading-card-m3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px 64px;

  /* Glass morphism */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;

  /* M3 elevation */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ===== LOGO ===== */
.loading-logo-m3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loading-logo-image-m3 {
  height: 64px;
  width: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.loading-logo-text-m3 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.loading-logo-lab {
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.loading-logo-os {
  background: linear-gradient(135deg, #d4af37 0%, #f5d76e 50%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.loading-beta-badge {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ===== M3 CIRCULAR PROGRESS ===== */
.loading-spinner-m3 {
  width: 48px;
  height: 48px;
}

.spinner-svg {
  width: 100%;
  height: 100%;
  animation: spinnerRotate 2s linear infinite;
}

.spinner-track {
  stroke: rgba(255, 255, 255, 0.2);
}

.spinner-progress {
  stroke: white;
  stroke-dasharray: 126;
  stroke-dashoffset: 60;
  animation: spinnerDash 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

@keyframes spinnerRotate {
  100% { transform: rotate(360deg); }
}

@keyframes spinnerDash {
  0% {
    stroke-dasharray: 1, 126;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 63, 126;
    stroke-dashoffset: -31;
  }
  100% {
    stroke-dasharray: 63, 126;
    stroke-dashoffset: -126;
  }
}

/* ===== MESSAGES ===== */
.loading-message-m3 {
  font-size: 18px;
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.loading-submessage-m3 {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

/* ===== FOOTER ===== */
.loading-footer-m3 {
  position: absolute;
  bottom: 32px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
  .loading-card-m3 {
    padding: 32px 40px;
    margin: 16px;
  }

  .loading-logo-image-m3 {
    height: 48px;
  }

  .loading-logo-text-m3 {
    font-size: 24px;
  }

  .loading-spinner-m3 {
    width: 40px;
    height: 40px;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .loading-screen-m3 {
    animation: none;
  }

  .spinner-svg {
    animation-duration: 4s;
  }

  .spinner-progress {
    animation: none;
    stroke-dasharray: 63, 126;
    stroke-dashoffset: -31;
  }
}
/* LabOS Beta App Layout Styles - Aavishkar.ai Material Design */

:root {
  --tab-bar-height: 36px;
}

/* Global overflow prevention - ensure IDE fits viewport exactly */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%; /* Avoid Windows scrollbar-width overflow from 100vw */
  height: 100vh;
  max-height: 100vh;
  overflow: hidden !important; /* Prevent both horizontal and vertical scrolling */
  overflow-x: hidden !important; /* Explicit horizontal scroll prevention */
  overflow-y: hidden !important; /* Explicit vertical scroll prevention */
  box-sizing: border-box;
  position: relative;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%; /* Avoid Windows scrollbar-width overflow from 100vw */
  height: 100vh;
  max-height: 100vh;
  overflow: hidden !important; /* Prevent both horizontal and vertical scrolling */
  overflow-x: hidden !important; /* Explicit horizontal scroll prevention */
  overflow-y: hidden !important; /* Explicit vertical scroll prevention */
  box-sizing: border-box;
  position: relative;
}

*, *::before, *::after {
  box-sizing: inherit;
}

#root {
  width: 100%;
  max-width: 100%; /* Avoid Windows scrollbar-width overflow from 100vw */
  height: 100vh;
  max-height: 100vh; /* Prevent overflow */
  overflow: hidden; /* Prevent scrolling */
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  box-sizing: border-box;
  position: relative;
  top: 0;
  left: 0;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh; /* Prevent overflow */
  width: 100%;
  max-width: 100%; /* Avoid Windows scrollbar-width overflow from 100vw */
  overflow: hidden; /* Prevent scrolling */
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  background: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a1a1a;
  box-sizing: border-box;
  min-height: 0; /* Critical for flex containers */
  position: relative;
  top: 0;
  left: 0;
}







/* Dark mode */
[data-theme="dark"] .app {
  background: #1a1a1a;
  color: #e6e1e5;
}

@media (max-width: 768px) {
  :root {
    --tab-bar-height: 0px;
  }
}
/* LabOS Beta Global Styles */
/* Based on Aavishkar.ai design system with glassmorphism */

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

:root {
  /* Beta Color Palette */
  --primary-blue: #2563eb;
  --primary-purple: #7c3aed;
  --accent-cyan: #06b6d4;
  --accent-emerald: #059669;
  
  /* Glassmorphism Colors */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  
  /* Text Colors */
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  
  /* Background */
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.8);
  
  /* Borders */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  background: #ffffff;
  height: 100vh;
  max-height: 100vh;
  max-width: 100%;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  color: #1a1a1a;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* App container */
.app {
  height: 100vh;
  max-height: 100vh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  position: relative;
}

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

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Button base styles */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.2s ease;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Input base styles */
input, textarea {
  font-family: inherit;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 8px 12px;
  transition: border-color 0.2s ease;
}

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

/* Glass morphism utility classes */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: white;
}

/* Loading spinner */
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Responsive design */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* Dark mode */
[data-theme="dark"] body {
  background: #1a1a1a;
  color: #e6e1e5;
}

[data-theme="dark"] :root {
  --text-primary: #e6e1e5;
  --text-secondary: #999;
  --bg-primary: #1a1a1a;
  --bg-secondary: #2a2a2a;
}