/* Aavishkar.ai Auth Screen — Refined Instrument Aesthetic */

.auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
  padding: 20px;
  position: relative;
}

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

/* ===== DARK MODE ===== */
[data-theme="dark"] .auth-screen {
  background:
    radial-gradient(ellipse 800px 400px at 20% 10%, rgba(158,35,163,0.2), transparent 50%),
    radial-gradient(ellipse 700px 350px at 80% 25%, rgba(11,68,123,0.18), transparent 55%),
    linear-gradient(160deg,
      rgba(42,16,74,1) 0%,
      rgba(75,28,128,0.98) 35%,
      rgba(18,47,92,0.98) 70%,
      rgba(42,16,74,1) 100%),
    #1a1330;
}

[data-theme="dark"] .auth-container {
  background: rgba(26,26,30,0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.2),
    0 12px 40px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

[data-theme="dark"] .auth-form h2 {
  color: #e0e0e0;
}

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

[data-theme="dark"] .form-group input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: #e0e0e0;
}

[data-theme="dark"] .form-group input:hover {
  border-color: rgba(158,35,163,0.5);
}

[data-theme="dark"] .form-group input:focus {
  background: rgba(255,255,255,0.06);
  border-color: #9e23a3;
  box-shadow: 0 0 0 2px rgba(158,35,163,0.15);
}

[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 — Logo Mark ===== */
.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo-mark {
  height: 72px;
  width: 72px;
  object-fit: contain;
  display: block;
  margin: 0 auto 24px;
  padding: 20px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.97), rgba(245,243,250,0.92));
  border: 1px solid rgba(158,35,163,0.06);
  box-shadow:
    0 0 0 1px rgba(158,35,163,0.04),
    0 8px 24px rgba(42,16,74,0.10),
    0 2px 6px rgba(158,35,163,0.06),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 4px rgba(158,35,163,0.03);
  animation: logoBreathe 4s ease-in-out infinite;
}

/* Gradient divider below logo */
.auth-header::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(158,35,163,0.25), transparent);
}

[data-theme="dark"] .auth-logo-mark {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(158,35,163,0.12),
    0 12px 32px rgba(0,0,0,0.4),
    0 4px 12px rgba(158,35,163,0.15),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

[data-theme="dark"] .auth-header::after {
  background: linear-gradient(90deg, transparent, rgba(200,127,208,0.3), transparent);
}

@keyframes logoBreathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(158,35,163,0.04), 0 8px 24px rgba(42,16,74,0.10), 0 2px 6px rgba(158,35,163,0.06), inset 0 1px 0 rgba(255,255,255,1); }
  50% { box-shadow: 0 0 0 1px rgba(158,35,163,0.06), 0 8px 28px rgba(42,16,74,0.12), 0 3px 8px rgba(158,35,163,0.08), inset 0 1px 0 rgba(255,255,255,1); }
}

/* 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: 10px;
  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: 13px;
  font-weight: 500;
  color: #5f6368;
  letter-spacing: 0.01em;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  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: rgba(158,35,163,0.4);
}

.form-group input:focus {
  outline: none;
  border-color: #9e23a3;
  box-shadow: 0 0 0 3px rgba(158,35,163,0.08);
  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(-1px);
  box-shadow: 0 4px 16px rgba(158,35,163,0.35);
}

.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 — Polished User Buttons ===== */
.demo-login-section {
  margin: 0;
  padding: 0;
}

.demo-login-button {
  flex: 1;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  background: white;
  color: #0f0f1a;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
  position: relative;
}

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

.demo-login-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(158,35,163,0.2);
}

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

[data-theme="dark"] .demo-login-button {
  background: rgba(255,255,255,0.06);
  color: #e0e0e0;
  border-color: rgba(255,255,255,0.10);
}

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

/* Loading Spinner in Button */
.auth-submit-button .loading-spinner,
.google-signin-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 ===== */
@media (max-width: 480px) {
  .auth-container {
    padding: 36px 24px 32px;
    border-radius: 16px;
  }

  .auth-logo-mark {
    height: 56px;
    width: 56px;
    padding: 16px;
  }

  .demo-login-button {
    font-size: 13px;
    padding: 10px 16px;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .auth-logo-mark {
    animation: none;
  }
}
.workspace-pane {
  --chat-font-size: 16px;
  --pane-header-height: 40px;
  --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;
  /* Crisp text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.workspace-pane > * {
  flex-shrink: 0;
}

/* Tab content wrapper must be able to shrink */
.workspace-pane > .tab-content-wrapper {
  flex-shrink: 1;
  min-height: 0;
}

/* ===== WORKSPACE UNIFIED HEADER (Gemini-style) ===== */

.workspace-header-unified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  background: var(--sci-bg-primary, #ffffff);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  gap: 16px;
  /* Crisp rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.2;
}

/* Session Group */
.header-session-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.session-dropdown-inline {
  max-width: 140px;
}

.session-dropdown-inline .session-dropdown-trigger {
  padding: 3px 8px;
  font-size: 10px;
  height: 24px;
}

.header-compact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.header-compact-btn.active {
  background: rgba(158, 35, 163, 0.12);
  color: #9e23a3;
}

.header-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.header-status-icon.saving {
  color: #9e23a3;
}

.header-status-icon.saved {
  color: #10b981;
}

.header-status-icon.error {
  color: #ef4444;
}

.header-status-icon .spinner {
  animation: spin 1s linear infinite;
}

/* Tools Group - Right side */
.header-tools-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.font-size-compact {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(158, 35, 163, 0.04);
  border-radius: 4px;
  padding: 2px;
}

.font-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

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

.font-value {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  min-width: 18px;
  text-align: center;
  /* Crisp number rendering */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Presence Compact */
.presence-compact {
  display: flex;
  align-items: center;
  gap: -4px;
}

.presence-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  border: 2px solid white;
  margin-left: -4px;
  transition: transform 0.15s ease;
}

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

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

.presence-dot.typing {
  animation: presence-pulse 1s ease-in-out infinite;
}

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

.presence-count-small {
  font-size: 9px;
  color: #6b7280;
  margin-left: 4px;
}

/* Dark Mode - Unified Header */
[data-theme="dark"] .workspace-header-unified {
  background: #1a1a1a;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .header-compact-btn {
  border-color: rgba(255, 255, 255, 0.12);
  color: #9ca3af;
}

[data-theme="dark"] .header-compact-btn:hover {
  background: rgba(200, 127, 208, 0.12);
  color: #c87fd0;
}

[data-theme="dark"] .font-size-compact {
  background: rgba(200, 127, 208, 0.06);
}

[data-theme="dark"] .font-btn {
  color: #9ca3af;
}

[data-theme="dark"] .font-btn:hover:not(:disabled) {
  background: rgba(200, 127, 208, 0.15);
  color: #c87fd0;
}

[data-theme="dark"] .font-value {
  color: #9ca3af;
}

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

[data-theme="dark"] .presence-count-small {
  color: #9ca3af;
}

/* Composer tools and menu */
.input-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 0;
}

.composer-tools {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.composer-context {
  position: relative;
}

.context-mode-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.context-mode-trigger:hover:not(:disabled) {
  border-color: rgba(158, 35, 163, 0.35);
  color: #9e23a3;
  background: rgba(158, 35, 163, 0.06);
  box-shadow: 0 6px 16px rgba(158, 35, 163, 0.12);
}

.context-mode-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Purple dot + border when user has narrowed context scope */
.context-mode-trigger.is-narrowed {
  border-color: rgba(158, 35, 163, 0.3);
  background: rgba(158, 35, 163, 0.04);
  color: #7f1b83;
}
.context-mode-trigger.is-narrowed::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9e23a3;
  margin-right: 4px;
}

.context-mode-label {
  white-space: nowrap;
}

.context-mode-menu {
  position: absolute;
  right: 0;
  bottom: 40px;
  min-width: 320px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  padding: 10px;
  z-index: 90;
  animation: menu-fade-in 0.12s ease-out;
}

.context-mode-menu-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 8px;
}

/* Issue #227: Generate KC button - Flat purple minimal style */
.generate-kc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: none;
  background: #9e23a3;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  box-shadow: 0 1px 3px rgba(158, 35, 163, 0.25);
}

.generate-kc-btn:hover:not(:disabled) {
  background: #8a1f8f;
  box-shadow: 0 2px 6px rgba(158, 35, 163, 0.3);
  transform: translateY(-1px);
}

.generate-kc-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(158, 35, 163, 0.25);
}

.generate-kc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #9ca3af;
  box-shadow: none;
}

.generate-kc-btn span {
  line-height: 1;
}

.generate-kc-btn svg {
}

.generate-kc-spinner {
  animation: spin 0.8s linear infinite;
}

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

/* Issue #227: Generated KC container */
.generated-kc-container {
  margin: 16px 0;
  padding: 12px;
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.04), rgba(158, 35, 163, 0.08));
  border: 1px solid rgba(158, 35, 163, 0.2);
  border-radius: 12px;
  animation: kc-slide-in 0.25s ease-out;
}

@keyframes kc-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.generated-kc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #9e23a3;
}

.generated-kc-header .quality-warning {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(251, 191, 36, 0.15);
  border-radius: 4px;
  color: #b45309;
  font-size: 11px;
  font-weight: 500;
}

.quality-suggestions {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  font-size: 11px;
  color: #6b7280;
}

.quality-suggestions .suggestions-label {
  font-weight: 600;
  color: #4b5563;
  margin-right: 6px;
}

.quality-suggestions .suggestion-item {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 0;
}

.quality-suggestions .suggestion-item:not(:last-child)::after {
  content: "•";
  margin-left: 8px;
  color: #d1d5db;
}

/* KC with quality feedback wrapper (for button-generated KCs) */
.kc-with-quality {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kc-quality-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: #b45309;
  font-size: 12px;
  font-weight: 500;
}

.kc-quality-warning svg {
  flex-shrink: 0;
}

/* Adjust KCCard border radius when quality warning is shown */
.kc-with-quality .kc-quality-warning + .kc-card-attached {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.composer-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
  color: #4b5563;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.composer-more-btn:hover {
  border-color: rgba(158, 35, 163, 0.35);
  color: #9e23a3;
  background: rgba(158, 35, 163, 0.06);
  box-shadow: 0 6px 16px rgba(158, 35, 163, 0.12);
}

[data-theme="dark"] .context-mode-trigger {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .context-mode-trigger:hover:not(:disabled) {
  border-color: rgba(200, 127, 208, 0.45);
  color: #c87fd0;
  background: rgba(200, 127, 208, 0.12);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.2);
}

/* Dark: Purple dot + border when narrowed */
[data-theme="dark"] .context-mode-trigger.is-narrowed {
  border-color: rgba(200, 127, 208, 0.35);
  background: rgba(200, 127, 208, 0.08);
  color: #c77fd1;
}
[data-theme="dark"] .context-mode-trigger.is-narrowed::before {
  background: #c77fd1;
}

[data-theme="dark"] .context-mode-menu {
  background: #1c1b1f;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .context-mode-menu-header {
  color: rgba(255, 255, 255, 0.6);
}

.composer-more-menu {
  position: absolute;
  right: 0;
  bottom: 40px;
  min-width: 220px;
  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: 8px;
  z-index: 80;
  animation: menu-fade-in 0.12s ease-out;
}

.composer-menu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 4px 8px;
}

.composer-menu-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.composer-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.composer-menu-label {
  font-size: 11px;
  color: #374151;
}

.composer-menu-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

.composer-menu-btn {
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.composer-menu-btn:hover:not(:disabled) {
  color: #9e23a3;
}

.composer-menu-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.composer-menu-value {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  min-width: 18px;
  text-align: center;
}

.composer-menu-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 4px 0;
}

.composer-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  color: #111827;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.composer-menu-item:hover {
  background: rgba(158, 35, 163, 0.08);
  color: #9e23a3;
}

.composer-menu-meta {
  margin-left: auto;
  font-size: 11px;
  color: #6b7280;
}

[data-theme="dark"] .composer-more-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #d1d5db;
}

[data-theme="dark"] .composer-more-btn:hover {
  border-color: rgba(200, 127, 208, 0.5);
  color: #f0e6f3;
  background: rgba(200, 127, 208, 0.12);
  box-shadow: 0 6px 16px rgba(200, 127, 208, 0.2);
}

[data-theme="dark"] .composer-more-menu {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .composer-menu-title {
  color: #9ca3af;
}

[data-theme="dark"] .composer-menu-label {
  color: #d1d5db;
}

[data-theme="dark"] .composer-menu-control {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .composer-menu-value {
  color: #f3f4f6;
}

[data-theme="dark"] .composer-menu-divider {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .composer-menu-item {
  color: #e5e7eb;
}

[data-theme="dark"] .composer-menu-item:hover {
  background: rgba(200, 127, 208, 0.15);
  color: #c87fd0;
}

[data-theme="dark"] .composer-menu-meta {
  color: #9ca3af;
}

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

@media (prefers-reduced-motion: reduce) {
  .composer-more-menu,
  .composer-more-btn {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== 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: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  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: #1e1e1e;
  border-bottom-color: #333;
}

[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 */
  /* Smooth content transitions */
  transition: opacity 0.15s ease-out;
  width: 100%;
  max-width: 100%; /* Prevent horizontal overflow */
  overflow: hidden;
  position: relative; /* For ephemeral proofs panel positioning */
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  position: relative;
  box-sizing: border-box;
}

/* Tab Panel - Keep both tabs mounted to preserve scroll position */
.tab-panel {
  display: contents; /* Pass through flex layout to children */
}

/* 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: 180px;
  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;
}

/* Branch Context Banner - Proofline Branching V2 */
.branch-context-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(139, 92, 246, 0.1);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  font-size: 12px;
  color: var(--text-secondary, #666);
  position: sticky;
  top: 0;
  z-index: 6;
}

.branch-context-banner svg {
  color: #8b5cf6;
  flex-shrink: 0;
}

.branch-context-banner strong {
  color: #8b5cf6;
  font-weight: 600;
}

.branch-context-banner .return-to-main-btn {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 11px;
  background: transparent;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 4px;
  color: #8b5cf6;
  cursor: pointer;
  transition: all 0.15s ease;
}

.branch-context-banner .return-to-main-btn:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.5);
}

[data-theme="dark"] .branch-context-banner {
  background: rgba(139, 92, 246, 0.15);
  border-bottom-color: rgba(139, 92, 246, 0.3);
  color: #a5b4fc;
}

[data-theme="dark"] .branch-context-banner strong {
  color: #c4b5fd;
}

[data-theme="dark"] .branch-context-banner .return-to-main-btn {
  border-color: rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
}

[data-theme="dark"] .branch-context-banner .return-to-main-btn:hover {
  background: rgba(139, 92, 246, 0.2);
}

.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 */
  /* Smooth content transitions */
  animation: contentFadeIn 0.2s ease-out;
  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;
}

.new-messages-indicator {
  position: sticky;
  bottom: 12px;
  align-self: center;
  margin: 12px auto 0;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.1);
  color: #4c1d95;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.new-messages-indicator:hover {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-1px);
}

[data-theme="dark"] .new-messages-indicator {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.5);
  color: #ede9fe;
}

/* Smooth message appearance animation */
.message {
  animation: messageSlideIn 0.2s ease-out;
}

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

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

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .message,
  .messages-container,
  .tab-content-wrapper {
    animation: none !important;
    transition: none !important;
  }
}

.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;
  max-width: 65%; /* UX feedback: restrict agent output width for readability */
}

.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;
}

/* Clickable Citation Links - Demo Feature
   Makes inline citations [1], [2, 3] clickable to highlight sources in ProofsTab */
