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

/* ===== VERIFYING STATE ===== */
.auth-verifying {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
}

.auth-verifying-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(158,35,163,0.15);
  border-top-color: #9e23a3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.auth-verifying-text {
  font-size: 14px;
  color: #5f6368;
  font-weight: 500;
}

[data-theme="dark"] .auth-verifying-text {
  color: #9aa0a6;
}

[data-theme="dark"] .auth-verifying-spinner {
  border-color: rgba(200,127,208,0.2);
  border-top-color: #c87fd0;
}

/* ===== LEGAL LINKS ===== */
.auth-legal-links {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
}

.auth-legal-links a {
  color: #5f6368;
  text-decoration: none;
  transition: color 0.2s;
}

.auth-legal-links a:hover {
  color: #9e23a3;
}

.auth-legal-links span {
  color: #dadce0;
}

[data-theme="dark"] .auth-legal-links {
  border-top-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .auth-legal-links a {
  color: #9aa0a6;
}

[data-theme="dark"] .auth-legal-links a:hover {
  color: #c87fd0;
}

[data-theme="dark"] .auth-legal-links span {
  color: rgba(255,255,255,0.15);
}

/* ===== 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;
  }
}
/* Shared Legal Page Styling — Aavishkar Brand */

.legal-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #202124;
}

.legal-header {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.legal-header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.legal-header-logo img {
  height: 36px;
  width: 36px;
  object-fit: contain;
}

.legal-header-logo span {
  font-size: 16px;
  font-weight: 600;
  color: #202124;
}

.legal-header-back {
  font-size: 13px;
  color: #9e23a3;
  text-decoration: none;
  font-weight: 500;
}

.legal-header-back:hover {
  text-decoration: underline;
}

.legal-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px 64px;
}

.legal-content h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #202124;
}

.legal-content .legal-meta {
  font-size: 13px;
  color: #5f6368;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.legal-content h2 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 12px;
  color: #202124;
}

.legal-content h3 {
  font-size: 15px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 8px;
  color: #202124;
}

.legal-content p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 12px;
  color: #3c4043;
}

.legal-content ul {
  padding-left: 24px;
  margin-bottom: 12px;
}

.legal-content li {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 6px;
  color: #3c4043;
}

.legal-content a {
  color: #9e23a3;
  text-decoration: none;
}

.legal-content a:hover {
  text-decoration: underline;
}

.legal-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 32px 48px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
}

.legal-footer a {
  color: #5f6368;
  text-decoration: none;
}

.legal-footer a:hover {
  color: #9e23a3;
}

.legal-footer span {
  color: #dadce0;
}

/* ===== DARK MODE ===== */
[data-theme="dark"] .legal-page {
  background:
    radial-gradient(ellipse 800px 400px at 20% 10%, rgba(158,35,163,0.12), transparent 50%),
    radial-gradient(ellipse 700px 350px at 80% 25%, rgba(11,68,123,0.10), transparent 55%),
    linear-gradient(160deg, rgba(42,16,74,1) 0%, rgba(26,26,30,1) 100%);
  color: #e0e0e0;
}

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

[data-theme="dark"] .legal-header-logo span {
  color: #e0e0e0;
}

[data-theme="dark"] .legal-content h1,
[data-theme="dark"] .legal-content h2,
[data-theme="dark"] .legal-content h3 {
  color: #e0e0e0;
}

[data-theme="dark"] .legal-content .legal-meta {
  color: #9aa0a6;
  border-bottom-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .legal-content p,
[data-theme="dark"] .legal-content li {
  color: #bdc1c6;
}

[data-theme="dark"] .legal-footer {
  border-top-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .legal-footer a {
  color: #9aa0a6;
}

[data-theme="dark"] .legal-footer span {
  color: rgba(255,255,255,0.15);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .legal-header {
    padding: 16px 20px;
  }

  .legal-content {
    padding: 32px 20px 48px;
  }

  .legal-content h1 {
    font-size: 24px;
  }

  .legal-footer {
    padding: 20px 20px 32px;
  }
}
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-0cdd387c.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-30da91e8.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-68534840.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-de7701e4.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-1ae6bd74.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-07d8e303.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-5d53e70a.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-3398dd02.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-ed0b7437.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-74444efd.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-9be7ceb8.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-9163df9c.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-51814d27.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-5e28753b.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-1e6f9579.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-0f60d1b8.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-c76c5d69.woff) format("woff"),url(/assets/KaTeX_Main-Bold-138ac28d.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-99cd42a3.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-a6f7ec0d.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-70ee1f64.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-97479ca6.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-f1d6ef86.woff) format("woff"),url(/assets/KaTeX_Main-Italic-0d85ae7c.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-c2342cd8.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-c6368d87.woff) format("woff"),url(/assets/KaTeX_Main-Regular-d0332f52.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-dc47344d.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-850c0af5.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-f9377ab0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-7af58c5e.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-8a8d2445.woff) format("woff"),url(/assets/KaTeX_Math-Italic-08ce98e5.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-e99ae511.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-ece03cfd.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-1ece03f7.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-00b26ac8.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-91ee6750.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-3931dd81.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-68e8c73e.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-11e4dc8a.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-f36ea897.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-036d4e95.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-d96cdf2b.woff) format("woff"),url(/assets/KaTeX_Script-Regular-1c67f068.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-6b47c401.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-c943cc98.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-95b6d2f1.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-d04c5421.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-2014c523.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-a6b2099f.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-6ab6b62e.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-500e04d5.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-a4af7d41.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-99f9c675.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-c647367d.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-71d517d6.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-e14fed02.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-f01f3e87.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.40"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
.workspace-pane {
  --chat-font-size: var(--type-md);
  --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: var(--color-surface);
  color: var(--color-text-primary);
  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(--color-surface);
  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: var(--font-primary);
  font-size: var(--type-sm);
  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: var(--type-xs);
  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: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--motion-fast) ease;
}

.header-compact-btn:hover {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  border-color: rgba(158, 35, 163, 0.25);
}

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

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

.header-status-icon.saving {
  color: var(--color-brand);
}

.header-status-icon.saved {
  color: var(--color-success);
}

.header-status-icon.error {
  color: var(--color-error);
}

.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: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--motion-fast) ease;
}

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

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

.font-value {
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  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: var(--color-text-secondary);
  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: var(--color-text-muted);
}

[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: var(--color-text-muted);
}

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

[data-theme="dark"] .font-value {
  color: var(--color-text-muted);
}

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

[data-theme="dark"] .presence-count-small {
  color: var(--color-text-muted);
}

/* 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: var(--color-text-secondary);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.context-mode-trigger:hover:not(:disabled) {
  border-color: rgba(158, 35, 163, 0.35);
  color: var(--color-brand);
  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: var(--color-brand-dark);
}
.context-mode-trigger.is-narrowed::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand);
  margin-right: 4px;
}

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

.context-mode-menu {
  position: absolute;
  right: 0;
  bottom: 40px;
  min-width: 320px;
  background: var(--color-surface);
  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: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  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: var(--color-brand);
  color: #ffffff;
  font-size: var(--type-sm);
  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: var(--color-text-muted);
  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: var(--type-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
}

.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: var(--type-sm);
  font-weight: var(--weight-medium);
}

.quality-suggestions {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  font-size: var(--type-sm);
  color: var(--color-text-secondary);
}

.quality-suggestions .suggestions-label {
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  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: var(--color-border);
}

/* 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: var(--type-sm);
  font-weight: var(--weight-medium);
}

.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: var(--color-brand);
  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: var(--color-surface);
  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: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

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

.composer-menu-label {
  font-size: var(--type-sm);
  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: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.composer-menu-btn:hover:not(:disabled) {
  color: var(--color-brand);
}

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

.composer-menu-value {
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  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: var(--type-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.composer-menu-item:hover {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
}

.composer-menu-meta {
  margin-left: auto;
  font-size: var(--type-sm);
  color: var(--color-text-secondary);
}

[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: var(--color-text-muted);
}

[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: var(--color-text-muted);
}

@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: var(--color-surface);
  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: var(--type-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  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: var(--type-xs);
  font-weight: var(--weight-bold);
  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: var(--color-success);
}

.pane-status-chip.loading {
  background: var(--color-brand-subtle);
  border: 1px solid rgba(158, 35, 163, 0.2);
  color: var(--color-brand);
}

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

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

.pane-status-chip.loading .status-dot {
  background: var(--color-brand);
  animation: pulse 1.5s ease-in-out infinite;
}

/* Header Meta Text - Subtle info like node counts */
.header-meta-text {
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  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: var(--color-brand);
}

.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: var(--type-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.header-pill-btn:hover {
  background: var(--color-brand-subtle);
  border-color: rgba(158, 35, 163, 0.25);
  color: var(--color-brand);
}

.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: var(--color-brand);
}

/* 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, var(--color-brand) 0%, var(--color-brand-dark) 100%);
  border-radius: 8px;
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  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, var(--color-brand) 0%, var(--color-brand-dark) 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  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: var(--color-brand);
}
.header-persistence-indicator.saved {
  color: var(--color-success);
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.06);
}
.header-persistence-indicator.error {
  color: var(--color-error);
  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: var(--color-surface);
  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: var(--type-sm);
  color: #222;
  cursor: pointer;
}
.header-more-item:hover {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
}
.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: var(--type-sm);
  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: var(--color-surface);
  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: var(--type-xs);
  font-weight: var(--weight-bold);
  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: var(--type-xs);
  font-weight: var(--weight-bold);
  color: #666;
  margin-left: 4px;
}

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

.presence-count {
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
}

/* ===== 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: var(--type-sm);
  font-weight: var(--weight-bold);
  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: var(--type-sm);
  color: #666;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stage-name {
  font-size: var(--type-sm);
  color: var(--color-brand);
  font-weight: var(--weight-bold);
}

.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: var(--color-success);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  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: var(--color-surface-subtle);
  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: var(--type-base);
  font-weight: var(--weight-medium);
  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: var(--color-success);
}

.presence-indicator.away {
  background: var(--color-warning);
}

.presence-indicator.offline {
  background: var(--color-text-secondary);
}

/* Typing indicator for presence */
.presence-indicator.typing {
  background: var(--color-info);
  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: var(--type-base);
  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 var(--color-border);
  border-radius: 6px;
  color: #666;
  font-size: var(--type-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.presence-toggle:hover {
  background: var(--color-surface-subtle);
  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: var(--type-sm);
  font-weight: var(--weight-medium);
  transition: all 0.15s ease;
}

.tab-button:hover {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
}

.tab-button.active {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
  color: white;
  border-color: var(--color-brand);
  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: var(--type-sm);
  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: var(--type-sm);
  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: var(--type-sm);
  font-weight: var(--weight-medium);
  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: var(--color-success);
  opacity: 0.8;
}

.persistence-indicator.error {
  color: var(--color-warning);
  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: var(--type-sm);
  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: var(--type-xs);
  font-weight: var(--weight-bold);
  color: #6b21a8;
}

.message-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46, 125, 50, 0.08);
  color: var(--color-success);
  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: var(--type-sm);
  font-weight: var(--weight-bold);
  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;
}

/* Project goal — prominent in empty state */
.empty-state-goal {
  font-size: 14px;
  font-style: italic;
  color: rgba(0, 0, 0, 0.55);
  max-width: 520px;
  text-align: center;
  line-height: 1.5;
  padding: 8px 16px;
  background: rgba(158, 35, 163, 0.04);
  border-left: 3px solid rgba(158, 35, 163, 0.3);
  border-radius: 0 8px 8px 0;
  margin: 0;
}

[data-theme="dark"] .empty-state-goal {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(158, 35, 163, 0.06);
  border-left-color: rgba(158, 35, 163, 0.4);
}

/* 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 var(--color-border);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.message.user {
  background: var(--color-surface-subtle);
  margin-left: 20%;
}

.message.assistant {
  background: var(--color-surface);
  border-color: #8b5cf6;
  max-width: 65%; /* UX feedback: restrict agent output width for readability */
}

.message.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--color-error);
}

.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: var(--type-sm);
  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: var(--type-sm);
  color: #666;
}

.sender {
  font-weight: var(--weight-bold);
}

.timestamp {
  font-size: var(--type-xs);
}

/* W1.14: Cursor-like compact, readable message sizing */
.message-content {
  font-size: var(--chat-font-size, 12px);
  line-height: 1.6;
  color: #2c2c2c;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* 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 (now inside CollapsibleSuggestionBlock) */
.citation-reference-link {
  display: block;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--motion-fast) ease;
  font-size: var(--type-sm);
  line-height: 1.5;
}
.citation-reference-link:hover {
  color: var(--color-info);
}
[data-theme="dark"] .citation-reference-link {
  color: var(--color-text-muted);
}
[data-theme="dark"] .citation-reference-link: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 var(--color-border);
}

.citations h5 {
  margin: 0 0 8px 0;
  font-size: var(--type-sm);
  color: #666;
}

.citation-item {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--type-sm);
}

.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: var(--type-sm);
  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 */
}

/* #356: Push input area above fixed mobile bottom nav bar */
@media (max-width: 768px) {
  .input-area {
    padding-bottom: calc(18px + 64px + env(safe-area-inset-bottom, 0px));
  }
}

.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: var(--type-sm);
  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: var(--type-sm);
  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: var(--color-text-primary);
  font-size: var(--type-sm);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}

