/* ═══════════════════════════════════════════════════════════════════════════════
   KAIRO UI - Premium Design System
   A stunning, modern interface for quantum wellness analysis
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   ROOT VARIABLES & FOUNDATIONS
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Core palette - cosmic theme */
  --kairo-void: #0a0a0f;
  --kairo-deep: #0d0d14;
  --kairo-surface: var(--surface-dark);
  --kairo-elevated: #1a1a24;
  --kairo-border: rgba(255, 255, 255, 0.06);
  --kairo-border-hover: rgba(255, 255, 255, 0.12);
  
  /* Accent colors - chakra-inspired */
  --kairo-crown: var(--purple-500);      /* Purple - Crown */
  --kairo-third-eye: var(--indigo-500);  /* Indigo - Third Eye */
  --kairo-throat: var(--cyan-500);     /* Cyan - Throat */
  --kairo-heart: var(--green-500);      /* Green - Heart */
  --kairo-solar: var(--yellow-500);      /* Yellow - Solar Plexus */
  --kairo-sacral: var(--orange-500);     /* Orange - Sacral */
  --kairo-root: var(--red-500);       /* Red - Root */
  
  /* Primary gradient */
  --kairo-gradient: linear-gradient(135deg, var(--kairo-throat) 0%, var(--kairo-crown) 100%);
  --kairo-gradient-hover: linear-gradient(135deg, var(--cyan-600) 0%, var(--purple-600) 100%);
  
  /* Glass effects */
  --glass-bg: rgba(18, 18, 26, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  
  /* Glow effects */
  --glow-cyan: 0 0 20px rgba(6, 182, 212, 0.3);
  --glow-purple: 0 0 20px rgba(168, 85, 247, 0.3);
  --glow-mixed: 0 0 30px rgba(6, 182, 212, 0.2), 0 0 60px rgba(168, 85, 247, 0.15);
  
  /* Typography */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Variable Font Axes */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --font-opsz-body: 16;
  --font-opsz-caption: 12;
  --font-opsz-display: 32;

  /* Spacing */
  --sidebar-width: 280px;
  --sidebar-collapsed: 72px;
  --header-height: 64px;
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE RESETS & BODY
   ───────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Reset button defaults for styled buttons */
button {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

html {
  /* Disabled smooth scroll - causes GPU lock and flickering during scroll */
  scroll-behavior: auto;
}

body.kairo-ui {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  background: var(--kairo-void);
  color: var(--slate-200);
  min-height: 100vh;
  overflow-x: hidden;

  /* Cosmic background - removed background-attachment: fixed to prevent scroll flickering/crashes */
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
  /* background-attachment: fixed; -- DISABLED: causes GPU overload and browser crashes during scroll */
}

/* ─────────────────────────────────────────────────────────────────────────────
   APP LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-app {
  display: flex;
  min-height: 100vh;
}

.kairo-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  transition: margin-left var(--transition-smooth);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--sidebar-width));
}

.kairo-app.sidebar-collapsed .kairo-main {
  margin-left: var(--sidebar-collapsed);
  width: calc(100% - var(--sidebar-collapsed));
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  /* Use solid background instead of blur - backdrop-filter causes GPU overload on large DOM */
  background: rgba(13, 13, 20, 0.98);
  /* backdrop-filter: blur(20px); -- DISABLED: causes browser crashes */
  /* -webkit-backdrop-filter: blur(20px); */
  border-right: 1px solid var(--glass-border);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: width var(--transition-smooth);
  overflow: hidden;
  /* Prevent unnecessary repaints */
  contain: layout style;
}

.kairo-app.sidebar-collapsed .kairo-sidebar {
  width: var(--sidebar-collapsed);
}

/* Logo Section */
.kairo-logo {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--glass-border);
  min-height: 80px;
}

.kairo-logo-img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: var(--glow-mixed);
  flex-shrink: 0;
}

.kairo-logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--kairo-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  box-shadow: var(--glow-mixed);
}

.kairo-logo-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity var(--transition-smooth), width var(--transition-smooth);
}

.kairo-app.sidebar-collapsed .kairo-logo-text {
  opacity: 0;
  width: 0;
}