.citation-link {
  color: #3b82f6;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  font-weight: 500;
  padding: 0 2px;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.citation-link:hover {
  color: #1d4ed8;
  background-color: rgba(59, 130, 246, 0.1);
  text-decoration-style: solid;
}

.citation-link:active {
  background-color: rgba(59, 130, 246, 0.2);
  transform: scale(0.98);
}

.citation-link:focus {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 1px;
}

/* Dark mode citation links */
[data-theme="dark"] .citation-link {
  color: #60a5fa;
}

[data-theme="dark"] .citation-link:hover {
  color: #93c5fd;
  background-color: rgba(96, 165, 250, 0.15);
}

/* Web search citation links */
.citation-link-web {
  color: #059669;
}
.citation-link-web:hover {
  color: #047857;
  background-color: rgba(5, 150, 105, 0.1);
}
[data-theme="dark"] .citation-link-web {
  color: #34d399;
}
[data-theme="dark"] .citation-link-web:hover {
  color: #6ee7b7;
  background-color: rgba(52, 211, 153, 0.15);
}

/* Semantic Scholar citation links */
.citation-link-ss {
  color: #7c3aed;
}
.citation-link-ss:hover {
  color: #6d28d9;
  background-color: rgba(124, 58, 237, 0.1);
}
[data-theme="dark"] .citation-link-ss {
  color: #a78bfa;
}
[data-theme="dark"] .citation-link-ss:hover {
  color: #c4b5fd;
  background-color: rgba(167, 139, 250, 0.15);
}

/* KC citation links */
.citation-link-kc {
  color: #d97706;
  font-weight: 600;
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: 4px;
  background-color: rgba(217, 119, 6, 0.08);
  text-decoration: none;
}
.citation-link-kc:hover {
  color: #b45309;
  background-color: rgba(217, 119, 6, 0.16);
  text-decoration: none;
}
[data-theme="dark"] .citation-link-kc {
  color: #fbbf24;
  background-color: rgba(251, 191, 36, 0.1);
}
[data-theme="dark"] .citation-link-kc:hover {
  color: #fcd34d;
  background-color: rgba(251, 191, 36, 0.2);
}

/* Citation link icon (arrow for web links) */
.citation-link-icon {
  margin-right: 2px;
  font-size: 0.85em;
}

/* External references footer */
.citation-references {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
  line-height: 1.5;
}
.citation-references-label {
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 4px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.citation-references a {
  display: block;
  color: #6b7280;
  text-decoration: none;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.citation-references a:hover {
  color: #3b82f6;
}
[data-theme="dark"] .citation-references {
  border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .citation-references-label {
  color: #9ca3af;
}
[data-theme="dark"] .citation-references a {
  color: #9ca3af;
}
[data-theme="dark"] .citation-references a:hover {
  color: #60a5fa;
}

/* 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: 14px 18px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--sci-bg-primary, #ffffff);
  flex-shrink: 0;
  min-height: 72px;
  max-height: 180px;
  overflow: visible; /* Allow content but constrain container */
}

.composer-surface {
  max-width: 860px;
  margin: 0 auto;
  padding: 10px;
  background: var(--sci-bg-primary, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* 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: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  resize: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  min-height: 52px;
  max-height: 160px;
  overflow-y: auto;
}

.message-input:focus {
  outline: none;
  border-color: #9e23a3;
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.12);
}

.send-button {
  padding: 12px 14px;
  background: #9e23a3;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(158, 35, 163, 0.3);
}

.send-button:hover:not(:disabled) {
  background: #7c3aed;
  box-shadow: 0 4px 12px rgba(158, 35, 163, 0.4);
  transform: translateY(-1px);
}

.send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Stop generation button state — neutral dark, industry standard */
.send-button.send-button--stop {
  background: #374151;
  box-shadow: 0 2px 8px rgba(55, 65, 81, 0.3);
  animation: stop-pulse 2s ease-in-out infinite;
}

.send-button.send-button--stop:hover {
  background: #4b5563;
  box-shadow: 0 4px 12px rgba(55, 65, 81, 0.4);
  transform: translateY(-1px);
}

@keyframes stop-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

[data-theme="dark"] .send-button.send-button--stop {
  background: #4b5563;
  box-shadow: 0 2px 8px rgba(75, 85, 99, 0.4);
}

[data-theme="dark"] .send-button.send-button--stop:hover {
  background: #6b7280;
  box-shadow: 0 4px 12px rgba(75, 85, 99, 0.5);
}

.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: #1e1e1e;
}

[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: #262626;
  color: #e6e1e5;
}

[data-theme="dark"] .message.assistant {
  background: #1e1e1e;
  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: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.14);
  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: #c87fd0;
  background: #262626;
}

[data-theme="dark"] .input-area {
  background: #1a1a1a;
  border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .composer-surface {
  background: #1e1e1e;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

[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);
  font-size: 18px;
  line-height: 1.3;
  max-width: 640px;
}

.empty-state p {
  color: var(--md-on-surface-variant, #49454f);
  margin-bottom: var(--md-space-6, 24px);
  font-size: 14px;
  line-height: 1.5;
  max-width: 640px;
}

/* Mode-aware empty state styling */
.empty-state .mode-description {
  font-size: 14px;
  color: var(--md-on-surface-variant, #5f6368);
  margin-top: var(--md-space-1, 4px);
  margin-bottom: var(--md-space-2, 8px);
  opacity: 0.75;
}

.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="light"] .empty-state details.project-goal-hint,
[data-theme="dark"] .empty-state details.project-goal-hint,
.empty-state details.project-goal-hint {
  font-style: normal;
  margin-top: var(--md-space-2, 8px);
  opacity: 0.9;
}

.empty-state details.project-goal-hint summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.empty-state details.project-goal-hint summary::-webkit-details-marker {
  display: none;
}

.empty-state details.project-goal-hint summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transform: translateY(-1px);
}

.empty-state details.project-goal-hint[open] summary::before {
  content: '▾';
}

.empty-state details.project-goal-hint summary:hover {
  opacity: 1;
}

.empty-state details.project-goal-hint div {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.85;
}

[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: 520px;
  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: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.quick-actions.suggested-queries h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-actions.suggested-actions 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);
}

.quick-actions.suggested-actions h4::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.9);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* Issue #200: Collapsible Suggested Questions - Progressive Disclosure */
.quick-actions--collapsible {
  margin-top: var(--md-space-4, 16px);
}

.quick-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: rgba(158, 35, 163, 0.04);
  border: 1px solid rgba(158, 35, 163, 0.12);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 500;
  transition: all 0.2s ease;
}

.quick-actions-header:hover {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.2);
}

.quick-actions-header:focus-visible {
  outline: none;
  border-color: rgba(158, 35, 163, 0.5);
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.12);
}

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

.quick-actions-icon {
  color: #9e23a3;
  flex-shrink: 0;
}

.quick-actions-count {
  color: #9ca3af;
  font-size: 0.8rem;
  font-weight: 400;
}

.quick-actions-chevron {
  color: #9ca3af;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.quick-actions-chevron--expanded {
  transform: rotate(180deg);
}

.quick-actions--collapsible .suggestion-buttons {
  margin-top: 10px;
  animation: slideDown 0.2s ease-out;
}

/* Inline variant for suggestions within chat messages */
.quick-actions--inline {
  margin-top: 12px;
  margin-bottom: 4px;
}

.quick-actions--inline .quick-actions-header {
  padding: 8px 12px;
  font-size: 0.8rem;
}

.quick-actions--inline + .quick-actions--inline {
  margin-top: 8px;
}

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

/* Dark mode for collapsible quick actions */
[data-theme="dark"] .quick-actions-header {
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.2);
  color: #d1d5db;
}

[data-theme="dark"] .quick-actions-header:hover {
  background: rgba(158, 35, 163, 0.12);
  border-color: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .quick-actions-icon {
  color: #c084fc;
}

[data-theme="dark"] .quick-actions-count {
  color: #6b7280;
}

[data-theme="dark"] .quick-actions-chevron {
  color: #6b7280;
}

.suggestion-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-2, 8px);
}

/* Suggestion buttons - 44px touch target (Issue #200) */
.suggestion-btn {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(158, 35, 163, 0.2);
  border-radius: 8px;
  min-height: 44px;
  padding: 14px 16px;
  color: var(--md-on-surface, #1c1b1f);
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(12px);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.suggestion-btn .suggestion-text {
  flex: 1 1 200px;
  min-width: 0;
}

.suggestion-tag {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  background: rgba(148, 163, 184, 0.18);
  color: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
  flex: 0 0 auto;
}

.suggestion-tag--action {
  background: rgba(124, 58, 237, 0.16);
  border-color: rgba(124, 58, 237, 0.35);
  color: #6d28d9;
}

.suggestion-tag--draft {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.35);
  color: #047857;
}

.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"] .quick-actions.suggested-actions h4::before {
  background: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

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-tag {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-secondary, rgba(148, 163, 184, 0.95));
  border-color: rgba(148, 163, 184, 0.4);
}

html[data-ui-style="instrument"] .suggestion-tag--action {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.4);
  color: #6d28d9;
}

html[data-ui-style="instrument"] .suggestion-tag--draft {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.35);
  color: #047857;
}

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);
}

/* =============================================================================
   Action Buttons (2025-12) - Executable actions from orchestrator suggestions
   Distinguished from regular queries with purple hue and ⚡ icon prefix
   ============================================================================= */

/* Base action button styling - purple hue to differentiate from regular queries */
.suggestion-btn.action-btn {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(124, 58, 237, 0.16) 100%);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #7c3aed;
  position: relative;
}

.suggestion-btn.action-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(124, 58, 237, 0.25) 100%);
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
  transform: translateY(-1px);
}

.suggestion-btn.action-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(139, 92, 246, 0.15);
}

.suggestion-btn.action-btn:focus-visible {
  border-color: rgba(139, 92, 246, 0.7);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

/* ⚡ icon prefix for action buttons */
.suggestion-btn.action-btn::before {
  content: '⚡';
  margin-right: 0;
  font-size: 0.9em;
}

/* Instrument UI style for action buttons */
html[data-ui-style="instrument"] .suggestion-btn.action-btn {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.12) 100%);
  border-color: rgba(139, 92, 246, 0.4);
  color: #7c3aed;
}

html[data-ui-style="instrument"] .suggestion-btn.action-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.2) 100%);
  border-color: #8b5cf6;
}

/* Dark theme variants */
[data-theme="dark"] .suggestion-btn.action-btn {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(124, 58, 237, 0.22) 100%);
  border-color: rgba(139, 92, 246, 0.45);
  color: #a78bfa;
}

[data-theme="dark"] .suggestion-btn.action-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28) 0%, rgba(124, 58, 237, 0.32) 100%);
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.3);
}

html[data-ui-style="instrument"][data-theme="dark"] .suggestion-btn.action-btn {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.2) 100%);
  border-color: rgba(139, 92, 246, 0.5);
  color: #c4b5fd;
}

html[data-ui-style="instrument"][data-theme="dark"] .suggestion-btn.action-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(124, 58, 237, 0.3) 100%);
  border-color: #a78bfa;
}

/* 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"] .suggestion-tag {
  background: rgba(148, 163, 184, 0.22);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

[data-theme="dark"] .suggestion-tag--action {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(139, 92, 246, 0.45);
  color: #c4b5fd;
}

[data-theme="dark"] .suggestion-tag--draft {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
  color: #a7f3d0;
}

[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.12);
  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);
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show copy button on message hover */
.message:hover .message-copy-action {
  opacity: 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: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.06) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 16px;
  animation: sources-slide-in 0.25s ease-out;
}

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

.streaming-sources-icon {
  flex-shrink: 0;
  color: #d97706;
  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 {
  font-size: 12px;
  color: #92400e;
  font-weight: 500;
  white-space: nowrap;
}

.streaming-sources-text strong {
  font-weight: 700;
  color: #b45309;
  font-size: 13px;
}

.streaming-sources-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: 2px;
  background: rgba(217, 119, 6, 0.15);
  border: none;
  border-radius: 50%;
  color: #b45309;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.streaming-sources-view-btn:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  transform: scale(1.1);
}

.streaming-sources-view-btn:active {
  transform: scale(0.95);
}

/* 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-icon {
  color: #fbbf24;
}

[data-theme="dark"] .streaming-sources-text {
  color: #fbbf24;
}

[data-theme="dark"] .streaming-sources-text strong {
  color: #fcd34d;
}

[data-theme="dark"] .streaming-sources-view-btn {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

[data-theme="dark"] .streaming-sources-view-btn:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

/* 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 Indicator - Compact inline badge */
.view-only-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 999px;
  color: #b45309;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.view-only-indicator svg {
  flex-shrink: 0;
  color: #d97706;
}

.view-only-new-btn {
  margin-left: 4px;
  padding: 2px 6px;
  background: #d97706;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.view-only-new-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-indicator {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

[data-theme="dark"] .view-only-indicator svg {
  color: #fbbf24;
}

[data-theme="dark"] .view-only-new-btn {
  background: #f59e0b;
  color: #1f2937;
}

[data-theme="dark"] .view-only-new-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;
}

/* Branch Selector Button */
.branch-selector-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid rgba(127, 27, 131, 0.2);
  border-radius: 4px;
  color: #7f1b83;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.branch-selector-btn:hover {
  background: rgba(127, 27, 131, 0.05);
  border-color: rgba(127, 27, 131, 0.3);
}

.branch-selector-btn:active {
  background: rgba(127, 27, 131, 0.1);
}

.branch-selector-btn svg {
  flex-shrink: 0;
}

/* Dark theme */
[data-theme="dark"] .branch-selector-btn {
  border-color: rgba(168, 85, 247, 0.3);
  color: #a855f7;
}

[data-theme="dark"] .branch-selector-btn:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.4);
}

[data-theme="dark"] .branch-selector-btn:active {
  background: rgba(168, 85, 247, 0.15);
}

/* ===== Proofs Cheat Card - Floating Draggable Panel ===== */
.proofs-cheat-card {
  position: fixed;
  z-index: 1500;
  background: var(--sci-bg-primary, #ffffff);
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 320px;
  min-height: 200px;
  max-width: 600px;
  max-height: 80vh;
}

.proofs-cheat-card--minimized {
  min-height: 40px;
  max-height: 40px;
}

/* 40px unified header (Issue #200) */
.proofs-cheat-header-draggable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 12px;
  background: rgba(158, 35, 163, 0.04);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.proofs-cheat-header-draggable:active {
  cursor: grabbing;
}

.proofs-cheat-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

.proofs-cheat-badge {
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(158, 35, 163, 0.1);
  color: #9e23a3;
  border-radius: 4px;
}

.proofs-cheat-header-actions {
  display: flex;
  gap: 4px;
}

/* 44px touch target via padding expansion */
.proofs-cheat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 8px;
  margin: -8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.proofs-cheat-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}

.proofs-cheat-btn:last-child {
  margin-right: 0;
}

/* Scrollable content area */
.proofs-cheat-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(80vh - 40px);
}

/* Resize handle */
.proofs-cheat-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background: linear-gradient(
    -45deg,
    transparent 30%,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.1) 40%,
    transparent 40%,
    transparent 60%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.1) 70%,
    transparent 70%
  );
}

/* Dark mode */
[data-theme="dark"] .proofs-cheat-card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .proofs-cheat-header-draggable {
  background: rgba(200, 127, 208, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .proofs-cheat-header-left {
  color: #e6e1e5;
}

[data-theme="dark"] .proofs-cheat-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e6e1e5;
}

/* Responsive: minimum size enforcement on small screens */
@media (max-width: 768px) {
  .proofs-cheat-card {
    min-width: 280px;
    max-width: 100vw;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .proofs-cheat-card {
    transition: none !important;
  }
}

/* ===== WELCOME HERO (Post-login Mode 1 empty state) ===== */
.welcome-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 520px;
}

.welcome-mark {
  height: 44px;
  width: 44px;
  object-fit: contain;
  padding: 14px;
  border-radius: 50%;
  margin-bottom: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.97), rgba(245,243,250,0.92));
  border: 1px solid rgba(158,35,163,0.06);
  box-shadow:
    0 0 0 1px rgba(158,35,163,0.04),
    0 6px 20px rgba(42,16,74,0.08),
    0 2px 4px rgba(158,35,163,0.05),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 4px rgba(158,35,163,0.03);
}

