/* ═══════════════════════════════════════════════════════════════════════════════
   KAIRO IRIS SCANNER - Dedicated Iridology Intelligence Page
   Progressive Vertical Scan + Symbolic Zone Overlays

   "Eyes are not organs. They are timelines."
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   IRIS SCANNER CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */

.iris-scanner-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  box-sizing: border-box;
}

.iris-scanner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(20px);
}

.iris-scanner-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--slate-100);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.iris-scanner-header h1::before {
  content: '👁️';
  font-size: 1.3rem;
}

.iris-patient-info {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--slate-400);
  font-size: 0.9rem;
}

.iris-patient-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.iris-patient-selector label {
  font-size: 0.85rem;
  color: var(--slate-400);
  font-weight: 500;
}

.iris-patient-select {
  background: linear-gradient(135deg, rgba(26, 31, 42, 0.95) 0%, rgba(15, 19, 24, 0.98) 100%);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--slate-200);
  padding: 8px 36px 8px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2306b6d4'%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;
  min-width: 200px;
  transition: all 0.3s ease;
}

.iris-patient-select:hover {
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
}

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

.iris-patient-select option {
  background: #1a1f2a;
  color: var(--slate-200);
  padding: 8px;
}

.iris-patient-info .eye-selector {
  display: flex;
  gap: 8px;
}

.eye-selector-btn {
  padding: 8px 16px;
  border: 1px solid var(--kairo-border);
  background: transparent;
  color: var(--slate-400);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.85rem;
}

.eye-selector-btn:hover {
  border-color: var(--kairo-border-hover);
  color: var(--slate-200);
}

.eye-selector-btn.active {
  background: var(--kairo-gradient);
  border-color: transparent;
  color: white;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN SCANNER AREA
   ───────────────────────────────────────────────────────────────────────────── */

.iris-scanner-main {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  flex: 1;
}

.iris-viewport-container {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  backdrop-filter: blur(20px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   IRIS IMAGE VIEWPORT (THE CENTERPIECE)
   ───────────────────────────────────────────────────────────────────────────── */

.iris-viewport {
  position: relative;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at center, var(--kairo-elevated) 0%, #0a0a0f 100%);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.05),
    0 0 60px rgba(6, 182, 212, 0.1),
    inset 0 0 100px rgba(0, 0, 0, 0.5);
}

.iris-viewport.has-image {
  background: transparent;
}

/* Placeholder when no image */
.iris-viewport-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--slate-500);
  gap: 16px;
  z-index: 1;
}

/* Hide placeholder when viewport has image */
.iris-viewport.has-image .iris-viewport-placeholder {
  display: none !important;
}

.iris-viewport-placeholder .icon {
  font-size: 4rem;
  opacity: 0.4;
}

.iris-viewport-placeholder .text {
  font-size: 1rem;
  text-align: center;
  max-width: 200px;
}

/* The actual iris image */
.iris-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 2;
}

/* Ensure image is visible when displayed */
.iris-viewport.has-image .iris-image {
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HORIZONTAL SCAN BAR (MOVES VERTICALLY)
   ───────────────────────────────────────────────────────────────────────────── */

.iris-scan-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(6, 182, 212, 0.6) 20%,
    rgba(168, 85, 247, 0.6) 50%,
    rgba(6, 182, 212, 0.6) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 20px rgba(6, 182, 212, 0.4),
    0 0 40px rgba(168, 85, 247, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  /* Gaussian blur effect */
  filter: blur(2px);
}

.iris-scan-bar::before,
.iris-scan-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
}

.iris-scan-bar::before {
  top: -30px;
  background: linear-gradient(to bottom, transparent, rgba(6, 182, 212, 0.1));
}

.iris-scan-bar::after {
  bottom: -30px;
  background: linear-gradient(to top, transparent, rgba(168, 85, 247, 0.1));
}

/* Scanning state */
.iris-viewport.scanning .iris-scan-bar {
  opacity: 1;
  animation: iris-scan-vertical 6s ease-in-out infinite;
}

@keyframes iris-scan-vertical {
  0% {
    top: 0%;
    transform: translateY(0);
  }
  50% {
    top: 100%;
    transform: translateY(-100%);
  }
  100% {
    top: 0%;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SYMBOLIC ZONE OVERLAYS (FIELD-BASED, NOT CHARTS)
   ───────────────────────────────────────────────────────────────────────────── */

.iris-zone-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease-out;
}

.iris-viewport.phase-2 .iris-zone-overlay,
.iris-viewport.phase-3 .iris-zone-overlay {
  opacity: 1;
}

/* Individual zone fields - rendered as radial gradients */
.zone-field {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1.5s ease-out;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Zone color palette - muted and symbolic */
.zone-field.cerebral {
  background: radial-gradient(
    ellipse 40% 30% at 50% 15%,
    rgba(167, 139, 250, 0.25) 0%,
    transparent 70%
  );
}

.zone-field.cardiac {
  background: radial-gradient(
    ellipse 35% 25% at 75% 55%,
    rgba(236, 72, 153, 0.2) 0%,
    transparent 70%
  );
}

.zone-field.digestive {
  background: radial-gradient(
    ellipse 45% 30% at 50% 85%,
    rgba(251, 191, 36, 0.2) 0%,
    transparent 70%
  );
}

.zone-field.hepatic {
  background: radial-gradient(
    ellipse 30% 35% at 25% 35%,
    rgba(74, 222, 128, 0.2) 0%,
    transparent 70%
  );
}

.zone-field.kidney {
  background: radial-gradient(
    ellipse 35% 25% at 30% 70%,
    rgba(96, 165, 250, 0.2) 0%,
    transparent 70%
  );
}

.zone-field.respiratory {
  background: radial-gradient(
    ellipse 30% 25% at 70% 30%,
    rgba(34, 211, 238, 0.2) 0%,
    transparent 70%
  );
}

/* Phase 2: Soft emergence */
.iris-viewport.phase-2 .zone-field {
  opacity: 0.4;
  filter: blur(20px);
}

/* Phase 3: Sharpening (still soft) */
.iris-viewport.phase-3 .zone-field {
  opacity: 0.6;
  filter: blur(10px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   COLLARETTE RING INDICATOR
   ───────────────────────────────────────────────────────────────────────────── */

.iris-collarette-ring {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease-out;
}

.iris-viewport.phase-3 .iris-collarette-ring {
  opacity: 0.5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCAN STATUS & PROGRESS
   ───────────────────────────────────────────────────────────────────────────── */

.iris-scan-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
}

.scan-status-text {
  font-size: 0.95rem;
  color: var(--slate-400);
  text-align: center;
  min-height: 24px;
}

.scan-status-text.active {
  color: var(--kairo-throat);
}

.scan-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--kairo-elevated);
  border-radius: 3px;
  overflow: hidden;
}

.scan-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--kairo-gradient);
  border-radius: 3px;
  transition: width 0.3s ease-out;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

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

.iris-action-buttons {
  display: flex;
  gap: 16px;
}

.iris-btn {
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.iris-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
}

.iris-btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.iris-btn.secondary {
  background: var(--kairo-elevated);
  color: var(--slate-200);
  border: 1px solid var(--kairo-border);
}

.iris-btn.secondary:hover {
  background: var(--kairo-surface);
  border-color: var(--kairo-border-hover);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR PANEL (ANALYSIS RESULTS)
   ───────────────────────────────────────────────────────────────────────────── */

.iris-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.iris-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(20px);
}

.iris-panel-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kairo-border);
}

/* Quality Indicators */
.quality-indicators {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quality-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quality-label {
  color: var(--slate-400);
  font-size: 0.85rem;
}

.quality-value {
  font-size: 0.85rem;
  font-weight: 500;
}

.quality-value.pass { color: var(--kairo-heart); }
.quality-value.warning { color: var(--kairo-solar); }
.quality-value.fail { color: var(--kairo-root); }

/* Autonomic Profile */
.autonomic-profile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.autonomic-meter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--slate-500);
}

.meter-bar {
  height: 8px;
  background: var(--kairo-elevated);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.meter-fill {
  position: absolute;
  left: 50%;
  height: 100%;
  background: var(--kairo-gradient);
  border-radius: 4px;
  transition: all 0.5s ease-out;
}

.meter-fill.left {
  transform: translateX(-100%);
}

.meter-fill.right {
  transform: translateX(0);
}

/* Zone Resonance List */
.zone-resonance-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.zone-resonance-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--kairo-elevated);
  border-radius: 8px;
  font-size: 0.85rem;
}

.zone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.zone-dot.cerebral { background: var(--violet-400); }
.zone-dot.cardiac { background: var(--pink-500); }
.zone-dot.digestive { background: var(--amber-400); }
.zone-dot.hepatic { background: var(--green-400); }
.zone-dot.kidney { background: var(--blue-400); }
.zone-dot.respiratory { background: var(--cyan-400); }

.zone-name {
  flex: 1;
  color: var(--slate-200);
}

.zone-confidence {
  color: var(--slate-500);
  font-size: 0.75rem;
}

/* Temporal Trend Indicator */
.temporal-trend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--kairo-elevated);
  border-radius: 12px;
}

.trend-icon {
  font-size: 1.5rem;
}

.trend-info {
  flex: 1;
}

.trend-direction {
  font-weight: 500;
  color: var(--slate-200);
  font-size: 0.95rem;
}

.trend-direction.improving { color: var(--kairo-heart); }
.trend-direction.stable { color: var(--kairo-throat); }
.trend-direction.destabilizing { color: var(--kairo-solar); }

.trend-note {
  color: var(--slate-500);
  font-size: 0.8rem;
  margin-top: 4px;
}

/* Action Gate Display */
.action-gate {
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}