.kairo-logo-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--kairo-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kairo-logo-subtitle {
  font-size: 10px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.kairo-logo-acronym {
  font-size: 8px;
  color: var(--slate-600);
  letter-spacing: 0.3px;
  white-space: nowrap;
  margin-top: 2px;
  opacity: 0.7;
}

/* Toggle Button */
.kairo-sidebar-toggle {
  position: absolute;
  right: -14px;
  top: 28px;
  width: 28px;
  height: 28px;
  background: var(--kairo-elevated);
  border: 1px solid var(--kairo-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 10;
  color: var(--slate-400);
}

.kairo-sidebar-toggle:hover {
  background: var(--kairo-throat);
  color: white;
  border-color: var(--kairo-throat);
  box-shadow: var(--glow-cyan);
}

.kairo-sidebar-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-smooth);
}

.kairo-app.sidebar-collapsed .kairo-sidebar-toggle svg {
  transform: rotate(180deg);
}

/* Navigation */
.kairo-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

.kairo-nav-section {
  margin-bottom: 24px;
}

.kairo-nav-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-600);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0 12px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-smooth);
}

.kairo-app.sidebar-collapsed .kairo-nav-label {
  opacity: 0;
}

.kairo-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 2px 0;
  border-radius: 10px;
  cursor: pointer;
  /* Only transition specific properties, not 'all' - major perf improvement */
  transition: background-color 150ms ease, color 150ms ease;
  color: var(--slate-400);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.kairo-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--slate-200);
}

.kairo-nav-item.active {
  /* Solid background instead of gradient for performance */
  background: rgba(6, 182, 212, 0.15);
  color: white;
}

.kairo-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  /* Solid color instead of gradient for performance */
  background: var(--cyan-500);
  border-radius: 0 3px 3px 0;
}

.kairo-nav-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.kairo-nav-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-smooth), width var(--transition-smooth);
}

.kairo-app.sidebar-collapsed .kairo-nav-text {
  opacity: 0;
  width: 0;
}

/* Status Badge */
.kairo-nav-badge {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(6, 182, 212, 0.2);
  color: var(--kairo-throat);
  border-radius: 10px;
  transition: opacity var(--transition-smooth);
}

.kairo-app.sidebar-collapsed .kairo-nav-badge {
  opacity: 0;
}

/* Sidebar Footer */
.kairo-sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--glass-border);
}

/* Practitioner Card */
.kairo-practitioner-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  transition: all var(--transition-smooth);
}

.kairo-practitioner-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--kairo-border-hover);
}

.kairo-practitioner-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kairo-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}

.kairo-practitioner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kairo-practitioner-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.kairo-practitioner-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kairo-practitioner-role {
  display: block;
  font-size: 10px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.kairo-settings-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kairo-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-400);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.kairo-settings-btn:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--kairo-throat);
  color: var(--kairo-throat);
}

.kairo-settings-btn:active {
  transform: scale(0.95);
}

/* Collapsed sidebar hides practitioner info */
.kairo-app.sidebar-collapsed .kairo-practitioner-card {
  justify-content: center;
  padding: 10px;
}

.kairo-app.sidebar-collapsed .kairo-practitioner-info,
.kairo-app.sidebar-collapsed .kairo-settings-btn {
  display: none;
}

.kairo-app.sidebar-collapsed .kairo-practitioner-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.kairo-status-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 12px;
  transition: opacity var(--transition-smooth);
}

.kairo-app.sidebar-collapsed .kairo-status-card {
  opacity: 0;
  pointer-events: none;
}

.kairo-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.kairo-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-500);
  animation: pulse-glow 2s ease-in-out infinite;
}

.kairo-status-dot.offline {
  background: var(--red-500);
  animation: none;
}

.kairo-status-dot.checking {
  background: var(--yellow-500);
  animation: pulse-glow 1s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-header {
  height: var(--header-height);
  /* Use solid background instead of blur - backdrop-filter on sticky header causes severe GPU issues */
  background: rgba(13, 13, 20, 0.98);
  /* backdrop-filter: blur(20px); -- DISABLED: causes browser crashes during scroll */
  /* -webkit-backdrop-filter: blur(20px); */
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  /* Prevent repaint storms */
  contain: layout style;
}

.kairo-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Current Patient Sidebar Card (mirrors practitioner card) */
.kairo-patient-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, rgba(168, 85, 247, 0.06) 100%);
  border-radius: 10px;
  border: 1px solid rgba(6, 182, 212, 0.2);
  transition: all var(--transition-smooth);
  animation: fadeIn 0.3s ease-out;
}