[data-theme="dark"] .welcome-mark {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(158,35,163,0.10),
    0 8px 24px rgba(0,0,0,0.3),
    0 3px 8px rgba(158,35,163,0.12),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.15);
}

.welcome-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.welcome-card {
  background: white;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 28px 24px 24px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 44px;
  font-family: inherit;
  outline: none;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Top-edge gradient accent */
.welcome-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, #9e23a3, #c87fd0);
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

.welcome-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 28px rgba(42,16,74,0.10),
    0 2px 8px rgba(158,35,163,0.08);
  border-color: rgba(158,35,163,0.12);
}

.welcome-card:hover::before {
  opacity: 1;
}

.welcome-card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(42,16,74,0.08);
}

.welcome-card:focus-visible {
  outline: 2px solid #9e23a3;
  outline-offset: 2px;
}

/* Icon in tinted circle */
.welcome-card-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(158,35,163,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.welcome-card:hover .welcome-card-icon-wrap {
  background: rgba(158,35,163,0.10);
  transform: scale(1.05);
}

.welcome-card-icon {
  color: #9e23a3;
}

.welcome-card-title {
  font-family: 'dinmedium', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0f0f1a;
  margin: 12px 0 6px;
  letter-spacing: -0.01em;
}

.welcome-card-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: #5f6368;
}

/* Hover arrow indicator */
.welcome-card-arrow {
  color: #9e23a3;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 12px;
}

.welcome-card:hover .welcome-card-arrow {
  opacity: 0.6;
  transform: translateX(0);
}

/* Dark mode welcome cards */
[data-theme="dark"] .welcome-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

[data-theme="dark"] .welcome-card::before {
  background: linear-gradient(90deg, #9e23a3, #c87fd0);
  opacity: 0.35;
}

[data-theme="dark"] .welcome-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(158,35,163,0.15);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.3),
    0 2px 8px rgba(158,35,163,0.1);
}

[data-theme="dark"] .welcome-card:hover::before {
  opacity: 0.7;
}

[data-theme="dark"] .welcome-card-icon-wrap {
  background: rgba(158,35,163,0.10);
}

[data-theme="dark"] .welcome-card:hover .welcome-card-icon-wrap {
  background: rgba(158,35,163,0.18);
}

[data-theme="dark"] .welcome-card-title {
  color: #e8e9f5;
}

[data-theme="dark"] .welcome-card-desc {
  color: #9aa0a6;
}

[data-theme="dark"] .welcome-card-arrow {
  color: #c87fd0;
}

/* Mobile: stack cards vertically */
@media (max-width: 600px) {
  .welcome-cards {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .welcome-card,
  .welcome-card::before,
  .welcome-card-icon-wrap,
  .welcome-card-arrow {
    transition: none;
  }
}
/* 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 - Sleek Single-Line Console
 * Enhancement 4: Tool icons, progress indicator, expandable history
 * Enhancement 6: Improved dark mode borders
 */

.orchestrator-console {
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* Use system monospace for crisp rendering */
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  color: #4b5563;
  min-height: 24px;
  /* Crisp text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga' 0; /* Disable ligatures for monospace */
  transition: all 0.2s ease;
}

.orchestrator-console.expanded {
  background: rgba(0, 0, 0, 0.02);
}

/* Main console row */
.console-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  white-space: nowrap;
  overflow: hidden;
  min-height: 24px;
}

/* Progress bar for execution */
.console-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(59, 130, 246, 0.1);
  overflow: hidden;
}

.console-progress-fill {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  animation: progress-slide 1.5s ease-in-out infinite;
}