.next-step-chip:hover:not(:disabled) {
  background: var(--color-brand-subtle);
  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: var(--type-sm);
  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;
}

/* Ghost suggestion overlay (Tab-to-accept follow-up query) */
.message-input-wrapper {
  position: relative;
  flex: 1;
}

.message-input-ghost {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 60px;
  font-size: var(--type-md);
  color: rgba(0, 0, 0, 0.22);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  z-index: 1;
}

.message-input-ghost__key {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: var(--type-xs);
  font-family: inherit;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  color: rgba(0, 0, 0, 0.25);
  vertical-align: middle;
  line-height: 1.4;
}

[data-theme="dark"] .message-input-ghost {
  color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .message-input-ghost__key {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.2);
}

.message-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  resize: none;
  font-family: inherit;
  font-size: var(--type-md);
  line-height: 1.5;
  min-height: 52px;
  max-height: 160px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.015);
  transition: border-color 0.2s ease,
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.2s ease;
}

.message-input:hover:not(:focus) {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.01);
}

.message-input:focus {
  outline: none;
  border-color: var(--color-brand);
  background: var(--color-surface);
  box-shadow:
    0 0 0 3px rgba(158, 35, 163, 0.08),
    0 2px 12px rgba(158, 35, 163, 0.06);
}

.send-button {
  padding: 12px 14px;
  background: linear-gradient(145deg, #6f2dbd 0%, #9e23a3 50%, #6f2dbd 100%);
  background-size: 200% 200%;
  background-position: 50% 50%;
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease,
              background-position 0.3s ease;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(111, 45, 189, 0.3);
}

.send-button:hover:not(:disabled) {
  background-position: 100% 50%;
  box-shadow:
    0 6px 20px rgba(111, 45, 189, 0.35),
    0 2px 6px rgba(158, 35, 163, 0.15);
  transform: translateY(-1px);
}

.send-button:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 2px 6px rgba(111, 45, 189, 0.25);
}

.send-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  background: rgba(158, 35, 163, 0.5);
}

/* 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 */
}

/* Dark theme: scientific table rendering (Issue #349) */
[data-theme="dark"] .message-content .markdown-content thead {
  border-bottom-color: rgba(158, 35, 163, 0.4);
}

[data-theme="dark"] .message-content .markdown-content th {
  background: rgba(158, 35, 163, 0.1);
  color: #d4a0d6;
}

[data-theme="dark"] .message-content .markdown-content td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .message-content .markdown-content tbody tr:nth-child(even) {
  background: rgba(158, 35, 163, 0.05);
}

[data-theme="dark"] .message-content .markdown-content tbody tr:hover {
  background: rgba(158, 35, 163, 0.1);
}

[data-theme="dark"] .message-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e6e1e5;
}

[data-theme="dark"] .message-input:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .message-input::placeholder {
  color: #777;
}

[data-theme="dark"] .message-input:focus {
  border-color: #c87fd0;
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 3px rgba(200, 127, 208, 0.1),
    0 2px 12px rgba(158, 35, 163, 0.08);
}

[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: var(--color-brand);
  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(--font-primary);
  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: var(--type-sm);
  font-weight: var(--weight-bold);
  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: var(--type-sm);
  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: var(--type-base);
  font-weight: var(--weight-bold);
  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: var(--type-base);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
  transition: all var(--motion-normal) var(--motion-easing);
}

.quick-actions-header:hover {
  background: var(--color-brand-subtle);
  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: var(--color-brand);
  flex-shrink: 0;
}

.quick-actions-count {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 400;
}

.quick-actions-chevron {
  color: var(--color-text-muted);
  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 — aligned with compass strip */
.quick-actions--inline {
  margin-top: 6px;
  margin-bottom: 2px;
}

.quick-actions--inline .quick-actions-header {
  padding: 8px 12px;
  font-size: var(--type-sm);
  border-radius: 10px;
  border-color: rgba(158, 35, 163, 0.1);
  background: rgba(139, 92, 246, 0.02);
}

.quick-actions--inline .quick-actions-header:hover {
  background: rgba(139, 92, 246, 0.05);
  border-color: rgba(158, 35, 163, 0.2);
}

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

@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: var(--type-base);
  line-height: 1.45;
  cursor: pointer;
  transition: all var(--motion-fast) var(--motion-easing);
  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: var(--type-sm);
  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: var(--color-brand-subtle);
  border-color: var(--color-brand);
  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: var(--type-sm);
  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: var(--color-brand);
  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(--font-primary);
  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: var(--type-sm);
  line-height: 1.4;
}

/* Response time indicator */
.response-time {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  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 var(--color-border);
}

.technical-details summary {
  cursor: pointer;
  color: var(--md-on-surface-variant, #49454f);
  font-size: var(--type-sm);
  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: var(--font-mono);
  font-size: var(--type-sm);
}

.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: var(--color-brand);
  font-size: var(--md-title-small, 14px);
}

.citation-doc {
  font-size: var(--type-sm);
  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: var(--color-brand);
  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: var(--color-text-muted);
}

.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: var(--type-xs);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-muted);
}

.scope-indicator.team {
  background: rgba(59, 130, 246, 0.05);
  color: var(--color-info);
}

[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: var(--color-brand);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 0.2s var(--motion-easing);
}

.copy-response-btn:hover {
  background: var(--color-brand-subtle);
  border-color: rgba(158, 35, 163, 0.4);
}

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

.copy-response-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  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, var(--color-warning) 0%, #d97706 100%);
  border-radius: 9px;
  font-size: var(--type-sm);
  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);
  }
}

/* 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: var(--type-sm);
  font-weight: var(--weight-medium);
  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: var(--type-xs);
  font-weight: var(--weight-bold);
  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: var(--type-sm);
}

.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: var(--color-warning);
  color: var(--color-text-primary);
}

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

/* ===== 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: var(--type-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.proofs-cheat-badge {
  padding: 2px 6px;
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  background: rgba(158, 35, 163, 0.1);
  color: var(--color-brand);
  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: var(--color-text-secondary);
  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: var(--color-surface);
  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 var(--color-brand);
  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: var(--color-brand);
}

.welcome-card-title {
  font-family: 'dinmedium', 'Inter', sans-serif;
  font-size: var(--type-md);
  font-weight: var(--weight-bold);
  color: #0f0f1a;
  margin: 12px 0 6px;
  letter-spacing: -0.01em;
}

.welcome-card-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Hover arrow indicator */
.welcome-card-arrow {
  color: var(--color-brand);
  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: var(--color-text-muted);
}

[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: var(--font-mono);
  font-size: var(--type-base);
}

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

/* Scientific table rendering (Issue #349) */
.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: var(--chat-font-size, 12px);
  line-height: 1.5;
  overflow-wrap: break-word;
}

.markdown-content thead {
  border-bottom: 2px solid rgba(158, 35, 163, 0.25);
}

.markdown-content th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: calc(var(--chat-font-size, 12px) - 0.5px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--aav-primary, #9e23a3);
  background: rgba(158, 35, 163, 0.04);
  white-space: nowrap;
}

.markdown-content td {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
}

.markdown-content tbody tr:nth-child(even) {
  background: rgba(158, 35, 163, 0.02);
}

.markdown-content tbody tr:hover {
  background: rgba(158, 35, 163, 0.06);
}

/* data-align and .markdown-table-wrapper styles moved to knowledge-card.css —
   KCTextRenderer is used in DAG/ProofsTab which don't load WorkspacePane.css */