.kairo-patient-card:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
  border-color: rgba(6, 182, 212, 0.35);
}

.kairo-patient-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.15);
  border: 2px solid rgba(6, 182, 212, 0.25);
}

.kairo-patient-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.kairo-patient-card-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kairo-patient-card-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: rgba(6, 182, 212, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 3px;
}

.kairo-patient-card-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.kairo-patient-card-meta {
  display: block;
  font-size: 10px;
  color: var(--slate-500);
  margin-top: 1px;
  line-height: 1;
}

.kairo-patient-card-clear {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-600);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.kairo-patient-card-clear:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--red-500);
}

.kairo-patient-card-clear:active {
  transform: scale(0.95);
}

/* Collapsed sidebar hides patient card info */
.kairo-app.sidebar-collapsed .kairo-patient-card {
  justify-content: center;
  padding: 10px;
}

.kairo-app.sidebar-collapsed .kairo-patient-card-info,
.kairo-app.sidebar-collapsed .kairo-patient-card-clear {
  display: none;
}

.kairo-app.sidebar-collapsed .kairo-patient-card-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

/* Current Patient Display (header badge - kept for header-patient-display) */
.kairo-current-patient {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: fadeIn 0.3s ease-out;
}

.kairo-patient-separator {
  color: var(--slate-600);
  font-size: 12px;
}

.kairo-patient-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 20px;
  font-size: 13px;
  color: white;
  font-weight: 500;
}

.kairo-patient-icon {
  font-size: 14px;
}

.kairo-patient-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kairo-patient-clear {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--slate-400);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  margin-left: 4px;
}

.kairo-patient-clear:hover {
  background: rgba(239, 68, 68, 0.3);
  color: var(--red-500);
}

.kairo-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--slate-500);
}

.kairo-breadcrumb-item {
  color: var(--slate-400);
}

.kairo-breadcrumb-item.active {
  color: white;
  font-weight: 500;
}

.kairo-breadcrumb-separator {
  color: var(--slate-600);
}

.kairo-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kairo-header-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kairo-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--slate-400);
}

.kairo-header-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--kairo-border-hover);
  color: white;
}

/* Header Dropdown */
.kairo-dropdown-wrapper {
  position: relative;
}

.kairo-dropdown-trigger.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--kairo-throat);
}

.kairo-header-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--kairo-elevated);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-fast);
  z-index: 1000;
  overflow: hidden;
}

.kairo-header-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.kairo-dropdown-header {
  padding: 10px 14px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.kairo-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--slate-200);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.kairo-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.kairo-dropdown-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.kairo-dropdown-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 6px 0;
}

.kairo-model-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kairo-border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--slate-200);
  cursor: pointer;
  transition: all var(--transition-fast);
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

.kairo-model-select:hover {
  border-color: var(--kairo-border-hover);
}

.kairo-model-select:focus {
  outline: none;
  border-color: var(--kairo-throat);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTENT AREA
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  transition: margin-left var(--transition-smooth), width var(--transition-smooth);
}

.kairo-app.sidebar-collapsed .kairo-content {
  margin-left: var(--sidebar-collapsed);
  width: calc(100% - var(--sidebar-collapsed));
}

/* When kairo-main is inside kairo-content, reset its margin */
.kairo-content .kairo-main {
  margin-left: 0;
  width: 100%;
}

/* Standard pages */
.kairo-page {
  display: none;
  animation: fadeIn 0.3s ease-out;
  padding: 24px;
}

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

.kairo-page.active {
  display: block;
}

/* 
   DIAGNOSTIC TABS - These are placed outside kairo-main in the HTML
   so they need explicit positioning to account for the sidebar and header
   
   NOTE: Some tab-content divs are INSIDE kairo-content (patients, raw-data, visualizations)
   and should NOT get fixed positioning. Only the diagnostic tabs outside need it.
*/
#content-tongue-dx,
#content-energetic-body,
#content-voice-ans,
#content-oura-insights,
#content-quantum-timeline,
#content-astrology,
#content-genetics,
#content-sefi,
#content-knowledge-graph,
#content-adaptive-dynamics,
#content-biorhythm,
#content-constitution-questionnaire,
#content-clinician-dashboard,
#content-iris-scanner,
#content-food-intelligence,
#content-peptide-intelligence,
#content-admin,
#content-integrative-medicine,
#healing-tree-container {
  display: none;
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  left: var(--sidebar-width);
  overflow: hidden;
  overflow-y: auto;
  background: var(--kairo-void);
  z-index: 40;
  transition: left var(--transition-smooth);
  padding: 0 !important;
  margin: 0 !important;
}