.action-gate.observe {
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.action-gate.support-only {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.action-gate.eligible {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.action-gate-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--slate-500);
  margin-bottom: 4px;
}

.action-gate-value {
  font-size: 1rem;
  font-weight: 600;
}

.action-gate.observe .action-gate-value { color: var(--kairo-throat); }
.action-gate.support-only .action-gate-value { color: var(--kairo-solar); }
.action-gate.eligible .action-gate-value { color: var(--kairo-heart); }

/* ─────────────────────────────────────────────────────────────────────────────
   NARRATIVE OUTPUT
   ───────────────────────────────────────────────────────────────────────────── */

.iris-narrative {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(20px);
}

.narrative-content {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--slate-300);
  font-style: italic;
}

.narrative-content::before {
  content: '"';
  font-size: 2rem;
  color: var(--kairo-throat);
  opacity: 0.5;
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 4px;
}

.narrative-placeholder {
  color: var(--slate-600);
  text-align: center;
  padding: 20px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   IMAGE CAPTURE MODAL
   ───────────────────────────────────────────────────────────────────────────── */

.iris-capture-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.iris-capture-modal.active {
  opacity: 1;
  visibility: visible;
}

.iris-capture-content {
  background: var(--kairo-surface);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 32px;
  max-width: 600px;
  width: 90%;
  text-align: center;
}

.iris-capture-content h2 {
  color: var(--slate-100);
  margin: 0 0 8px 0;
  font-size: 1.5rem;
}

.iris-capture-content p {
  color: var(--slate-400);
  margin: 0 0 24px 0;
}

.capture-options {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.capture-option {
  flex: 1;
  max-width: 200px;
  padding: 24px;
  background: var(--kairo-elevated);
  border: 2px solid var(--kairo-border);
  border-radius: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.capture-option:hover {
  border-color: var(--kairo-throat);
  transform: translateY(-4px);
}

.capture-option .icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.capture-option .label {
  font-weight: 500;
  color: var(--slate-200);
}

.capture-option .hint {
  font-size: 0.8rem;
  color: var(--slate-500);
  margin-top: 4px;
}

/* Hidden file input */
.iris-file-input {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   IMAGE HISTORY PANEL
   ───────────────────────────────────────────────────────────────────────────── */

.iris-history-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.iris-history-item {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

.iris-history-item:hover {
  border-color: var(--kairo-throat);
  transform: scale(1.05);
}

.iris-history-item.current {
  border-color: var(--kairo-crown);
}

.iris-history-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iris-history-date {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.7);
  font-size: 0.7rem;
  color: var(--slate-400);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING & PROCESSING STATES
   ───────────────────────────────────────────────────────────────────────────── */

.iris-processing-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.iris-viewport.processing .iris-processing-overlay {
  opacity: 1;
  visibility: visible;
}

.processing-spinner {
  width: 60px;
  height: 60px;
  border: 3px solid var(--kairo-elevated);
  border-top-color: var(--kairo-throat);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.processing-text {
  color: var(--slate-400);
  font-size: 0.9rem;
}

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

@media (max-width: 1200px) {
  .iris-scanner-main {
    grid-template-columns: 1fr;
  }

  .iris-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .iris-panel {
    flex: 1;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .iris-viewport {
    width: 350px;
    height: 350px;
  }

  .iris-scanner-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .iris-patient-info {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ZONE TREND INDICATORS (Enhancement 6)
   ───────────────────────────────────────────────────────────────────────────── */

.zone-trend-indicator {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 600;
}

.zone-trend-indicator .trend-up {
  color: var(--green-400);
}

.zone-trend-indicator .trend-stable {
  color: var(--slate-400);
}

.zone-trend-indicator .trend-down {
  color: var(--red-400);
}

.zone-resonance-item.zone-concern {
  border-left: 2px solid var(--red-400);
  padding-left: 8px;
  background: rgba(248, 113, 113, 0.05);
}

/* Zones of Concern Alert */
.zones-of-concern {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(248, 113, 113, 0.05));
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.concern-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.concern-icon {
  font-size: 1rem;
}

.concern-title {
  font-weight: 600;
  color: var(--red-400);
  font-size: 0.9rem;
}

.concern-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.concern-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.concern-item:hover {
  background: rgba(0, 0, 0, 0.3);
}

.concern-zone {
  color: var(--slate-200);
  font-size: 0.85rem;
}

.concern-significance {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

.concern-significance.notable {
  background: rgba(251, 191, 36, 0.2);
  color: var(--amber-400);
}

.concern-significance.significant {
  background: rgba(248, 113, 113, 0.2);
  color: var(--red-400);
}

/* Zone Trend Modal */
.zone-trend-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: iris-fadeIn 0.2s ease;
}

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

.zone-trend-modal-content {
  background: linear-gradient(135deg, var(--slate-800), var(--slate-900));
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.zone-trend-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.zone-trend-modal-header h3 {
  margin: 0;
  color: var(--slate-100);
  font-size: 1.1rem;
}

.zone-trend-close {
  background: none;
  border: none;
  color: var(--slate-400);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.zone-trend-close:hover {
  color: var(--slate-100);
}

.zone-trend-modal-body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(80vh - 60px);
}

.zone-trend-chart {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  height: 120px;
  padding: 16px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.trend-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.trend-bar {
  width: 32px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.trend-bar.improving {
  background: linear-gradient(to top, var(--green-500), var(--green-400));
}

.trend-bar.stable {
  background: linear-gradient(to top, var(--slate-500), var(--slate-400));
}

.trend-bar.destabilizing {
  background: linear-gradient(to top, var(--red-500), var(--red-400));
}

.trend-label {
  font-size: 0.75rem;
  color: var(--slate-400);
}

.zone-trend-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trend-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-label {
  color: var(--slate-400);
  font-size: 0.9rem;
}

.detail-value {
  color: var(--slate-200);
  font-weight: 500;
  font-size: 0.9rem;
}

.detail-value.improving {
  color: var(--green-400);
}

.detail-value.stable {
  color: var(--slate-400);
}

.detail-value.destabilizing {
  color: var(--red-400);
}

.zone-narrative {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  font-style: italic;
  color: var(--slate-300);
  font-size: 0.9rem;
  line-height: 1.6;
}

.no-data {
  color: var(--slate-400);
  text-align: center;
  margin: 0;
}

.no-data-hint {
  color: var(--slate-500);
  text-align: center;
  font-size: 0.85rem;
  margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BILATERAL COMPARISON MODAL (Enhancement 2)
   ───────────────────────────────────────────────────────────────────────────── */

.bilateral-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: iris-fadeIn 0.2s ease;
}

.bilateral-modal-content {
  background: linear-gradient(135deg, var(--slate-800), var(--slate-900));
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 12px;
  width: 95%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.bilateral-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.bilateral-modal-header h3 {
  margin: 0;
  color: var(--slate-100);
  font-size: 1.2rem;
}

.bilateral-subtitle {
  color: var(--slate-400);
  font-size: 0.9rem;
}

.bilateral-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--slate-400);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.bilateral-close:hover {
  color: var(--slate-100);
}

.bilateral-modal-body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(90vh - 70px);
}

/* Side by side images */
.bilateral-images {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.bilateral-image-container {
  flex: 1;
  text-align: center;
}

.bilateral-eye-label {
  font-weight: 600;
  color: var(--slate-100);
  font-size: 1rem;
  margin-bottom: 4px;
}

.bilateral-eye-sublabel {
  color: var(--slate-500);
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.bilateral-image-container img {
  width: 100%;
  max-width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(100, 116, 139, 0.3);
}

.bilateral-date {
  color: var(--slate-400);
  font-size: 0.8rem;
  margin-top: 8px;
}

.bilateral-divider {
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(100, 116, 139, 0.3), transparent);
}

.no-image {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(100, 116, 139, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-500);
  margin: 0 auto;
}

/* Asymmetry Metrics */
.bilateral-metrics {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.bilateral-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: var(--slate-200);
  font-weight: 500;
}

.asymmetry-score {
  font-size: 1.2rem;
  font-weight: 600;
}

.asymmetry-score.minimal { color: var(--green-400); }
.asymmetry-score.low { color: #a3e635; }
.asymmetry-score.moderate { color: var(--amber-400); }
.asymmetry-score.high { color: var(--red-400); }

.asymmetry-bar-container {
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.asymmetry-bar {
  height: 100%;
  background: linear-gradient(to right, var(--green-400), var(--amber-400), var(--red-400));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.asymmetry-significance {
  text-align: center;
  color: var(--slate-400);
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* Detailed metrics */
.bilateral-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.bilateral-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.bilateral-detail-row .detail-label {
  color: var(--slate-400);
  font-size: 0.85rem;
}

.bilateral-detail-row .detail-value {
  color: var(--slate-200);
  font-weight: 500;
  font-size: 0.85rem;
}

/* Autonomic Comparison */
.bilateral-autonomic {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.autonomic-header {
  color: var(--slate-200);
  font-weight: 500;
  margin-bottom: 12px;
  text-align: center;
}

.autonomic-comparison {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.autonomic-eye {
  text-align: center;
}

.autonomic-label {
  display: block;
  color: var(--slate-500);
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.autonomic-tone {
  color: var(--slate-200);
  font-weight: 500;
  font-size: 0.9rem;
}

.autonomic-indicator {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.autonomic-indicator.balanced {
  background: rgba(74, 222, 128, 0.2);
  color: var(--green-400);
}

.autonomic-indicator.lateralized {
  background: rgba(251, 191, 36, 0.2);
  color: var(--amber-400);
}

/* Most Asymmetric Zones */
.bilateral-zones {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.zones-header {
  color: var(--slate-200);
  font-weight: 500;
  margin-bottom: 12px;
}

.zones-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zone-asymmetry-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.zone-asymmetry-item .zone-name {
  color: var(--slate-200);
  font-weight: 500;
  min-width: 120px;
}

.zone-asymmetry-item .zone-systems {
  flex: 1;
  color: var(--slate-500);
  font-size: 0.8rem;
}

.zone-asymmetry-item .zone-asymmetry-value {
  color: var(--amber-400);
  font-weight: 600;
}

/* Bilateral Narrative */
.bilateral-narrative {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 16px;
}

.bilateral-narrative .narrative-header {
  color: var(--slate-200);
  font-weight: 500;
  margin-bottom: 12px;
}

.bilateral-narrative .narrative-text {
  color: var(--slate-300);
  font-size: 0.9rem;
  line-height: 1.7;
  font-style: italic;
}

@media (max-width: 768px) {
  .bilateral-images {
    flex-direction: column;
    align-items: center;
  }

  .bilateral-divider {
    width: 80%;
    height: 2px;
  }

  .bilateral-details {
    grid-template-columns: 1fr;
  }

  .autonomic-comparison {
    flex-direction: column;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONSTITUTIONAL INTEGRATION PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

.constitutional-profile-panel {
  margin-top: 16px;
}

.constitutional-profile-panel .panel-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-color, var(--violet-400));
  margin-bottom: 12px;
}

.profile-placeholder {
  text-align: center;
  padding: 16px;
  color: var(--text-muted, #888);
}

.btn-compute-profile {
  margin-top: 12px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--violet-400) 0%, #7c6dd9 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-compute-profile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(157, 141, 241, 0.3);
}

.iris-only-profile {
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.iris-only-profile .constitution-type,
.iris-only-profile .autonomic-tone {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}

.iris-only-profile .label {
  color: var(--text-muted, #888);
}

.iris-only-profile .value {
  color: var(--text-primary, #fff);
  font-weight: 500;
}

.iris-only-profile .profile-message {
  font-size: 11px;
  color: var(--text-muted, #666);
  text-align: center;
  margin: 12px 0 8px;
}

/* Constitutional Profile Display */
.constitutional-profile-display {
  padding: 12px;
}

.profile-primary {
  text-align: center;
  margin-bottom: 16px;
}

.dosha-badge {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}

.dosha-badge.vata {
  background: linear-gradient(135deg, #64b5f6 0%, #1e88e5 100%);
  color: white;
}

.dosha-badge.pitta {
  background: linear-gradient(135deg, #ff7043 0%, #e64a19 100%);
  color: white;
}

.dosha-badge.kapha {
  background: linear-gradient(135deg, #81c784 0%, var(--green-600) 100%);
  color: white;
}

.dosha-badge.unknown {
  background: linear-gradient(135deg, #9e9e9e 0%, #616161 100%);
  color: white;
}

.dosha-secondary {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-top: 4px;
}

.profile-iris-type {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-iris-type .label {
  color: var(--text-muted, #888);
}

.profile-iris-type .value {
  color: var(--text-primary, #fff);
}

/* Agreement Meter */
.agreement-meter {
  margin: 16px 0;
}

.agreement-meter .meter-label {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-bottom: 6px;
}

.agreement-meter .meter-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.agreement-meter .meter-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.agreement-meter .meter-fill.high {
  background: linear-gradient(90deg, var(--green-600) 0%, #81c784 100%);
}

.agreement-meter .meter-fill.moderate {
  background: linear-gradient(90deg, #ffa726 0%, #ffcc80 100%);
}

.agreement-meter .meter-fill.low {
  background: linear-gradient(90deg, #ef5350 0%, #ff8a80 100%);
}

.agreement-meter .meter-fill.minimal {
  background: linear-gradient(90deg, #757575 0%, #9e9e9e 100%);
}

.agreement-meter .meter-value {
  font-size: 12px;
  color: var(--text-primary, #fff);
  text-align: right;
  margin-top: 4px;
}

/* Sensitive Areas */
.sensitive-areas {
  margin: 12px 0;
}

.sensitive-areas .areas-label {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-bottom: 8px;
}

.sensitive-areas .areas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sensitivity-tag {
  padding: 4px 10px;
  background: rgba(157, 141, 241, 0.2);
  border: 1px solid rgba(157, 141, 241, 0.3);
  border-radius: 12px;
  font-size: 11px;
  color: var(--accent-color, var(--violet-400));
}

.btn-profile-details {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: transparent;
  border: 1px solid rgba(157, 141, 241, 0.3);
  border-radius: 6px;
  color: var(--accent-color, var(--violet-400));
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-profile-details:hover {
  background: rgba(157, 141, 241, 0.1);
  border-color: rgba(157, 141, 241, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONSTITUTIONAL MODAL
   ═══════════════════════════════════════════════════════════════════════════════ */

.constitutional-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: iris-fadeIn 0.2s ease;
}

.constitutional-content {
  max-width: 700px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(135deg, var(--surface-muted) 0%, #16213e 100%);
  border-radius: 16px;
  padding: 24px;
  position: relative;
}

.constitutional-content .modal-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.constitutional-content h2 {
  margin: 0;
  font-size: 20px;
  color: var(--text-primary, #fff);
}

.constitutional-content .modal-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text-muted, #888);
}

.constitutional-body h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-color, var(--violet-400));
  margin: 20px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Summary Card */
.constitution-summary-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.summary-doshas {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.primary-dosha,
.secondary-dosha {
  padding: 16px 32px;
  border-radius: 12px;
  text-align: center;
}

.primary-dosha {
  background: linear-gradient(135deg, rgba(157, 141, 241, 0.3) 0%, rgba(124, 109, 217, 0.3) 100%);
  border: 2px solid var(--accent-color, var(--violet-400));
}

.primary-dosha.vata { border-color: #64b5f6; background: linear-gradient(135deg, rgba(100, 181, 246, 0.3) 0%, rgba(30, 136, 229, 0.3) 100%); }
.primary-dosha.pitta { border-color: #ff7043; background: linear-gradient(135deg, rgba(255, 112, 67, 0.3) 0%, rgba(230, 74, 25, 0.3) 100%); }
.primary-dosha.kapha { border-color: #81c784; background: linear-gradient(135deg, rgba(129, 199, 132, 0.3) 0%, rgba(67, 160, 71, 0.3) 100%); }

.secondary-dosha {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dosha-name {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  text-transform: capitalize;
}

.dosha-type {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Cross-Modal Comparison */
.modality-comparison {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
}

.modality-box {
  flex: 1;
  min-width: 200px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.modality-header {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modality-box.iris .modality-header {
  background: linear-gradient(90deg, rgba(100, 181, 246, 0.3) 0%, transparent 100%);
  color: #64b5f6;
}

.modality-box.facial .modality-header {
  background: linear-gradient(90deg, rgba(255, 112, 67, 0.3) 0%, transparent 100%);
  color: #ff7043;
}

.modality-content {
  padding: 16px;
}

.modality-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}

.modality-item .item-label {
  color: var(--text-muted, #888);
}

.modality-item .item-value {
  color: var(--text-primary, #fff);
}

.modality-agreement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
}

.modality-agreement .agreement-score {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: white;
}

.modality-agreement .agreement-score.high {
  background: linear-gradient(135deg, var(--green-600) 0%, #81c784 100%);
}

.modality-agreement .agreement-score.moderate {
  background: linear-gradient(135deg, #ffa726 0%, #ffcc80 100%);
}

.modality-agreement .agreement-score.low {
  background: linear-gradient(135deg, #ef5350 0%, #ff8a80 100%);
}

.modality-agreement .agreement-score.minimal {
  background: linear-gradient(135deg, #757575 0%, #9e9e9e 100%);
}

.modality-agreement .agreement-label {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 6px;
}

.no-facial-data {
  text-align: center;
  padding: 20px;
  color: var(--text-muted, #666);
  font-style: italic;
}

/* Sensitivities Section */
.sensitivities-section .section-desc {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-bottom: 12px;
}

.sensitivity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sensitivity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(157, 141, 241, 0.15);
  border-radius: 8px;
}

.sensitivity-icon {
  color: var(--accent-color, var(--violet-400));
}

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

/* Divergence Section */
.divergence-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.divergence-item {
  padding: 12px;
  background: rgba(255, 112, 67, 0.1);
  border-left: 3px solid #ff7043;
  border-radius: 0 8px 8px 0;
}

.divergence-type {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #ff7043;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.divergence-narrative {
  font-size: 13px;
  color: var(--text-secondary, #ccc);
}

/* Constitutional Narrative */
.constitutional-narrative {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
}

.constitutional-narrative .narrative-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary, #ccc);
}

/* Profile Metadata */
.profile-metadata {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  color: var(--text-muted, #666);
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  .constitutional-content {
    padding: 16px;
  }

  .modality-comparison {
    flex-direction: column;
  }

  .modality-agreement {
    order: -1;
    margin-bottom: 12px;
  }

  .summary-doshas {
    flex-direction: column;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CAMERA CAPTURE MODAL
   ═══════════════════════════════════════════════════════════════════════════════ */

.camera-capture-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: iris-fadeIn 0.2s ease;
}

.camera-capture-content {
  width: 90%;
  max-width: 800px;
  background: linear-gradient(135deg, var(--surface-muted) 0%, #16213e 100%);
  border-radius: 16px;
  padding: 24px;
  position: relative;
}

.camera-header {
  text-align: center;
  margin-bottom: 16px;
}

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

.camera-instructions {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-muted, #888);
}

/* Camera Viewport */
.camera-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.camera-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-viewport canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Camera Guides */
.camera-guides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.iris-guide-circle {
  width: 50%;
  max-width: 300px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px dashed rgba(157, 141, 241, 0.5);
  transition: all 0.3s ease;
}

.iris-guide-circle.aligned {
  border-color: var(--green-600);
  border-style: solid;
  box-shadow: 0 0 20px rgba(67, 160, 71, 0.5);
}

.iris-guide-circle.partial {
  border-color: #ffa726;
}

.iris-guide-circle.unaligned {
  border-color: rgba(255, 255, 255, 0.3);
}

.pupil-guide {
  position: absolute;
  width: 10%;
  max-width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.alignment-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  padding: 8px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.alignment-label {
  font-size: 11px;
  color: var(--text-muted, #888);
  text-transform: uppercase;
}

.alignment-value {
  font-size: 14px;
  font-weight: 600;
}

.alignment-value.good { color: var(--green-600); }
.alignment-value.ok { color: #ffa726; }
.alignment-value.poor { color: #ef5350; }

/* Camera Hints */
.camera-hints {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.camera-hints .hint {
  background: rgba(0, 0, 0, 0.7);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.camera-hints .hint.satisfied {
  color: var(--green-600);
  background: rgba(67, 160, 71, 0.2);
}

/* Camera Preview */
.camera-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.camera-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-actions {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
}

.btn-retake,
.btn-accept {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-retake {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-retake:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-accept {
  background: linear-gradient(135deg, var(--green-600) 0%, #2e7d32 100%);
  border: none;
  color: white;
}

.btn-accept:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(67, 160, 71, 0.4);
}

/* Camera Controls */
.camera-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.btn-switch-camera,
.btn-capture {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-switch-camera {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-switch-camera:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-capture {
  background: linear-gradient(135deg, var(--violet-400) 0%, #7c6dd9 100%);
  border: none;
  color: white;
  font-weight: 600;
  padding: 14px 32px;
}

.btn-capture:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(157, 141, 241, 0.4);
}

.eye-selector {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

.eye-selector option {
  background: var(--surface-muted);
  color: white;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  .camera-capture-content {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
  }

  .camera-viewport {
    flex: 1;
    aspect-ratio: unset;
  }

  .iris-guide-circle {
    width: 70%;
  }

  .camera-controls {
    flex-wrap: wrap;
  }

  .btn-capture {
    order: -1;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * PDF REPORTS UI
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Reports Panel */
.reports-panel {
  margin-top: 20px;
  padding: 16px;
  background: #252538;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.reports-panel-header h3 {
  margin: 0;
  color: var(--gray-200);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-new-report {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--blue-500) 0%, #2980b9 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-new-report:hover {
  background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
  transform: translateY(-1px);
}

/* Reports List */
.reports-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.no-reports {
  text-align: center;
  padding: 24px;
  color: #888;
}

.no-reports p {
  margin: 0 0 12px;
}

.btn-generate-report {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--blue-500) 0%, #2980b9 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-generate-report:hover {
  background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
}

.report-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-muted);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s;
}

.report-item:hover {
  background: #1f1f3d;
  border-color: rgba(52, 152, 219, 0.3);
}

.report-info {
  flex: 1;
}

.report-title {
  color: var(--gray-200);
  font-weight: 500;
  margin-bottom: 4px;
  font-size: 14px;
}

.report-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #888;
}

.report-type {
  background: rgba(52, 152, 219, 0.2);
  color: var(--blue-500);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
}

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

.report-actions button {
  padding: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #888;
  cursor: pointer;
  transition: all 0.2s;
}

.report-actions .btn-download:hover {
  background: rgba(46, 204, 113, 0.1);
  border-color: var(--green-500);
  color: var(--green-500);
}

.report-actions .btn-delete:hover {
  background: rgba(231, 76, 60, 0.1);
  border-color: var(--red-500);
  color: var(--red-500);
}

/* Report Modal */
.report-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.report-modal {
  background: #252538;
  border-radius: 16px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.report-modal-header h3 {
  margin: 0;
  color: var(--gray-200);
  font-size: 16px;
}

.report-modal-header .btn-close {
  background: transparent;
  border: none;
  color: #888;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.report-modal-header .btn-close:hover {
  color: var(--red-500);
}

.report-modal-body {
  padding: 24px 20px;
  text-align: center;
}

.report-success-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--green-500) 0%, #27ae60 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
}

.report-modal-body h4 {
  margin: 0 0 8px;
  color: var(--gray-200);
  font-size: 18px;
}

.report-details {
  color: #888;
  font-size: 14px;
  margin: 0;
}

.report-modal-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  justify-content: flex-end;
}

.report-modal-footer .btn-secondary {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #888;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.report-modal-footer .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--gray-200);
}

.report-modal-footer .btn-primary {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--blue-500) 0%, #2980b9 100%);
  border: none;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.report-modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
}

/* Report Type Selector */
.report-type-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.report-type-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--surface-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.report-type-btn:hover {
  background: #1f1f3d;
  border-color: rgba(52, 152, 219, 0.5);
}

.report-type-btn.primary {
  background: rgba(52, 152, 219, 0.1);
  border-color: rgba(52, 152, 219, 0.3);
}

.report-type-btn.primary:hover {
  background: rgba(52, 152, 219, 0.2);
}

.report-type-btn strong {
  color: var(--gray-200);
  font-size: 14px;
  margin-bottom: 4px;
}

.report-type-btn span {
  color: #888;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * COHORT ANALYSIS UI
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Cohort Consent Modal */
.cohort-modal {
  max-width: 500px;
}

.cohort-consent-content {
  text-align: left;
}

.cohort-consent-content p {
  margin: 0 0 12px;
  color: var(--gray-200);
}

.cohort-consent-content ul {
  margin: 0 0 16px;
  padding-left: 24px;
  color: #aaa;
}

.cohort-consent-content li {
  margin-bottom: 8px;
}

.cohort-note {
  color: #888 !important;
  font-size: 13px;
  font-style: italic;
  background: rgba(52, 152, 219, 0.1);
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--blue-500);
}

/* Comparison Modal */
.comparison-modal {
  max-width: 560px;
}

.sample-size {
  color: #888;
  font-size: 13px;
  margin-bottom: 20px;
  text-align: center;
}

.comparison-metrics {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comparison-metric {
  background: var(--surface-muted);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.metric-label {
  color: var(--gray-200);
  font-weight: 500;
  margin-bottom: 8px;
}

.metric-values {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.patient-value {
  color: var(--blue-500);
  font-size: 18px;
  font-weight: 600;
}

.vs {
  color: #666;
  font-size: 12px;
}

.population-value {
  color: #888;
  font-size: 14px;
}

.percentile-bar {
  position: relative;
  height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: visible;
}

.percentile-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red-500) 0%, #f39c12 50%, var(--green-500) 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.percentile-marker {
  position: absolute;
  top: -4px;
  width: 14px;
  height: 14px;
  background: white;
  border: 2px solid var(--blue-500);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.percentile-label {
  margin-top: 8px;
  font-size: 12px;
  text-align: right;
}

.percentile-label.above {
  color: var(--green-500);
}

.percentile-label.below {
  color: var(--red-500);
}

.percentile-label.average {
  color: #f39c12;
}

/* Patient Patterns Section */
.patient-patterns-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.patient-patterns-section h4 {
  color: var(--gray-200);
  font-size: 14px;
  margin: 0 0 12px;
}

.pattern-prevalence-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pattern-prevalence-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-muted);
  border-radius: 6px;
}

.pattern-name {
  color: var(--gray-200);
  font-size: 13px;
}

.prevalence-badge {
  background: rgba(52, 152, 219, 0.2);
  color: var(--blue-500);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
}

/* Similar Cases Modal */
.similar-modal {
  max-width: 600px;
}

.constitution-query {
  text-align: center;
  color: var(--gray-200);
  margin-bottom: 8px;
}

.similar-count {
  text-align: center;
  color: #888;
  font-size: 13px;
  margin-bottom: 20px;
}

.similar-cases-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.similar-case-item {
  background: var(--surface-muted);
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.case-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.case-number {
  color: var(--blue-500);
  font-weight: 500;
  font-size: 13px;
}

.age-range {
  color: #888;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
}

.case-details {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 12px;
  color: #aaa;
}

.case-metrics {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #888;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Cohort Panel in Scanner */
.cohort-panel {
  margin-top: 20px;
  padding: 16px;
  background: #252538;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.cohort-panel-header h3 {
  margin: 0;
  color: var(--gray-200);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

.btn-cohort {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #aaa;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cohort:hover {
  background: rgba(52, 152, 219, 0.1);
  border-color: var(--blue-500);
  color: var(--blue-500);
}

.btn-cohort.contribute {
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.3);
  color: var(--green-500);
}

.btn-cohort.contribute:hover {
  background: rgba(46, 204, 113, 0.2);
  border-color: var(--green-500);
}

/* ========================================
   BOTTOM PANELS LAYOUT
======================================== */

.iris-bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.iris-bottom-panels .reports-panel,
.iris-bottom-panels .cohort-panel {
  margin-top: 0;
}

/* Panel Action Buttons */
.panel-action-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #aaa;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.panel-action-btn:hover {
  background: rgba(52, 152, 219, 0.1);
  border-color: var(--blue-500);
  color: var(--blue-500);
}

/* ========================================
   CONSTITUTIONAL INTEGRATION PANEL
======================================== */

.constitutional-panel,
.patterns-panel,
.protocols-panel {
  min-height: auto;
}

.constitutional-content,
.patterns-content,
.protocols-content {
  padding: 0;
  font-size: 13px;
}

.constitutional-loading {
  text-align: center;
  color: #888;
  padding: 12px;
}

.constitutional-empty,
.patterns-empty,
.protocols-empty {
  text-align: center;
  color: #666;
  padding: 12px;
  font-size: 12px;
}

.constitutional-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.constitution-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  gap: 10px;
}

.constitution-label {
  color: #888;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.constitution-value {
  color: var(--gray-200);
  font-weight: 500;
  font-size: 12px;
  text-align: right;
}

.agreement-meter {
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.agreement-meter .constitution-label {
  display: block;
  margin-bottom: 6px;
}

.agreement-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.agreement-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red-500), #f39c12, var(--green-500));
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ========================================
   PATTERNS PANEL
======================================== */

.patterns-content {
  padding: 12px 0;
}

.patterns-loading {
  text-align: center;
  color: #888;
  padding: 20px;
}

.patterns-empty {
  text-align: center;
  color: #666;
  padding: 20px;
  font-size: 13px;
}

.patterns-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.pattern-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border-left: 3px solid var(--blue-500);
}

.pattern-name {
  color: var(--gray-200);
  font-size: 13px;
}

.pattern-confidence {
  color: #888;
  font-size: 12px;
}

.pattern-confidence.high {
  color: var(--green-500);
}

.pattern-confidence.medium {
  color: #f39c12;
}

.pattern-confidence.low {
  color: var(--red-500);
}

/* ========================================
   PROTOCOLS PANEL
======================================== */

.protocols-content {
  padding: 12px 0;
}

.protocols-loading {
  text-align: center;
  color: #888;
  padding: 20px;
}

.protocols-empty {
  text-align: center;
  color: #666;
  padding: 20px;
  font-size: 13px;
}

.protocols-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.protocol-item {
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border-left: 3px solid #9b59b6;
}

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

.protocol-gate {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.protocol-gate.observe {
  background: rgba(52, 152, 219, 0.2);
  color: var(--blue-500);
}

.protocol-gate.nourish {
  background: rgba(46, 204, 113, 0.2);
  color: var(--green-500);
}

.protocol-gate.activate {
  background: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
}

.protocol-gate.restore {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.protocol-priority {
  font-size: 11px;
  color: #888;
}

.protocol-programs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.protocol-program-tag {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(155, 89, 182, 0.1);
  border: 1px solid rgba(155, 89, 182, 0.3);
  color: #bb8fce;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INLINE REPORT DISPLAY - Practitioner/Patient Dual View System
   KAIRO Color Palette: green (#4CAF50), teal (#26A69A), amber (#FFB300),
                        slate (#90A4AE), red (#E57373)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Root variables for confidence theming */
.iris-inline-report {
  --confidence-high: #4CAF50;       /* Green - confident */
  --confidence-moderate: #26A69A;   /* Teal - moderate */
  --confidence-emerging: #FFB300;   /* Amber - emerging */
  --confidence-low: #90A4AE;        /* Slate - low/uncertain */
  --confidence-concern: #E57373;    /* Red - requires attention */

  --bar-bg: rgba(255, 255, 255, 0.08);
  --bar-glow: 0 0 12px;

  /* Animation timing: slow-out with confidence settling */
  --settle-duration: 700ms;
  --settle-easing: cubic-bezier(0.22, 1, 0.36, 1);

  width: 100%;
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(26, 31, 42, 0.95) 0%, rgba(15, 19, 24, 0.98) 100%);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 16px;
  overflow: hidden;
  animation: reportSlideIn var(--settle-duration) var(--settle-easing);
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   REPORT HEADER & VIEW TOGGLE
   ───────────────────────────────────────────────────────────────────────────── */

.report-header {
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.report-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.report-header .report-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--slate-200);
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-header .report-title::before {
  content: '📋';
  font-size: 1.1rem;
}

.report-meta-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.report-timestamp {
  font-size: 0.75rem;
  color: var(--slate-500);
}

.report-confidence-badge {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: var(--confidence-high);
  font-weight: 500;
}

.view-toggle-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-toggle-label {
  font-size: 0.75rem;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.view-toggle {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--slate-500);
  font-size: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--settle-duration) var(--settle-easing);
}

.view-toggle-btn:hover {
  color: var(--slate-400);
}

.view-toggle-btn.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
  color: var(--slate-200);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
}

.view-toggle-btn .toggle-icon {
  font-size: 0.9rem;
}

.btn-export-pdf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(38, 166, 154, 0.15);
  border: 1px solid rgba(38, 166, 154, 0.3);
  color: var(--confidence-moderate);
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-export-pdf:hover {
  background: rgba(38, 166, 154, 0.25);
  border-color: var(--confidence-moderate);
}

/* ─────────────────────────────────────────────────────────────────────────────
   REPORT VIEWS - PRACTITIONER & PATIENT
   ───────────────────────────────────────────────────────────────────────────── */

.report-view {
  display: none;
  padding: 20px;
  animation: viewFadeIn var(--settle-duration) var(--settle-easing);
}

.report-view.active {
  display: block;
}

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

/* Report Sections */
.report-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.report-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

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

.section-header h4 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONFIDENCE BARS - The heart of the UI
   Three dimensions: Detection, Interpretation, Stability
   ───────────────────────────────────────────────────────────────────────────── */

.confidence-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--slate-500);
}

.confidence-indicator::before {
  content: attr(data-label);
}

/* Individual Confidence Bar */
.confidence-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--bar-bg);
  border-radius: 3px;
  overflow: hidden;
}

.confidence-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 3px;
  transition: width var(--settle-duration) var(--settle-easing);
}

/* Confidence color states */
.confidence-bar-fill[data-level="high"] {
  background: linear-gradient(90deg, var(--confidence-high), #66BB6A);
  box-shadow: var(--bar-glow) rgba(76, 175, 80, 0.3);
}

.confidence-bar-fill[data-level="moderate"] {
  background: linear-gradient(90deg, var(--confidence-moderate), #4DB6AC);
  box-shadow: var(--bar-glow) rgba(38, 166, 154, 0.3);
}

.confidence-bar-fill[data-level="emerging"] {
  background: linear-gradient(90deg, var(--confidence-emerging), #FFCA28);
  box-shadow: var(--bar-glow) rgba(255, 179, 0, 0.3);
}

.confidence-bar-fill[data-level="low"] {
  background: linear-gradient(90deg, var(--confidence-low), #B0BEC5);
  box-shadow: var(--bar-glow) rgba(144, 164, 174, 0.2);
}

.confidence-bar-fill[data-level="concern"] {
  background: linear-gradient(90deg, var(--confidence-concern), #EF5350);
  box-shadow: var(--bar-glow) rgba(229, 115, 115, 0.3);
}

/* Zone Finding Item with Confidence */
.zone-finding-item {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-bottom: 10px;
  animation: findingSlideIn 0.4s var(--settle-easing) backwards;
}

.zone-finding-item:nth-child(1) { animation-delay: 0.05s; }
.zone-finding-item:nth-child(2) { animation-delay: 0.1s; }
.zone-finding-item:nth-child(3) { animation-delay: 0.15s; }
.zone-finding-item:nth-child(4) { animation-delay: 0.2s; }
.zone-finding-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes findingSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.zone-finding-icon {
  font-size: 1.2rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  flex-shrink: 0;
}

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

.zone-finding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.zone-finding-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--slate-200);
}

.zone-finding-confidence-value {
  font-size: 0.7rem;
  color: var(--slate-500);
  font-family: 'JetBrains Mono', monospace;
}

.zone-finding-description {
  font-size: 0.8rem;
  color: var(--slate-400);
  line-height: 1.5;
  margin-top: 8px;
}

/* Multi-bar confidence display (Detection / Interpretation / Stability) */
.confidence-trio {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.confidence-trio-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.confidence-trio-label {
  font-size: 0.65rem;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.confidence-trio-bar {
  height: 4px;
  background: var(--bar-bg);
  border-radius: 2px;
  overflow: hidden;
}

.confidence-trio-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--settle-duration) var(--settle-easing);
}

/* Confidence trio color states - mirror main bar colors */
.confidence-trio-fill[data-level="high"] {
  background: linear-gradient(90deg, var(--confidence-high), #66BB6A);
}

.confidence-trio-fill[data-level="moderate"] {
  background: linear-gradient(90deg, var(--confidence-moderate), #4DB6AC);
}

.confidence-trio-fill[data-level="emerging"] {
  background: linear-gradient(90deg, var(--confidence-emerging), #FFCA28);
}

.confidence-trio-fill[data-level="low"] {
  background: linear-gradient(90deg, var(--confidence-low), #B0BEC5);
}

.confidence-trio-fill[data-level="concern"] {
  background: linear-gradient(90deg, var(--confidence-concern), #EF5350);
}

/* Empty states */
.zone-finding-empty,
.structural-empty,
.protocol-empty {
  color: var(--slate-500);
  font-size: 0.85rem;
  padding: 16px;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRACTITIONER VIEW SPECIFIC STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.practitioner-view .section-content {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 14px;
}

.constitution-display {
  display: flex;
  gap: 16px;
  align-items: center;
}

.constitution-primary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.constitution-type {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--slate-200);
}

.constitution-dosha {
  font-size: 0.8rem;
  color: var(--slate-400);
}

.constitution-confidence {
  flex: 1;
  max-width: 200px;
}

.structural-findings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.structural-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.structural-marker-icon {
  font-size: 1rem;
  opacity: 0.7;
}

.structural-marker-info {
  flex: 1;
}

.structural-marker-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--slate-200);
}

.structural-marker-detail {
  font-size: 0.7rem;
  color: var(--slate-500);
}

.clinical-correlations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.correlation-tag {
  padding: 6px 12px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 16px;
  font-size: 0.75rem;
  color: #67e8f9;
}

.protocol-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.protocol-item {
  padding: 12px 14px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.protocol-item:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.3);
}

.protocol-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--violet-300);
  margin-bottom: 4px;
}

.protocol-rationale {
  font-size: 0.75rem;
  color: var(--slate-400);
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PATIENT VIEW SPECIFIC STYLES - Calming, Empowering
   ───────────────────────────────────────────────────────────────────────────── */

.patient-view {
  background: linear-gradient(180deg, rgba(38, 166, 154, 0.03) 0%, transparent 100%);
}

.wellness-narrative {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--slate-300);
  padding: 16px;
  background: rgba(38, 166, 154, 0.05);
  border-left: 3px solid var(--confidence-moderate);
  border-radius: 0 10px 10px 0;
}

.wellness-narrative p {
  margin: 0 0 12px 0;
}

.wellness-narrative p:last-child {
  margin-bottom: 0;
}

.focus-areas,
.strength-areas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.focus-area-item,
.strength-area-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
}

.focus-area-item {
  border-left: 3px solid var(--confidence-emerging);
}

.strength-area-item {
  border-left: 3px solid var(--confidence-high);
}

.area-icon {
  font-size: 1.4rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  flex-shrink: 0;
}

.area-content {
  flex: 1;
}

.area-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate-200);
  margin-bottom: 4px;
}

.area-description {
  font-size: 0.8rem;
  color: var(--slate-400);
  line-height: 1.5;
}

/* Support bar for patient view - softer presentation */
.support-bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-bar-label {
  font-size: 0.65rem;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: 60px;
}

.support-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bar-bg);
  border-radius: 3px;
  overflow: hidden;
}

.support-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--settle-duration) var(--settle-easing);
  background: linear-gradient(90deg, var(--confidence-moderate), var(--confidence-high));
}

.lifestyle-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.lifestyle-item {
  padding: 14px;
  background: rgba(76, 175, 80, 0.06);
  border: 1px solid rgba(76, 175, 80, 0.15);
  border-radius: 12px;
}

.lifestyle-item-icon {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.lifestyle-item-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #a5d6a7;
  margin-bottom: 4px;
}

.lifestyle-item-text {
  font-size: 0.8rem;
  color: var(--slate-400);
  line-height: 1.5;
}

.patient-reassurance {
  margin-top: 20px;
  padding: 16px;
  background: rgba(144, 164, 174, 0.08);
  border-radius: 10px;
  text-align: center;
}

.patient-reassurance p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--slate-400);
  font-style: italic;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONFIDENCE DECAY ANIMATION (for stale patterns)
   C(t) = C0 × e^(-λt) - visual pulse when pattern is aging
   ───────────────────────────────────────────────────────────────────────────── */

.confidence-bar-fill.decaying {
  animation: confidenceDecay 2s ease-in-out infinite;
}

@keyframes confidenceDecay {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.stale-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: var(--confidence-low);
  margin-left: 8px;
}

.stale-indicator::before {
  content: '⏱';
  font-size: 0.7rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   AI NARRATIVE DISPLAY STYLES
   Scan Status, Confidence Snapshot, What KAIRO Sees, Clinical Synthesis
   ───────────────────────────────────────────────────────────────────────────── */

/* Scan Status Header */
.scan-status-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(38, 166, 154, 0.12) 0%, rgba(30, 41, 59, 0.4) 100%);
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid rgba(38, 166, 154, 0.2);
}

.status-indicator {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.status-indicator.balanced {
  background: linear-gradient(135deg, var(--confidence-high), var(--confidence-moderate));
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

.status-indicator.adapting {
  background: linear-gradient(135deg, var(--confidence-moderate), var(--confidence-emerging));
  box-shadow: 0 0 20px rgba(38, 166, 154, 0.3);
}

.status-indicator.stressed {
  background: linear-gradient(135deg, var(--confidence-emerging), var(--confidence-low));
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

.status-label {
  flex: 1;
}

.status-label h3 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--slate-200);
}

.status-label p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--slate-400);
  line-height: 1.4;
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--slate-500);
  text-align: right;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.status-key {
  color: var(--slate-500);
}

.status-value {
  color: var(--slate-400);
  font-weight: 500;
}

.status-value.high {
  color: var(--confidence-high);
}

.status-value.moderate {
  color: var(--confidence-moderate);
}

.status-value.emerging {
  color: var(--confidence-emerging);
}

/* Summary Statement */
.summary-statement {
  padding: 16px 20px;
  background: rgba(100, 116, 139, 0.08);
  border-left: 3px solid var(--confidence-moderate);
  border-radius: 0 10px 10px 0;
  margin-bottom: 20px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--slate-300);
}

.summary-statement p {
  margin: 0;
}

/* Confidence Display (for AI narratives) */
.confidence-display {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 12px;
  margin-bottom: 20px;
}

.confidence-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.confidence-label {
  width: 140px;
  font-size: 0.8rem;
  color: var(--slate-400);
  flex-shrink: 0;
}

.confidence-bar-wrapper {
  flex: 1;
  height: 8px;
  background: var(--bar-bg);
  border-radius: 4px;
  overflow: hidden;
}

.confidence-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--settle-duration) var(--settle-easing);
}

.confidence-percent {
  width: 45px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: right;
  color: var(--slate-200);
}

.confidence-note {
  font-size: 0.75rem;
  color: var(--slate-500);
  font-style: italic;
  margin-top: 8px;
  text-align: center;
}

/* What KAIRO Sees Section */
.what-kairo-sees {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insight-section {
  padding: 16px 20px;
  background: rgba(30, 41, 59, 0.3);
  border-radius: 12px;
  border-left: 3px solid var(--confidence-moderate);
}

.insight-section.strength {
  border-left-color: var(--confidence-high);
  background: rgba(76, 175, 80, 0.06);
}

.insight-section.attention {
  border-left-color: var(--confidence-emerging);
  background: rgba(245, 158, 11, 0.06);
}

.insight-section.concern {
  border-left-color: var(--confidence-low);
  background: rgba(239, 68, 68, 0.06);
}

.insight-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate-200);
  margin-bottom: 12px;
}

.insight-title .icon {
  font-size: 1.1rem;
}

.insight-headline {
  font-size: 0.85rem;
  color: var(--slate-300);
  margin-bottom: 10px;
  line-height: 1.5;
}

.meaning-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

.meaning-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.8rem;
  color: var(--slate-400);
  line-height: 1.6;
  margin-bottom: 6px;
}

.meaning-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--confidence-moderate);
}

.manifestations {
  font-size: 0.75rem;
  color: var(--slate-500);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid rgba(100, 116, 139, 0.15);
}

.reassurance {
  font-size: 0.8rem;
  color: var(--slate-400);
  padding: 12px 16px;
  background: rgba(38, 166, 154, 0.08);
  border-radius: 8px;
  margin-top: 8px;
  line-height: 1.6;
}

/* KAIRO Insight Box */
.kairo-insight-box {
  padding: 20px;
  background: linear-gradient(135deg, rgba(38, 166, 154, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
  border-radius: 12px;
  border: 1px solid rgba(38, 166, 154, 0.2);
  margin-top: 16px;
}

.kairo-insight-box h4 {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #26a69a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kairo-insight-box p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.7;
}

/* Learn More Expandable Topics */
.learn-more-section {
  margin-top: 20px;
}

.learn-more-section h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

.expandable-topics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expandable-topic {
  background: rgba(30, 41, 59, 0.3);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.15);
  transition: all 0.2s ease;
}

.expandable-topic:hover {
  border-color: rgba(38, 166, 154, 0.3);
}

.topic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}

.topic-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.topic-title {
  font-size: 0.85rem;
  color: var(--slate-300);
  font-weight: 500;
}

.topic-toggle {
  font-size: 0.75rem;
  color: var(--slate-500);
  transition: transform 0.2s ease;
}

.expandable-topic.open .topic-toggle {
  transform: rotate(180deg);
}

.topic-content {
  display: none;
  padding: 0 16px 16px;
  font-size: 0.8rem;
  color: var(--slate-400);
  line-height: 1.6;
}

.expandable-topic.open .topic-content {
  display: block;
}

/* Practitioner View Narrative Styles */
.interpretation-text,
.interpretation {
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.7;
  padding: 14px 16px;
  background: rgba(30, 41, 59, 0.3);
  border-radius: 10px;
}

.interpretation-text p,
.interpretation p {
  margin: 0 0 10px 0;
}

.interpretation-text p:last-child,
.interpretation p:last-child {
  margin-bottom: 0;
}

/* Clinical Synthesis Section */
.clinical-synthesis-section {
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(30, 41, 59, 0.4) 100%);
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.clinical-synthesis-section h4 {
  margin: 0 0 14px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--violet-300);
  display: flex;
  align-items: center;
  gap: 10px;
}

.clinical-synthesis-content {
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.8;
}

.clinical-synthesis-content p {
  margin: 0 0 12px 0;
}

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

/* Executive Summary Grid */
.executive-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.exec-metric {
  padding: 14px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 10px;
  text-align: center;
  border: 1px solid rgba(100, 116, 139, 0.15);
}

.exec-metric-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--slate-200);
  margin-bottom: 4px;
}

.exec-metric-value.high {
  color: var(--confidence-high);
}

.exec-metric-value.moderate {
  color: var(--confidence-moderate);
}

.exec-metric-value.emerging {
  color: var(--confidence-emerging);
}

.exec-metric-value.low {
  color: var(--confidence-low);
}

.exec-metric-label {
  font-size: 0.7rem;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Structural Integrity Per-Eye Breakdown */
.eye-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.eye-column {
  padding: 16px;
  background: rgba(30, 41, 59, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(100, 116, 139, 0.15);
}

.eye-column h5 {
  margin: 0 0 12px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-200);
  display: flex;
  align-items: center;
  gap: 8px;
}

.eye-column h5 .eye-icon {
  font-size: 1rem;
}

.eye-column.left h5 {
  color: var(--blue-400);
}

.eye-column.right h5 {
  color: var(--pink-400);
}

.eye-findings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eye-finding {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

.eye-finding-label {
  color: var(--slate-400);
}

.eye-finding-value {
  font-weight: 500;
  color: var(--slate-300);
}

/* Practitioner Focus Framework */
.focus-framework {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.focus-column {
  padding: 16px;
  border-radius: 12px;
}

.focus-column.priorities {
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.focus-column.avoid {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.focus-column.monitor {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.focus-column h5 {
  margin: 0 0 12px 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.focus-column.priorities h5 {
  color: var(--confidence-high);
}

.focus-column.avoid h5 {
  color: var(--confidence-low);
}

.focus-column.monitor h5 {
  color: var(--confidence-emerging);
}

.focus-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.focus-list li {
  font-size: 0.8rem;
  color: var(--slate-400);
  padding: 6px 0;
  border-bottom: 1px solid rgba(100, 116, 139, 0.1);
}

.focus-list li:last-child {
  border-bottom: none;
}

/* Narrative Regenerate Button */
.regenerate-narrative-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 8px;
  color: var(--violet-300);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 16px;
}

.regenerate-narrative-btn:hover {
  background: rgba(168, 85, 247, 0.25);
  border-color: rgba(168, 85, 247, 0.5);
}

.regenerate-narrative-btn .icon {
  font-size: 0.9rem;
}

.regenerate-narrative-btn.loading {
  opacity: 0.6;
  cursor: wait;
}

.regenerate-narrative-btn.loading .icon {
  animation: spin 1s linear infinite;
}

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

/* Narrative Loading State */
.narrative-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--slate-400);
}

.narrative-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(38, 166, 154, 0.2);
  border-top-color: var(--confidence-moderate);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.narrative-loading p {
  font-size: 0.85rem;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRACTITIONER PROSE ELEMENTS - Rich Clinical Narratives
   ───────────────────────────────────────────────────────────────────────────── */

/* Executive Summary Section */
.executive-summary-section {
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(30, 41, 59, 0.4) 100%);
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

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

.executive-summary-section .section-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--violet-300);
}

.confidence-badge {
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 12px;
  background: rgba(38, 166, 154, 0.15);
  color: #26a69a;
}

.confidence-badge[data-level="high"] {
  background: rgba(76, 175, 80, 0.15);
  color: var(--confidence-high);
}

.confidence-badge[data-level="moderate"] {
  background: rgba(38, 166, 154, 0.15);
  color: var(--confidence-moderate);
}

.confidence-badge[data-level="emerging"] {
  background: rgba(245, 158, 11, 0.15);
  color: var(--confidence-emerging);
}

.system-status {
  padding: 12px 16px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--slate-300);
  margin-bottom: 16px;
}

.system-status strong {
  color: var(--slate-400);
}

.clinical-narrative-prose {
  font-size: 0.9rem;
  color: var(--slate-200);
  line-height: 1.8;
  padding: 16px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  border-left: 3px solid rgba(168, 85, 247, 0.5);
}

.clinical-narrative-prose p {
  margin: 0;
}

/* Constitutional Narrative */
.interpretation-prose {
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.7;
  padding: 14px 16px;
  background: rgba(30, 41, 59, 0.3);
  border-radius: 10px;
  margin-top: 12px;
}

.interpretation-prose p {
  margin: 0;
}

.constitutional-narrative,
.therapeutic-implications {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(30, 41, 59, 0.25);
  border-radius: 10px;
  border-left: 2px solid rgba(38, 166, 154, 0.4);
}

.constitutional-narrative h5,
.therapeutic-implications h5 {
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #26a69a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.constitutional-narrative p,
.therapeutic-implications p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.7;
}

.confidence-label-text {
  font-size: 0.7rem;
  color: var(--slate-500);
  margin-left: 10px;
}

/* Zone Findings Prose */
.zone-findings-prose {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--slate-400);
  line-height: 1.6;
}

.zone-findings-prose p {
  margin: 0;
}

/* Structural Interpretation Narrative */
.structural-interpretation,
.bilateral-narrative {
  margin-top: 16px;
  padding: 16px;
  background: rgba(30, 41, 59, 0.3);
  border-radius: 10px;
}

.structural-interpretation h5,
.bilateral-narrative h5 {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-200);
}

.structural-interpretation p,
.bilateral-narrative p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.7;
}

/* Autonomic Analysis Section */
.autonomic-analysis-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.autonomic-profile {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px;
  background: rgba(30, 41, 59, 0.3);
  border-radius: 10px;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 180px;
}

.profile-label {
  font-size: 0.8rem;
  color: var(--slate-500);
}

.profile-value {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--slate-200);
}

.collarette-details {
  padding: 14px;
  background: rgba(30, 41, 59, 0.25);
  border-radius: 10px;
}

.collarette-details h5 {
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.collarette-row {
  display: flex;
  gap: 24px;
  font-size: 0.8rem;
  color: var(--slate-300);
  margin-bottom: 10px;
}

.morphology-prose {
  margin: 12px 0 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(100, 116, 139, 0.15);
  font-size: 0.8rem;
  color: var(--slate-400);
  line-height: 1.6;
}

.autonomic-interpretation,
.clinical-implications {
  padding: 14px;
  background: rgba(30, 41, 59, 0.25);
  border-radius: 10px;
}

.autonomic-interpretation h5,
.clinical-implications h5 {
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #26a69a;
}

.autonomic-interpretation p,
.clinical-implications p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.7;
}

/* Elimination Analysis */
.elimination-analysis {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.elimination-metrics {
  padding: 14px;
  background: rgba(30, 41, 59, 0.3);
  border-radius: 10px;
}

.elim-metric {
  display: flex;
  align-items: center;
  gap: 12px;
}

.elim-label {
  font-size: 0.8rem;
  color: var(--slate-400);
  width: 140px;
  flex-shrink: 0;
}

.elim-bar {
  flex: 1;
  height: 8px;
  background: var(--bar-bg);
  border-radius: 4px;
  overflow: hidden;
}

.elim-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.elim-bar-fill[data-level="high"] { background: var(--confidence-high); }
.elim-bar-fill[data-level="moderate"] { background: var(--confidence-moderate); }
.elim-bar-fill[data-level="emerging"] { background: var(--confidence-emerging); }
.elim-bar-fill[data-level="low"] { background: var(--confidence-low); }

.elim-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-200);
  width: 45px;
  text-align: right;
}

.scurf-rim-details {
  padding: 14px;
  background: rgba(30, 41, 59, 0.25);
  border-radius: 10px;
}

.scurf-rim-details h5 {
  margin: 0 0 12px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scurf-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
}

.scurf-item {
  display: flex;
  gap: 8px;
  font-size: 0.8rem;
}

.scurf-label {
  color: var(--slate-500);
}

.scurf-value {
  color: var(--slate-300);
  font-weight: 500;
}

.zone-mapping {
  margin: 10px 0 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(100, 116, 139, 0.15);
  font-size: 0.8rem;
  color: var(--slate-400);
  line-height: 1.5;
  font-style: italic;
}

.elimination-interpretation,
.elimination-clinical-note,
.protocol-considerations {
  padding: 14px;
  background: rgba(30, 41, 59, 0.25);
  border-radius: 10px;
}

.elimination-interpretation h5,
.elimination-clinical-note h5,
.protocol-considerations h5 {
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #26a69a;
}

.elimination-interpretation p,
.elimination-clinical-note p,
.protocol-considerations p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.7;
}

/* Bilateral Comparison Section */
.bilateral-comparison-section {
  margin-top: 16px;
  padding: 20px;
  background: rgba(30, 41, 59, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

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

.bilateral-comparison-section .section-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--slate-200);
}

.asymmetry-score {
  font-size: 0.75rem;
  color: var(--slate-500);
  padding: 4px 10px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 8px;
}

.bilateral-findings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.bilateral-finding {
  padding: 12px 14px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 10px;
  border-left: 3px solid var(--confidence-moderate);
}

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

.finding-field {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-200);
}

.finding-asymmetry {
  font-size: 0.75rem;
  color: var(--slate-400);
  padding: 2px 8px;
  background: rgba(38, 166, 154, 0.15);
  border-radius: 6px;
}

.finding-significance {
  margin: 0;
  font-size: 0.8rem;
  color: var(--slate-400);
  line-height: 1.5;
}

.bilateral-interpretation,
.hemispheric-narrative {
  padding: 14px;
  background: rgba(30, 41, 59, 0.3);
  border-radius: 10px;
  margin-bottom: 12px;
}

.bilateral-interpretation:last-child,
.hemispheric-narrative:last-child {
  margin-bottom: 0;
}

.bilateral-interpretation h5,
.hemispheric-narrative h5 {
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #26a69a;
}

.bilateral-interpretation p,
.hemispheric-narrative p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.7;
}

/* Focus Framework Narratives */
.focus-narrative {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(30, 41, 59, 0.25);
  border-radius: 10px;
}

.focus-narrative h5 {
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.focus-narrative p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--slate-300);
  line-height: 1.7;
}

.priorities-narrative h5 {
  color: var(--confidence-high);
}

.avoid-narrative h5 {
  color: var(--confidence-low);
}

.monitor-narrative h5 {
  color: var(--confidence-emerging);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media (max-width: 1200px) {
  .iris-bottom-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cohort-actions {
    flex-direction: column;
  }

  .btn-cohort {
    width: 100%;
    text-align: center;
  }

  /* AI Narrative Responsive Adjustments */
  .scan-status-header {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .status-details {
    text-align: center;
  }

  .status-row {
    justify-content: center;
  }

  .eye-breakdown {
    grid-template-columns: 1fr;
  }

  .focus-framework {
    grid-template-columns: 1fr;
  }

  .executive-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NEO4J IRIS PATTERN CORRELATIONS PANEL
   Pattern Intelligence powered by Knowledge Graph
   ═══════════════════════════════════════════════════════════════════════════════ */

.iris-correlations-panel {
  background: linear-gradient(135deg, rgba(26, 31, 42, 0.95) 0%, rgba(15, 19, 24, 0.98) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  margin-top: 16px;
  overflow: hidden;
}

.iris-correlations-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.1) 100%);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.iris-correlations-panel .panel-title {
  font-weight: 600;
  color: var(--slate-200);
  font-size: 0.9rem;
}

.neo4j-badge {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(167, 139, 250, 0.2) 100%);
  color: var(--violet-400);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.iris-correlations-content {
  padding: 12px;
}

.correlations-empty {
  color: var(--slate-500);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
  font-style: italic;
}

.correlation-section {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.correlation-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.correlation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.correlation-icon {
  font-size: 1rem;
}

.correlation-title {
  font-weight: 600;
  color: var(--slate-300);
  font-size: 0.85rem;
}

/* Constitutional Match */
.constitutional-match {
  background: rgba(139, 92, 246, 0.1);
  border-radius: 8px;
  padding: 12px;
}

.constitution-name {
  font-weight: 600;
  color: var(--violet-400);
  font-size: 1rem;
  margin-bottom: 6px;
}

.constitution-details {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.dosha-tag {
  background: rgba(251, 146, 60, 0.2);
  color: var(--orange-400);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.match-score {
  color: var(--slate-400);
  font-size: 0.8rem;
}

.constitution-tendency {
  color: var(--slate-400);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Pattern List */
.pattern-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pattern-item {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid rgba(6, 182, 212, 0.5);
}

.pattern-name {
  font-weight: 600;
  color: var(--slate-200);
  font-size: 0.85rem;
  display: block;
  margin-bottom: 6px;
}

.pattern-systems {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.system-tag {
  background: rgba(6, 182, 212, 0.15);
  color: var(--cyan-400);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

.pattern-meaning {
  color: var(--slate-400);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Treatment Predictions */
.treatment-predictions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prediction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 6px;
  border-left: 3px solid rgba(100, 116, 139, 0.5);
}

.prediction-item.positive {
  border-left-color: rgba(74, 222, 128, 0.6);
  background: rgba(74, 222, 128, 0.08);
}

.prediction-item.caution {
  border-left-color: rgba(251, 191, 36, 0.6);
  background: rgba(251, 191, 36, 0.08);
}

.treatment-name {
  color: var(--slate-200);
  font-size: 0.85rem;
}

.response-indicator {
  font-size: 0.9rem;
}

.prediction-item.positive .response-indicator {
  color: var(--green-400);
}

.prediction-item.caution .response-indicator {
  color: var(--amber-400);
}

/* AO Scan Correlations */
.ao-correlations {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ao-correlation-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 6px;
  position: relative;
}

.ao-pattern {
  color: var(--violet-400);
  font-size: 0.8rem;
  font-weight: 500;
}

.ao-arrow {
  color: var(--slate-500);
  font-size: 0.9rem;
}

.ao-finding {
  color: var(--cyan-400);
  font-size: 0.8rem;
  font-weight: 500;
}

.correlation-strength {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.6) 0%, rgba(6, 182, 212, 0.6) 100%);
  border-radius: 0 0 6px 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CLICKABLE CORRELATION CARD
   ═══════════════════════════════════════════════════════════════════════════════ */

.correlation-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.correlation-card:hover {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
  transform: translateY(-2px);
}

.correlation-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.correlation-card .card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.correlation-card .card-icon {
  font-size: 1.2rem;
}

.correlation-card .card-title {
  font-weight: 600;
  color: var(--slate-200);
  font-size: 0.95rem;
}

.correlation-card .card-expand-hint {
  color: var(--violet-400);
  font-size: 0.75rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.correlation-card:hover .card-expand-hint {
  opacity: 1;
}

.correlation-card .card-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.correlation-card .preview-constitution {
  display: flex;
  align-items: center;
  gap: 10px;
}

.correlation-card .constitution-label {
  color: var(--violet-400);
  font-weight: 600;
  font-size: 1rem;
}

.correlation-card .preview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.correlation-card .stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(30, 41, 59, 0.6);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--slate-400);
}

.correlation-card .stat-icon {
  font-size: 0.8rem;
}

.correlation-card .preview-tendency {
  color: var(--slate-500);
  font-size: 0.8rem;
  line-height: 1.4;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   IRIS CORRELATIONS MODAL
   ═══════════════════════════════════════════════════════════════════════════════ */

.iris-correlations-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.iris-correlations-modal.visible {
  opacity: 1;
  visibility: visible;
}

.iris-correlations-modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.iris-correlations-modal .modal-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  background: linear-gradient(135deg, rgba(26, 31, 42, 0.98) 0%, rgba(15, 19, 24, 0.99) 100%);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.15);
}

.iris-correlations-modal.visible .modal-content {
  transform: scale(1) translateY(0);
}

.iris-correlations-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
  border-radius: 16px 16px 0 0;
}

.iris-correlations-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.iris-correlations-modal .modal-icon {
  font-size: 1.5rem;
}

.iris-correlations-modal .modal-title h2 {
  margin: 0;
  color: var(--slate-100);
  font-size: 1.3rem;
  font-weight: 600;
}

.iris-correlations-modal .modal-close {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--red-400);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.iris-correlations-modal .modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

.iris-correlations-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.iris-correlations-modal .modal-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.iris-correlations-modal .modal-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.iris-correlations-modal .modal-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px 0;
  color: var(--slate-200);
  font-size: 1.1rem;
  font-weight: 600;
}

.iris-correlations-modal .section-icon {
  font-size: 1.1rem;
}

.iris-correlations-modal .section-description {
  color: var(--slate-400);
  font-size: 0.85rem;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

/* Iris Summary Grid */
.iris-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.iris-summary-grid .summary-item {
  background: rgba(30, 41, 59, 0.5);
  padding: 12px;
  border-radius: 8px;
  border-left: 3px solid rgba(6, 182, 212, 0.5);
}

.iris-summary-grid .summary-label {
  display: block;
  color: var(--slate-500);
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.iris-summary-grid .summary-value {
  display: block;
  color: var(--slate-200);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Highlighted summary item (for iris color) */
.iris-summary-grid .summary-item.highlight {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
  border-left: 3px solid var(--cyan-500);
  position: relative;
}

.iris-summary-grid .summary-item.highlight .summary-value {
  color: var(--cyan-400);
  font-weight: 600;
  font-size: 1rem;
}

.iris-summary-grid .summary-item.highlight::after {
  content: '◆';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 0.6rem;
  color: rgba(6, 182, 212, 0.5);
}

/* Constitution Card in Modal */
.iris-correlations-modal .constitution-card {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 20px;
}

.iris-correlations-modal .constitution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.iris-correlations-modal .constitution-name {
  color: var(--violet-400);
  font-size: 1.3rem;
  font-weight: 600;
}

.iris-correlations-modal .constitution-badges {
  display: flex;
  gap: 10px;
}

.iris-correlations-modal .match-badge {
  background: rgba(74, 222, 128, 0.15);
  color: var(--green-400);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.iris-correlations-modal .constitution-detail {
  color: var(--slate-300);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

.iris-correlations-modal .constitution-detail:last-child {
  margin-bottom: 0;
}

.iris-correlations-modal .constitution-detail strong {
  color: var(--slate-200);
}

/* Patterns Grid in Modal */
.patterns-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.patterns-grid .pattern-card {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
  padding: 14px;
  border-left: 3px solid rgba(6, 182, 212, 0.5);
}

.patterns-grid .pattern-header {
  margin-bottom: 8px;
}

.patterns-grid .pattern-name {
  color: var(--slate-200);
  font-weight: 600;
  font-size: 0.95rem;
}

.patterns-grid .pattern-systems {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.patterns-grid .pattern-meaning {
  color: var(--slate-400);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Predictions Grid in Modal */
.predictions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.predictions-grid .prediction-card {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 8px;
  padding: 12px 14px;
  border-left: 3px solid rgba(100, 116, 139, 0.5);
}

.predictions-grid .prediction-card.positive {
  border-left-color: rgba(74, 222, 128, 0.6);
  background: rgba(74, 222, 128, 0.08);
}

.predictions-grid .prediction-card.caution {
  border-left-color: rgba(251, 191, 36, 0.6);
  background: rgba(251, 191, 36, 0.08);
}

.predictions-grid .prediction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.predictions-grid .treatment-name {
  color: var(--slate-200);
  font-size: 0.85rem;
  font-weight: 500;
}

.predictions-grid .response-badge {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
}

.predictions-grid .response-badge.positive {
  background: rgba(74, 222, 128, 0.2);
  color: var(--green-400);
}

.predictions-grid .response-badge.caution {
  background: rgba(251, 191, 36, 0.2);
  color: var(--amber-400);
}

/* AO Correlations List in Modal */
.ao-correlations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ao-correlation-card {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
  padding: 14px 16px;
}

.ao-correlation-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ao-iris-pattern {
  color: var(--violet-400);
  font-weight: 600;
  font-size: 0.9rem;
}

.ao-correlation-card .ao-arrow {
  color: var(--slate-500);
  font-size: 1rem;
}

.ao-correlation-card .ao-finding {
  color: var(--cyan-400);
  font-weight: 500;
  font-size: 0.9rem;
}

.ao-correlation-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ao-correlation-meta .correlation-bar {
  flex: 1;
  height: 6px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.ao-correlation-meta .correlation-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet-500) 0%, var(--cyan-500) 100%);
  border-radius: 3px;
}

.ao-correlation-meta .correlation-percent {
  color: var(--slate-400);
  font-size: 0.8rem;
  white-space: nowrap;
}

.ao-correlation-meta .sample-size {
  color: var(--slate-500);
  font-size: 0.75rem;
}

/* Other Constitutions List */
.other-constitutions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.other-constitution-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 8px;
}

.other-constitution-item .constitution-name {
  color: var(--slate-300);
  font-weight: 500;
  font-size: 0.9rem;
}

.other-constitution-item .dosha-tag.small {
  font-size: 0.7rem;
  padding: 2px 6px;
}

.other-constitution-item .match-score {
  margin-left: auto;
  color: var(--slate-500);
  font-size: 0.8rem;
}

/* Modal Footer */
.iris-correlations-modal .modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  background: rgba(15, 19, 24, 0.5);
  border-radius: 0 0 16px 16px;
}

.iris-correlations-modal .modal-note {
  color: var(--slate-500);
  font-size: 0.8rem;
}

.iris-correlations-modal .btn-modal-close {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(124, 58, 237, 0.15) 100%);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: var(--violet-400);
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.iris-correlations-modal .btn-modal-close:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(124, 58, 237, 0.25) 100%);
  border-color: rgba(139, 92, 246, 0.6);
}

/* Responsive Modal */
@media (max-width: 768px) {
  .iris-correlations-modal .modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .iris-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .predictions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .iris-correlations-modal .constitution-header {
    flex-direction: column;
    align-items: flex-start;
  }
}