/* 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: var(--type-sm);
  font-weight: var(--weight-bold);
  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: var(--type-xs);
  font-weight: var(--weight-bold);
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.message .citation-text {
  flex: 1;
  font-size: var(--type-sm);
  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: var(--type-sm);
  font-weight: var(--weight-medium);
  transition: all var(--motion-fast) 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;
}

/* ===== Docked Proofs Panel (Proofline 2.0) ===== */
.proofs-docked-panel {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 35vh;
  min-height: 220px;
  background: var(--sci-bg-primary, #ffffff);
  /* Allow panel to overlay chat when expanded large */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: calc(100% - 48px); /* Leave room for header bar */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .proofs-docked-panel {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.proofs-docked-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.proofs-docked-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand);
  font-size: var(--type-base);
  font-weight: var(--weight-bold);
}

.proofs-docked-title {
  font-family: 'dinmedium', 'Inter', sans-serif;
}

.proofs-docked-badge {
  font-size: var(--type-sm);
  background: rgba(158, 35, 163, 0.1);
  color: var(--color-brand);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}

.proofs-docked-close {
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.proofs-docked-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .proofs-docked-close {
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .proofs-docked-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.proofs-docked-content {
  flex: 1;
  overflow: auto;
}

/* When resizable, panel height is set via JS — remove fixed constraints */
.proofs-docked-panel--resizable {
  height: auto;
}

/* ===== Proofs Panel Resize Handle ===== */
.proofs-resize-handle {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  flex-shrink: 0;
  background: transparent;
  position: relative;
  transition: background 0.15s ease;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  touch-action: none;
}

.proofs-resize-handle:hover {
  background: rgba(158, 35, 163, 0.06);
}

.proofs-resize-handle:active {
  background: rgba(158, 35, 163, 0.1);
}

.proofs-resize-handle:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

.proofs-resize-handle:focus-visible .proofs-resize-grip {
  background: rgba(158, 35, 163, 0.55);
  width: 64px;
}

/* Grab pill — the visual affordance */
.proofs-resize-grip {
  width: 48px;
  height: 5px;
  border-radius: 3px;
  background: rgba(158, 35, 163, 0.3);
  transition: background 0.15s ease, width 0.15s ease, transform 0.15s ease;
}

.proofs-resize-handle:hover .proofs-resize-grip {
  width: 64px;
  background: rgba(158, 35, 163, 0.55);
  transform: scaleY(1.3);
}

.proofs-resize-handle:active .proofs-resize-grip {
  background: var(--color-brand);
  width: 72px;
  transform: scaleY(1.5);
}

/* Dark mode */
[data-theme="dark"] .proofs-resize-handle {
  border-top-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .proofs-resize-handle:hover {
  background: rgba(158, 35, 163, 0.06);
}

[data-theme="dark"] .proofs-resize-grip {
  background: rgba(158, 35, 163, 0.3);
}

[data-theme="dark"] .proofs-resize-handle:hover .proofs-resize-grip {
  background: rgba(158, 35, 163, 0.6);
}

[data-theme="dark"] .proofs-resize-handle:active .proofs-resize-grip {
  background: #b44abf;
}

/* ===== STAGE JOURNEY PILL (Header) ===== */
.header-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(158, 35, 163, 0.06);
  border: 1px solid rgba(158, 35, 163, 0.14);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  color: var(--color-brand);
  white-space: nowrap;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}

.header-stage-pill:hover {
  background: rgba(158, 35, 163, 0.10);
  border-color: rgba(158, 35, 163, 0.28);
  box-shadow: 0 0 12px rgba(158, 35, 163, 0.10);
}

.stage-pill-label {
  letter-spacing: 0.03em;
  text-transform: capitalize;
}

.stage-pill-count {
  font-weight: var(--weight-medium);
  opacity: 0.6;
  font-size: var(--type-xs);
  font-variant-numeric: tabular-nums;
}

/* Thin separator dot between label and count */
.stage-pill-count::before {
  content: "·";
  margin-right: 4px;
  opacity: 0.4;
}

[data-theme="dark"] .header-stage-pill {
  background: rgba(158, 35, 163, 0.12);
  border-color: rgba(200, 127, 208, 0.22);
  color: #c87fd0;
}

[data-theme="dark"] .header-stage-pill:hover {
  background: rgba(158, 35, 163, 0.18);
  border-color: rgba(200, 127, 208, 0.35);
  box-shadow: 0 0 14px rgba(158, 35, 163, 0.15);
}

/* ===== POST-COMMIT KC ANNOTATION ===== */
@keyframes kc-committed-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kc-committed-annotation {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  background: rgba(158, 35, 163, 0.05);
  border-radius: 0 0 8px 8px;
  border: 1px solid rgba(158, 35, 163, 0.10);
  border-top: none;
  animation: kc-committed-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.kc-committed-annotation svg {
  color: #6f2dbd;
  transition: color 0.25s ease;
  flex-shrink: 0;
}

.kc-committed-annotation:hover svg {
  color: var(--color-brand);
}

[data-theme="dark"] .kc-committed-annotation {
  color: #c87fd0;
  background: rgba(158, 35, 163, 0.10);
  border-color: rgba(200, 127, 208, 0.16);
}

[data-theme="dark"] .kc-committed-annotation svg {
  color: #c87fd0;
}

[data-theme="dark"] .kc-committed-annotation:hover svg {
  color: #e0a8e8;
}

@media (prefers-reduced-motion: reduce) {
  .kc-committed-annotation {
    animation: none;
  }
}

/* Committed KC parent message — gradient left border accent */
.message-content.message--has-committed-kc {
  border-left: 3px solid transparent;
  border-image: linear-gradient(
    180deg,
    rgba(111, 45, 189, 0.35) 0%,
    rgba(158, 35, 163, 0.30) 50%,
    rgba(200, 127, 208, 0.18) 100%
  ) 1;
  padding-left: 12px;
}

[data-theme="dark"] .message-content.message--has-committed-kc {
  border-image: linear-gradient(
    180deg,
    rgba(200, 127, 208, 0.35) 0%,
    rgba(158, 35, 163, 0.28) 50%,
    rgba(111, 45, 189, 0.15) 100%
  ) 1;
}

/* ===== MOBILE COMPOSER FIX ===== */
@media (max-width: 480px) {
  .message-input-container {
    flex-wrap: wrap;
    gap: 8px;
    transition: gap 0.15s ease;
  }

  .message-input {
    min-width: 0;
    width: 100%;
    order: 1;
    font-size: 16px; /* Prevent iOS zoom on focus */
    border-radius: 10px;
  }

  .composer-tools {
    order: 0;
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 2px;
  }

  .send-button {
    order: 2;
    margin-left: auto;
    border-radius: 10px;
  }

  .context-mode-trigger {
    font-size: var(--type-sm);
    padding: 0 8px;
    height: 28px;
    border-radius: 8px;
  }

  .composer-more-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  /* Stage pill compact on mobile */
  .header-stage-pill {
    height: 22px;
    padding: 0 8px;
    font-size: var(--type-xs);
  }
}

/* #356: Prevent KC cards and message content from overflowing on mobile */
@media (max-width: 768px) {
  .kc-card--attached {
    max-width: 100%;
    overflow-x: hidden;
  }
  .message-content {
    max-width: calc(100vw - 32px);
    overflow-x: hidden;
  }
}

/* =====================================================
   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(158, 35, 163, 0.06);
  overflow: hidden;
}

.console-progress-fill {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(111, 45, 189, 0.4) 30%,
    rgba(158, 35, 163, 0.8) 50%,
    rgba(111, 45, 189, 0.4) 70%,
    transparent 100%
  );
  animation: progress-slide 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

/* 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: 11px;
  letter-spacing: 0.06em;
  -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 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.12);
  border-radius: 6px;
  color: #059669;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.console-tool.executing .tool-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  animation: tool-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

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

/* Clickable source badges (Issue #329) */
.console-sources.clickable,
.console-evidence.clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.console-sources.clickable:hover {
  background: rgba(59, 130, 246, 0.18);
}

.console-sources.completed.clickable:hover {
  background: rgba(16, 185, 129, 0.18);
}

.console-evidence.clickable:hover {
  background: rgba(59, 130, 246, 0.18);
}

.sources-chevron {
  opacity: 0.5;
  margin-left: 2px;
  transition: opacity 0.15s ease;
}

.clickable:hover .sources-chevron {
  opacity: 1;
}

[data-theme="dark"] .console-sources.clickable:hover {
  background: rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .console-sources.completed.clickable:hover {
  background: rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .console-evidence.clickable:hover {
  background: rgba(96, 165, 250, 0.25);
}

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

/* Agent evidence counter (sufficiency gate) */
.console-evidence {
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 6px;
  color: #3b82f6;
  font-weight: 500;
  font-size: 11px;
  flex-shrink: 0;
}

/* Agent iteration badge (Issue #278) */
.console-agent-iter {
  padding: 2px 6px;
  background: rgba(139, 92, 246, 0.08);
  border-radius: 6px;
  color: #8b5cf6;
  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-evidence {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

[data-theme="dark"] .console-agent-iter {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

[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(158, 35, 163, 0.08);
}

[data-theme="dark"] .console-progress-fill {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 127, 208, 0.3) 30%,
    rgba(200, 127, 208, 0.7) 50%,
    rgba(200, 127, 208, 0.3) 70%,
    transparent 100%
  );
}

[data-theme="dark"] .console-tool {
  border-color: rgba(52, 211, 153, 0.15);
}

[data-theme="dark"] .console-tool.executing .tool-dot {
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}
/* 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 */

/* 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 session-dropdown-trigger pill style */
.session-share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: var(--aav-primary, #9e23a3);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.session-share-trigger svg {
  width: 14px;
  height: 14px;
  color: var(--aav-primary, #9e23a3);
}

.session-share-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);
  box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35);
}

.session-share-trigger:active {
  transform: translateY(1px);
}

.session-share-trigger.has-invites {
  border-color: rgba(158, 35, 163, 0.45);
  background: rgba(158, 35, 163, 0.06);
}

.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: var(--aav-primary, #9e23a3);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
}

.session-share-trigger .chevron {
  transition: transform 0.2s ease;
  color: var(--aav-primary, #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: var(--aav-primary, #9e23a3);
}

.session-share-trigger.compact svg {
  width: 14px;
  height: 14px;
}

.session-share-trigger.compact .chevron {
  display: none;
}

/* Dark theme trigger - matches session-dropdown-trigger dark */
[data-theme="dark"] .session-share-trigger {
  background: rgba(31, 41, 55, 1);
  border-color: rgba(148, 163, 184, 0.6);
  color: #e5e7eb;
}

[data-theme="dark"] .session-share-trigger svg {
  color: #e5e7eb;
}

[data-theme="dark"] .session-share-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);
}

[data-theme="dark"] .session-share-trigger .chevron {
  color: #e5e7eb;
}

/* 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 var(--aav-glass-border, rgba(158, 35, 163, 0.2));
  border-radius: 16px;
  box-shadow: var(--md-elevation-3, 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15));
  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: var(--md-elevation-3, 0px 1px 4px 0px rgba(0, 0, 0, 0.5), 0px 4px 12px 3px rgba(0, 0, 0, 0.25));
}

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

.share-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--md-on-surface-variant, #49454f);
  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: var(--aav-primary, #9e23a3);
}

.share-tab.active {
  color: var(--aav-primary, #9e23a3);
  font-weight: 600;
}

.share-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--aav-primary, #9e23a3);
}

.share-tab svg {
  width: 14px;
  height: 14px;
}

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

[data-theme="dark"] .share-tab {
  color: var(--md-on-surface-variant, #cab6d0);
}

[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: var(--aav-primary, #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: 10px;
}

.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: 8px;
  padding: 6px 8px;
  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: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aav-gradient-button, linear-gradient(145deg, #6f2dbd 0%, #9e23a3 45%, #6f2dbd 100%));
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 50%;
}

.member-info {
  flex: 1;
  min-width: 0;
}

.member-name {
  display: block;
  color: var(--md-on-surface, #1c1b1f);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-role {
  display: block;
  color: var(--md-outline, #79747e);
  font-size: 11px;
  text-transform: capitalize;
}

.member-item .check-icon {
  color: var(--aav-primary, #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: var(--md-on-surface, #e6e1e5);
}

[data-theme="dark"] .member-role {
  color: var(--md-outline, #938f99);
}

/* 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: var(--md-on-surface, #1c1b1f);
  font-size: 12px;
  box-sizing: border-box;
}

.invite-message-input::placeholder {
  color: var(--md-outline, #79747e);
}

.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: var(--md-on-surface, #e6e1e5);
}

[data-theme="dark"] .invite-message-input::placeholder {
  color: var(--md-outline, #938f99);
}

[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: var(--aav-gradient-button, linear-gradient(145deg, #6f2dbd 0%, #9e23a3 45%, #6f2dbd 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) {
  filter: brightness(1.1);
  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: 10px;
}

.inbox-loading,
.inbox-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--md-outline, #79747e);
  font-size: 13px;
}

.inbox-error {
  color: #c62828;
}

[data-theme="dark"] .inbox-loading {
  color: var(--md-outline, #938f99);
}

[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: 24px 16px;
  color: var(--md-outline, #79747e);
}

.invite-empty .empty-icon,
.inbox-empty .empty-icon {
  opacity: 0.4;
  margin-bottom: 12px;
  color: var(--aav-primary, #9e23a3);
}

.invite-empty p,
.inbox-empty p {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-on-surface, #1c1b1f);
}

.invite-empty .empty-hint,
.inbox-empty .empty-hint {
  font-size: 12px;
  color: var(--md-outline, #79747e);
}

[data-theme="dark"] .invite-empty p,
[data-theme="dark"] .inbox-empty p {
  color: var(--md-on-surface, #e6e1e5);
}

[data-theme="dark"] .invite-empty .empty-hint,
[data-theme="dark"] .inbox-empty .empty-hint {
  color: var(--md-outline, #938f99);
}

/* 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: var(--aav-gradient-button, linear-gradient(145deg, #6f2dbd 0%, #9e23a3 45%, #6f2dbd 100%));
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 50%;
}

.inviter-name {
  color: var(--md-on-surface, #1c1b1f);
  font-size: 13px;
  font-weight: 500;
}

[data-theme="dark"] .inviter-name {
  color: var(--md-on-surface, #e6e1e5);
}

.invite-time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--md-outline, #79747e);
  font-size: 11px;
}

[data-theme="dark"] .invite-time {
  color: var(--md-outline, #938f99);
}

.invite-details {
  margin-bottom: 10px;
}

.invite-session {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--md-on-surface, #1c1b1f);
  font-size: 13px;
  margin-bottom: 4px;
}

.invite-session svg {
  color: var(--aav-primary, #9e23a3);
}

[data-theme="dark"] .invite-session {
  color: var(--md-on-surface, #e6e1e5);
}

.invite-message {
  color: var(--md-on-surface-variant, #49454f);
  font-size: 12px;
  font-style: italic;
  margin: 6px 0;
  padding-left: 20px;
}

[data-theme="dark"] .invite-message {
  color: var(--md-on-surface-variant, #cab6d0);
}

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

.expires-label {
  color: var(--md-outline, #79747e);
}

.expires-value {
  color: #e65100;
  font-weight: 500;
}

[data-theme="dark"] .expires-label {
  color: var(--md-outline, #938f99);
}

[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: var(--md-on-surface-variant, #49454f);
  border: 1px solid var(--md-outline-variant, 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: var(--aav-primary, #9e23a3);
  color: white;
}

.invite-action-btn.accept:hover:not(:disabled) {
  background: var(--aav-primary-dark, #7f1b83);
  box-shadow: 0 4px 12px rgba(158, 35, 163, 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: var(--md-on-surface-variant, #cab6d0);
  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);
}
/**
 * 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: Edit-only form (view mode removed in Issue #359)
 *
 * Built on Aavishkar Material Design System variables.
 * @fileoverview KC-002: Base CSS Architecture
 */

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

:root {
  /* KC tokens — reference design system */
  --kc-draft-color: var(--color-warning);
  --kc-draft-bg: rgba(245, 158, 11, 0.12);
  --kc-committed-color: var(--color-success);
  --kc-committed-bg: rgba(16, 185, 129, 0.12);
  --kc-confidence-high: var(--color-success);
  --kc-confidence-medium: var(--color-warning);
  --kc-confidence-low: var(--color-error);
  --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;
  --kc-touch-min: 44px;
  --kc-transition-fast: var(--motion-fast) var(--motion-easing);
  --kc-transition-normal: var(--motion-normal) var(--motion-easing);
}

/* Dark mode overrides */
[data-theme="dark"] {
  --kc-draft-color: var(--color-warning);
  --kc-draft-bg: rgba(251, 191, 36, 0.12);
  --kc-committed-color: var(--color-success);
  --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: var(--type-sm);
  font-weight: var(--weight-medium);
  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-color);
}

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

/* 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(--color-stage-ideation);
}

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

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

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

/* Confidence Badge */
.kc-badge--confidence {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  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(--font-mono);
  font-size: var(--type-sm);
  padding: 2px 6px;
  gap: 3px;
}

/* Lock Badge */
.kc-badge--lock {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  padding: 2px 4px;
}

/* Type Badge - Pill styling (Proofline 2.0) */
.kc-badge--type {
  background: var(--badge-bg, var(--color-brand-subtle));
  color: var(--badge-color, var(--color-brand));
  border-radius: 10px;
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  padding: 2px 8px;
  font-family: var(--font-primary);
}

/* Left accent bar by KC type (Proofline 2.0) */
.kc-card {
  border-left: 4px solid var(--kc-type-color, var(--color-brand));
}

/* Materiality ladder (Proofline 2.0) */
.kc-card--draft {
  border-left-color: var(--kc-type-color, var(--color-warning));
  opacity: 0.95;
}

.kc-card--committed {
  border-left-color: var(--kc-type-color, var(--color-success));
}

.kc-card--superseded {
  border-left-color: #94a3b8;
  opacity: 0.6;
}

/* Micro-derivation context (Proofline 2.0) */
.kc-card__derivation {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: var(--type-sm);
  flex-wrap: wrap;
}

.kc-card__derivation-label {
  color: rgba(0, 0, 0, 0.45);
  font-weight: 500;
}

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

.kc-card__derivation-chip {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  padding: 1px 6px;
  background: var(--color-brand-subtle);
  border-radius: 4px;
  color: var(--color-brand);
}

[data-theme="dark"] .kc-card__derivation-chip {
  background: rgba(158, 35, 163, 0.15);
  color: var(--color-brand);
}

/* Collapsed info — subtitle OR findings preview, 2-line clamp (Issue #256) */
.kc-card__collapsed-preview {
  padding: 2px 10px 4px;
  font-size: var(--type-base);
  color: var(--color-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kc-card--dense .kc-card__collapsed-preview {
  padding: 1px 10px 2px;
  font-size: var(--type-sm);
}

[data-theme="dark"] .kc-card__collapsed-preview {
  color: var(--color-text-secondary);
}

/* =============================================================================
   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: var(--type-base);
  font-weight: var(--weight-medium);
  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(--color-brand);
  outline-offset: 2px;
}

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

/* Commit Button */
.kc-action-btn--commit {
  background: var(--kc-committed-color);
  color: white;
  border-color: var(--kc-committed-color);
  font-weight: var(--weight-medium);
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.25);
}

.kc-action-btn--commit:hover:not(:disabled) {
  background: var(--color-success);
  border-color: var(--color-success);
  filter: brightness(0.85);
  box-shadow: 0 3px 12px rgba(5, 150, 105, 0.3);
  transform: translateY(-1px);
}

.kc-action-btn--commit:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 4px rgba(5, 150, 105, 0.2);
}

/* Discard Button */
.kc-action-btn--discard {
  color: var(--color-error);
  border-color: var(--color-error);
}

.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: var(--color-brand);
  border-color: var(--color-brand);
}

.kc-action-btn--edit:hover:not(:disabled) {
  background: var(--color-brand-subtle);
}

/* View/Expand Button */
.kc-action-btn--expand {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.kc-action-btn--expand:hover:not(:disabled) {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

/* Save Button */
.kc-action-btn--save {
  background: var(--color-brand);
  color: white;
  border-color: var(--color-brand);
}

.kc-action-btn--save:hover:not(:disabled) {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

/* Cancel Button */
.kc-action-btn--cancel {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.kc-action-btn--cancel:hover:not(:disabled) {
  background: var(--color-surface-subtle);
}

/* Dismiss/Close Button */
.kc-action-btn--dismiss {
  padding: 4px;
  min-width: 28px;
  min-height: 28px;
  color: var(--color-text-muted);
  border: none;
  border-radius: 50%;
}

.kc-action-btn--dismiss:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-text-primary);
}

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

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

/* =============================================================================
   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(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--kc-draft-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--kc-transition-normal);
}

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

.kc-mini:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.kc-mini--selected {
  border-color: var(--color-brand);
  background: var(--color-brand-subtle);
}

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

.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(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-mini__description {
  margin: 0;
  font-size: var(--type-sm);
  color: var(--color-text-muted);
  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(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.15s ease;
}

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

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

.kc-card:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

.kc-card--selected {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.15), 0 4px 12px rgba(158, 35, 163, 0.08);
}

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

/* Attached variant: two-row header (badges row + title row) */
.kc-card--attached .kc-card__header {
  flex-direction: column;
  align-items: stretch;
  padding: 10px 12px 8px;
  gap: 4px;
}

.kc-card__header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.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(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Attached collapsed: title wraps to 2 lines for readability */
.kc-card--attached:not(.kc-card--expanded) .kc-card__title {
  font-size: var(--type-md);
  line-height: 1.3;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Attached expanded: single-line title (body has full content) */
.kc-card--attached.kc-card--expanded .kc-card__title {
  font-size: var(--type-md);
}

.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(--color-text-primary);
  line-height: 1.5;
}

.kc-card__so-what {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.kc-card__so-what-label {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Card Footer */
.kc-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
}

/* ---- 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-color);
  border-left-width: 3px;
  background: var(--kc-draft-bg);
  border-radius: 10px;
}

.kc-card--attached:hover {
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1);
}

.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-color);
  background: var(--kc-committed-bg);
}

.kc-card--attached.kc-card--committed:hover {
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1);
}

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

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

/* =============================================================================
   Issue #359: Unified KC rendering — dense, highlighted, checkbox, provenance
   ============================================================================= */

/* ---- Dense mode: tighter spacing for constrained panels (ProofsTab) ---- */
.kc-card--dense .kc-card__header {
  padding: 6px 10px;
}

.kc-card--dense .kc-card__subtitle {
  padding: 2px 10px 4px;
  font-size: 12px;
}

.kc-card--dense .kc-card__derivation {
  padding: 2px 10px;
}

.kc-card--dense .kc-card__body {
  padding: 6px 10px;
}

.kc-card--dense .kc-card__section {
  margin-bottom: 6px;
}

.kc-card--dense .kc-card__section-label {
  font-size: 10px;
  margin-bottom: 2px;
}

.kc-card--dense .kc-card__text {
  font-size: 12.5px;
}

.kc-card--dense .kc-evidence {
  padding: 6px 8px;
  margin-top: 6px;
}

.kc-card--dense .kc-card__footer {
  padding: 4px 10px;
}

/* ---- Highlighted state: cross-pane glow animation ---- */
.kc-card--highlighted {
  box-shadow: 0 0 0 2px rgba(158, 35, 163, 0.25), 0 8px 20px rgba(15, 23, 42, 0.12);
  animation: kcCardGlow 1.2s ease-in-out 2;
}

@keyframes kcCardGlow {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* ---- Selected state for attached variant (multi-select) ---- */
.kc-card--selected.kc-card--attached {
  border-color: #8b5cf6;
  border-width: 2px;
  background: rgba(139, 92, 246, 0.06);
}

[data-theme="dark"] .kc-card--selected.kc-card--attached {
  border-color: #a78bfa;
  background: rgba(139, 92, 246, 0.1);
}

/* ---- Multi-select checkbox ---- */
.kc-card__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color var(--kc-transition-fast), background var(--kc-transition-fast);
}

.kc-card__checkbox:hover {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.kc-card--selected .kc-card__checkbox {
  color: #8b5cf6;
}

[data-theme="dark"] .kc-card--selected .kc-card__checkbox {
  color: #a78bfa;
}

/* ---- Provenance disclosure ---- */
.kc-card__provenance {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 8px;
  padding-top: 4px;
}

[data-theme="dark"] .kc-card__provenance {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.kc-card__provenance-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--kc-transition-fast);
}

.kc-card__provenance-toggle:hover {
  color: var(--color-brand);
}

.kc-card__provenance-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 4px 16px;
}

.kc-card__provenance-item {
  display: flex;
  gap: 6px;
  font-size: 11px;
  line-height: 1.4;
}

.kc-card__provenance-label {
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
  min-width: 50px;
}

.kc-card__provenance-value {
  color: var(--color-text-primary);
  word-break: break-all;
}

.kc-card__provenance-value--mono {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
}

[data-theme="dark"] .kc-card__provenance-value {
  color: var(--color-text-primary);
}

/* ---- Quality warning banner ---- */
.kc-card__quality-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #92400e;
  background: rgba(245, 158, 11, 0.08);
  border-top: 1px solid rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .kc-card__quality-warning {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.06);
}

/* ---- Context action buttons (Focus Here, Explore Further, Edit) ---- */
.kc-action-btn--focus,
.kc-action-btn--explore {
  color: var(--color-brand);
}

.kc-action-btn--focus:hover,
.kc-action-btn--explore:hover {
  background: var(--color-brand-subtle);
}

.kc-action-btn--edit {
  color: var(--color-text-muted);
}

.kc-action-btn--edit:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ---- KC-Card Subtitle (one-line description) ---- */
.kc-card__subtitle {
  padding: 4px 16px 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  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-family: var(--font-mono);
  font-size: var(--type-sm);
  font-weight: var(--weight-regular);
  color: var(--color-brand);
  padding: 2px 6px;
  background: var(--color-brand-subtle);
  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(--color-text-muted);
  margin-bottom: 4px;
  padding-left: 8px;
  border-left: 2px solid var(--color-brand);
}

/* 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(--color-text-primary);
}

/* 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(--color-brand);
  text-decoration: underline;
}

.kc-card__findings-list {
  margin: 0;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.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(--color-text-muted);
}

.kc-card__next-steps {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.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(--color-brand);
  background: var(--color-brand-subtle);
  border-radius: 4px;
  text-decoration: none;
  transition: background var(--kc-transition-fast);
}

.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(--color-text-muted);
  border: none;
  padding: 4px 8px;
}

.kc-action-btn--toggle:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
}

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

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

/* Collapsed state — tighter spacing, actions visible (Issue #256) */
.kc-card--attached:not(.kc-card--expanded) .kc-card__header {
  padding: 6px 10px 4px;
  gap: 2px;
}

.kc-card--attached:not(.kc-card--expanded) .kc-card__footer {
  padding: 4px 10px;
}

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

.kc-card--expanded .kc-card__body {
  animation: kc-section-enter 200ms ease both;
}

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

/* =============================================================================
   KC-Detail Layout (edit-only — Issue #359)
   ============================================================================= */

.kc-detail {
  display: flex;
  flex-direction: column;
  max-width: var(--kc-detail-max-width);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

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

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

/* Header */
.kc-detail__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
}

.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 removed — view mode deleted in Issue #359 */

.kc-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}

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

/* View-mode classes removed — Issue #359 (KCDetail is now edit-only):
   .kc-detail__description, .kc-detail__section, .kc-detail__section-title,
   .kc-detail__section-content, .kc-detail__next-steps, .kc-detail__references,
   .kc-detail__reference, .kc-detail__reference-link,
   .kc-detail__provenance (all variants) — provenance now lives in KCCardAttached */

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

.kc-detail__confidence-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.kc-detail__confidence-bar {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  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 removed — edit mode uses input, Issue #359 */

/* Footer */
.kc-detail__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
}

/* 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(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kc-detail__form-input,
.kc-detail__form-textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: var(--type-base);
  color: var(--color-text-primary);
  background: var(--color-surface);
  transition: border-color var(--kc-transition-fast);
}

.kc-detail__form-input:focus,
.kc-detail__form-textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  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(--color-text-muted);
}

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

/* Dark overrides for view-mode classes removed — Issue #359 */

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

[data-theme="dark"] .kc-detail__confidence {
  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-bottom: 12px;
  padding-left: 0;
}

.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(--color-text-primary);
}

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

/* Claim citation coverage warning (#331) */
.kc-card__citation-coverage {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-top: 6px;
  font-size: 11px;
  color: #b45309;
  background: rgba(245, 158, 11, 0.08);
  border-radius: 4px;
  border-left: 3px solid var(--color-warning);
}

.kc-card__citation-coverage-icon { flex-shrink: 0; }
.kc-card__citation-coverage-text { line-height: 1.3; }

[data-theme="dark"] .kc-card__citation-coverage {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.06);
  border-left-color: #d97706;
}

/* 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 */
}