/* Biorhythm needs scroll */
#content-biorhythm {
  overflow-y: auto;
}

/* When sidebar is collapsed - use body class since tabs are outside kairo-app */
body.sidebar-collapsed #content-tongue-dx,
body.sidebar-collapsed #content-energetic-body,
body.sidebar-collapsed #content-voice-ans,
body.sidebar-collapsed #content-oura-insights,
body.sidebar-collapsed #content-quantum-timeline,
body.sidebar-collapsed #content-astrology,
body.sidebar-collapsed #content-genetics,
body.sidebar-collapsed #content-sefi,
body.sidebar-collapsed #content-knowledge-graph,
body.sidebar-collapsed #content-adaptive-dynamics,
body.sidebar-collapsed #content-biorhythm,
body.sidebar-collapsed #content-constitution-questionnaire,
body.sidebar-collapsed #content-clinician-dashboard,
body.sidebar-collapsed #content-iris-scanner,
body.sidebar-collapsed #content-food-intelligence,
body.sidebar-collapsed #content-peptide-intelligence,
body.sidebar-collapsed #content-integrative-medicine,
body.sidebar-collapsed #healing-tree-container {
  left: var(--sidebar-collapsed);
}

#content-tongue-dx[style*="display: block"],
#content-voice-ans[style*="display: block"],
#content-oura-insights[style*="display: block"],
#content-quantum-timeline[style*="display: block"],
#content-astrology[style*="display: block"],
#content-genetics[style*="display: block"],
#content-sefi[style*="display: block"],
#content-knowledge-graph[style*="display: block"],
#content-adaptive-dynamics[style*="display: block"],
#content-biorhythm[style*="display: block"],
#content-constitution-questionnaire[style*="display: block"],
#content-clinician-dashboard[style*="display: block"],
#content-iris-scanner[style*="display: block"],
#content-food-intelligence[style*="display: block"],
#content-peptide-intelligence[style*="display: block"],
#content-integrative-medicine[style*="display: block"],
#healing-tree-container[style*="display: block"] {
  display: block !important;
}

/* Energetic Body needs block display, not flex */
#content-energetic-body[style*="display: block"] {
  display: block !important;
}

/* Tabs inside kairo-content - normal flow, no fixed positioning */
.kairo-content .tab-content {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  height: auto;
  overflow: visible;
  padding: 24px;
}

.kairo-content .tab-content[style*="display: block"] {
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARDS & PANELS
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all var(--transition-smooth);
}

.kairo-card:hover {
  border-color: var(--kairo-border-hover);
  box-shadow: var(--glass-shadow);
}

.kairo-card-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kairo-card-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kairo-card-body {
  padding: 24px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.kairo-btn-primary {
  background: var(--kairo-gradient);
  color: white;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.25);
}

.kairo-btn-primary:hover {
  background: var(--kairo-gradient-hover);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35);
  transform: translateY(-1px);
}

.kairo-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--slate-200);
  border: 1px solid var(--kairo-border);
}

.kairo-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--kairo-border-hover);
}

.kairo-btn-ghost {
  background: transparent;
  color: var(--slate-400);
}