@keyframes progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Status indicator */
.console-status {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.console-status-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

.console-status-message {
  color: #6b7280;
  font-size: 11px;
  max-width: min(60vw, 620px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Separator dot */
.console-sep {
  color: #9ca3af;
  flex-shrink: 0;
}

/* Tool execution indicator */
.console-tool {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 6px;
  color: #059669;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  flex-shrink: 0;
}

.console-tool.executing .tool-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: tool-pulse 1s ease-in-out infinite;
}

.console-tool .tool-label {
  margin-left: 2px;
}

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

/* Expand indicator */
.console-expand {
  display: flex;
  align-items: center;
  color: #9ca3af;
  margin-left: auto;
  padding-left: 8px;
  transition: transform 0.2s ease;
}

.console-expand.rotated {
  transform: rotate(180deg);
}

/* Expandable history section */
.console-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 12px 8px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  background: rgba(0, 0, 0, 0.01);
  overflow: hidden;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 11px;
  color: #6b7280;
}

.history-icon {
  display: flex;
  align-items: center;
  color: #9ca3af;
}

.history-fn {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #4b5563;
}

.history-time {
  margin-left: auto;
  color: #9ca3af;
  font-size: 10px;
}

/* Synthesizing progress bar variant - indigo instead of blue */
.console-progress-fill.synthesizing {
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
  animation: progress-slide 2s ease-in-out infinite;
}

[data-theme="dark"] .console-progress-fill.synthesizing {
  background: linear-gradient(90deg, transparent, #818cf8, transparent);
}

/* Live source count badge */
.console-sources {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 6px;
  color: #3b82f6;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}

.console-sources.completed {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
}

[data-theme="dark"] .console-sources {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

[data-theme="dark"] .console-sources.completed {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

/* Function count */
.console-functions {
  padding: 2px 6px;
  background: rgba(158, 35, 163, 0.08);
  border-radius: 6px;
  color: #9e23a3;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}

/* Execution time */
.console-time {
  color: #9ca3af;
  font-size: 11px;
  flex-shrink: 0;
}

/* Animations */
.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse 1.5s 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 - Enhancement 6: Improved border visibility */
[data-theme="dark"] .orchestrator-console {
  background: transparent;
  color: #9ca3af;
  border-bottom-color: rgba(255, 255, 255, 0.12); /* Increased from 0.08 for visibility */
}

[data-theme="dark"] .orchestrator-console.expanded {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .console-tool {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

[data-theme="dark"] .console-functions {
  background: rgba(200, 127, 208, 0.12);
  color: #c87fd0;
}

[data-theme="dark"] .console-time {
  color: #6b7280;
}

[data-theme="dark"] .console-expand {
  color: #6b7280;
}

[data-theme="dark"] .console-history {
  border-top-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.01);
}

[data-theme="dark"] .history-item {
  color: #9ca3af;
}

[data-theme="dark"] .history-icon {
  color: #6b7280;
}

[data-theme="dark"] .history-fn {
  color: #d1d5db;
}

[data-theme="dark"] .console-status-message {
  color: #9ca3af;
}

[data-theme="dark"] .history-time {
  color: #6b7280;
}

/* Dark mode progress bar */
[data-theme="dark"] .console-progress-bar {
  background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .console-progress-fill {
  background: linear-gradient(90deg, transparent, #60a5fa, transparent);
}
/* 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: 32px;
  height: 32px;
  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;
}

/* New Session Action Button */
.session-new-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 20px);
  margin: 8px 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
  border: 1px solid rgba(158, 35, 163, 0.2);
  border-radius: 10px;
  color: #9e23a3;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.session-new-action:hover {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
  border-color: rgba(158, 35, 163, 0.35);
  transform: translateY(-1px);
}

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

.session-new-action svg {
  flex-shrink: 0;
}

[data-theme="dark"] .session-new-action {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(158, 35, 163, 0.15) 100%);
  border-color: rgba(139, 92, 246, 0.3);
  color: #a78bfa;
}

[data-theme="dark"] .session-new-action:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(158, 35, 163, 0.25) 100%);
  border-color: rgba(139, 92, 246, 0.5);
}
/* 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);
}
/**
 * BranchCreationModal Styles
 * Proofline Branching UI (2025-12)
 * Follows patterns from BranchSelector.css and DeleteConfirmationModal
 */

/* Modal Overlay - Issue #200: Minimal, no blur */
.branch-creation-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease-out;
}

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

/* Modal Container - Issue #200: Surface level, minimal shadow */
.branch-creation-modal {
  background: #1f1f1f; /* Issue #200: Surface level */
  border: 1px solid rgba(255, 255, 255, 0.12); /* Issue #200: 0.12 opacity */
  border-radius: 8px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Issue #200: Minimal shadow */
  animation: slideUp 0.3s ease-out;
}

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

/* Light theme */
[data-theme="light"] .branch-creation-modal {
  background: #ffffff;
  border-color: #e0e0e0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Header - Issue #200: No gradient, flat background */
.branch-creation-modal .branch-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(139, 92, 246, 0.05); /* Issue #200: Flat, subtle tint */
}

[data-theme="light"] .branch-creation-modal .branch-modal-header {
  border-bottom-color: #e0e0e0;
  background: rgba(139, 92, 246, 0.03);
}

.branch-creation-modal .header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.branch-creation-modal .header-title svg {
  color: var(--accent-purple, #8b5cf6);
}

.branch-creation-modal .header-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500; /* Issue #200: Lighter weight */
  color: #e5e5e5; /* Issue #200: Softer text */
}

[data-theme="light"] .branch-creation-modal .header-title h3 {
  color: #202124;
}

.branch-creation-modal .close-button {
  background: transparent;
  border: none;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.branch-creation-modal .close-button:hover:not(:disabled) {
  background: var(--bg-hover, #2a2a2a);
  color: var(--text-primary, #fff);
}

.branch-creation-modal .close-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme="light"] .branch-creation-modal .close-button:hover:not(:disabled) {
  background: #f5f5f5;
  color: #202124;
}

/* Body */
.branch-creation-modal .branch-modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Form Groups */
.branch-creation-modal .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.branch-creation-modal .form-group label {
  color: var(--text-primary, #fff);
  font-size: 13px;
  font-weight: 500;
}

[data-theme="light"] .branch-creation-modal .form-group label {
  color: #202124;
}

.branch-creation-modal .form-group input,
.branch-creation-modal .form-group textarea {
  width: 100%;
  background: #262626; /* Issue #200: Elevated level */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 10px 12px;
  color: #e5e5e5;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.branch-creation-modal .form-group input:focus,
.branch-creation-modal .form-group textarea:focus {
  outline: none;
  border-color: var(--accent-purple, #8b5cf6);
}

.branch-creation-modal .form-group input::placeholder,
.branch-creation-modal .form-group textarea::placeholder {
  color: var(--text-tertiary, #666);
}

.branch-creation-modal .form-group input:disabled,
.branch-creation-modal .form-group textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

[data-theme="light"] .branch-creation-modal .form-group input,
[data-theme="light"] .branch-creation-modal .form-group textarea {
  background: #f5f5f5;
  border-color: #e0e0e0;
  color: #202124;
}

[data-theme="light"] .branch-creation-modal .form-group input::placeholder,
[data-theme="light"] .branch-creation-modal .form-group textarea::placeholder {
  color: #9aa0a6;
}

/* Anchor KC Display - Issue #200: Elevated level */
.branch-creation-modal .anchor-kc-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 40px;
}

[data-theme="light"] .branch-creation-modal .anchor-kc-display {
  background: #f5f5f5;
  border-color: #e0e0e0;
}

.branch-creation-modal .kc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.branch-creation-modal .kc-title {
  color: var(--text-primary, #fff);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .branch-creation-modal .kc-title {
  color: #202124;
}

.branch-creation-modal .kc-id {
  color: var(--text-secondary, #a0a0a0);
  font-size: 11px;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.branch-creation-modal .placeholder {
  color: var(--text-tertiary, #666);
  font-size: 13px;
}

.branch-creation-modal .kc-selector-toggle {
  background: transparent;
  border: none;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.branch-creation-modal .kc-selector-toggle:hover:not(:disabled) {
  background: var(--bg-hover, #2a2a2a);
  color: var(--text-primary, #fff);
}

/* KC Selector Dropdown - Issue #200: Elevated level */
.branch-creation-modal .kc-selector-dropdown {
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  margin-top: 4px;
  max-height: 160px;
  overflow-y: auto;
}

[data-theme="light"] .branch-creation-modal .kc-selector-dropdown {
  background: #ffffff;
  border-color: #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.branch-creation-modal .kc-option {
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.branch-creation-modal .kc-option:hover {
  background: var(--bg-hover, #2a2a2a);
}

[data-theme="light"] .branch-creation-modal .kc-option:hover {
  background: #f5f5f5;
}

.branch-creation-modal .kc-option-title {
  color: var(--text-primary, #fff);
  font-size: 13px;
}

[data-theme="light"] .branch-creation-modal .kc-option-title {
  color: #202124;
}

.branch-creation-modal .kc-option-id {
  color: var(--text-secondary, #a0a0a0);
  font-size: 10px;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
}

.branch-creation-modal .kc-id-input {
  margin-top: 8px;
}

/* Form Hint */
.branch-creation-modal .form-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary, #a0a0a0);
  font-size: 11px;
  margin-top: 4px;
}

.branch-creation-modal .form-hint svg {
  color: var(--accent-orange, #f59e0b);
  flex-shrink: 0;
}

/* Lock Warning */
.branch-creation-modal .lock-warning {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
  color: var(--accent-orange, #f59e0b);
  font-size: 12px;
  line-height: 1.4;
}

.branch-creation-modal .lock-warning svg {
  flex-shrink: 0;
  margin-top: 1px;
}

[data-theme="light"] .branch-creation-modal .lock-warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
  color: #b45309;
}

/* Error Message */
.branch-creation-modal .error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  color: #ef4444;
  font-size: 12px;
}

.branch-creation-modal .error-message svg {
  flex-shrink: 0;
}

[data-theme="light"] .branch-creation-modal .error-message {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #dc2626;
}

/* Footer - Issue #200: Minimal border */
.branch-creation-modal .branch-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .branch-creation-modal .branch-modal-footer {
  border-top-color: #e0e0e0;
}

.branch-creation-modal .cancel-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #a0a0a0;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.branch-creation-modal .cancel-button:hover:not(:disabled) {
  background: #262626;
  color: #e5e5e5;
}

.branch-creation-modal .cancel-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme="light"] .branch-creation-modal .cancel-button {
  border-color: #e0e0e0;
  color: #5f6368;
}

[data-theme="light"] .branch-creation-modal .cancel-button:hover:not(:disabled) {
  background: #f5f5f5;
  color: #202124;
}

.branch-creation-modal .create-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-purple, #8b5cf6);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.branch-creation-modal .create-button:hover:not(:disabled) {
  background: #7c3aed;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.branch-creation-modal .create-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Spinner */
.branch-creation-modal .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Validation Error Styles */
.branch-creation-modal .input-error {
  border-color: #ef4444 !important;
}

.branch-creation-modal .input-error:focus {
  border-color: #ef4444 !important;
}

.branch-creation-modal .validation-error {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ef4444;
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
}

[data-theme="light"] .branch-creation-modal .validation-error {
  color: #dc2626;
}
/**
 * BranchSelector Styles
 * Proofline Branching UI (2025-12)
 */

.branch-selector {
  background: #1f1f1f; /* Issue #200: Surface level */
  border: 1px solid rgba(255, 255, 255, 0.12); /* Issue #200: 0.12 opacity */
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  max-width: 400px;
}

/* Branch Suggestion Banner - Issue #200: No gradients, flat styling */
.branch-suggestion-banner {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.suggestion-content {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
}

.suggestion-content svg {
  color: var(--accent-blue, #3b82f6);
  flex-shrink: 0;
  margin-top: 2px;
}

.suggestion-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suggestion-text strong {
  color: var(--text-primary, #fff);
  font-size: 13px;
}

.suggestion-text span {
  color: var(--text-secondary, #a0a0a0);
  font-size: 12px;
  line-height: 1.4;
}

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

.suggestion-actions .accept-button {
  background: var(--accent-blue, #3b82f6);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.suggestion-actions .accept-button:hover {
  background: #2563eb;
}

.suggestion-actions .dismiss-button {
  background: transparent;
  border: none;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.suggestion-actions .dismiss-button:hover {
  color: var(--text-primary, #fff);
}

/* Header - Issue #200: Minimal borders, proper text colors */
.branch-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.branch-selector-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e5e5e5;
  font-size: 14px;
  font-weight: 500;
}

.branch-selector-title svg {
  color: var(--accent-purple, #8b5cf6);
}

.close-button {
  background: transparent;
  border: none;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.close-button:hover {
  background: var(--bg-hover, #2a2a2a);
  color: var(--text-primary, #fff);
}

/* Current Branch Indicator - Issue #200: Elevated level background */
.current-branch-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #262626; /* Issue #200: Elevated level */
  border-radius: 6px;
  margin-bottom: 12px;
}

.current-branch-indicator .label {
  color: var(--text-secondary, #a0a0a0);
  font-size: 12px;
}

.current-branch-indicator .branch-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}

.current-branch-indicator .branch-name.on-main {
  color: var(--text-primary, #fff);
  background: var(--bg-secondary, #1e1e1e);
}

.current-branch-indicator .branch-name.on-branch {
  color: var(--accent-purple, #8b5cf6);
  background: rgba(139, 92, 246, 0.15);
}

.current-branch-indicator .lock-count {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-orange, #f59e0b);
  font-size: 11px;
  margin-left: auto;
}

/* Branches List */
.branches-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.branch-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #262626; /* Issue #200: Elevated level */
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.branch-item:hover {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.12);
}

.branch-item.active {
  background: rgba(139, 92, 246, 0.1);
  border-color: var(--accent-purple, #8b5cf6);
  cursor: default;
}

.branch-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.branch-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary, #fff);
  font-size: 13px;
  font-weight: 500;
}

.branch-name-row svg {
  color: var(--accent-purple, #8b5cf6);
  flex-shrink: 0;
}

.main-badge {
  background: var(--accent-green, #10b981);
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}

.branch-description {
  color: var(--text-secondary, #a0a0a0);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.branch-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-orange, #f59e0b);
  font-size: 11px;
}

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

.branch-badge.active {
  background: var(--accent-purple, #8b5cf6);
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.delete-branch-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.branch-item:hover .delete-branch-btn {
  opacity: 1;
}

.delete-branch-btn:hover {
  color: var(--accent-red, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.switch-icon {
  color: var(--text-secondary, #a0a0a0);
}

/* Action Buttons */
.branch-action-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.create-branch-button,
.merge-branch-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.create-branch-button {
  background: #262626; /* Issue #200: Elevated level */
  color: #e5e5e5;
}

.create-branch-button:hover:not(:disabled) {
  background: #2a2a2a;
  border-color: var(--accent-purple, #8b5cf6);
}

.merge-branch-button {
  background: rgba(16, 185, 129, 0.1);
  color: var(--accent-green, #10b981);
  border-color: rgba(16, 185, 129, 0.3);
}

.merge-branch-button:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.2);
  border-color: var(--accent-green, #10b981);
}

.create-branch-button:disabled,
.merge-branch-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Locked KCs Section - Issue #200: Minimal border */
.locked-kcs-section {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 12px;
}

.locked-kcs-section .section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-orange, #f59e0b);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

.locked-kcs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.locked-kc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 4px;
}

.locked-kc-item .kc-title {
  color: var(--text-primary, #fff);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.locked-kc-item .lock-info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-purple, #8b5cf6);
  font-size: 11px;
  flex-shrink: 0;
}

/* Modal Overlay - Issue #200: Minimal, no blur, proper background levels */
.branch-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.branch-modal {
  background: #1f1f1f; /* Issue #200: Surface level */
  border: 1px solid rgba(255, 255, 255, 0.12); /* Issue #200: 0.12 opacity borders */
  border-radius: 8px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Issue #200: Minimal shadow */
}

.branch-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* Issue #200: 0.12 opacity */
}

.branch-modal-header h3 {
  color: #e5e5e5; /* Issue #200: Softer text, not pure white */
  font-size: 16px;
  font-weight: 500; /* Issue #200: Lighter weight for cleaner look */
  margin: 0;
}

.branch-modal-content {
  padding: 20px;
  overflow-y: auto;
}

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

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  color: var(--text-primary, #fff);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: #262626; /* Issue #200: Elevated level */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 10px 12px;
  color: #e5e5e5;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-purple, #8b5cf6);
}

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

.form-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary, #a0a0a0);
  font-size: 11px;
  margin-top: 6px;
}

.form-hint svg {
  color: var(--accent-orange, #f59e0b);
}

/* Merge Info - Issue #200: Elevated level background */
.merge-info {
  background: #262626; /* Issue #200: Elevated level */
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.merge-direction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}

.merge-direction .from-branch {
  color: var(--accent-purple, #8b5cf6);
}

.merge-direction .to-branch {
  color: var(--accent-green, #10b981);
}

.merge-direction svg {
  color: var(--text-secondary, #a0a0a0);
}

.merge-locks-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--accent-orange, #f59e0b);
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 0;
}

/* Modal Footer - Issue #200: Minimal border */
.branch-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cancel-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #a0a0a0;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.cancel-button:hover {
  background: #262626;
  color: #e5e5e5;
}

.confirm-button {
  background: var(--accent-purple, #8b5cf6);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.confirm-button:hover:not(:disabled) {
  background: #7c3aed;
}

.confirm-button.merge {
  background: var(--accent-green, #10b981);
}

.confirm-button.merge:hover:not(:disabled) {
  background: #059669;
}

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

/* Legacy Fork Modal Support (backwards compatibility) - Issue #200: Minimal styling */
.fork-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.fork-modal {
  background: #1f1f1f; /* Issue #200: Surface level */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Issue #200: Minimal shadow */
}

.fork-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fork-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500; /* Issue #200: Lighter weight */
  color: #e5e5e5;
}

.fork-modal-content {
  padding: 24px;
}

.fork-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.fork-confirm-button {
  background: var(--accent-purple, #8b5cf6);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fork-confirm-button:hover:not(:disabled) {
  background: #7c3aed;
}

.fork-confirm-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fork-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px dashed var(--accent-purple, #8b5cf6);
  border-radius: 6px;
  color: var(--accent-purple, #8b5cf6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fork-button:hover {
  background: rgba(139, 92, 246, 0.15);
  border-style: solid;
}

/* KC Selector Dropdown Styles (Issue #200 compliant) */
.anchor-kc-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #262626; /* Elevated level */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 40px;
  margin-bottom: 8px;
}

[data-theme="light"] .anchor-kc-display {
  background: #f5f5f5;
  border-color: #e0e0e0;
}

.anchor-kc-display .kc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.anchor-kc-display .kc-title {
  color: #e5e5e5;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .anchor-kc-display .kc-title {
  color: #202124;
}

.anchor-kc-display .kc-id {
  color: #a0a0a0;
  font-size: 11px;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anchor-kc-display .placeholder {
  color: #666;
  font-size: 13px;
}

.kc-selector-toggle {
  background: transparent;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.kc-selector-toggle:hover:not(:disabled) {
  background: #2a2a2a;
  color: #fff;
}

.kc-selector-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kc-selector-dropdown {
  background: #262626; /* Elevated level */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  margin-top: 4px;
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 8px;
}

[data-theme="light"] .kc-selector-dropdown {
  background: #ffffff;
  border-color: #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kc-option {
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kc-option:hover {
  background: #2a2a2a;
}

[data-theme="light"] .kc-option:hover {
  background: #f5f5f5;
}

.kc-option-title {
  color: #e5e5e5;
  font-size: 13px;
}

[data-theme="light"] .kc-option-title {
  color: #202124;
}

.kc-option-id {
  color: #a0a0a0;
  font-size: 10px;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
}

.kc-id-input {
  width: 100%;
  background: #262626; /* Elevated level */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 10px 12px;
  color: #e5e5e5;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  margin-top: 8px;
}

.kc-id-input:focus {
  outline: none;
  border-color: var(--accent-purple, #8b5cf6);
}

.kc-id-input::placeholder {
  color: #666;
}

.kc-id-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

[data-theme="light"] .kc-id-input {
  background: #f5f5f5;
  border-color: #e0e0e0;
  color: #202124;
}

[data-theme="light"] .kc-id-input::placeholder {
  color: #9aa0a6;
}

/* Validation Error Styles */
.input-error {
  border-color: #ef4444 !important;
}

.input-error:focus {
  border-color: #ef4444 !important;
}

.validation-error {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ef4444;
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
}

[data-theme="light"] .validation-error {
  color: #dc2626;
}
/**
 * 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;
}

/* "Everything" active: calm baseline — no special highlighting (it's the default) */
.context-mode-btn.active.is-default {
  background: transparent;
  color: rgba(31, 21, 51, 0.92);
  box-shadow: none;
  font-weight: 600;
  border-bottom: 2px solid rgba(158, 35, 163, 0.5);
  border-radius: 6px 6px 4px 4px;
}

/* "Narrowed" active: intentional filter applied (My KB or External selected) */
.context-mode-btn.active.is-narrowed {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.12) 0%, rgba(111, 45, 189, 0.08) 100%);
  color: #7f1b83;
  box-shadow: none;
  border: 1px solid rgba(158, 35, 163, 0.25);
}

/* Excluded sources: dimmed when a narrowed mode is active */
.context-mode-btn.excluded {
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-color: rgba(100, 100, 100, 0.3);
}

/* Fallback for active without narrowing class (backwards compat) */
.context-mode-btn.active:not(.is-default):not(.is-narrowed):not(.excluded) {
  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(158, 35, 163, 0.15);
  border-radius: 3px;
  margin-left: 2px;
  animation: kb-badge-pop 0.3s ease;
}

.kb-map-badge svg {
  color: rgba(158, 35, 163, 0.8);
}

@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;
}

/* Dark: "Everything" active — calm baseline */
[data-theme="dark"] .context-mode-btn.active.is-default {
  background: transparent;
  color: rgba(232, 234, 237, 0.92);
  box-shadow: none;
  font-weight: 600;
  border-bottom: 2px solid rgba(200, 127, 208, 0.5);
  border-radius: 6px 6px 4px 4px;
}

/* Dark: "Narrowed" active */
[data-theme="dark"] .context-mode-btn.active.is-narrowed {
  background: rgba(158, 35, 163, 0.2);
  color: #c77fd1;
  border: 1px solid rgba(200, 127, 208, 0.35);
}

/* Dark: Excluded sources */
[data-theme="dark"] .context-mode-btn.excluded {
  opacity: 0.35;
  text-decoration: line-through;
  text-decoration-color: rgba(200, 200, 200, 0.25);
}

/* Dark: Fallback active */
[data-theme="dark"] .context-mode-btn.active:not(.is-default):not(.is-narrowed):not(.excluded) {
  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);
}

/* Instrument: "Everything" active — calm baseline */
html[data-ui-style="instrument"] .context-mode-btn.active.is-default {
  background: transparent;
  color: rgba(31, 21, 51, 0.92);
  box-shadow: none;
  font-weight: 600;
  border-bottom: 2px solid rgba(158, 35, 163, 0.5);
  border-radius: 6px 6px 4px 4px;
}

/* Instrument: "Narrowed" active */
html[data-ui-style="instrument"] .context-mode-btn.active.is-narrowed {
  background: rgba(158, 35, 163, 0.10);
  color: rgba(31, 21, 51, 0.95);
  box-shadow: none;
  border: 1px solid rgba(158, 35, 163, 0.25);
}

/* Instrument: Excluded sources */
html[data-ui-style="instrument"] .context-mode-btn.excluded {
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-color: rgba(31, 21, 51, 0.2);
}

/* Instrument: Fallback active */
html[data-ui-style="instrument"] .context-mode-btn.active:not(.is-default):not(.is-narrowed):not(.excluded) {
  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);
}

/* Instrument+Dark: "Everything" active — calm baseline */
html[data-ui-style="instrument"][data-theme="dark"] .context-mode-btn.active.is-default {
  background: transparent;
  color: rgba(232, 234, 237, 0.92);
  box-shadow: none;
  font-weight: 600;
  border-bottom: 2px solid rgba(200, 127, 208, 0.5);
  border-radius: 6px 6px 4px 4px;
}

/* Instrument+Dark: "Narrowed" active */
html[data-ui-style="instrument"][data-theme="dark"] .context-mode-btn.active.is-narrowed {
  background: rgba(158, 35, 163, 0.22);
  color: #e8eaed;
  border: 1px solid rgba(200, 127, 208, 0.35);
}

/* Instrument+Dark: Excluded sources */
html[data-ui-style="instrument"][data-theme="dark"] .context-mode-btn.excluded {
  opacity: 0.35;
  text-decoration: line-through;
  text-decoration-color: rgba(232, 234, 237, 0.2);
}

/* Instrument+Dark: Fallback active */
html[data-ui-style="instrument"][data-theme="dark"] .context-mode-btn.active:not(.is-default):not(.is-narrowed):not(.excluded) {
  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;
}/**
 * Knowledge Card CSS Architecture
 *
 * Consolidated styles for the 3-layout KC rendering system:
 * - KC-Mini: Compact card for draft lists (48px height)
 * - KC-Card: Versatile card with default/compact/attached variants
 * - KC-Detail: Full view/edit display
 *
 * Built on Aavishkar Material Design System variables.
 * @fileoverview KC-002: Base CSS Architecture
 */

/* =============================================================================
   KC CSS Variables
   ============================================================================= */

:root {
  /* Status Colors */
  --kc-draft-border: #f59e0b;
  --kc-draft-bg: rgba(245, 158, 11, 0.12);
  --kc-saved-border: #6366f1;
  --kc-saved-bg: rgba(99, 102, 241, 0.12);
  --kc-committed-border: #10b981;
  --kc-committed-bg: rgba(16, 185, 129, 0.12);

  /* Stage Colors shared across active KC components */
  --kc-stage-ideation: #a855f7;
  --kc-stage-lit-review: #3b82f6;
  --kc-stage-hypothesis: #0ea5e9;
  --kc-stage-planning: #eab308;
  --kc-stage-analysis: #f97316;
  --kc-stage-writeup: #10b981;

  /* Confidence Colors */
  --kc-confidence-high: #10b981;
  --kc-confidence-medium: #f59e0b;
  --kc-confidence-low: #ef4444;

  /* Layout Sizing */
  --kc-mini-height: 48px;
  --kc-card-min-height: 80px;
  --kc-card-compact-height: 32px;
  --kc-card-compact-max-width: 320px;
  --kc-detail-max-width: 720px;

  /* Touch Targets (A11y) */
  --kc-touch-min: 44px;

  /* Transitions */
  --kc-transition-fast: 150ms ease;
  --kc-transition-normal: 200ms ease;
}

/* Dark mode overrides */
[data-theme="dark"] {
  --kc-draft-border: #fbbf24;
  --kc-draft-bg: rgba(251, 191, 36, 0.12);
  --kc-saved-border: #818cf8;
  --kc-saved-bg: rgba(129, 140, 248, 0.12);
  --kc-committed-border: #34d399;
  --kc-committed-bg: rgba(52, 211, 153, 0.12);
}

/* =============================================================================
   KC Badge Base Styles (shared across all layouts)
   ============================================================================= */

.kc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

/* Status Badges */
.kc-badge--status-draft {
  background: var(--kc-draft-bg);
  color: var(--kc-draft-border);
}

.kc-badge--status-saved {
  background: var(--kc-saved-bg);
  color: var(--kc-saved-border);
}

.kc-badge--status-committed {
  background: var(--kc-committed-bg);
  color: var(--kc-committed-border);
}

/* Stage Badges - Dynamic color via CSS custom properties */
.kc-badge--stage {
  background: var(--badge-bg, rgba(102, 102, 102, 0.1));
  color: var(--badge-color, #666);
}

/* Stage badge specific colors */
.kc-badge--stage-ideation {
  --badge-bg: rgba(168, 85, 247, 0.12);
  --badge-color: var(--kc-stage-ideation);
}

.kc-badge--stage-lit_review,
.kc-badge--stage-lit-review {
  --badge-bg: rgba(59, 130, 246, 0.12);
  --badge-color: var(--kc-stage-lit-review);
}

.kc-badge--stage-hypothesis {
  --badge-bg: rgba(14, 165, 233, 0.12);
  --badge-color: var(--kc-stage-hypothesis);
}

.kc-badge--stage-planning {
  --badge-bg: rgba(234, 179, 8, 0.12);
  --badge-color: var(--kc-stage-planning);
}

.kc-badge--stage-analysis {
  --badge-bg: rgba(249, 115, 22, 0.12);
  --badge-color: var(--kc-stage-analysis);
}

.kc-badge--stage-writeup {
  --badge-bg: rgba(16, 185, 129, 0.12);
  --badge-color: var(--kc-stage-writeup);
}

/* Confidence Badge */
.kc-badge--confidence {
  font-family: var(--aav-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  padding: 2px 6px;
}

.kc-badge--confidence-high {
  color: var(--kc-confidence-high);
}

.kc-badge--confidence-medium {
  color: var(--kc-confidence-medium);
}

.kc-badge--confidence-low {
  color: var(--kc-confidence-low);
}

/* Trust Score Badge */
.kc-badge--trust {
  font-family: var(--aav-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  padding: 2px 6px;
  gap: 3px;
}

/* Lock Badge */
.kc-badge--lock {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  padding: 2px 4px;
}

/* =============================================================================
   KC Action Buttons (shared)
   ============================================================================= */

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

.kc-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--kc-transition-fast);
  border: 1px solid transparent;
  background: transparent;
  min-height: var(--kc-touch-min);
  min-width: var(--kc-touch-min);
}

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

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

/* Commit Button */
.kc-action-btn--commit {
  background: var(--kc-committed-border);
  color: white;
  border-color: var(--kc-committed-border);
}

.kc-action-btn--commit:hover:not(:disabled) {
  background: #059669;
  border-color: #059669;
}

/* Discard Button */
.kc-action-btn--discard {
  color: #ef4444;
  border-color: #ef4444;
}

.kc-action-btn--discard:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.1);
}

/* Disabled delete button for committed KCs (Issue #248) */
.kc-action-btn--discard:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.kc-action-btn--discard:disabled:hover {
  background-color: transparent; /* Prevent hover effect */
}

/* Edit Button */
.kc-action-btn--edit {
  color: #6366f1;
  border-color: #6366f1;
}

.kc-action-btn--edit:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.1);
}

/* View/Expand Button */
.kc-action-btn--expand {
  color: var(--md-on-surface-variant, #6b7280);
  border-color: var(--md-outline-variant, #e5e7eb);
}

.kc-action-btn--expand:hover:not(:disabled) {
  background: var(--md-surface-variant, #f3f4f6);
  color: var(--md-on-surface, #1f2937);
}

/* Save Button */
.kc-action-btn--save {
  background: var(--aav-primary, #9e23a3);
  color: white;
  border-color: var(--aav-primary, #9e23a3);
}

.kc-action-btn--save:hover:not(:disabled) {
  background: var(--aav-primary-dark, #7f1b83);
  border-color: var(--aav-primary-dark, #7f1b83);
}

/* Cancel Button */
.kc-action-btn--cancel {
  color: var(--md-on-surface-variant, #6b7280);
  border-color: var(--md-outline, #d1d5db);
}

.kc-action-btn--cancel:hover:not(:disabled) {
  background: var(--md-surface-variant, #f3f4f6);
}

/* Dismiss/Close Button */
.kc-action-btn--dismiss {
  padding: 4px;
  min-width: 28px;
  min-height: 28px;
  color: var(--md-on-surface-variant, #6b7280);
  border: none;
  border-radius: 50%;
}

.kc-action-btn--dismiss:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: var(--md-on-surface, #1f2937);
}

[data-theme="dark"] .kc-action-btn--dismiss:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--md-on-surface, #e5e5e5);
}

/* Compact action buttons (for DAG) */
.kc-action-btn--compact {
  padding: 2px 6px;
  min-height: 24px;
  min-width: 24px;
  font-size: 11px;
}

/* =============================================================================
   KC-Mini Layout (48px height, draft lists)
   ============================================================================= */

.kc-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--kc-mini-height);
  padding: 8px 12px;
  background: var(--md-surface, #ffffff);
  border: 1px solid var(--md-outline-variant, #e5e7eb);
  border-left: 3px solid var(--kc-draft-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--kc-transition-normal);
}

.kc-mini:hover {
  border-color: var(--aav-primary, #9e23a3);
  box-shadow: 0 2px 8px rgba(158, 35, 163, 0.12);
}

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

.kc-mini--selected {
  border-color: var(--aav-primary, #9e23a3);
  background: rgba(158, 35, 163, 0.04);
}

.kc-mini__status-icon {
  flex-shrink: 0;
  color: var(--kc-draft-border);
}

.kc-mini__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kc-mini__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-on-surface, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-mini__description {
  margin: 0;
  font-size: 12px;
  color: var(--md-on-surface-variant, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

[data-theme="dark"] .kc-mini {
  background: var(--bg-secondary, #252525);
  border-color: var(--border-color, #333);
}

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

[data-theme="dark"] .kc-mini__description {
  color: var(--text-secondary, #9ca3af);
}

/* =============================================================================
   KC-Card Layout (versatile with variants)
   ============================================================================= */

/* Base card styles */
.kc-card {
  display: flex;
  flex-direction: column;
  background: var(--md-surface, #ffffff);
  border: 1px solid var(--md-outline-variant, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  transition: all var(--kc-transition-normal);
}

/* Status border indicator */
.kc-card--draft {
  border-left: 3px solid var(--kc-draft-border);
}

.kc-card--saved {
  border-left: 3px solid var(--kc-saved-border);
}

.kc-card--committed {
  border-left: 3px solid var(--kc-committed-border);
}

.kc-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.kc-card--selected {
  border-color: var(--aav-primary, #9e23a3);
  box-shadow: 0 0 0 1px var(--aav-primary, #9e23a3);
}

/* Card Header */
.kc-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  gap: 8px;
  border-bottom: 1px solid var(--md-outline-variant, #e5e7eb);
}

.kc-card__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.kc-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--md-on-surface, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-card__header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Card Body */
.kc-card__body {
  padding: 12px;
  flex: 1;
}

.kc-card__description {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: var(--md-on-surface, #1f2937);
  line-height: 1.5;
}

.kc-card__so-what {
  margin: 0;
  font-size: 13px;
  color: var(--md-on-surface-variant, #6b7280);
  line-height: 1.4;
}

.kc-card__so-what-label {
  font-weight: 600;
  color: var(--md-on-surface, #1f2937);
}

/* Card Footer */
.kc-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--md-surface-variant, #f9fafb);
  border-top: 1px solid var(--md-outline-variant, #e5e7eb);
}

/* ---- KC-Card Compact Variant (for DAG - 32px height, 320px max) ---- */

.kc-card--compact {
  flex-direction: row;
  align-items: center;
  min-height: var(--kc-card-compact-height);
  max-width: var(--kc-card-compact-max-width);
  padding: 4px 8px;
  gap: 6px;
  border-radius: 6px;
}

.kc-card--compact .kc-card__header {
  padding: 0;
  border: none;
  flex: 1;
  min-width: 0;
}

.kc-card--compact .kc-card__title {
  font-size: 13px;
}

.kc-card--compact .kc-card__header-right {
  gap: 4px;
}

.kc-card--compact .kc-badge {
  font-size: 10px;
  padding: 1px 4px;
}

.kc-card--compact .kc-card__body,
.kc-card--compact .kc-card__footer {
  display: none;
}

/* ---- KC-Card Attached Variant (for chat messages) ---- */

.kc-card--attached {
  border: 1px solid var(--kc-draft-border);
  border-left-width: 3px;
  background: var(--kc-draft-bg);
}

.kc-card--attached .kc-card__header {
  background: transparent;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.kc-card--attached .kc-card__footer {
  background: rgba(245, 158, 11, 0.04);
  border-top: 1px solid rgba(245, 158, 11, 0.2);
}

/* Committed attached variant - green theme */
.kc-card--attached.kc-card--committed {
  border-color: var(--kc-committed-border);
  background: var(--kc-committed-bg);
}

.kc-card--attached.kc-card--committed .kc-card__header {
  border-bottom-color: rgba(16, 185, 129, 0.2);
}

.kc-card--attached.kc-card--committed .kc-card__footer {
  background: rgba(16, 185, 129, 0.04);
  border-top-color: rgba(16, 185, 129, 0.2);
}

/* Saved attached variant - indigo theme */
.kc-card--attached.kc-card--saved {
  border-color: var(--kc-saved-border);
  background: var(--kc-saved-bg);
}

.kc-card--attached.kc-card--saved .kc-card__header {
  border-bottom-color: rgba(99, 102, 241, 0.2);
}

.kc-card--attached.kc-card--saved .kc-card__footer {
  background: rgba(99, 102, 241, 0.04);
  border-top-color: rgba(99, 102, 241, 0.2);
}

/* Dismissed state for attached cards */
.kc-card--dismissed {
  display: none;
}

/* ---- KC-Card Subtitle (one-line description) ---- */
.kc-card__subtitle {
  padding: 4px 16px 8px;
  font-size: 13px;
  color: var(--md-on-surface-variant, #6b7280);
  line-height: 1.4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ---- KC-Card Attached Expanded Content ---- */

.kc-card--attached .kc-card__confidence {
  font-size: 12px;
  font-weight: 600;
  color: var(--aav-primary, #9e23a3);
  padding: 2px 6px;
  background: rgba(158, 35, 163, 0.1);
  border-radius: 4px;
}

.kc-card__section {
  margin-bottom: 12px;
}

.kc-card__section:last-child {
  margin-bottom: 0;
}

.kc-card__section-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--md-on-surface-variant, #6b7280);
  margin-bottom: 4px;
  padding-left: 8px;
  border-left: 2px solid var(--aav-primary, #9e23a3);
}

/* Remove accent bar when label is inside a section header with its own icon */
.kc-section-header .kc-card__section-label {
  border-left: none;
  padding-left: 0;
}

.kc-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-on-surface, #1f2937);
}

/* Shared markdown rendering for KC content across card/detail surfaces */
.kc-markdown {
  color: inherit;
}

.kc-markdown__inline {
  display: inline;
}

.kc-markdown__p {
  margin: 0 0 8px;
  color: inherit;
}

.kc-markdown__p:last-child {
  margin-bottom: 0;
}

.kc-markdown__ul,
.kc-markdown__ol {
  margin: 0;
  padding-left: 18px;
}

.kc-markdown__li {
  margin-bottom: 4px;
}

.kc-markdown__li:last-child {
  margin-bottom: 0;
}

.kc-markdown__strong {
  font-weight: 600;
}

.kc-markdown__link {
  color: var(--aav-primary, #9e23a3);
  text-decoration: underline;
}

.kc-card__findings-list {
  margin: 0;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-on-surface, #1f2937);
}

.kc-card__findings-list li {
  margin-bottom: 4px;
}

.kc-card__findings-list li:last-child {
  margin-bottom: 0;
}

.kc-card__more {
  font-style: italic;
  color: var(--md-on-surface-variant, #6b7280);
}

.kc-card__next-steps {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--md-on-surface, #1f2937);
}

.kc-card__next-steps li {
  margin-bottom: 3px;
}

.kc-card__references {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kc-card__reference {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--aav-primary, #9e23a3);
  background: rgba(158, 35, 163, 0.08);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.kc-card__reference:hover {
  background: rgba(158, 35, 163, 0.15);
  text-decoration: none;
}

/* Toggle button for expand/collapse */
.kc-action-btn--toggle {
  color: var(--md-on-surface-variant, #6b7280);
  border: none;
  padding: 4px 8px;
}

.kc-action-btn--toggle:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  color: var(--md-on-surface, #1f2937);
}

.kc-action-btn--toggle svg {
  transition: transform var(--kc-transition-normal);
}

.kc-card--expanded .kc-action-btn--toggle svg {
  transform: rotate(180deg);
}

/* Fade-in for sections that appear on expand (next steps, references) */
@keyframes kc-section-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kc-card--expanded .kc-card__next-steps,
.kc-card--expanded .kc-card__references {
  animation: kc-section-enter 200ms ease both;
}

/* Expanded state styling */
.kc-card--expanded .kc-card__body {
  padding-bottom: 8px;
}

/* Dark mode for cards */
[data-theme="dark"] .kc-card {
  background: var(--bg-secondary, #252525);
  border-color: var(--border-color, #333);
}

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

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

[data-theme="dark"] .kc-card__so-what {
  color: var(--text-secondary, #9ca3af);
}

[data-theme="dark"] .kc-card__header,
[data-theme="dark"] .kc-card__footer {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--border-color, #333);
}

[data-theme="dark"] .kc-card--attached {
  background: rgba(251, 191, 36, 0.08);
  border-color: var(--kc-draft-border);
}

/* =============================================================================
   KC-Detail Layout (full view/edit)
   ============================================================================= */

.kc-detail {
  display: flex;
  flex-direction: column;
  max-width: var(--kc-detail-max-width);
  background: var(--md-surface, #ffffff);
  border: 1px solid var(--md-outline-variant, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
}

/* Status border */
.kc-detail--draft {
  border-left: 4px solid var(--kc-draft-border);
}

.kc-detail--committed {
  border-left: 4px solid var(--kc-committed-border);
}

/* Header */
.kc-detail__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  background: var(--md-surface-variant, #f9fafb);
  border-bottom: 1px solid var(--md-outline-variant, #e5e7eb);
}

.kc-detail__header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kc-detail__header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kc-detail__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--md-on-surface, #1f2937);
  line-height: 1.3;
}

.kc-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--md-on-surface-variant, #6b7280);
}

.kc-detail__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kc-detail__meta-label {
  font-weight: 500;
}

/* Body */
.kc-detail__body {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

/* One-line description */
.kc-detail__description {
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--md-on-surface, #1f2937);
  line-height: 1.5;
  background: var(--md-surface-variant, #f9fafb);
  border-radius: 8px;
  border-left: 3px solid var(--aav-primary, #9e23a3);
}

/* Content sections */
.kc-detail__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kc-detail__section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--md-on-surface, #1f2937);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kc-detail__section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--md-outline-variant, #e5e7eb);
}

.kc-detail__section-content {
  font-size: 14px;
  color: var(--md-on-surface, #1f2937);
  line-height: 1.6;
}

/* Next steps list */
.kc-detail__next-steps {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
}

.kc-detail__next-steps li {
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--md-on-surface, #1f2937);
  line-height: 1.5;
}

/* References */
.kc-detail__references {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kc-detail__reference {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--md-outline-variant, #e5e7eb);
}

.kc-detail__reference:last-child {
  border-bottom: none;
}

.kc-detail__reference-link {
  color: var(--aav-primary, #9e23a3);
  text-decoration: none;
  font-size: 13px;
}

.kc-detail__reference-link:hover {
  text-decoration: underline;
}

/* Provenance section (collapsible) */
.kc-detail__provenance {
  background: var(--md-surface-variant, #f9fafb);
  border-radius: 8px;
  overflow: hidden;
}

.kc-detail__provenance-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--md-on-surface-variant, #6b7280);
  transition: background var(--kc-transition-fast);
}

.kc-detail__provenance-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
}

.kc-detail__provenance-content {
  padding: 0 16px 16px;
  font-size: 12px;
  color: var(--md-on-surface-variant, #6b7280);
}

.kc-detail__provenance-content--collapsed {
  display: none;
}

.kc-detail__provenance-item {
  margin-bottom: 12px;
}

.kc-detail__provenance-label {
  font-weight: 600;
  margin-bottom: 4px;
}

.kc-detail__provenance-value {
  font-family: var(--aav-font-mono, monospace);
  font-size: 11px;
  background: rgba(0, 0, 0, 0.04);
  padding: 8px;
  border-radius: 4px;
  word-break: break-all;
}

/* Confidence bar */
.kc-detail__confidence {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--md-surface-variant, #f9fafb);
  border-radius: 8px;
}

.kc-detail__confidence-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--md-on-surface, #1f2937);
}

.kc-detail__confidence-bar {
  flex: 1;
  height: 8px;
  background: var(--md-outline-variant, #e5e7eb);
  border-radius: 4px;
  overflow: hidden;
}

.kc-detail__confidence-fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--kc-transition-normal);
}

.kc-detail__confidence-fill--high {
  background: var(--kc-confidence-high);
}

.kc-detail__confidence-fill--medium {
  background: var(--kc-confidence-medium);
}

.kc-detail__confidence-fill--low {
  background: var(--kc-confidence-low);
}

.kc-detail__confidence-value {
  font-family: var(--aav-font-mono, monospace);
  font-size: 13px;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}

/* Footer */
.kc-detail__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  background: var(--md-surface-variant, #f9fafb);
  border-top: 1px solid var(--md-outline-variant, #e5e7eb);
}

/* Edit mode form */
.kc-detail__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kc-detail__form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kc-detail__form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--md-on-surface, #1f2937);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kc-detail__form-input,
.kc-detail__form-textarea {
  padding: 10px 12px;
  border: 1px solid var(--md-outline, #d1d5db);
  border-radius: 6px;
  font-size: 14px;
  color: var(--md-on-surface, #1f2937);
  background: var(--md-surface, #ffffff);
  transition: border-color var(--kc-transition-fast);
}

.kc-detail__form-input:focus,
.kc-detail__form-textarea:focus {
  outline: none;
  border-color: var(--aav-primary, #9e23a3);
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 0.1);
}

.kc-detail__form-textarea {
  min-height: 100px;
  resize: vertical;
}

.kc-detail__form-hint {
  font-size: 11px;
  color: var(--md-on-surface-variant, #6b7280);
}

/* Dark mode for detail */
[data-theme="dark"] .kc-detail {
  background: var(--bg-primary, #1a1a1a);
  border-color: var(--border-color, #333);
}

[data-theme="dark"] .kc-detail__header,
[data-theme="dark"] .kc-detail__footer {
  background: var(--bg-secondary, #252525);
  border-color: var(--border-color, #333);
}

[data-theme="dark"] .kc-detail__title,
[data-theme="dark"] .kc-detail__section-title,
[data-theme="dark"] .kc-detail__section-content,
[data-theme="dark"] .kc-detail__next-steps li {
  color: var(--text-primary, #e5e5e5);
}

[data-theme="dark"] .kc-detail__meta,
[data-theme="dark"] .kc-detail__provenance-toggle,
[data-theme="dark"] .kc-detail__provenance-content {
  color: var(--text-secondary, #9ca3af);
}

[data-theme="dark"] .kc-detail__description,
[data-theme="dark"] .kc-detail__confidence,
[data-theme="dark"] .kc-detail__provenance {
  background: var(--bg-secondary, #252525);
}

[data-theme="dark"] .kc-detail__form-input,
[data-theme="dark"] .kc-detail__form-textarea {
  background: var(--bg-secondary, #252525);
  border-color: var(--border-color, #333);
  color: var(--text-primary, #e5e5e5);
}

/* =============================================================================
   Message Attachments Container
   ============================================================================= */

.message-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-left: 40px;
}

.message-attachments:empty {
  display: none;
}

/* =============================================================================
   Responsive Adjustments
   ============================================================================= */

@media (max-width: 768px) {
  .kc-mini {
    min-height: 44px;
    padding: 6px 10px;
  }

  .kc-card__header {
    flex-wrap: wrap;
  }

  .kc-card--compact {
    max-width: 100%;
  }

  .kc-detail {
    border-radius: 0;
  }

  .kc-detail__header,
  .kc-detail__body,
  .kc-detail__footer {
    padding: 12px 16px;
  }

  .message-attachments {
    padding-left: 0;
  }
}

/* =============================================================================
   Accessibility
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .kc-mini,
  .kc-card,
  .kc-detail,
  .kc-action-btn,
  .kc-detail__confidence-fill {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .kc-card,
  .kc-detail {
    border-width: 2px;
  }

  .kc-badge {
    border: 1px solid currentColor;
  }
}

/* =============================================================================
   Evidence Section - Issue #200 Compliant
   ============================================================================= */

/* Evidence Section Container */
.kc-evidence {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .kc-evidence {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Evidence Section Header */
.kc-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.kc-section-icon {
  color: #60a5fa; /* Accent blue */
  flex-shrink: 0;
}

/* Evidence List */
.kc-evidence-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.kc-evidence-item {
  display: flex;
  gap: 8px;
  font-size: 13px; /* Above 12px minimum */
  line-height: 1.5;
}

.kc-evidence-text {
  color: var(--md-on-surface, #1f2937);
}

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

/* Clickable Citation Markers - Issue #200: Minimal Hover States */
.kc-citation-marker,
.kc-citation-link {
  display: inline;
  padding: 0 2px;
  color: #60a5fa;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-weight: 600;
  transition: color 0.15s ease; /* Minimal transition - no transforms */
}

.kc-citation-marker:hover,
.kc-citation-link:hover {
  color: #93c5fd; /* Lighter blue on hover */
  text-decoration: underline;
}

.kc-citation-marker:active,
.kc-citation-link:active {
  color: #3b82f6; /* Slightly darker on click */
}
/**
 * TrustScoreReview — Scientific minimal aesthetic
 *
 * Transparent panel that renders below the KC card during commit.
 * Matches OrchestratorStatus console style: system monospace,
 * hairline borders, neutral grays, progress bar gauge.
 */

/* ═══════════════════════════════════════════════════════════════
   Container
   ═══════════════════════════════════════════════════════════════ */

.trust-compile {
  margin-top: -1px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 0 6px 6px;
  background: transparent;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.65;
  color: #4b5563;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga' 0;
}

/* Status indicator dot — top right */
.trust-compile::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9ca3af;
  opacity: 0.7;
  transition: background-color 300ms ease, opacity 300ms ease;
}

.trust-compile--complete::before {
  background: #10b981;
  opacity: 0.9;
}

.trust-compile--error {
  border-color: rgba(239, 68, 68, 0.2);
}

.trust-compile--error::before {
  background: #ef4444;
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════
   Compile Log
   ═══════════════════════════════════════════════════════════════ */

.trust-compile__log {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Step line */
.trust-compile__step {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  white-space: nowrap;
  animation: tc-step-in 150ms ease forwards;
}

.trust-compile__icon {
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  font-size: 9px;
  line-height: 1;
}

.trust-compile__text {
  color: #6b7280;
  font-size: 12px;
}

.trust-compile__detail {
  margin-left: auto;
  color: #6b7280;
  font-size: 11px;
}

/* ── Step States ── */

.trust-compile__step--done .trust-compile__icon { color: #10b981; }
.trust-compile__step--done .trust-compile__text { color: #4b5563; }
.trust-compile__step--done .trust-compile__detail { color: #9ca3af; }

.trust-compile__step--passed .trust-compile__icon { color: #6b7280; }

.trust-compile__step--active .trust-compile__icon { color: #3b82f6; }
.trust-compile__step--active .trust-compile__text { color: #4b5563; }

.trust-compile__step--failed .trust-compile__icon { color: #ef4444; }
.trust-compile__step--failed .trust-compile__text { color: #ef4444; }
.trust-compile__step--failed .trust-compile__detail { color: #ef4444; font-weight: 600; }

.trust-compile__step--complete .trust-compile__icon { color: #10b981; }
.trust-compile__step--complete .trust-compile__text { color: #10b981; font-weight: 600; }

.trust-compile__detail--score {
  font-weight: 700;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   Error Block
   ═══════════════════════════════════════════════════════════════ */

.trust-compile__error-block {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.06);
  border-left: 2px solid #ef4444;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: #ef4444;
}

.trust-compile__error-prefix {
  font-weight: 700;
  margin-right: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   Result Body
   ═══════════════════════════════════════════════════════════════ */

.trust-compile__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: tc-reveal 200ms ease forwards;
}

.trust-compile__section {
  margin-top: 4px;
}

/* Section title with hairline — matches kc-detail__section-title */
.trust-compile__section-title {
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #6b7280;
  text-transform: uppercase;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-compile__section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   Source Dependencies
   ═══════════════════════════════════════════════════════════════ */

.trust-compile__dep {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 24px;
  padding: 0 2px;
}

.trust-compile__dep-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 4px;
}

.trust-compile__dep-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4b5563;
  font-size: 12px;
}

.trust-compile__dep-score {
  font-weight: 600;
  font-size: 12px;
  min-width: 24px;
  text-align: right;
}

/* No citations notice */
.trust-compile__notice {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  padding: 4px 2px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   Modifiers (DAG, Type)
   ═══════════════════════════════════════════════════════════════ */

.trust-compile__modifier {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 24px;
  padding: 0 2px;
}

.trust-compile__mod-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
  border-radius: 4px;
}

.trust-compile__mod-info {
  flex: 1;
  color: #9ca3af;
  font-size: 12px;
}

.trust-compile__mod-val {
  font-weight: 600;
  font-size: 12px;
  min-width: 32px;
  text-align: right;
}

.trust-compile__mod-val--pos { color: #10b981; }
.trust-compile__mod-val--neg { color: #f59e0b; }

/* Seed notice */
.trust-compile__seed {
  font-size: 12px;
  color: #10b981;
  padding: 4px 2px;
  margin-top: 4px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   Trust Gauge — Progress Bar
   ═══════════════════════════════════════════════════════════════ */

.trust-compile__gauge {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 2px;
}

.trust-compile__gauge-label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #6b7280;
  min-width: 40px;
  text-transform: uppercase;
}

.trust-compile__gauge-bar {
  flex: 1;
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.trust-compile__gauge-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 200ms ease;
}

.trust-compile__gauge-pct {
  font-weight: 700;
  font-size: 14px;
  min-width: 32px;
  text-align: right;
}

.trust-compile__gauge-level {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.trust-compile__ovr-note {
  font-size: 11px;
  color: #6b7280;
  padding: 0 2px;
  text-decoration: line-through;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   Override Control
   ═══════════════════════════════════════════════════════════════ */

.trust-compile__override {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.trust-compile__flag-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}

.trust-compile__flag-btn:hover {
  color: #374151;
  border-color: #9ca3af;
}

.trust-compile__slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trust-compile__slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trust-compile__flag-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.02em;
}

.trust-compile__reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 10px;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  transition: color 150ms;
}

.trust-compile__reset:hover {
  color: #374151;
}

.trust-compile__slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust-compile__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(
    to right,
    var(--slider-color) var(--slider-pct, 50%),
    rgba(0, 0, 0, 0.08) var(--slider-pct, 50%)
  );
  outline: none;
  cursor: pointer;
}

.trust-compile__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--slider-color, #10b981);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 100ms ease;
}

.trust-compile__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.trust-compile__slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--slider-color, #10b981);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.trust-compile__slider-val {
  font-weight: 700;
  font-size: 13px;
  min-width: 36px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   Action Buttons
   ═══════════════════════════════════════════════════════════════ */

.trust-compile__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.trust-compile__btn {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 150ms ease;
}

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

/* Cancel (was Abort) */
.trust-compile__btn--cancel {
  background: transparent;
  color: var(--md-on-surface-variant, #6b7280);
  border-color: var(--md-outline, #d1d5db);
}

.trust-compile__btn--cancel:hover {
  background: var(--md-surface-variant, #f3f4f6);
  color: var(--md-on-surface, #1f2937);
}

/* Commit */
.trust-compile__btn--commit {
  background: #10b981;
  color: #fff;
  border: none;
}

.trust-compile__btn--commit:hover {
  background: #059669;
}

/* Ghost (error actions) */
.trust-compile__btn--ghost {
  background: transparent;
  color: var(--md-on-surface-variant, #6b7280);
  border-color: var(--md-outline, #d1d5db);
  font-weight: 500;
}

.trust-compile__btn--ghost:hover {
  background: var(--md-surface-variant, #f3f4f6);
  color: var(--md-on-surface, #1f2937);
}

/* ═══════════════════════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════════════════════ */

@keyframes tc-step-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tc-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   Reduced Motion
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .trust-compile__step {
    animation: none;
    opacity: 1;
  }

  .trust-compile__body {
    animation: none;
    opacity: 1;
  }

  .trust-compile__gauge-fill {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .trust-compile {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: #9ca3af;
}

[data-theme="dark"] .trust-compile--error {
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .trust-compile::before {
  background: #6b7280;
}

[data-theme="dark"] .trust-compile--complete::before {
  background: #34d399;
}

[data-theme="dark"] .trust-compile--error::before {
  background: #ef4444;
}

/* Steps */
[data-theme="dark"] .trust-compile__step--done .trust-compile__text,
[data-theme="dark"] .trust-compile__step--active .trust-compile__text {
  color: #d1d5db;
}

[data-theme="dark"] .trust-compile__step--done .trust-compile__detail {
  color: #6b7280;
}

/* Error block */
[data-theme="dark"] .trust-compile__error-block {
  background: rgba(239, 68, 68, 0.1);
}

/* Section title hairline */
[data-theme="dark"] .trust-compile__section-title::after {
  background: rgba(255, 255, 255, 0.1);
}

/* Sources */
[data-theme="dark"] .trust-compile__dep-label {
  color: #d1d5db;
}

[data-theme="dark"] .trust-compile__dep-type {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

/* Modifiers */
[data-theme="dark"] .trust-compile__mod-type {
  background: rgba(129, 140, 248, 0.15);
  color: #818cf8;
}

[data-theme="dark"] .trust-compile__mod-info {
  color: #6b7280;
}

/* Gauge */
[data-theme="dark"] .trust-compile__gauge-bar {
  background: rgba(255, 255, 255, 0.08);
}

/* Override */
[data-theme="dark"] .trust-compile__override {
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .trust-compile__flag-btn {
  border-color: rgba(255, 255, 255, 0.12);
  color: #9ca3af;
}

[data-theme="dark"] .trust-compile__flag-btn:hover {
  color: #d1d5db;
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .trust-compile__reset:hover {
  color: #d1d5db;
}

[data-theme="dark"] .trust-compile__slider {
  background: linear-gradient(
    to right,
    var(--slider-color) var(--slider-pct, 50%),
    rgba(255, 255, 255, 0.08) var(--slider-pct, 50%)
  );
}

[data-theme="dark"] .trust-compile__slider::-webkit-slider-thumb {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .trust-compile__slider::-moz-range-thumb {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Actions */
[data-theme="dark"] .trust-compile__actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .trust-compile__btn--cancel {
  color: #9ca3af;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .trust-compile__btn--cancel:hover {
  color: #d1d5db;
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .trust-compile__btn--commit {
  background: #10b981;
}

[data-theme="dark"] .trust-compile__btn--commit:hover {
  background: #059669;
}

[data-theme="dark"] .trust-compile__btn--ghost {
  color: #9ca3af;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .trust-compile__btn--ghost:hover {
  color: #d1d5db;
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .trust-compile__notice {
  color: #9ca3af;
}

[data-theme="dark"] .trust-compile__seed {
  color: #34d399;
}
/* 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;
  }
}

/* Indeterminate progress animation - Proposal 1: #254 */
/* Unidirectional slide: bar enters from left, exits right, loops continuously */
@keyframes indeterminate-progress {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}

/* 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;
  transition: transform 0.2s ease;
}

.stage-indicator svg {
  width: 100%;
  height: 100%;
}

/* Spinning animation for active stage indicator */
.stage-indicator.spinning {
  animation: spin 1.5s linear infinite;
}

.stage-indicator.spinning svg {
  color: #9e23a3;
}

/* 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);
}

/* Knowledge source selector (demo scaffolding) */
.knowledge-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 640px) {
  .knowledge-source-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.knowledge-source-card {
  text-align: left;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.knowledge-source-card:hover {
  transform: translateY(-1px);
  border-color: rgba(158, 35, 163, 0.22);
  background: rgba(158, 35, 163, 0.04);
}

.knowledge-source-card.selected {
  border-color: rgba(158, 35, 163, 0.35);
  background: rgba(158, 35, 163, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.knowledge-source-card.disabled {
  opacity: 0.45;
  filter: grayscale(1);
  cursor: not-allowed;
}

.knowledge-source-card.disabled:hover {
  transform: none;
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

/* Dark mode support for knowledge source cards */
[data-theme="dark"] .knowledge-source-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .knowledge-source-card:hover {
  border-color: rgba(158, 35, 163, 0.35);
  background: rgba(158, 35, 163, 0.08);
}

[data-theme="dark"] .knowledge-source-card.selected {
  border-color: rgba(158, 35, 163, 0.5);
  background: rgba(158, 35, 163, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .knowledge-source-card.disabled {
  opacity: 0.4;
}

[data-theme="dark"] .knowledge-source-card.disabled:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .knowledge-source-title {
  color: var(--text-primary, #e0e0e0);
}

[data-theme="dark"] .knowledge-source-description {
  color: var(--text-secondary, #9aa0a6);
}

[data-theme="dark"] .knowledge-source-icon {
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.2), rgba(111, 45, 189, 0.18));
  border-color: rgba(158, 35, 163, 0.3);
}

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

.knowledge-source-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(158, 35, 163, 0.12), rgba(111, 45, 189, 0.10));
  border: 1px solid rgba(158, 35, 163, 0.18);
  color: #9e23a3;
}

.knowledge-source-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #202124);
  margin-bottom: 3px;
}

.knowledge-source-description {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-secondary, #5f6368);
}

/* Removed badge styles (we now grey out disabled connectors instead) *//**
 * 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);
  }
}

/**
 * GoogleDriveImport Component Styles (Issue #216)
 * Styling for Google Drive folder import feature
 */

/* Import Button */
.google-drive-import {
  margin-top: 16px;
}

.drive-import-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #1a73e8;
  background: rgba(26, 115, 232, 0.08);
  border: 1px dashed rgba(26, 115, 232, 0.4);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drive-import-button:hover:not(:disabled) {
  background: rgba(26, 115, 232, 0.12);
  border-color: rgba(26, 115, 232, 0.6);
}

.drive-import-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.drive-access-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* Modal Overlay */
.drive-import-modal-overlay,
.import-progress-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal Container */
.drive-import-modal,
.import-progress-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modal Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.header-icon {
  color: #1a73e8;
}

.header-icon.success {
  color: #34a853;
}

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

.modal-close {
  background: none;
  border: none;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  border-radius: 8px;
  transition: background 0.2s;
}

.modal-close:hover {
  background: #f0f0f0;
}

/* Modal Content */
.modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Analyzing State */
.analyzing-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 16px;
}

/* Error State */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 16px;
  color: #d93025;
}

.error-state button {
  padding: 12px 20px;
  min-height: 44px;
  background: #d93025;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* Analysis Summary */
.analysis-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 16px;
}

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

.summary-label {
  font-size: 11px;
  color: #666;
  text-align: center;
}

.summary-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.summary-value.success {
  color: #34a853;
}

.summary-value.muted {
  color: #999;
}

/* File Lists */
.skipped-files,
.supported-files {
  margin-top: 16px;
}

.skipped-header,
.supported-header {
  font-size: 13px;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
}

.skipped-files ul,
.supported-files ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 6px;
}

.skipped-files li,
.supported-files li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.skipped-files li:last-child,
.supported-files li:last-child {
  border-bottom: none;
}

.file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}

.skip-reason {
  font-size: 11px;
  color: #999;
  margin-left: 8px;
}

.file-type {
  font-size: 11px;
  color: #666;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

.check-icon {
  color: #34a853;
  flex-shrink: 0;
  margin-right: 8px;
}

.more-skipped,
.more-files {
  color: #666;
  font-style: italic;
}

/* Modal Footer */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #eee;
}

.cancel-button {
  padding: 12px 20px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.cancel-button:hover {
  background: #e0e0e0;
}

.import-button {
  padding: 12px 20px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: #1a73e8;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.import-button:hover:not(:disabled) {
  background: #1557b0;
}

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

/* Progress Modal Specific */
.progress-summary {
  margin-bottom: 16px;
}

.progress-bar-container {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #1a73e8, #34a853);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}

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

.stat.completed {
  color: #34a853;
}

.stat.failed {
  color: #d93025;
}

.stat.total {
  color: #666;
  margin-left: auto;
}

.current-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #e8f0fe;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #1a73e8;
}

.files-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 8px;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
}

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

.file-item.completed {
  background: rgba(52, 168, 83, 0.05);
}

.file-item.failed {
  background: rgba(217, 48, 37, 0.05);
}

.file-item.downloading,
.file-item.processing {
  background: rgba(26, 115, 232, 0.05);
}

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

.file-info .file-name {
  font-size: 13px;
}

.file-status {
  flex-shrink: 0;
  margin-left: 12px;
}

.status-text {
  font-size: 12px;
  color: #666;
}

.error-message {
  font-size: 12px;
  color: #d93025;
}

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

.status-icon.pending {
  color: #999;
}

.status-icon.downloading {
  color: #1a73e8;
}

.status-icon.processing {
  color: #1a73e8;
}

.status-icon.completed {
  color: #34a853;
}

.status-icon.failed {
  color: #d93025;
}

/* Completion state */
.completion-message {
  flex: 1;
}

.success-message {
  margin: 0;
  color: #34a853;
  font-size: 14px;
}

.partial-message {
  margin: 0;
  color: #f9ab00;
  font-size: 14px;
}

.done-button {
  padding: 12px 24px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: #34a853;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.done-button:hover {
  background: #2d8f47;
}

/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e0e0e0;
  border-top-color: #1a73e8;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

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

/* Picker Loading/Error States */
.drive-picker-loading,
.drive-picker-error {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  text-align: center;
  z-index: 1001;
}

.drive-picker-loading p,
.drive-picker-error p {
  margin-top: 16px;
  color: #666;
}

.drive-picker-error {
  color: #d93025;
}

.drive-picker-error button {
  margin-top: 16px;
  padding: 12px 20px;
  min-height: 44px;
  background: #d93025;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* ========== Dark Mode Support ========== */

[data-theme="dark"] .drive-import-button {
  color: #8ab4f8;
  background: rgba(138, 180, 248, 0.1);
  border-color: rgba(138, 180, 248, 0.4);
}

[data-theme="dark"] .drive-import-button:hover:not(:disabled) {
  background: rgba(138, 180, 248, 0.15);
  border-color: rgba(138, 180, 248, 0.6);
}

[data-theme="dark"] .drive-access-hint {
  color: #9aa0a6;
}

[data-theme="dark"] .drive-import-modal,
[data-theme="dark"] .import-progress-modal {
  background: #2a2a2a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .modal-header h3 {
  color: #e8eaed;
}

[data-theme="dark"] .header-icon {
  color: #8ab4f8;
}

[data-theme="dark"] .modal-close {
  color: #9aa0a6;
}

[data-theme="dark"] .modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .analysis-summary {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .summary-label {
  color: #9aa0a6;
}

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

[data-theme="dark"] .skipped-header,
[data-theme="dark"] .supported-header {
  color: #9aa0a6;
}

[data-theme="dark"] .skipped-files ul,
[data-theme="dark"] .supported-files ul {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .skipped-files li,
[data-theme="dark"] .supported-files li {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .file-name {
  color: #e8eaed;
}

[data-theme="dark"] .skip-reason {
  color: #9aa0a6;
}

[data-theme="dark"] .file-type {
  color: #9aa0a6;
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .modal-footer {
  border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .cancel-button {
  color: #e8eaed;
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .cancel-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .import-button {
  background: #8ab4f8;
  color: #1a1a1a;
}

[data-theme="dark"] .import-button:hover:not(:disabled) {
  background: #aecbfa;
}

[data-theme="dark"] .progress-bar-container {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .current-file {
  background: rgba(138, 180, 248, 0.1);
  color: #8ab4f8;
}

[data-theme="dark"] .files-list {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .file-item {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .file-item.completed {
  background: rgba(52, 168, 83, 0.1);
}

[data-theme="dark"] .file-item.failed {
  background: rgba(217, 48, 37, 0.1);
}

[data-theme="dark"] .file-item.downloading,
[data-theme="dark"] .file-item.processing {
  background: rgba(138, 180, 248, 0.1);
}

[data-theme="dark"] .status-text {
  color: #9aa0a6;
}

[data-theme="dark"] .drive-picker-loading,
[data-theme="dark"] .drive-picker-error {
  background: #2a2a2a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .drive-picker-loading p {
  color: #9aa0a6;
}

[data-theme="dark"] .spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: #8ab4f8;
}
/**
 * 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: 44px;
  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: 8px;
  height: 34px;
  padding: 0 14px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  position: relative;
  user-select: none;
}

.tab:hover {
  background: rgba(158, 35, 163, 0.06);
  border-color: rgba(158, 35, 163, 0.25);
  color: #9e23a3;
}

.tab.active {
  background: rgba(158, 35, 163, 0.12);
  border-color: rgba(158, 35, 163, 0.4);
  color: #7f1b83;
  font-weight: 600;
}

/* Tab icon */
.tab-icon {
  display: flex;
  align-items: center;
  opacity: 0.8;
  color: #6b7280;
}

.tab:hover .tab-icon {
  opacity: 1;
  color: #9e23a3;
}

.tab.active .tab-icon {
  opacity: 1;
  color: #7f1b83;
}

/* 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: 18px;
  height: 18px;
  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(0, 0, 0, 0.08);
  color: #9ca3af;
}

/* New project button */
.tab-new-project {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
  font-weight: 500;
  color: #5f6368;
  white-space: nowrap;
  margin-left: 4px;
}

.tab-new-project:hover {
  background: rgba(158, 35, 163, 0.06);
  border-color: rgba(158, 35, 163, 0.4);
  color: #9e23a3;
}

/* Tab type variants */
.workspace-tab.active {
  border-bottom: 2px solid #4CAF50;
}

.project-tab.active {
  border-bottom: 2px solid rgba(158, 35, 163, 0.6);
}

/* Mode accents (Explorer vs Project) */
.tab-bar.mode-explorer {
  border-bottom-color: rgba(56, 189, 248, 0.25);
}

.tab-bar.mode-project {
  border-bottom-color: rgba(158, 35, 163, 0.25);
}

.tab-bar.mode-explorer .tab.active {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.35);
  color: #0f172a;
}

.tab-bar.mode-explorer .tab.active .tab-icon {
  color: #0284c7;
}

.tab-bar.mode-explorer .workspace-tab.active {
  border-bottom: 2px solid rgba(56, 189, 248, 0.6);
}

/* 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(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .tab:hover {
  background: rgba(200, 127, 208, 0.12);
  border-color: rgba(200, 127, 208, 0.35);
  color: #c87fd0;
}

[data-theme="dark"] .tab.active {
  background: rgba(200, 127, 208, 0.2);
  border-color: rgba(200, 127, 208, 0.5);
  color: #f0e6f3;
}

[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: #f0e6f3;
}

[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(255, 255, 255, 0.16);
}

[data-theme="dark"] .tab-new-project:hover {
  background: rgba(200, 127, 208, 0.12);
  border-color: rgba(200, 127, 208, 0.45);
  color: #c87fd0;
}

[data-theme="dark"] .tab-bar.mode-explorer {
  border-bottom-color: rgba(56, 189, 248, 0.18);
}

[data-theme="dark"] .tab-bar.mode-project {
  border-bottom-color: rgba(200, 127, 208, 0.28);
}

[data-theme="dark"] .tab-bar.mode-explorer .tab.active {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #e2e8f0;
}

[data-theme="dark"] .tab-bar.mode-explorer .tab.active .tab-icon {
  color: #38bdf8;
}

/* ========================================
   User Menu Section (Right Side of TabBar)
   ======================================== */

.tab-user-section {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 12px;
}

.tab-user-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-user-button:hover {
  background: rgba(158, 35, 163, 0.1);
}

.tab-user-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tab-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9e23a3 0%, #7f1b83 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.tab-user-chevron {
  color: #5f6368;
  transition: transform 0.2s ease;
}

.tab-user-chevron.open {
  transform: rotate(180deg);
}

/* User Dropdown */
.tab-user-dropdown {
  width: 280px;
  background: #1c1b1f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  font-size: 14px;
}

.tab-dropdown-user-info {
  padding: 16px;
}

.tab-dropdown-user-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.tab-dropdown-role-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.tab-dropdown-user-email {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}

.tab-dropdown-env {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tab-dropdown-env-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.tab-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.tab-dropdown-section-label {
  padding: 8px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
}

.tab-dropdown-team-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tab-dropdown-team-count {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.tab-dropdown-members {
  max-height: 150px;
  overflow-y: auto;
}

.tab-dropdown-loading {
  padding: 12px 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.tab-dropdown-member {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}

.tab-dropdown-member:hover:not(:disabled) {
  background: rgba(158, 35, 163, 0.1);
}

.tab-dropdown-member:disabled {
  cursor: default;
}

.tab-dropdown-member.current {
  background: rgba(158, 35, 163, 0.15);
}

.tab-dropdown-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.tab-dropdown-member-info {
  flex: 1;
  min-width: 0;
}

.tab-dropdown-member-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-dropdown-member-email {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-dropdown-current-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
}

.tab-dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-align: left;
}

.tab-dropdown-menu-item:hover:not(.disabled) {
  background: rgba(158, 35, 163, 0.1);
}

.tab-dropdown-menu-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tab-dropdown-menu-item.signout:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.tab-dropdown-badge {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

/* Dark mode adjustments for user dropdown */
[data-theme="dark"] .tab-user-chevron {
  color: rgba(255, 255, 255, 0.6);
}
/**
 * ProjectModal - Streamlined project creation modal
 * Design: Clean, minimal, frictionless
 */

/* Overlay */
.project-modal-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: 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-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.25s ease;
  color: #202124;
}

.project-modal-compact {
  max-width: 440px;
}

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

/* Header */
.project-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 16px;
}

.project-modal-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-modal-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #202124;
}

.project-modal-subtitle {
  margin: 0;
  font-size: 13px;
  color: #5f6368;
  font-weight: 400;
}

.project-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #9aa0a6;
  transition: all 0.15s ease;
  margin-top: -4px;
}

.project-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #5f6368;
}

/* Body */
.project-modal-body {
  padding: 0 24px 24px;
  overflow-y: auto;
  flex: 1;
  background: #ffffff;
}

/* Error message */
.project-modal-error {
  padding: 10px 14px;
  margin-bottom: 16px;
  background: rgba(244, 67, 54, 0.08);
  border-radius: 8px;
  color: #d32f2f;
  font-size: 13px;
}

/* Field */
.project-modal-field {
  margin-bottom: 16px;
}

.project-modal-field:last-child {
  margin-bottom: 0;
}

.project-modal-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #202124;
}

.field-optional {
  font-size: 11px;
  font-weight: 400;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.field-helper {
  font-size: 12px;
  color: #5f6368;
  margin-top: 6px;
  line-height: 1.4;
}

/* Primary field - larger input for main action */
.project-modal-field-primary input {
  font-size: 16px;
  padding: 14px 16px;
}

.project-modal-field input,
.project-modal-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: #f8f9fa;
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: #202124;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.project-modal-field input:hover,
.project-modal-field textarea:hover {
  background: #f1f3f4;
}

.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.08);
}

.project-modal-field input:disabled,
.project-modal-field textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.project-modal-field input::placeholder,
.project-modal-field textarea::placeholder {
  color: #9aa0a6;
}

.project-modal-field textarea {
  resize: none;
  min-height: 56px;
  line-height: 1.5;
}

/* 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.06);
}

/* Buttons */
.project-modal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  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;
  color: #5f6368;
}

.project-modal-button.secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  color: #202124;
}

.project-modal-button.primary {
  background: #9e23a3;
  color: #ffffff;
  padding: 10px 24px;
}

.project-modal-button.primary:hover:not(:disabled) {
  background: #b52bb3;
  box-shadow: 0 4px 12px rgba(158, 35, 163, 0.3);
}

.project-modal-button .spinner {
  animation: spin 1s linear infinite;
}

/* 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);
}

/* Collapsible Document Section */
.project-modal-field-collapsible {
  margin-top: 8px;
}

.document-toggle-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  background: #f8f9fa;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #5f6368;
  cursor: pointer;
  transition: all 0.15s ease;
}

.document-toggle-button:hover:not(:disabled) {
  background: #f1f3f4;
  color: #202124;
}

.document-toggle-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.document-toggle-button span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.document-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #9e23a3;
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
}

.document-selection-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  color: #9aa0a6;
  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: 12px 0;
  color: #9aa0a6;
  font-size: 13px;
  font-style: italic;
}

.document-selection-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 8px;
  border-radius: 8px;
  background: #f8f9fa;
}

.document-selection-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.document-selection-item:first-child {
  border-radius: 8px 8px 0 0;
}

.document-selection-item:last-child {
  border-radius: 0 0 8px 8px;
}

.document-selection-item:only-child {
  border-radius: 8px;
}

.document-selection-item:hover {
  background: rgba(158, 35, 163, 0.06);
}

.document-selection-item.selected {
  background: rgba(158, 35, 163, 0.1);
}

.document-selection-item input[type="checkbox"] {
  display: none;
}

.document-selection-item .checkbox-icon {
  color: #bdbdbd;
  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: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dark mode support */
[data-theme="dark"] .project-modal {
  background: #1e1e1e;
  color: #e0e0e0;
}

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

[data-theme="dark"] .project-modal-subtitle {
  color: #9aa0a6;
}

[data-theme="dark"] .project-modal-close {
  color: #6b6b6b;
}

[data-theme="dark"] .project-modal-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #9aa0a6;
}

[data-theme="dark"] .project-modal-body {
  background: #1e1e1e;
}

[data-theme="dark"] .project-modal-error {
  background: rgba(244, 67, 54, 0.12);
  color: #ef5350;
}

[data-theme="dark"] .project-modal-field label {
  color: #e0e0e0;
}

[data-theme="dark"] .field-optional {
  color: #6b6b6b;
}

[data-theme="dark"] .project-modal-field input,
[data-theme="dark"] .project-modal-field textarea {
  background: #2a2a2a;
  border-color: transparent;
  color: #e0e0e0;
}

[data-theme="dark"] .project-modal-field input:hover,
[data-theme="dark"] .project-modal-field textarea:hover {
  background: #333333;
}

[data-theme="dark"] .project-modal-field input:focus,
[data-theme="dark"] .project-modal-field textarea:focus {
  background: #2a2a2a;
  border-color: #9e23a3;
}

[data-theme="dark"] .project-modal-field input::placeholder,
[data-theme="dark"] .project-modal-field textarea::placeholder {
  color: #6b6b6b;
}

[data-theme="dark"] .project-modal-footer {
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .project-modal-button.secondary {
  color: #9aa0a6;
}

[data-theme="dark"] .project-modal-button.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  color: #e0e0e0;
}

[data-theme="dark"] .document-toggle-button {
  background: #2a2a2a;
  color: #9aa0a6;
}

[data-theme="dark"] .document-toggle-button:hover:not(:disabled) {
  background: #333333;
  color: #e0e0e0;
}

[data-theme="dark"] .document-selection-list {
  background: #2a2a2a;
}

[data-theme="dark"] .document-selection-item:hover {
  background: rgba(158, 35, 163, 0.1);
}

[data-theme="dark"] .document-selection-item.selected {
  background: rgba(158, 35, 163, 0.15);
}

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

[data-theme="dark"] .document-selection-item .checkbox-icon {
  color: #5f5f5f;
}

[data-theme="dark"] .document-selection-loading {
  color: #6b6b6b;
}

[data-theme="dark"] .document-selection-empty {
  color: #6b6b6b;
}

[data-theme="dark"] .field-helper {
  color: #9aa0a6;
}

[data-theme="dark"] .char-count {
  color: #6b6b6b;
}

/* TagSelector styles for ProjectModal */
.tag-selector {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f1f3f4;
  border-radius: 8px;
}

.tag-selector-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #5f6368;
  margin-bottom: 8px;
}

.tag-selector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 16px;
  font-size: 12px;
  color: #5f6368;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tag-chip:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #9e23a3;
  color: #9e23a3;
}

.tag-chip.selected {
  background: rgba(158, 35, 163, 0.1);
  border-color: #9e23a3;
  color: #9e23a3;
}

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

.tag-count {
  opacity: 0.7;
}

[data-theme="dark"] .tag-selector {
  background: #333333;
}

[data-theme="dark"] .tag-selector-label {
  color: #9aa0a6;
}

[data-theme="dark"] .tag-chip {
  background: #2a2a2a;
  border-color: #4a4a4a;
  color: #9aa0a6;
}

[data-theme="dark"] .tag-chip:hover:not(:disabled) {
  background: #333333;
  border-color: #9e23a3;
  color: #9e23a3;
}

[data-theme="dark"] .tag-chip.selected {
  background: rgba(158, 35, 163, 0.15);
  border-color: #9e23a3;
  color: #9e23a3;
}

[data-theme="dark"] .char-count.warning {
  color: #fbbf24;
}

[data-theme="dark"] .char-count.error {
  color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════
   Visibility — Segmented Control
   ═══════════════════════════════════════════════════════════════ */

.visibility-segmented {
  display: flex;
  background: #f1f3f4;
  border-radius: 10px;
  padding: 3px;
}

.visibility-segment {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #5f6368;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  white-space: nowrap;
}

.visibility-segment:hover:not(:disabled):not(.active) {
  color: #202124;
  background: rgba(0, 0, 0, 0.04);
}

.visibility-segment.active {
  background: #ffffff;
  color: #202124;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

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

/* Collaborator Picker — Chips */
.collaborator-picker {
  margin-top: 10px;
}

.collaborator-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.collaborator-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  background: #f8f9fa;
  border: 1.5px solid #dadce0;
  border-radius: 20px;
  font-size: 13px;
  color: #5f6368;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.collaborator-chip:hover:not(:disabled) {
  border-color: #9e23a3;
  color: #9e23a3;
}

.collaborator-chip.selected {
  background: rgba(158, 35, 163, 0.08);
  border-color: #9e23a3;
  color: #9e23a3;
}

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

.collaborator-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dadce0;
  color: #5f6368;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.collaborator-chip.selected .collaborator-avatar {
  background: #9e23a3;
  color: #ffffff;
}

.collaborator-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: #9aa0a6;
  font-size: 13px;
}

.collaborator-loading .spinner {
  animation: spin 1s linear infinite;
}

.collaborator-empty {
  padding: 8px 0;
  color: #9aa0a6;
  font-size: 13px;
  font-style: italic;
}

/* Bulk Document Actions */
.document-bulk-actions {
  padding: 4px 12px 8px;
}

.bulk-select-button {
  font-size: 12px;
  color: #9e23a3;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  font-family: inherit;
}

.bulk-select-button:hover:not(:disabled) {
  color: #b52bb3;
}

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

/* ═══════════════════════════════════════════════════════════════
   Visibility & Collaborator Dark Mode
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .visibility-segmented {
  background: #2a2a2a;
}

[data-theme="dark"] .visibility-segment {
  color: #9aa0a6;
}

[data-theme="dark"] .visibility-segment:hover:not(:disabled):not(.active) {
  color: #e0e0e0;
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .visibility-segment.active {
  background: #3a3a3a;
  color: #e0e0e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .collaborator-chip {
  background: #2a2a2a;
  border-color: #4a4a4a;
  color: #9aa0a6;
}

[data-theme="dark"] .collaborator-chip:hover:not(:disabled) {
  border-color: #9e23a3;
  color: #b86fc0;
}

[data-theme="dark"] .collaborator-chip.selected {
  background: rgba(158, 35, 163, 0.12);
  border-color: #9e23a3;
  color: #b86fc0;
}

[data-theme="dark"] .collaborator-avatar {
  background: #4a4a4a;
  color: #9aa0a6;
}

[data-theme="dark"] .collaborator-chip.selected .collaborator-avatar {
  background: #9e23a3;
  color: #ffffff;
}

[data-theme="dark"] .collaborator-loading {
  color: #6b6b6b;
}

[data-theme="dark"] .collaborator-empty {
  color: #6b6b6b;
}

[data-theme="dark"] .bulk-select-button {
  color: #b86fc0;
}

[data-theme="dark"] .bulk-select-button:hover:not(:disabled) {
  color: #d68de0;
}
/* 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;
}

.panel-group-wrapper.collapsed {
  /* Reserve a gutter for the floating expand button */
  padding-left: 52px;
}

/* 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 */
  /* Smooth panel transitions */
  transition: opacity 0.2s ease;
}

/* Collapsed icon bar smooth appearance */
.collapsed-icon-bar {
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  will-change: width, opacity;
}

/* Floating expand button for collapsed knowledge pane */
.collapsed-fab {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  z-index: 60;
}

.collapsed-fab:hover {
  transform: scale(1.05);
  border-color: rgba(158, 35, 163, 0.4);
  box-shadow: 0 10px 24px rgba(158, 35, 163, 0.2);
}

[data-theme="dark"] .collapsed-fab {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .collapsed-fab:hover {
  border-color: rgba(200, 127, 208, 0.4);
}


/* Flat Purple Resize Handles - Minimal Scientific Style */
.sci-resize-handle {
  background: rgba(158, 35, 163, 0.35);
  transition: background 0.15s ease;
  position: relative;
  z-index: 30;
}

.sci-resize-handle:hover {
  background: rgba(158, 35, 163, 0.6);
}

.sci-resize-handle:active {
  background: #9e23a3;
}

.sci-resize-handle:focus {
  background: rgba(158, 35, 163, 0.6);
  outline: none;
}

/* Horizontal Handle (between Knowledge and Agents+Workspace) */
.sci-resize-handle.horizontal {
  width: 3px;
  cursor: col-resize;
}

.sci-resize-handle.horizontal:hover {
  width: 5px;
}

/* Vertical Handle (between Agents and Workspace) */
.sci-resize-handle.vertical {
  height: 3px;
  cursor: row-resize;
}

.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);
  }

  /* Enhancement 8: Enforce 44px minimum touch targets for accessibility */
  button,
  a,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  .header-tab-btn {
    padding: 12px 16px;
    min-height: 44px;
  }

  .collapsed-icon-bar button {
    width: 44px;
    height: 44px;
  }

  /* Mobile content area adjustment for bottom bar */
  .sci-mobile-content {
    padding-bottom: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
  }

  /* Mobile bottom bar styling */
  .mobile-bottom-bar {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }

  [data-theme="dark"] .mobile-bottom-bar {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  }
}

@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 flat purple resize handles */
[data-theme="dark"] .sci-resize-handle {
  background: rgba(200, 127, 208, 0.4);
}

[data-theme="dark"] .sci-resize-handle:hover {
  background: rgba(200, 127, 208, 0.7);
}

[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 - Minimal Aavishkar Branding
 * Prism mark + purple spinner on clean background
 */

/* ===== 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;

  /* Light with Aavishkar purple sheen */
  background:
    radial-gradient(ellipse 800px 400px at 20% 10%, rgba(200,127,208,0.10), transparent 50%),
    radial-gradient(ellipse 700px 350px at 80% 25%, rgba(158,35,163,0.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 55%, #f3f6fb 100%),
    #f8fafc;

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  z-index: 9999;
}

/* Dark mode */
[data-theme="dark"] .loading-screen-m3 {
  background:
    radial-gradient(ellipse 800px 400px at 20% 10%, rgba(158,35,163,0.2), transparent 50%),
    radial-gradient(ellipse 700px 350px at 80% 25%, rgba(11,68,123,0.18), transparent 55%),
    linear-gradient(160deg,
      rgba(42,16,74,1) 0%,
      rgba(75,28,128,0.98) 35%,
      rgba(18,47,92,0.98) 70%,
      rgba(42,16,74,1) 100%),
    #1a1330;
}

/* ===== LOGO MARK ===== */
.loading-logo-mark {
  height: 64px;
  width: 64px;
  object-fit: contain;
  padding: 20px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9)),
    radial-gradient(circle at 30% 30%, rgba(200,127,208,0.08), transparent 60%);
  border: 1px solid rgba(158,35,163,0.08);
  box-shadow:
    0 8px 24px rgba(42,16,74,0.10),
    0 2px 6px rgba(158,35,163,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(158,35,163,0.05);
  opacity: 0;
  transform: scale(0.96);
  animation: logoFadeIn 0.4s ease-out forwards;
}

[data-theme="dark"] .loading-logo-mark {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)),
    radial-gradient(circle at 30% 30%, rgba(158,35,163,0.15), transparent 60%);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.4),
    0 4px 12px rgba(158,35,163,0.2),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

@keyframes logoFadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== SPINNER ===== */
.loading-spinner-m3 {
  width: 24px;
  height: 24px;
  margin-top: 20px;
}

.spinner-svg {
  width: 100%;
  height: 100%;
  animation: spinnerRotate 2s linear infinite;
}

.spinner-track {
  stroke: rgba(158,35,163,0.12);
}

.spinner-progress {
  stroke: #9e23a3;
  stroke-dasharray: 126;
  stroke-dashoffset: 60;
  animation: spinnerDash 1.5s ease-in-out infinite;
}

@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;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
  .loading-logo-mark {
    height: 48px;
    width: 48px;
    padding: 16px;
  }

  .loading-spinner-m3 {
    width: 20px;
    height: 20px;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .loading-logo-mark {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }

  .spinner-svg {
    animation-duration: 4s;
  }

  .spinner-progress {
    animation: none;
    stroke-dasharray: 63, 126;
    stroke-dashoffset: -31;
  }
}
/* 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);
}
/* 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 */
/* Enhanced for crisp, high-quality rendering on all displays */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Global font smoothing for crisp text */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Optimize text rendering for legibility */
  text-rendering: optimizeLegibility;
  /* Prevent font size adjustment on mobile */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

:root {
  /* Beta Color Palette */
  --primary-blue: #2563eb;
  --primary-purple: #9e23a3;
  --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;
  /* Crisp font rendering */
  font-feature-settings: 'liga' 1, 'kern' 1;
  font-kerning: normal;
  /* Prevent blurry transforms */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Ensure all text elements render crisply */
h1, h2, h3, h4, h5, h6, p, span, div, button, input, textarea, label, a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Crisp icon rendering */
svg {
  shape-rendering: geometricPrecision;
}

/* Prevent subpixel rendering issues with transforms */
.transform-gpu {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 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: rgba(158, 35, 163, 0.25);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(158, 35, 163, 0.4);
}

/* 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-purple);
  box-shadow: 0 0 0 3px rgba(158, 35, 163, 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;
}