/* #543: KC-body inline [n] citation markers use the muted-mono "integrity" voice —
   matching the Sources-list [n] numbers, with the Sources link the only brand-colored
   element (AC6). Scoped to .kc-citation-marker only; .kc-citation-link (chat) unchanged.
   Tokens-only (replaces the inherited Arial + hardcoded #60a5fa for this surface). */
.kc-citation-marker {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}
.kc-citation-marker:hover {
  color: var(--color-brand);
}
.kc-citation-marker:active {
  color: var(--color-brand-dark);
}

/* #413 Unified KC reference chip — clickable KC{n} reference rendered
   inline inside KC bodies. Clicking dispatches `proofline:highlight_kcs`
   which the ProoflineDAG listens for and lights up the matching node.
   Styled as a tight inline button: monospace (matches DAG node label),
   subtle purple tint, hover brightens. Keeps visual weight minimal so
   prose flow isn't disrupted. */
.kc-reference-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  margin: 0 1px;
  font-family: 'SF Mono', 'Menlo', 'Consolas', 'Fira Code', monospace;
  font-size: 0.85em;
  font-weight: 600;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.4;
  vertical-align: baseline;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kc-reference-chip:hover {
  background: rgba(124, 58, 237, 0.16);
  border-color: rgba(124, 58, 237, 0.4);
  color: #6d28d9;
}

.kc-reference-chip:active {
  background: rgba(124, 58, 237, 0.22);
}

.kc-reference-chip:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 1px;
}

[data-theme="dark"] .kc-reference-chip {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.28);
}

[data-theme="dark"] .kc-reference-chip:hover {
  background: rgba(167, 139, 250, 0.22);
  border-color: rgba(167, 139, 250, 0.5);
  color: #c4b5fd;
}

/* Table scroll wrapper — used by KCTextRenderer for wide tables (Issue #349).
   Lives here (not WorkspacePane.css) so it loads in every context that renders KCCard:
   chat, ProofsTab, CommitNode/DAG, KCDetail. */
.markdown-table-wrapper {
  overflow-x: auto;
  margin: 12px 0;
  border-radius: 6px;
  border: 1px solid rgba(158, 35, 163, 0.08);
}

.markdown-table-wrapper table {
  margin: 0;
}

[data-theme="dark"] .markdown-table-wrapper {
  border-color: rgba(158, 35, 163, 0.15);
}

/* Table alignment — KCTextRenderer sets data-align on th/td.
   Selectors target both .kc-markdown (KCTextRenderer) and .markdown-content
   (WorkspacePane chat) so alignment works in every rendering context. */
.kc-markdown td[data-align="right"],
.kc-markdown th[data-align="right"],
.markdown-content td[data-align="right"],
.markdown-content th[data-align="right"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: 'Courier New', monospace;
}

.kc-markdown td[data-align="center"],
.kc-markdown th[data-align="center"],
.markdown-content td[data-align="center"],
.markdown-content th[data-align="center"] {
  text-align: center;
}
/* KCCitationChip — clickable KC reference pill for derivation sections + inline citations */

.kc-citation-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px 1px 0;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.3;
  background: rgba(158, 35, 163, 0.06);
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: #4b5563;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  transition: background 0.12s ease;
}

.kc-citation-chip:hover {
  background: rgba(158, 35, 163, 0.12);
  text-decoration: underline;
  text-decoration-color: rgba(158, 35, 163, 0.4);
  text-underline-offset: 2px;
}

.kc-citation-chip:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 1px;
}

.kc-citation-chip__accent {
  width: 3px;
  align-self: stretch;
  border-radius: 4px 0 0 4px;
  flex-shrink: 0;
}