.kairo-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  color: white;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DROP ZONE
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-dropzone {
  border: 2px dashed var(--kairo-border);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
  transition: all var(--transition-smooth);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.kairo-dropzone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(6, 182, 212, 0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.kairo-dropzone:hover,
.kairo-dropzone.dragover {
  border-color: var(--kairo-throat);
  background: rgba(6, 182, 212, 0.03);
}

.kairo-dropzone:hover::before,
.kairo-dropzone.dragover::before {
  opacity: 1;
}

.kairo-dropzone-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.kairo-dropzone-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 8px;
}

.kairo-dropzone-subtitle {
  font-size: 13px;
  color: var(--slate-500);
}

/* ─────────────────────────────────────────────────────────────────────────────
   QUICK ACTIONS GRID
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.kairo-quick-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.kairo-quick-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--kairo-border-hover);
  transform: translateY(-2px);
}

.kairo-quick-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.kairo-quick-icon.healing { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.05) 100%); }
.kairo-quick-icon.tongue { background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(236, 72, 153, 0.05) 100%); }
.kairo-quick-icon.energy { background: linear-gradient(135deg, rgba(234, 179, 8, 0.2) 0%, rgba(234, 179, 8, 0.05) 100%); }
.kairo-quick-icon.quantum { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.05) 100%); }
.kairo-quick-icon.astro { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.05) 100%); }
.kairo-quick-icon.patients { background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.05) 100%); }

.kairo-quick-title {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.kairo-quick-desc {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOOLTIP ON COLLAPSED SIDEBAR
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-app.sidebar-collapsed .kairo-nav-item {
  position: relative;
}

.kairo-app.sidebar-collapsed .kairo-nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--kairo-elevated);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 1000;
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--kairo-border);
}

.kairo-app.sidebar-collapsed .kairo-nav-item:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  :root {
    --sidebar-width: 260px;
  }
}

@media (max-width: 768px) {
  .kairo-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
  }
  
  .kairo-app.sidebar-open .kairo-sidebar {
    transform: translateX(0);
  }
  
  .kairo-main {
    margin-left: 0;
  }
  
  .kairo-app.sidebar-collapsed .kairo-main {
    margin-left: 0;
  }
  
  .kairo-mobile-toggle {
    display: flex;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCROLLBAR
   ───────────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING STATES
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px;
  color: var(--slate-500);
}

.kairo-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--kairo-border);
  border-top-color: var(--kairo-throat);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   NOTIFICATIONS / TOASTS
   ───────────────────────────────────────────────────────────────────────────── */

.kairo-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

.kairo-toast {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--glass-shadow);
  animation: slideInRight 0.3s ease-out;
  max-width: 360px;
}

.kairo-toast.success { border-left: 3px solid var(--kairo-heart); }
.kairo-toast.error { border-left: 3px solid var(--kairo-root); }
.kairo-toast.warning { border-left: 3px solid var(--kairo-solar); }
.kairo-toast.info { border-left: 3px solid var(--kairo-throat); }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Tab content styling for new UI */
.tab-content {
  color: var(--slate-200);
}

/* Ensure text is visible in dark theme */
body.kairo-ui .tab-content h2,
body.kairo-ui .tab-content h3,
body.kairo-ui .tab-content p,
body.kairo-ui .tab-content label,
body.kairo-ui .tab-content span {
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DIAGNOSTIC TABS - STRUCTURE (Tongue, OURA only - NOT energetic body)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* OURA dashboard layout */
.tab-content .oura-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.tab-content .oura-header,
.tab-content .oura-nav {
  flex-shrink: 0;
}

.tab-content .oura-content {
  flex: 1;
  overflow-y: auto;
}

/* Tongue diagnosis */
#content-tongue-dx {
  overflow-y: auto !important;
}

/* Genetics Command Center */
#content-genetics {
  overflow-y: auto !important;
}

.tab-content .gcc-dashboard {
  height: 100%;
  overflow-y: auto;
  padding: 1.5rem;
}

/* Knowledge Graph */
#content-knowledge-graph {
  overflow-y: auto !important;
}

#content-knowledge-graph .kg-dashboard {
  height: 100%;
  min-height: 100%;
}

/* Astrology tab - fix height */
#content-astrology.astro-cosmos {
  min-height: unset !important;
  height: 100% !important;
  overflow-y: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ENERGETIC BODY TAB - Complete Fix
   ═══════════════════════════════════════════════════════════════════════════════ */

#content-energetic-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#content-energetic-body .eb-cosmic-void {
  min-height: 100% !important;
  width: 100% !important;
}

#content-astrology {
  padding: 0 !important;
  margin: 0 !important;
}

/* Adaptive Dynamics - full page fixed positioning */
#content-adaptive-dynamics {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#content-adaptive-dynamics .ad-container {
  min-height: 100%;
  padding: 1.5rem;
}

/* Constitution Questionnaire - full page fixed positioning */
#content-constitution-questionnaire {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 1.5rem !important;
}

/* Clinician Dashboard - full page fixed positioning */
#content-clinician-dashboard {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 1.5rem !important;
}

/* Peptide Intelligence - no extra padding */
#content-peptide-intelligence {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Healing Tree container */
#healing-tree-container {
  background: var(--slate-800);
}

#healing-tree-container > div {
  height: 100% !important;
  min-height: unset !important;
  display: flex;
  flex-direction: column;
}

#healing-tree-container > div > .bg-gradient-to-r {
  flex-shrink: 0;
}

#healing-tree-container > div > .grid {
  flex: 1;
  height: auto !important;
  overflow: hidden;
}

#healing-tree-container .col-span-3,
#healing-tree-container .col-span-6 {
  overflow-y: auto;
  /* Prevent scroll chaining that can cause browser issues */
  overscroll-behavior: contain;
}

body.kairo-ui #healing-tree-container {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Performance optimizations for Healing Tree page - lightweight version */
/* Removed aggressive optimizations that broke click handlers */

/* 3D canvas containers */
body.kairo-ui #ht-canvas,
body.kairo-ui #eb-canvas-container canvas {
  max-width: 100%;
}

body.kairo-ui .col-span-6 {
  max-width: 100%;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BMFII - BIOELECTRIC MORPHIC FIELD INTEGRITY INDEX STYLES
   Stunning animations and effects for the bioelectric analysis dashboard
   ───────────────────────────────────────────────────────────────────────────── */

/* Shimmer animation for progress bars */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}

/* Slow pulse for background effects */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
}

.animate-pulse-slow {
  animation: pulse-slow 4s ease-in-out infinite;
}

/* BMFII Gauge glow effect */
@keyframes bmfii-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.8));
  }
}

#bmfii-progress-arc {
  animation: bmfii-glow 3s ease-in-out infinite;
}

/* Ion channel card hover effects */
.ion-channel-card {
  transition: all 0.3s ease;
}

.ion-channel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.3);
}

/* Cell state indicator pulse */
@keyframes cell-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
}

.cell-state-indicator {
  animation: cell-pulse 2s ease-in-out infinite;
}

/* Treatment receptivity glow */
@keyframes receptivity-glow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.receptivity-active {
  animation: receptivity-glow 1.5s ease-in-out infinite;
}

/* Bioelectric boost badge animation */
@keyframes boost-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.bioelectric-boost-badge {
  animation: boost-pop 0.5s ease-out;
}

/* BMFII Dashboard gradients */
.bmfii-gradient-emerald {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.bmfii-gradient-cyan {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.05) 100%);
}

.bmfii-gradient-purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.05) 100%);
}

.bmfii-gradient-amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.bmfii-gradient-red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.05) 100%);
}

/* Electric flow animation for borders */
@keyframes electric-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.electric-border {
  background: linear-gradient(90deg, var(--cyan-400), var(--purple-500), var(--green-500), var(--cyan-400));
  background-size: 300% 100%;
  animation: electric-flow 3s ease infinite;
}

/* Particle effect for dashboard header */
@keyframes float-particle {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-10px) translateX(5px);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-5px) translateX(-5px);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-15px) translateX(3px);
    opacity: 0.5;
  }
}

.bmfii-particle {
  animation: float-particle 4s ease-in-out infinite;
}

.bmfii-particle:nth-child(2) {
  animation-delay: 0.5s;
}

.bmfii-particle:nth-child(3) {
  animation-delay: 1s;
}

/* Score transition animation */
.score-animate {
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Component bar fill animation */
@keyframes bar-fill {
  from {
    width: 0%;
  }
}

.component-bar-fill {
  animation: bar-fill 1.5s ease-out;
}

/* Healing Tree bioelectric panel styling */
#ht-bioelectric-panel {
  background: linear-gradient(135deg,
    rgba(6, 182, 212, 0.05) 0%,
    rgba(18, 18, 26, 0.95) 50%,
    rgba(168, 85, 247, 0.05) 100%);
  backdrop-filter: blur(10px);
}

#ht-bioelectric-panel:hover {
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.15),
              0 0 80px rgba(168, 85, 247, 0.1);
}

/* Formula match score animation */
@keyframes score-pulse {
  0%, 100% {
    text-shadow: 0 0 10px currentColor;
  }
  50% {
    text-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
  }
}

.formula-score-excellent {
  animation: score-pulse 2s ease-in-out infinite;
}

/* Ion channel grid hover state */
.ion-channel-grid > div {
  transition: all 0.3s ease;
}

.ion-channel-grid > div:hover {
  transform: scale(1.02);
  z-index: 10;
}

/* Vmem range indicator */
.vmem-indicator {
  position: relative;
  overflow: hidden;
}

.vmem-indicator::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

/* Levin framework attribution styling */
.levin-attribution {
  position: relative;
  padding-left: 12px;
}