.kc-citation-chip__title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-citation-chip__fallback {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  color: #9e23a3;
}

/* Dark mode */
[data-theme="dark"] .kc-citation-chip {
  background: rgba(139, 92, 246, 0.1);
  color: #d1d5db;
}

[data-theme="dark"] .kc-citation-chip:hover {
  background: rgba(139, 92, 246, 0.18);
  text-decoration-color: rgba(139, 92, 246, 0.5);
}

[data-theme="dark"] .kc-citation-chip__fallback {
  color: #c084fc;
}
/**
 * OriginBadge (#537) — provenance chip in the monospace "integrity layer" voice.
 * Self-contained so any surface (switcher rows, KC cards, DAG nodes) gets the
 * styling by importing the component. Token-only; subordinate to brand DNA.
 */
.origin-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.origin-badge[data-origin="claude_code"],
.origin-badge[data-origin="claude_desktop"] { color: var(--color-brand); }
.origin-badge[data-origin="chatgpt"] { color: var(--color-success); }
.origin-badge[data-origin="gemini"] { color: var(--color-info); }
.origin-badge[data-origin="cursor"] { color: var(--color-text-secondary); }
.origin-badge[data-origin="mcp"] { color: var(--color-text-muted); }

/* Compact variant (DAG nodes / dense surfaces): label-only, tight. */
.origin-badge--compact {
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
/**
 * KCSources (#543) — Sources list, muted "integrity-layer" voice, tokens-only.
 * Subordinate to the brand (like the #537 origin chips): quiet by default, the link
 * is the only brand-colored element. No hardcoded hex, no gradients/glass.
 */
.kc-sources {
  margin-top: var(--space-2);
}

.kc-sources__label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kc-sources__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.kc-source {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 2px var(--space-1);
  border-radius: 4px;
  transition: background var(--motion-fast) var(--motion-easing);
}

.kc-source--highlighted {
  background: var(--color-brand-subtle);
}

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

.kc-source__body {
  min-width: 0;
  font-family: var(--font-primary);
  font-size: var(--type-sm);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.kc-source__link {
  color: var(--color-brand);
  text-decoration: none;
}
.kc-source__link:hover {
  text-decoration: underline;
}

.kc-source__title {
  color: var(--color-text-primary);
}

.kc-source__meta {
  color: var(--color-text-muted);
}

/* Unverified marker — monospace integrity voice, muted; only shown when B scored the
   source verified:false. Quiet, never alarming. */
.kc-source__unverified {
  margin-left: var(--space-2);
  padding: 0 var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* TrustScoreReview.css — Trust Compile Strip (compact redesign)
 *
 * ~80px default (compile dots + gauge + commit), ~200px with details.
 * Commit action always visible — signing moment, not dashboard.
 * Monospace integrity layer per Hero 3 §2.4.1.
 */

/* ─── Container ────────────────────────────────────────────────── */

.trust-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.015);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
}

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

.trust-strip--complete {
  border-color: rgba(16, 185, 129, 0.15);
}

/* ─── Row 1: Compile Dots (horizontal) ─────────────────────────── */

.trust-strip__compile {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 20px;
  flex-wrap: wrap;
}

.trust-strip__dot {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 0;
  white-space: nowrap;
}

.trust-strip__dot-icon {
  font-size: 8px;
  line-height: 1;
}

.trust-strip__dot-label {
  font-size: var(--type-xs);
  color: var(--color-text-muted);
}

.trust-strip__dot-detail {
  font-size: var(--type-xs);
  color: var(--color-text-secondary);
  margin-right: 6px;
}

/* Dot states */
.trust-strip__dot--done .trust-strip__dot-icon { color: var(--color-success); }
.trust-strip__dot--done .trust-strip__dot-label { color: var(--color-text-secondary); }

.trust-strip__dot--passed .trust-strip__dot-icon { color: var(--color-success); }
.trust-strip__dot--passed .trust-strip__dot-label { color: var(--color-text-muted); }

.trust-strip__dot--active .trust-strip__dot-icon { color: var(--color-info); }
.trust-strip__dot--active .trust-strip__dot-label { color: var(--color-info); }

.trust-strip__dot--failed .trust-strip__dot-icon { color: var(--color-error); }
.trust-strip__dot--failed .trust-strip__dot-label { color: var(--color-error); }

.trust-strip__dot--complete .trust-strip__dot-icon {
  color: var(--color-success);
  font-size: 10px;
}

/* Step entrance animation */
.trust-strip__dot {
  animation: ts-dot-in 150ms ease-out both;
}

@keyframes ts-dot-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ─── Error Block ──────────────────────────────────────────────── */

.trust-strip__error {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border-left: 2px solid var(--color-error);
  background: rgba(239, 68, 68, 0.04);
  border-radius: 0 4px 4px 0;
}

.trust-strip__error-text {
  font-size: var(--type-sm);
  color: var(--color-text-secondary);
}

.trust-strip__error-prefix {
  color: var(--color-error);
  font-weight: 600;
}

.trust-strip__error-actions {
  display: flex;
  gap: 6px;
}

/* ─── Row 2: Result (gauge + details + commit) ─────────────────── */

.trust-strip__result {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 32px;
  animation: ts-reveal 200ms ease-out;
}

@keyframes ts-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Trust gauge (inline) */
.trust-strip__gauge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.trust-strip__gauge-label {
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.trust-strip__gauge-bar {
  width: 60px;
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.trust-strip__gauge-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.trust-strip__gauge-pct {
  font-size: var(--type-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.trust-strip__gauge-level {
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* Seed notice */
.trust-strip__seed {
  font-size: var(--type-xs);
  color: var(--color-success);
  font-style: italic;
}

/* Override badge — uses dark amber #b45309 for WCAG AA contrast against light amber bg */
.trust-strip__ovr-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Details toggle */
.trust-strip__details-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  transition: color 0.15s ease, background 0.15s ease;
}

.trust-strip__details-btn:hover {
  color: var(--color-text-secondary);
  background: rgba(0, 0, 0, 0.04);
}

.trust-strip__details-chevron {
  transition: transform 0.2s ease;
}

.trust-strip__details-btn--open .trust-strip__details-chevron {
  transform: rotate(180deg);
}

/* Actions (always visible) */
.trust-strip__actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* ─── Buttons ──────────────────────────────────────────────────── */

.trust-strip__btn {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  transition: background 0.15s ease, opacity 0.15s ease;
}

.trust-strip__btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.trust-strip__btn--ghost:hover {
  background: rgba(0, 0, 0, 0.04);
}

.trust-strip__btn--cancel {
  background: transparent;
  color: var(--color-text-muted);
  padding: 4px 8px;
}

.trust-strip__btn--cancel:hover {
  color: var(--color-text-secondary);
}

.trust-strip__btn--commit {
  background: var(--aav-gradient-button, linear-gradient(145deg, #6f2dbd 0%, #9e23a3 45%, #6f2dbd 100%));
  background-size: 200% 100%;
  color: white;
  font-weight: var(--weight-bold);
  padding: 5px 14px;
  border-radius: 8px;
}

.trust-strip__btn--commit:hover {
  background-position: 100% 50%;
  box-shadow: 0 2px 8px rgba(158, 35, 163, 0.2);
}

/* ─── Collapsible Details Panel ────────────────────────────────── */

.trust-strip__details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  animation: ts-reveal 150ms ease-out;
}

.trust-strip__section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-strip__section-title {
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 2px;
}

/* Source rows */
.trust-strip__dep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.trust-strip__dep-type {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text-muted);
  width: 28px;
  flex-shrink: 0;
}

.trust-strip__dep-label {
  flex: 1;
  font-size: var(--type-xs);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trust-strip__dep-score {
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* No citations notice */
.trust-strip__notice {
  font-size: var(--type-xs);
  color: var(--color-text-muted);
  font-style: italic;
  padding: 2px 0;
}

/* Modifier rows (DAG / FLAG) */
.trust-strip__modifier {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.trust-strip__mod-type {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text-muted);
  width: 28px;
  flex-shrink: 0;
}

.trust-strip__mod-info {
  flex: 1;
  font-size: var(--type-xs);
  color: var(--color-text-secondary);
}

.trust-strip__mod-val {
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.trust-strip__mod-val--pos { color: var(--color-success); }
.trust-strip__mod-val--neg { color: var(--color-error); }

/* Override slider */
.trust-strip__override {
  padding-top: 4px;
  border-top: 1px dashed rgba(0, 0, 0, 0.04);
}

.trust-strip__slider-header {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.trust-strip__slider-label {
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
}

.trust-strip__reset {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 1px 5px;
  border: none;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  color: var(--color-text-muted);
}

.trust-strip__reset:hover {
  color: var(--color-text-secondary);
  background: rgba(0, 0, 0, 0.04);
}

.trust-strip__slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-strip__slider {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
    to right,
    var(--slider-color, #9ca3af) 0%,
    var(--slider-color, #9ca3af) var(--slider-pct, 50%),
    rgba(0, 0, 0, 0.08) var(--slider-pct, 50%),
    rgba(0, 0, 0, 0.08) 100%
  );
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.trust-strip__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--slider-color, #9ca3af);
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: grab;
  transition: transform 0.1s ease;
}

.trust-strip__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.trust-strip__slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--slider-color, #9ca3af);
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: grab;
}

.trust-strip__slider-val {
  font-size: var(--type-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
}

/* ─── Dark Mode ────────────────────────────────────────────────── */

[data-theme="dark"] .trust-strip {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .trust-strip--error {
  border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .trust-strip--complete {
  border-color: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .trust-strip__dot-label {
  color: #6b7280;
}

[data-theme="dark"] .trust-strip__dot-detail {
  color: #9ca3af;
}

[data-theme="dark"] .trust-strip__dot--done .trust-strip__dot-label { color: #9ca3af; }
[data-theme="dark"] .trust-strip__dot--active .trust-strip__dot-icon { color: #60a5fa; }
[data-theme="dark"] .trust-strip__dot--active .trust-strip__dot-label { color: #60a5fa; }

[data-theme="dark"] .trust-strip__gauge-label { color: #6b7280; }
[data-theme="dark"] .trust-strip__gauge-bar { background: rgba(255, 255, 255, 0.06); }

[data-theme="dark"] .trust-strip__error {
  background: rgba(239, 68, 68, 0.06);
  border-left-color: #ef4444;
}

[data-theme="dark"] .trust-strip__error-text { color: #9ca3af; }

[data-theme="dark"] .trust-strip__details-btn { color: #6b7280; }
[data-theme="dark"] .trust-strip__details-btn:hover { color: #9ca3af; background: rgba(255, 255, 255, 0.04); }

[data-theme="dark"] .trust-strip__btn--ghost {
  color: #9ca3af;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .trust-strip__btn--ghost:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .trust-strip__btn--cancel { color: #6b7280; }
[data-theme="dark"] .trust-strip__btn--cancel:hover { color: #9ca3af; }

[data-theme="dark"] .trust-strip__details { border-top-color: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .trust-strip__section-title { color: #6b7280; }
[data-theme="dark"] .trust-strip__dep-type { color: #6b7280; }
[data-theme="dark"] .trust-strip__dep-label { color: #9ca3af; }
[data-theme="dark"] .trust-strip__mod-type { color: #6b7280; }
[data-theme="dark"] .trust-strip__mod-info { color: #9ca3af; }
[data-theme="dark"] .trust-strip__notice { color: #6b7280; }

[data-theme="dark"] .trust-strip__override { border-top-color: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .trust-strip__slider-header { color: #6b7280; }
[data-theme="dark"] .trust-strip__reset { color: #6b7280; }
[data-theme="dark"] .trust-strip__reset:hover { color: #9ca3af; background: rgba(255, 255, 255, 0.04); }

[data-theme="dark"] .trust-strip__slider {
  background: linear-gradient(
    to right,
    var(--slider-color, #6b7280) 0%,
    var(--slider-color, #6b7280) var(--slider-pct, 50%),
    rgba(255, 255, 255, 0.06) var(--slider-pct, 50%),
    rgba(255, 255, 255, 0.06) 100%
  );
}

[data-theme="dark"] .trust-strip__slider::-webkit-slider-thumb {
  border-color: #1a1a1a;
}

[data-theme="dark"] .trust-strip__ovr-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

/* ─── Instrument Theme ─────────────────────────────────────────── */

html[data-ui-style="instrument"] .trust-strip {
  border-radius: 4px;
}

html[data-ui-style="instrument"] .trust-strip__btn--commit {
  border-radius: 4px;
}

/* ─── Reduced Motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .trust-strip__dot {
    animation: none;
  }

  .trust-strip__result {
    animation: none;
  }

  .trust-strip__details {
    animation: none;
  }

  .trust-strip__gauge-fill {
    transition: none;
  }

  .trust-strip__details-chevron {
    transition: none;
  }

  .trust-strip__slider::-webkit-slider-thumb {
    transition: none;
  }
}

/* ─── Mobile ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .trust-strip__result {
    gap: 6px;
  }

  .trust-strip__gauge-bar {
    width: 40px;
  }

  .trust-strip__actions {
    flex-basis: 100%;
    justify-content: flex-end;
    margin-top: 4px;
  }
}
/* RecommendedActions.css — Compass Strip (Phase 4 W3-A redesign)
 *
 * Compact chip bar replacing the card-dashboard layout.
 * ~48px default, ~140px expanded. Navigational aid, not attention hoarder.
 * Brand DNA: purple #9e23a3, action gradient #8b5cf6→#7c3aed
 */

/* ─── Compass Strip Container ──────────────────────────────────── */

.compass-strip {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

/* ─── Chip Bar Row ─────────────────────────────────────────────── */

.compass-strip__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.compass-strip__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9e23a3;
  white-space: nowrap;
  padding-left: 2px;
  margin-bottom: 4px;
  opacity: 0.75;
}

.compass-strip__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  row-gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

/* ─── Action Chip (base) ───────────────────────────────────────── */

.action-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  max-width: 100%;
  border: 1px solid rgba(158, 35, 163, 0.12);
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.action-chip:hover {
  border-color: rgba(158, 35, 163, 0.35);
  background: rgba(139, 92, 246, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(158, 35, 163, 0.08);
}

.action-chip:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}

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

/* ─── Primary Chip ─────────────────────────────────────────────── */

.action-chip--primary {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(158, 35, 163, 0.3);
  border-left: 2px solid #9e23a3;
  padding-left: 10px;
  font-weight: 600;
  color: #374151;
  box-shadow: 0 1px 3px rgba(158, 35, 163, 0.08);
}

.action-chip--primary:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(158, 35, 163, 0.4);
  border-left-color: #9e23a3;
  box-shadow: 0 2px 8px rgba(158, 35, 163, 0.12);
}

/* ─── Expanded & Executing States ──────────────────────────────── */

.action-chip--expanded {
  border-color: rgba(158, 35, 163, 0.4);
  background: rgba(139, 92, 246, 0.08);
  box-shadow: 0 1px 4px rgba(158, 35, 163, 0.1);
}

.action-chip--primary.action-chip--expanded {
  border-left-color: #9e23a3;
}

.action-chip--executing {
  opacity: 0.5;
  pointer-events: none;
}

/* ─── Chip Inner Elements ──────────────────────────────────────── */

.action-chip__verb {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

.action-chip__arrow {
  flex-shrink: 0;
  opacity: 0.6;
}

/* ─── +N More Button ───────────────────────────────────────────── */

.compass-strip__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px dashed rgba(158, 35, 163, 0.15);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.compass-strip__more:hover {
  border-color: rgba(158, 35, 163, 0.3);
  color: #7c3aed;
}

.compass-strip__more--collapse {
  border-style: solid;
}

/* ─── Expandable Detail Row ────────────────────────────────────── */

.compass-strip__detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  margin-top: 6px;
  border: 1px solid rgba(158, 35, 163, 0.1);
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.02);
  animation: detail-expand 0.2s ease-out;
}

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

.compass-strip__rationale {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.compass-strip__queries {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 2px dashed rgba(158, 35, 163, 0.2);
  padding-left: 10px;
  margin: 2px 0;
}

.compass-strip__query {
  display: block;
  width: 100%;
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  font-style: italic;
  color: #7c3aed;
  line-height: 1.3;
  transition: background 0.15s ease;
}

.compass-strip__query:hover {
  background: rgba(139, 92, 246, 0.06);
}

.compass-strip__query:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 1px;
}

.compass-strip__query-arrow {
  opacity: 0.5;
  margin-right: 2px;
}

.compass-strip__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-end;
  padding: 5px 14px;
  border: none;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.12);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #7c3aed;
  transition: background 0.15s ease;
}

.compass-strip__cta:hover {
  background: rgba(139, 92, 246, 0.15);
}

.compass-strip__cta:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ─── Follow-up Queries (LLM conversational, per Phase4 AC22) ──── */

.compass-strip__followups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(158, 35, 163, 0.06);
}

.compass-strip__followup {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(158, 35, 163, 0.1);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  line-height: 1.4;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: left;
  /* #471: removed white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px.
     The parent .compass-strip__followups uses flex-wrap: wrap, so each button now wraps
     naturally to multiple lines on long queries instead of silently truncating with an ellipsis. */
}

.compass-strip__followup:hover {
  background: rgba(139, 92, 246, 0.04);
  border-color: rgba(158, 35, 163, 0.2);
  color: var(--color-text-primary);
}

.compass-strip__followup:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 1px;
}

/* ─── KC Type Badge (kept from original) ───────────────────────── */

.kc-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.kc-type-badge--seed {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

.kc-type-badge--finding {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}

.kc-type-badge--literature_note {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.kc-type-badge--hypothesis {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

.kc-type-badge--synthesis {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

/* ─── Dark Mode ────────────────────────────────────────────────── */

[data-theme="dark"] .compass-strip__label {
  color: #c084fc;
}

[data-theme="dark"] .action-chip {
  border-color: rgba(139, 92, 246, 0.2);
  color: #d1d5db;
}

[data-theme="dark"] .action-chip:hover {
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .action-chip--primary {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.35);
  border-left: 2px solid #a78bfa;
  color: #f3f4f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .action-chip--primary:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.5);
  border-left-color: #a78bfa;
}

[data-theme="dark"] .action-chip--expanded {
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.12);
}

[data-theme="dark"] .action-chip--primary.action-chip--expanded {
  border-left-color: #a78bfa;
}

[data-theme="dark"] .compass-strip__detail {
  border-color: rgba(139, 92, 246, 0.15);
  background: rgba(139, 92, 246, 0.04);
}

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

[data-theme="dark"] .compass-strip__query {
  color: #a78bfa;
}

[data-theme="dark"] .compass-strip__query:hover {
  background: rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .compass-strip__cta {
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.12);
}

[data-theme="dark"] .compass-strip__cta:hover {
  background: rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .compass-strip__more {
  border-color: rgba(139, 92, 246, 0.2);
  color: #6b7280;
}

[data-theme="dark"] .compass-strip__more:hover {
  border-color: rgba(139, 92, 246, 0.35);
  color: #a78bfa;
}

[data-theme="dark"] .compass-strip__followups {
  border-top-color: rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .compass-strip__followup {
  color: var(--color-text-secondary);
  border-color: rgba(139, 92, 246, 0.12);
}

[data-theme="dark"] .compass-strip__followup:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.25);
  color: var(--color-text-primary);
}

[data-theme="dark"] .kc-type-badge--seed,
[data-theme="dark"] .kc-type-badge--hypothesis {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .kc-type-badge--finding {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}

[data-theme="dark"] .kc-type-badge--literature_note,
[data-theme="dark"] .kc-type-badge--synthesis {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

/* ─── Instrument Theme ─────────────────────────────────────────── */

html[data-ui-style="instrument"] .action-chip {
  border-radius: 4px;
}

html[data-ui-style="instrument"] .compass-strip__more {
  border-radius: 4px;
}

html[data-ui-style="instrument"] .compass-strip__detail {
  border-radius: 4px;
}

html[data-ui-style="instrument"] .compass-strip__cta {
  border-radius: 4px;
}

/* ─── Reduced Motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .action-chip {
    transition: none;
  }

  .action-chip:hover {
    transform: none;
  }

  .compass-strip__query {
    transition: none;
  }

  .compass-strip__cta {
    transition: none;
  }

  .compass-strip__more {
    transition: none;
  }

  .compass-strip__detail {
    animation: none;
  }
}

/* ─── Mobile ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .compass-strip__bar {
    gap: 6px;
  }

  .compass-strip__detail {
    padding: 8px 10px;
  }
}
/* 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
 */

/* ===== DESIGN SYSTEM TOKENS ===== */
/* Canonical reference: docs/beta/wiring/Design_System_Wiring.md */
/* All component CSS must use these tokens. No hard-coded hex values. */

:root {
  /* ── Brand Colors ── */
  --color-brand: #9e23a3;
  --color-brand-dark: #7f1b83;
  --color-brand-subtle: rgba(158, 35, 163, 0.08);
  --aav-gradient-primary: linear-gradient(135deg, #9e23a3 0%, #6f2dbd 50%, #c87fd0 100%);
  --aav-gradient-secondary: linear-gradient(135deg, #6f2dbd 0%, #9e23a3 50%, #c87fd0 100%);
  --aav-gradient-button: linear-gradient(145deg, #6f2dbd 0%, #9e23a3 45%, #6f2dbd 100%);

  /* ── Semantic Status Colors ── */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ── Stage Colors (must match STAGE_CONFIG in knowledge-card.js) ── */
  --color-stage-ideation: #a855f7;
  --color-stage-lit-review: #3b82f6;
  --color-stage-hypothesis: #0ea5e9;
  --color-stage-results: #10b981;

  /* ── Neutrals ── */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #64748b;
  --color-text-muted: #9ca3af;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;

  /* ── Typography ── */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --type-xs: 10px;    /* monospace integrity only */
  --type-sm: 12px;    /* labels, timestamps, metadata, badges */
  --type-base: 14px;  /* body text, form inputs, descriptions, buttons */
  --type-md: 16px;    /* card titles, section titles */
  --type-lg: 18px;    /* modal titles, page subtitles */
  --type-xl: 20px;    /* page headings */
  --type-2xl: 24px;   /* hero headings */
  --type-3xl: 32px;   /* splash/hero only */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;  /* only at 14px+ */

  /* ── Elevation ── */
  --elevation-0: none;
  --elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --elevation-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);

  /* ── Motion ── */
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-slow: 400ms;
  --motion-easing: cubic-bezier(0.2, 0.0, 0, 1.0);

  /* ── Spacing (8dp grid) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Glass Effects ── */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(158, 35, 163, 0.2);
  --glass-backdrop: blur(12px) saturate(120%);
  --glass-shadow: 0 2px 6px rgba(158, 35, 163, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);

  /* ── Legacy aliases (for gradual migration — remove once all refs updated) ── */
  --aav-primary: var(--color-brand);
  --aav-primary-dark: var(--color-brand-dark);
  --aav-primary-light: #c87fd0;
  --aav-secondary: #6f2dbd;
  --aav-font-primary: var(--font-primary);
  --aav-font-secondary: var(--font-primary);
  --aav-font-mono: var(--font-mono);
  --aav-glass-bg: var(--glass-bg);
  --aav-glass-border: var(--glass-border);
  --aav-glass-backdrop: var(--glass-backdrop);
  --aav-glass-shadow: var(--glass-shadow);
  --sci-success: var(--color-success);
  --sci-warning: var(--color-warning);
  --sci-error: var(--color-error);
  --sci-info: var(--color-info);
  --sci-neutral: var(--color-text-muted);
  --md-primary: var(--color-brand);
  --md-on-primary: #ffffff;
  --md-primary-container: rgba(158, 35, 163, 0.12);
  --md-on-primary-container: var(--color-brand-dark);
  --md-secondary: var(--color-text-secondary);
  --md-on-secondary: #ffffff;
  --md-secondary-container: var(--color-surface-subtle);
  --md-on-secondary-container: var(--color-text-primary);
  --md-background: var(--color-surface);
  --md-on-background: var(--color-text-primary);
  --md-surface: var(--color-surface);
  --md-on-surface: var(--color-text-primary);
  --md-surface-variant: var(--color-surface-subtle);
  --md-on-surface-variant: var(--color-text-secondary);
  --md-outline: var(--color-text-muted);
  --md-outline-variant: var(--color-border);
  --md-elevation-0: var(--elevation-0);
  --md-elevation-1: var(--elevation-1);
  --md-elevation-2: var(--elevation-2);
  --md-elevation-3: var(--elevation-3);
  --md-elevation-4: var(--elevation-4);
  --md-elevation-5: var(--elevation-4);
  --md-motion-duration-short1: 50ms;
  --md-motion-duration-short2: 100ms;
  --md-motion-duration-short3: var(--motion-fast);
  --md-motion-duration-short4: 200ms;
  --md-motion-duration-medium1: var(--motion-normal);
  --md-motion-duration-medium2: 300ms;
  --md-motion-duration-medium3: 350ms;
  --md-motion-duration-medium4: var(--motion-slow);
  --md-motion-easing-standard: var(--motion-easing);
  --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: var(--motion-easing);
  --md-space-1: var(--space-1);
  --md-space-2: var(--space-2);
  --md-space-3: var(--space-3);
  --md-space-4: var(--space-4);
  --md-space-5: var(--space-5);
  --md-space-6: var(--space-6);
  --md-space-8: var(--space-8);
  --md-space-10: var(--space-10);
  --md-space-12: var(--space-12);
  --md-space-16: var(--space-16);
  --md-display-large: var(--type-3xl);
  --md-headline-large: var(--type-3xl);
  --md-title-large: var(--type-xl);
  --md-title-medium: var(--type-md);
  --md-title-small: var(--type-base);
  --md-body-large: var(--type-md);
  --md-body-medium: var(--type-base);
  --md-body-small: var(--type-sm);
  --md-label-large: var(--type-base);
  --md-label-medium: var(--type-sm);
  --md-label-small: var(--type-sm);
}

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

[data-theme="dark"] {
  /* Brand */
  --color-brand: #c87fd0;
  --color-brand-dark: #9e23a3;
  --color-brand-subtle: rgba(158, 35, 163, 0.15);

  /* Status (lighter for dark bg contrast) */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #60a5fa;

  /* Stage (lighter variants) */
  --color-stage-ideation: #c084fc;
  --color-stage-lit-review: #60a5fa;
  --color-stage-hypothesis: #38bdf8;
  --color-stage-results: #34d399;

  /* Neutrals */
  --color-text-primary: #e6e1e5;
  --color-text-secondary: #9ca3af;
  --color-text-muted: #6b7280;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-surface: #1a1a1a;
  --color-surface-subtle: #252525;

  /* Glass */
  --glass-bg: rgba(28, 27, 31, 0.8);
  --glass-border: rgba(158, 35, 163, 0.3);
  --glass-shadow: 0 2px 6px rgba(158, 35, 163, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Elevation (stronger on dark) */
  --elevation-1: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 4px 1px rgba(0, 0, 0, 0.25);
  --elevation-2: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 2px 8px 2px rgba(0, 0, 0, 0.25);
  --elevation-3: 0px 1px 4px 0px rgba(0, 0, 0, 0.5), 0px 4px 12px 3px rgba(0, 0, 0, 0.25);

  /* Legacy aliases (dark overrides) */
  --aav-primary: var(--color-brand);
  --aav-primary-dark: var(--color-brand-dark);
  --aav-primary-light: #c87fd0;
  --md-background: var(--color-surface);
  --md-on-background: var(--color-text-primary);
  --md-surface: var(--color-surface);
  --md-on-surface: var(--color-text-primary);
  --md-surface-variant: var(--color-surface-subtle);
  --md-on-surface-variant: var(--color-text-secondary);
  --md-outline: var(--color-text-muted);
  --md-outline-variant: var(--color-border);
  --md-primary-container: rgba(158, 35, 163, 0.2);
  --md-on-primary-container: #c87fd0;
  --md-secondary-container: var(--color-surface-subtle);
  --md-on-secondary-container: var(--color-text-primary);
  --md-elevation-1: var(--elevation-1);
  --md-elevation-2: var(--elevation-2);
  --md-elevation-3: var(--elevation-3);
  --aav-glass-bg: var(--glass-bg);
  --aav-glass-border: var(--glass-border);
  --aav-glass-shadow: var(--glass-shadow);
  --sci-success: var(--color-success);
  --sci-warning: var(--color-warning);
  --sci-error: var(--color-error);
  --sci-info: var(--color-info);
}

/* ===== 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(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-brand); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

.bg-surface { background: var(--color-surface); }
.bg-surface-subtle { background: var(--color-surface-subtle); }
.bg-brand { background: var(--color-brand); }
.bg-brand-subtle { background: var(--color-brand-subtle); }

.type-xs { font-size: var(--type-xs); }
.type-sm { font-size: var(--type-sm); }
.type-base { font-size: var(--type-base); }
.type-md { font-size: var(--type-md); }
.type-lg { font-size: var(--type-lg); }
.type-xl { font-size: var(--type-xl); }/* 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, #202124);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="dark"] .knowledge-artifact-name {
  color: var(--text-primary, #e0e0e0);
}

.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, #202124);
  margin-bottom: 4px;
}

[data-theme="dark"] .empty-library-title {
  color: var(--text-primary, #e0e0e0);
}

.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) */

/* Tag filter bar */
.knowledge-tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .knowledge-tag-filter {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Tag chips (filter + document cards) */
.tag-chip {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: var(--text-secondary, #5f6368);
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-theme="dark"] .tag-chip {
  border-color: rgba(255, 255, 255, 0.12);
  color: #9aa0a6;
}

.tag-chip:hover {
  border-color: rgba(158, 35, 163, 0.3);
  color: #9e23a3;
}

.tag-chip.active {
  background: rgba(158, 35, 163, 0.1);
  border-color: rgba(158, 35, 163, 0.4);
  color: #9e23a3;
}

[data-theme="dark"] .tag-chip.active {
  background: rgba(158, 35, 163, 0.2);
}

/* Editable tag chips on document cards */
.tag-chip.editable {
  padding: 2px 8px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(158, 35, 163, 0.08);
  border-color: rgba(158, 35, 163, 0.15);
  color: #9e23a3;
  cursor: default;
}

[data-theme="dark"] .tag-chip.editable {
  background: rgba(158, 35, 163, 0.15);
  border-color: rgba(158, 35, 163, 0.25);
}

.tag-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.tag-remove:hover {
  opacity: 1;
}

/* Inline tag add input */
.tag-add-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 11px;
  color: var(--text-secondary, #5f6368);
  width: 80px;
  padding: 2px 4px;
}

.tag-add-input::placeholder {
  color: rgba(158, 35, 163, 0.4);
  font-weight: 500;
}

/* Knowledge card tags row */
.knowledge-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 8px;
}/**
 * 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);
  }
}

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

/* #546: Curation Inbox entry — pinned leading, tokens-only (muted until active) */
.tab-inbox-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  margin-right: 8px;
}
.tab-inbox-entry:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.tab-inbox-entry.active {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.tab-inbox-badge {
  min-width: 16px;
  padding: 0 5px;
  border: 1px solid var(--color-brand);
  border-radius: 8px;
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  text-align: center;
}

/* Tab type variants */
.workspace-tab.active {
  border-bottom: 2px solid #4CAF50;
}

.project-tab.active {
  border-bottom: 2px solid rgba(158, 35, 163, 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;
}


/* ========================================
   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: var(--color-surface);
  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: var(--color-text-primary);
}

.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: var(--type-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.project-modal-subtitle {
  margin: 0;
  font-size: var(--type-base);
  color: var(--color-text-secondary);
  font-weight: var(--weight-regular);
}

.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: var(--color-text-muted);
  transition: all var(--motion-fast) var(--motion-easing);
  margin-top: -4px;
}

.project-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-secondary);
}

/* Body */
.project-modal-body {
  padding: 0 24px 24px;
  overflow-y: auto;
  flex: 1;
  background: var(--color-surface);
}

/* Error message */
.project-modal-error {
  padding: 10px 14px;
  margin-bottom: 16px;
  background: rgba(244, 67, 54, 0.08);
  border-radius: 8px;
  color: var(--color-error);
  font-size: var(--type-base);
}

/* 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: var(--type-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.field-optional {
  font-size: var(--type-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field-helper {
  font-size: var(--type-sm);
  color: var(--color-text-secondary);
  margin-top: 6px;
  line-height: 1.4;
}

/* Primary field - larger input for main action */
.project-modal-field-primary input {
  font-size: var(--type-md);
  padding: 14px 16px;
}

.project-modal-field input,
.project-modal-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-surface-subtle);
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: var(--color-text-primary);
  font-size: var(--type-base);
  font-family: inherit;
  transition: all var(--motion-fast) var(--motion-easing);
  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: var(--color-brand);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-brand-subtle);
}

.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: var(--color-text-muted);
}

.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: var(--type-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
}

.char-count.warning {
  color: var(--color-warning);
}

.char-count.error {
  color: var(--color-error);
}

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

[data-theme="dark"] .char-count.warning {
  color: #fbbf24;
}

[data-theme="dark"] .char-count.error {
  color: var(--color-error);
}

/* 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: var(--type-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--motion-fast) var(--motion-easing);
}

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

.project-modal-button.secondary {
  background: transparent;
  color: var(--color-text-secondary);
}

.project-modal-button.secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
}

.project-modal-button.primary {
  background: var(--color-brand);
  color: #ffffff;
  padding: 10px 24px;
}

.project-modal-button.primary:hover:not(:disabled) {
  background: var(--color-brand-dark);
  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: var(--color-surface-subtle);
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: var(--type-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--motion-fast) var(--motion-easing);
}

.document-toggle-button:hover:not(:disabled) {
  background: #f1f3f4;
  color: var(--color-text-primary);
}

.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: var(--color-brand);
  color: white;
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  border-radius: 10px;
}

.document-selection-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  color: var(--color-text-muted);
  font-size: var(--type-base);
}

.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: var(--color-text-muted);
  font-size: var(--type-base);
  font-style: italic;
}

.document-selection-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 8px;
  border-radius: 8px;
  background: var(--color-surface-subtle);
}

.document-selection-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all var(--motion-fast) var(--motion-easing);
}

.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: var(--color-brand);
}

.document-selection-item .document-title {
  flex: 1;
  font-size: var(--type-base);
  color: var(--color-text-primary);
  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: var(--color-brand);
}

[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: var(--type-sm);
  color: var(--color-text-secondary);
  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: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  font-size: var(--type-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--motion-fast) var(--motion-easing);
}

.tag-chip:hover:not(:disabled) {
  background: var(--color-surface-subtle);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.tag-chip.selected {
  background: rgba(158, 35, 163, 0.1);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.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: var(--color-brand);
  color: var(--color-brand);
}

[data-theme="dark"] .tag-chip.selected {
  background: rgba(158, 35, 163, 0.15);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

[data-theme="dark"] .char-count.warning {
  color: #fbbf24;
}

[data-theme="dark"] .char-count.error {
  color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════════
   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: var(--type-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  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: var(--color-text-primary);
  background: rgba(0, 0, 0, 0.04);
}

.visibility-segment.active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  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: var(--color-surface-subtle);
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  font-size: var(--type-base);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--motion-fast) var(--motion-easing);
  font-family: inherit;
}

.collaborator-chip:hover:not(:disabled) {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.collaborator-chip.selected {
  background: var(--color-brand-subtle);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.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: var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.collaborator-chip.selected .collaborator-avatar {
  background: var(--color-brand);
  color: #ffffff;
}

.collaborator-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--color-text-muted);
  font-size: var(--type-base);
}

.collaborator-loading .spinner {
  animation: spin 1s linear infinite;
}

.collaborator-empty {
  padding: 8px 0;
  color: var(--color-text-muted);
  font-size: var(--type-base);
  font-style: italic;
}

/* Bulk Document Actions */
.document-bulk-actions {
  padding: 4px 12px 8px;
}

.bulk-select-button {
  font-size: var(--type-sm);
  color: var(--color-brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  font-family: inherit;
}

.bulk-select-button:hover:not(:disabled) {
  color: var(--color-brand-dark);
}

.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: var(--color-brand);
  color: #b86fc0;
}

[data-theme="dark"] .collaborator-chip.selected {
  background: rgba(158, 35, 163, 0.12);
  border-color: var(--color-brand);
  color: #b86fc0;
}

[data-theme="dark"] .collaborator-avatar {
  background: #4a4a4a;
  color: #9aa0a6;
}

[data-theme="dark"] .collaborator-chip.selected .collaborator-avatar {
  background: var(--color-brand);
  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;
}
.welcome-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 680px;
  width: 100%;
  margin: auto;
  padding: 24px 24px 20px;
  gap: 24px;
}

.welcome-hub-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.welcome-hub-eyebrow {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #c87fd0, #6c8ae4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 12px 0 0;
}

.welcome-hub-subtitle {
  font-size: 13px;
  color: #666;
  margin: 0;
}

[data-theme="dark"] .welcome-hub-subtitle {
  color: #999;
}

/* Welcome cards layout */
.welcome-cards {
  display: flex;
  gap: 16px;
  width: 100%;
}

/* Primary CTA: New Proofline — 2x larger */
.welcome-card--primary {
  flex: 2;
  background: linear-gradient(145deg, #6f2dbd 0%, #9e23a3 45%, #6f2dbd 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  border-color: transparent !important;
  min-height: 100px;
  position: relative;
  overflow: hidden;
}

/* Subtle shimmer sweep on the primary CTA */
.welcome-card--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 60%
  );
  background-size: 250% 100%;
  animation: cta-shimmer 6s ease-in-out infinite;
  pointer-events: none;
}

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

.welcome-card--primary .welcome-card-title,
.welcome-card--primary .welcome-card-desc {
  color: #fff !important;
  position: relative;
  z-index: 1;
}

.welcome-card--primary .welcome-card-icon-wrap {
  background: rgba(255, 255, 255, 0.15) !important;
  position: relative;
  z-index: 1;
}

.welcome-card--primary .welcome-card-icon {
  color: #fff !important;
}

.welcome-card--primary .welcome-card-arrow {
  color: rgba(255, 255, 255, 0.7) !important;
  position: relative;
  z-index: 1;
}

.welcome-card--primary:hover {
  box-shadow:
    0 12px 32px rgba(111, 45, 189, 0.35),
    0 4px 12px rgba(158, 35, 163, 0.2) !important;
}

.welcome-card--primary:active {
  transform: translateY(-1px) scale(0.995) !important;
  box-shadow: 0 6px 20px rgba(111, 45, 189, 0.3) !important;
}

.welcome-card--primary:focus-visible {
  outline: 2px solid #c87fd0 !important;
  outline-offset: 3px;
}

/* Secondary CTA: Add Knowledge */
.welcome-card--secondary {
  flex: 1;
}

/* KC count in proofline cards */
.welcome-hub-proofline-kcs {
  font-size: 10px;
  font-weight: 500;
  color: #10b981;
}

@media (max-width: 600px) {
  .welcome-cards {
    flex-direction: column;
  }
}

/* Prooflines section */
.welcome-hub-prooflines {
  width: 100%;
}

.welcome-hub-prooflines-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  margin-bottom: 12px;
  padding: 0 4px;
}

[data-theme="dark"] .welcome-hub-prooflines-label {
  color: #777;
}

.welcome-hub-prooflines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.welcome-hub-proofline-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s ease;
  font-family: inherit;
}

.welcome-hub-proofline-card:hover {
  border-color: rgba(158, 35, 163, 0.25);
  box-shadow: 0 4px 16px rgba(158, 35, 163, 0.12);
  transform: translateY(-2px);
}

.welcome-hub-proofline-card:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(158, 35, 163, 0.08);
}

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

[data-theme="dark"] .welcome-hub-proofline-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .welcome-hub-proofline-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(158, 35, 163, 0.35);
  box-shadow: 0 2px 16px rgba(158, 35, 163, 0.15);
}

.welcome-hub-proofline-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .welcome-hub-proofline-name {
  color: #e0e0e0;
}

.welcome-hub-proofline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #888;
}

.welcome-hub-proofline-stage {
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.welcome-hub-proofline-time {
  color: #aaa;
}

[data-theme="dark"] .welcome-hub-proofline-time {
  color: #666;
}

/* Responsive */
@media (max-width: 600px) {
  .welcome-hub {
    padding: 32px 16px;
    gap: 24px;
  }

  .welcome-hub-prooflines-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .welcome-hub-prooflines-grid {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .welcome-hub-proofline-card {
    transition: none;
  }
  .welcome-hub-proofline-card:hover {
    transform: none;
  }
  .welcome-card--primary::after {
    animation: none;
  }
}
/**
 * ReparentPicker (#549) — quiet, tokens-only joint picker. Muted integrity voice;
 * the type pills are the only color, matching the canonical SEED/LIT/HYP/FND/SYN vocab.
 */
.reparent-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-subtle, var(--color-surface));
}

.reparent-picker__label {
  font-family: var(--font-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.reparent-section { display: flex; flex-direction: column; gap: 2px; }
.reparent-section__head {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) 0 2px;
}

.reparent-opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-fast) var(--motion-easing),
              border-color var(--motion-fast) var(--motion-easing);
}
.reparent-opt:hover { background: var(--color-brand-subtle); }
.reparent-opt--selected { border-color: var(--color-brand); }

.reparent-opt__pill {
  flex-shrink: 0;
  padding: 0 var(--space-1);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.reparent-opt__pill[data-kc-type="seed"] { color: var(--color-brand); border-color: var(--color-brand); }
.reparent-opt__pill[data-kc-type="synthesis"] { color: var(--color-success, var(--color-brand)); border-color: var(--color-success, var(--color-border)); }

.reparent-opt__title {
  min-width: 0;
  flex: 1;
  font-family: var(--font-primary);
  font-size: var(--type-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reparent-opt__check { flex-shrink: 0; color: var(--color-brand); }

.reparent-picker__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-primary);
  font-size: var(--type-xs);
  cursor: pointer;
}
.reparent-picker__more:hover { color: var(--color-brand); }
.reparent-picker__others { display: flex; flex-direction: column; gap: var(--space-2); }
/**
 * CurationInbox (#546) — calm, token-only curation surface.
 * §9 minimalism guardrails: muted integrity voice, no gradients/glass/neon, the
 * proofline stays the gravity well — this is a quiet triage list, not a dashboard.
 */
.curation-inbox {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--color-surface);
}

.curation-inbox__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.curation-inbox__title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--type-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.curation-inbox__count {
  min-width: 18px;
  padding: 0 var(--space-2);
  border-radius: 9px;
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  text-align: center;
  line-height: 18px;
}

.curation-inbox__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-easing),
              background var(--motion-fast) var(--motion-easing);
}
.curation-inbox__refresh:hover { color: var(--color-brand); background: var(--color-brand-subtle); }

.curation-inbox__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── States ── */
.curation-inbox__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--font-primary);
  font-size: var(--type-sm);
}
.curation-inbox__state--error { color: var(--color-error); }
.curation-inbox__retry {
  border: none;
  background: transparent;
  color: var(--color-brand);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: underline;
}

.curation-inbox__empty {
  margin: auto;
  max-width: 380px;
  text-align: center;
  color: var(--color-text-muted);
}
.curation-inbox__empty-icon { color: var(--color-text-muted); opacity: 0.5; margin-bottom: var(--space-3); }
.curation-inbox__empty-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-primary);
  font-size: var(--type-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}
.curation-inbox__empty-sub { margin: 0; font-size: var(--type-sm); }

/* ── Session group ── */
.inbox-group { display: flex; flex-direction: column; gap: var(--space-2); }
.inbox-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}
.inbox-group__host {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-text-muted);
}
.inbox-group__sep { color: var(--color-text-muted); opacity: 0.5; }
.inbox-group__time {
  font-family: var(--font-primary);
  font-size: var(--type-sm);
  color: var(--color-text-muted);
}
.inbox-group__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-text-muted);
}

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

/* ── Draft row ── */
.inbox-draft {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

/* server-inferred placement — quiet integrity line above the card */
.inbox-placement {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.inbox-placement__parent { color: var(--color-text-secondary); }
.inbox-placement__trust {
  margin-left: auto;
  color: var(--color-text-muted);
}

/* ── Actions ── */
.inbox-draft__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.inbox-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  font-family: var(--font-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-easing),
              border-color var(--motion-fast) var(--motion-easing),
              background var(--motion-fast) var(--motion-easing);
}
.inbox-btn:disabled { opacity: 0.5; cursor: default; }
.inbox-btn--reject { color: var(--color-text-secondary); }
.inbox-btn--reject:hover:not(:disabled) { color: var(--color-error); border-color: var(--color-error); }
.inbox-btn--accept { color: var(--color-brand); border-color: var(--color-brand); }
.inbox-btn--accept:hover:not(:disabled) { background: var(--color-brand-subtle); }

/* ── #549: branch sub-groups + branch placement + edit ── */
.inbox-subgroup { display: flex; flex-direction: column; gap: var(--space-2); }
.inbox-group__branch {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  padding: var(--space-1) 0 0 var(--space-1);
}
.inbox-placement__branch { color: var(--color-brand); }
.inbox-placement__dedup { color: var(--color-text-muted); }
.inbox-placement__edited {
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted);
}
.inbox-placement__warn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-warning, var(--color-text-secondary));
}
.inbox-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}
.inbox-btn--attention { color: var(--color-brand); border-color: var(--color-brand); }

/* #553: a deep-link's target draft — a brief brand ring so the eye lands on it */
.inbox-draft--targeted {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px var(--color-brand-subtle);
  transition: box-shadow var(--motion-fast) var(--motion-easing), border-color var(--motion-fast) var(--motion-easing);
}

/* spinner */
.curation-inbox .spin { animation: curation-inbox-spin 1s linear infinite; }
@keyframes curation-inbox-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .curation-inbox .spin { animation: none; } }
/* LabOS Beta IDE Layout - Scientific Control Panel Design */
/* Updated: 2-pane layout with vertical Sidebar (Knowledge 30% | Workspace 70%) */

.sci-ide-layout {
  display: flex;
  flex-direction: row; /* Changed from column - sidebar on left */
  height: 100vh;
  max-height: 100vh;
  width: 100%;
  max-width: 100%; /* Avoid right-edge clipping when borders/padding are present */
  background: #ffffff;
  font-family: var(--aav-font-secondary);
  color: #1a1a1a;
  overflow: hidden;
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  box-sizing: border-box; /* Include padding/borders in width calculation */
  position: relative; /* Ensure proper stacking context */
}

.sci-ide-layout.desktop {
  display: flex;
  flex-direction: row;
}

.sci-ide-layout.mobile {
  display: flex;
  flex-direction: column;
}

/* Main IDE Container - Full Height 2-Panel Layout */
.sci-ide-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  background: transparent;
  height: 100%;
  max-height: 100%; /* Prevent exceeding parent */
  width: 100%;
  max-width: 100%; /* Let flexbox compute width; avoids brittle sidebar-width assumptions */
  min-width: 0; /* Allow flexbox shrinking */
  min-height: 0; /* Critical for flexbox children to respect parent constraints */
  box-sizing: border-box;
  position: relative; /* Ensure proper stacking context */
}

/* TabBar - Fixed height, no shrinking */
.tab-bar {
  flex-shrink: 0;
  flex-grow: 0;
  height: 36px; /* Explicit height matching TabBar.css */
  min-height: 36px;
  max-height: 36px;
}

/* PanelGroup wrapper - Takes remaining space after TabBar */
.panel-group-wrapper {
  flex: 1;
  min-height: 0; /* Critical: allows PanelGroup to shrink below content size */
  min-width: 0;
  width: 100%;
  max-width: 100%; /* Prevent horizontal overflow */
  height: 100%;
  overflow: hidden;
  overflow-x: hidden; /* Explicit horizontal scroll prevention */
  overflow-y: hidden; /* Explicit vertical scroll prevention */
  display: flex;
  flex-direction: column; /* Ensure PanelGroup fills vertically */
  box-sizing: border-box;
  position: relative;
}


/* PanelGroup itself should fill wrapper — only set flex growth,
   do NOT override display/flex-direction (breaks react-resizable-panels drag) */
.panel-group-wrapper > div[data-panel-group] {
  flex: 1;
  min-height: 0;
}

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

/* 3.0 chat-as-drawer (#C4) — quiet, muted affordances, token-only.
   When the drawer is collapsed, reserve a right gutter so the floating ChatRail
   sits beside the full-width DAG instead of overlapping its content/Controls
   (mirrors the old collapsed left-gutter, now on the right). */
.panel-group-wrapper.chat-collapsed {
  padding-right: var(--space-12);
}

/* ChatRail: right-edge strip to reopen the chat drawer when collapsed. */
.chat-drawer-rail {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  box-shadow: var(--elevation-2);
  cursor: pointer;
  z-index: 60;
  transition: color var(--motion-fast) var(--motion-easing),
              background var(--motion-fast) var(--motion-easing);
}
.chat-drawer-rail:hover {
  color: var(--color-brand);
  background: var(--color-surface-subtle);
}
.chat-drawer-rail__label {
  font-family: var(--font-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

/* Drawer collapse (close) — small quiet control top-right of the chat panel. */
.sci-drawer-collapse-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-easing),
              background var(--motion-fast) var(--motion-easing);
}
.sci-drawer-collapse-btn:hover {
  color: var(--color-brand);
  background: var(--color-brand-subtle);
}


/* 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 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;
  overflow-y: auto;
  position: relative;
  background: #ffffff;
  /* F2 fix: Establish explicit height context so children using height:100% don't collapse */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 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 + safe-area inset (#356).
     No explicit height — parent is flex-column + height:100vh, so flex:1 (base rule)
     fills remaining space after TabBar. padding-bottom keeps content above the fixed
     bottom nav. With border-box, an explicit height + padding would double-subtract. */
  .sci-mobile-content {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    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: var(--color-surface-subtle);
  border-right: 1px solid var(--color-border);
  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: var(--type-xs);
  font-weight: var(--weight-bold);
  background: linear-gradient(135deg, var(--color-brand) 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: var(--color-brand);
  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: var(--color-success);
  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: var(--weight-bold);
  color: var(--color-text-secondary);
  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, var(--color-brand) 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: var(--color-brand);
  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, var(--color-brand-dark) 0%, var(--color-brand) 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: var(--color-brand);
  box-shadow: none;
}

.sidebar-action-button-secondary:hover {
  background: linear-gradient(135deg, var(--color-brand) 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: var(--type-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  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, var(--color-brand), #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: var(--color-surface);
  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: var(--type-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  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: var(--type-xs);
  font-weight: var(--weight-bold);
  padding: 3px 8px;
  border-radius: 12px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.sidebar-user-email {
  font-size: var(--type-base);
  color: var(--color-text-secondary);
  font-weight: 400;
  margin-bottom: 8px;
  line-height: 1.4;
}

.sidebar-user-env {
  font-size: var(--type-sm);
  color: var(--color-text-muted);
  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: var(--type-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  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: var(--color-text-muted);
  font-size: var(--type-base);
}

.sidebar-team-member {
  width: 100%;
  padding: 10px 16px;
  font-size: var(--type-base);
  font-weight: var(--weight-regular);
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  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: var(--type-sm);
  font-weight: var(--weight-bold);
  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: var(--type-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.sidebar-member-email {
  font-size: var(--type-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.sidebar-member-role {
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  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: var(--type-base);
  font-weight: var(--weight-medium);
  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: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.sidebar-menu-link.signout {
  color: var(--color-error);
}

.sidebar-menu-link.signout:hover {
  background: rgba(220, 38, 38, 0.06);
  color: #b91c1c;
}

.sidebar-menu-badge {
  margin-left: auto;
  font-size: var(--type-sm);
  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, var(--color-brand) 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 {
  /* All design tokens defined in aavishkar-material-design.css */
  /* Legacy aliases for components still referencing old variable names */
  --primary-purple: var(--color-brand);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --bg-primary: var(--color-surface-subtle);
  --bg-secondary: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.8);
  --border-light: var(--color-border);
  --border-medium: #cbd5e1;
  --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: var(--font-primary, 'Inter', system-ui, -apple-system, sans-serif);
  font-size: var(--type-base);
  font-weight: var(--weight-regular);
  background: var(--color-surface);
  height: 100vh;
  max-height: 100vh;
  max-width: 100%;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  color: var(--color-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  font-feature-settings: 'liga' 1, 'kern' 1;
  font-kerning: normal;
  -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(--color-surface-subtle);
}

::-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;
  font-size: var(--type-base);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 12px;
  transition: border-color var(--motion-fast) var(--motion-easing);
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-subtle);
}

/* 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 — token overrides in aavishkar-material-design.css */
/* Legacy aliases only */
[data-theme="dark"] :root {
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --bg-primary: var(--color-surface);
  --bg-secondary: var(--color-surface-subtle);
}