.levin-attribution::before {
  content: '⚡';
  position: absolute;
  left: 0;
  animation: pulse 2s ease-in-out infinite;
}

/* Responsive adjustments for BMFII */
@media (max-width: 1024px) {
  #bmfii-dashboard .grid-cols-3 {
    grid-template-columns: 1fr;
  }

  #bmfii-dashboard .lg\\:col-span-1 {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .ion-channel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SKELETON LOADERS
   Shimmer placeholders matching component shapes
   ───────────────────────────────────────────────────────────────────────────── */

/* Base skeleton element */
.kairo-skeleton {
  background: var(--kairo-elevated, #1a1a24);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

/* Shimmer overlay animation */
.kairo-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 80%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  transform: translateX(-100%);
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Light theme shimmer */
[data-theme="light"] .kairo-skeleton {
  background: var(--kairo-elevated, #e2e8f0);
}

[data-theme="light"] .kairo-skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.03) 20%,
    rgba(0, 0, 0, 0.06) 50%,
    rgba(0, 0, 0, 0.03) 80%,
    transparent 100%
  );
}

/* Shape variants */
.kairo-skeleton--text {
  height: 14px;
  border-radius: 4px;
  width: 80%;
}

.kairo-skeleton--text-short {
  height: 14px;
  border-radius: 4px;
  width: 40%;
}

.kairo-skeleton--heading {
  height: 24px;
  border-radius: 6px;
  width: 60%;
}

.kairo-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

.kairo-skeleton--icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

.kairo-skeleton--stat-value {
  height: 36px;
  width: 60px;
  border-radius: 6px;
}

.kairo-skeleton--card {
  height: 100%;
  min-height: 120px;
  border-radius: 16px;
  border: 1px solid var(--kairo-border);
}

.kairo-skeleton--bar {
  height: 8px;
  border-radius: 4px;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   VARIABLE FONT UTILITIES
   Smooth weight control via font-variation-settings
   ───────────────────────────────────────────────────────────────────────────── */

/* Smooth weight transitions for interactive elements */
.vf-weight-transition {
  transition: font-variation-settings var(--transition-smooth);
}

/* Precise weight control */
.vf-thin { font-variation-settings: 'wght' 100, 'opsz' var(--font-opsz-body); }
.vf-light { font-variation-settings: 'wght' 300, 'opsz' var(--font-opsz-body); }
.vf-regular { font-variation-settings: 'wght' 400, 'opsz' var(--font-opsz-body); }
.vf-medium { font-variation-settings: 'wght' 500, 'opsz' var(--font-opsz-body); }
.vf-semibold { font-variation-settings: 'wght' 600, 'opsz' var(--font-opsz-body); }
.vf-bold { font-variation-settings: 'wght' 700, 'opsz' var(--font-opsz-body); }
.vf-extrabold { font-variation-settings: 'wght' 800, 'opsz' var(--font-opsz-display); }
.vf-black { font-variation-settings: 'wght' 900, 'opsz' var(--font-opsz-display); }

/* Nav items: smooth weight shift on hover/active (preserves opacity/width transitions from base rule) */
.kairo-nav-text {
  font-variation-settings: 'wght' 500;
  transition: font-variation-settings var(--transition-fast), opacity var(--transition-smooth), width var(--transition-smooth);
}

.kairo-nav-item:hover .kairo-nav-text {
  font-variation-settings: 'wght' 600;
}

.kairo-nav-item.active .kairo-nav-text {
  font-variation-settings: 'wght' 600;
}

/* Display text uses optical sizing for readability at large sizes */
.kairo-logo-title {
  font-variation-settings: 'wght' 800, 'opsz' 32;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PERFORMANCE & ACCESSIBILITY - Reduced Motion
   ───────────────────────────────────────────────────────────────────────────── */

/* Respect user's motion preferences for better accessibility and performance */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Global scroll performance improvements */
.overflow-y-auto,
[class*="overflow-y-auto"] {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Prevent layout thrashing from hover states during scroll */
@supports (scroll-behavior: smooth) {
  .col-span-3::-webkit-scrollbar,
  .col-span-6::-webkit-scrollbar {
    width: 6px;
  }
  
  .col-span-3::-webkit-scrollbar-track,
  .col-span-6::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }
  
  .col-span-3::-webkit-scrollbar-thumb,
  .col-span-6::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }
}