/* ========================================
   DIMERI ERM DEMO VIDEO STYLES
   1-Minute Looping Product Demo - Enhanced
   ======================================== */

/* CSS Variables */
:root {
  --primary: #E63946;
  --primary-dark: #C1121F;
  --primary-light: #FEE2E2;

  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  --success: #10B981;
  --success-light: #D1FAE5;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --danger: #EF4444;
  --danger-light: #FEE2E2;
  --info: #3B82F6;
  --info-light: #DBEAFE;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --transition: all 0.3s ease;
  --transition-fast: all 0.15s ease;
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Transparent background for iframe embedding */
  background: transparent;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

/* Demo Wrapper */
.demo-wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* Browser Frame */
.browser-frame {
  background: white;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
  height: 100%;
}

.browser-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}

.browser-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: var(--transition);
}

.dot:hover {
  transform: scale(1.2);
}

.dot.red { background: #FF5F56; }
.dot.yellow { background: #FFBD2E; }
.dot.green { background: #27CA40; }

.browser-address {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: white;
  padding: 6px 16px;
  border-radius: 6px;
  margin: 0 100px;
  font-size: 13px;
  color: var(--gray-600);
}

.lock-icon {
  font-size: 11px;
}

/* App Container */
.app-container {
  display: flex;
  height: calc(100vh - 40px); /* Full height minus browser header */
  background: var(--gray-50);
}

/* Sidebar - White like the actual app */
.sidebar {
  width: 220px;
  background: white;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  border-right: 1px solid var(--gray-200);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 16px;
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(230, 57, 70, 0); }
}

.logo-icon.small {
  width: 24px;
  height: 24px;
  font-size: 12px;
  animation: none;
}

.logo-text {
  color: var(--gray-900);
  font-weight: 600;
  font-size: 18px;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--gray-600);
  text-decoration: none;
  border-radius: var(--radius);
  transition: var(--transition);
  font-size: 13px;
  position: relative;
  overflow: hidden;
}

.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: var(--primary);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  transition: var(--transition);
}

.nav-item:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.nav-item:hover::before {
  transform: scaleY(1);
}

.nav-item:hover svg {
  transform: scale(1.1);
}

.nav-item.active {
  background: var(--primary);
  color: white;
}

.nav-item.active::before {
  display: none;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--gray-200);
  margin-top: auto;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
}

.user-profile:hover {
  background: var(--gray-100);
}

.user-avatar {
  width: 34px;
  height: 34px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  position: relative;
}

.user-avatar::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background: var(--success);
  border-radius: 50%;
  border: 2px solid white;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  color: var(--gray-900);
  font-weight: 500;
  font-size: 13px;
}

.user-role {
  color: var(--gray-400);
  font-size: 12px;
}

/* Main Content */
.main-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* Scenes */
.scene {
  position: absolute;
  inset: 0;
  padding: 20px 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.scene.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.scene.exiting {
  opacity: 0;
  transform: translateX(-20px);
}

/* Page Header */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.header-left h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2px;
}

.header-subtitle {
  color: var(--gray-500);
  font-size: 13px;
}

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

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:active::after {
  width: 300px;
  height: 300px;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
}

.btn-outline {
  background: white;
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  transform: translateY(-2px);
}

.btn-ai {
  background: linear-gradient(135deg, var(--primary) 0%, #FF6B6B 100%);
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.4);
  animation: aiGlow 2s ease-in-out infinite;
}

@keyframes aiGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(230, 57, 70, 0.4); }
  50% { box-shadow: 0 4px 20px rgba(230, 57, 70, 0.6); }
}

.btn-ai:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.5);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease forwards;
  transition: var(--transition);
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

.stat-icon.red {
  background: var(--danger-light);
  color: var(--danger);
}

.stat-icon.orange {
  background: var(--warning-light);
  color: var(--warning);
}

.stat-icon.green {
  background: var(--success-light);
  color: var(--success);
}

.stat-icon.blue {
  background: var(--info-light);
  color: var(--info);
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
  transition: var(--transition);
}

.stat-card:hover .stat-value {
  color: var(--primary);
}

.stat-label {
  font-size: 13px;
  color: var(--gray-500);
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 20px;
  width: fit-content;
}

.stat-trend.up {
  color: var(--success);
  background: var(--success-light);
}

.stat-trend.down {
  color: var(--danger);
  background: var(--danger-light);
}

/* Charts Row */
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.chart-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}

.chart-card:hover {
  box-shadow: var(--shadow-md);
}

.chart-card.heatmap-card {
  padding-left: 80px;
  overflow: visible;
}

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

.chart-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.chart-badge {
  background: var(--success-light);
  color: var(--success);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: badgePulse 2s ease-in-out infinite;
}

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

/* ========================================
   ENHANCED HEATMAP
   ======================================== */

.heatmap-container {
  padding: 10px;
  position: relative;
}

/* Old heatmap gradient styles removed - using solid colors in dashboard styles */

/* Risk Dots Container */
.risk-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  align-items: center;
  padding: 2px;
}

/* Individual Risk Dots */
.risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
  animation: dotPulse 2s ease-in-out infinite;
}

.risk-dot:nth-child(1) { animation-delay: 0s; }
.risk-dot:nth-child(2) { animation-delay: 0.3s; }
.risk-dot:nth-child(3) { animation-delay: 0.6s; }
.risk-dot:nth-child(4) { animation-delay: 0.9s; }

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Dot colors based on cell severity */
.heatmap-cell.low .risk-dot {
  background: linear-gradient(135deg, #065F46 0%, #047857 100%);
  box-shadow: 0 1px 3px rgba(6, 95, 70, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.heatmap-cell.medium .risk-dot {
  background: linear-gradient(135deg, #B45309 0%, #D97706 100%);
  box-shadow: 0 1px 3px rgba(180, 83, 9, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.heatmap-cell.high .risk-dot {
  background: linear-gradient(135deg, #C2410C 0%, #EA580C 100%);
  box-shadow: 0 1px 3px rgba(194, 65, 12, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.heatmap-cell.critical .risk-dot {
  background: linear-gradient(135deg, #991B1B 0%, #DC2626 100%);
  box-shadow: 0 1px 3px rgba(153, 27, 27, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  animation: criticalDotPulse 1.5s ease-in-out infinite;
}

@keyframes criticalDotPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6), 0 1px 3px rgba(153, 27, 27, 0.5);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.4), 0 1px 3px rgba(153, 27, 27, 0.5);
  }
}

/* Hover effect on dots */
.heatmap-cell:hover .risk-dot {
  transform: scale(1.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.heatmap-cell.pulse {
  animation: cellPulse 2s ease-in-out infinite;
}

@keyframes cellPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    transform: scale(1.05);
  }
}

/* Heatmap Tooltip */
.heatmap-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.9);
  background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
  color: white;
  padding: 0;
  border-radius: 10px;
  font-size: 12px;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.heatmap-tooltip::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #111827;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.heatmap-cell:hover .heatmap-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Tooltip Header */
.tooltip-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tooltip-header::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.heatmap-cell.low .tooltip-header::before { background: #10B981; }
.heatmap-cell.medium .tooltip-header::before { background: #F59E0B; }
.heatmap-cell.high .tooltip-header::before { background: #F97316; }
.heatmap-cell.critical .tooltip-header::before { background: #EF4444; animation: tooltipDotBlink 1s infinite; }

@keyframes tooltipDotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Tooltip Content */
.tooltip-content {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.risk-id {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-weight: 600;
  font-size: 10px;
  color: #E5E7EB;
}

/* Tooltip Footer */
.tooltip-footer {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 14px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}


/* ========================================
   EXECUTIVE BRIEFING DASHBOARD - Notion/Cursor calm design
   ======================================== */

.executive-briefing {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
  padding: 16px 20px;
  background: white;
}

/* KPI Strip - Clean blocks, no shadows */
.kpi-strip {
  display: flex;
  gap: 24px;
}

.kpi-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kpi-value {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.kpi-value.critical {
  color: #dc2626;
}

.kpi-value.success {
  color: #16a34a;
}

.kpi-label {
  font-size: 11px;
  color: #6b7280;
}

/* AI Insight Strip - The signature element */
.ai-insight-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fafafa;
  border-radius: 6px;
}

.ai-insight-icon {
  font-size: 12px;
  color: #6b7280;
}

.ai-insight-text {
  font-size: 12px;
  color: #374151;
  line-height: 1.5;
}

/* ========================================
   DASHBOARD - ORIGINAL LAYOUT
   Main Canvas (Strategy + AI) on top, Heatmap below
   ======================================== */

/* Main Canvas - Two columns side by side, fills available space */
.main-canvas {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

/* Strategic Map - Left side, fills height */
.strategic-map {
  background: white;
  display: flex;
  flex-direction: column;
}

.map-header {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

/* AI Narrative Panel - Right side, fills height */
.ai-narrative-panel {
  background: #fafafa;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.narrative-section {
  margin-bottom: 12px;
}

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

.narrative-header {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.narrative-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.narrative-item {
  font-size: 11px;
  color: #4b5563;
  line-height: 1.5;
}

.narrative-item.warning {
  color: #d97706;
  font-weight: 500;
}

/* Expandable Row - Strategic Map */
.strategy-table tr.expandable {
  cursor: pointer;
}

.strategy-table tr.expandable:hover {
  background: rgba(0, 0, 0, 0.02);
}

.strategy-table tr.expandable.expanded {
  background: rgba(0, 0, 0, 0.02);
}

.expand-icon {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: #9ca3af;
  transition: transform 0.2s ease;
}

.strategy-table tr.expandable.expanded .expand-icon {
  transform: rotate(90deg);
}

/* Risk Panel - Notion-style subtle dropdown */
.risk-panel {
  display: none;
}

.risk-panel.show {
  display: table-row;
}

.risk-panel td {
  padding: 0 !important;
  background: #fafafa;
}

.risk-panel-content {
  padding: 10px 12px;
  border-top: 1px solid #f0f0f0;
}

.panel-header {
  font-size: 9px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.panel-risks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel-risk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}

.panel-risk-item .risk-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.panel-risk-item.critical .risk-indicator { background: #f87171; }
.panel-risk-item.high .risk-indicator { background: #fb923c; }
.panel-risk-item.medium .risk-indicator { background: #facc15; }
.panel-risk-item.low .risk-indicator { background: #4ade80; }

.panel-risk-item .risk-label {
  flex: 1;
  font-size: 10px;
  color: #374151;
}

.panel-risk-item .risk-score-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #6b7280;
}

.panel-risk-item.critical .risk-score-badge {
  background: rgba(248, 113, 113, 0.1);
  color: #dc2626;
}

.panel-risk-item.high .risk-score-badge {
  background: rgba(251, 146, 60, 0.1);
  color: #ea580c;
}

/* Word animation for AI typing in narrative panel */
.ai-narrative-panel .word {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ai-narrative-panel .word.visible {
  opacity: 1;
}

/* Heatmap Section - Inside AI panel */
.heatmap-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}

.heatmap-header {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

/* Risk Matrix Table - guaranteed connected cells */
.risk-matrix {
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
  margin: 0 auto;
}

.risk-matrix td {
  padding: 0;
  margin: 0;
}

/* Axis label cell (Impact - vertical) */
.risk-matrix .axis-label-cell {
  width: 14px;
  vertical-align: middle;
  padding-right: 2px;
}

.risk-matrix .y-axis-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 8px;
  font-weight: 500;
  color: #6b7280;
}

/* Axis numbers */
.risk-matrix .axis-num {
  font-size: 7px;
  color: #9ca3af;
  text-align: center;
  width: 12px;
  padding: 2px;
}

/* X-axis label (Likelihood) */
.risk-matrix .x-axis-label {
  font-size: 8px;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
  padding-top: 2px;
}

/* Heatmap cells - muted Notion-style colors, no gaps */
.risk-matrix .cell {
  width: 38px;
  height: 44px;
  text-align: center;
  vertical-align: middle;
}

/* Soft, muted colors like Notion */
.risk-matrix .cell.low { background: #c3e6cb; }
.risk-matrix .cell.medium { background: #ffeeba; }
.risk-matrix .cell.high { background: #fed8b1; }
.risk-matrix .cell.critical { background: #f5c6cb; }

.risk-matrix .cell .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  margin: 1px;
}

/* Heatmap Legend */
.heatmap-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 6px;
}

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

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.legend-color.low { background: #c3e6cb; }
.legend-color.medium { background: #ffeeba; }
.legend-color.high { background: #fed8b1; }
.legend-color.critical { background: #f5c6cb; }

.legend-text {
  font-size: 7px;
  color: #6b7280;
}

/* Column Headers */
.column-header {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}

/* LEFT: Strategy Column - The Hero */
.strategy-column {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Strategy Table - Clean Notion style */
.strategy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  flex: 1;
  table-layout: fixed;
}

/* Fixed column widths for alignment */
.strategy-table th:nth-child(1),
.strategy-table td:nth-child(1) { width: 50%; }
.strategy-table th:nth-child(2),
.strategy-table td:nth-child(2) { width: 12%; text-align: center; }
.strategy-table th:nth-child(3),
.strategy-table td:nth-child(3) { width: 18%; text-align: center; }
.strategy-table th:nth-child(4),
.strategy-table td:nth-child(4) { width: 20%; text-align: center; }

.strategy-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  color: #6b7280;
  padding: 6px 10px;
  border-bottom: 1px solid #e5e7eb;
}

.strategy-table th:nth-child(1) {
  text-align: left;
}

.strategy-table td {
  padding: 8px 10px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}

.strategy-table tr:last-child td {
  border-bottom: none;
}

.strategy-table tr.hoverable {
  transition: background 0.15s ease;
}

.strategy-table tr.hoverable:hover {
  background: #f9fafb;
}

.strategy-table tr.danger-row {
  background: rgba(220, 38, 38, 0.03);
}

.strategy-table tr.danger-row:hover {
  background: rgba(220, 38, 38, 0.06);
}

.obj-name {
  font-weight: 500;
  color: #111827;
  text-align: left !important;
}

.obj-risks {
  font-weight: 600;
}

.obj-appetite {
  color: #6b7280;
  text-align: center;
}

/* RIGHT: Stacked column (Heatmap + AI) */
.right-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Heatmap Section in right stack */
.heatmap-section {
  flex: 0 0 auto;
}

/* Status Pills - Soft colors */
.status-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 8px;
  text-align: center;
}

.status-pill.success {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

.status-pill.warning {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.status-pill.danger {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.status-pill.neutral {
  background: #f3f4f6;
  color: #6b7280;
}

/* CENTER: Exposure Column - Heatmap */
.exposure-column {
  display: flex;
  flex-direction: column;
}

.heatmap-container {
  display: flex;
  gap: 6px;
  flex: 1;
  align-items: flex-start;
}


.heatmap-grid-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Dashboard heatmap grid - NO GAPS, connected cells */
.heatmap-section .heatmap-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0 !important;
  flex: 1;
  aspect-ratio: 1;
  border: 1px solid #e5e7eb;
}

.heatmap-section .heatmap-cell {
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  cursor: pointer;
  transition: transform 0.15s ease;
  margin: 0;
  border: none;
}

.heatmap-section .heatmap-cell:hover {
  transform: scale(1.1);
  z-index: 1;
}

/* Solid heatmap colors - green to red gradient */
.heatmap-section .heatmap-cell.low { background: #4ade80; }
.heatmap-section .heatmap-cell.medium { background: #facc15; }
.heatmap-section .heatmap-cell.high { background: #fb923c; }
.heatmap-section .heatmap-cell.critical { background: #f87171; }

.heatmap-section .heatmap-cell .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
}

/* All dots same color for visibility */
.heatmap-section .heatmap-cell.low .dot,
.heatmap-section .heatmap-cell.medium .dot,
.heatmap-section .heatmap-cell.high .dot,
.heatmap-section .heatmap-cell.critical .dot {
  background: rgba(0, 0, 0, 0.35);
}

/* RIGHT: Intelligence Column - AI Panel */
.intelligence-column {
  display: flex;
  flex-direction: column;
  background: #fafafa;
  border-radius: 6px;
  padding: 10px;
}

.intelligence-column .column-header {
  border-bottom: none;
  margin-bottom: 8px;
  padding-bottom: 0;
}

.intelligence-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.intel-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intel-label {
  font-size: 9px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.intel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.intel-list li {
  font-size: 10px;
  color: #4b5563;
  line-height: 1.4;
  padding-left: 10px;
  position: relative;
}

.intel-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #9ca3af;
}

.intel-list li.warning {
  color: #d97706;
  font-weight: 500;
}

.intel-list li.warning::before {
  color: #d97706;
}

.intel-list.recommendations li::before {
  content: none;
}

.intel-list.recommendations li {
  padding-left: 0;
  color: #374151;
}

/* Word animation for AI typing */
.intelligence-column .word {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.intelligence-column .word.visible {
  opacity: 1;
}

.insights-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 8px;
}

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

.insight-name {
  font-size: 11px;
  color: #6b7280;
  min-width: 70px;
}

.insight-bar {
  flex: 1;
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}

.insight-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s ease;
}

.insight-fill.operational {
  background: linear-gradient(90deg, #90caf9, #64b5f6);
}

.insight-fill.financial {
  background: linear-gradient(90deg, #a5d6a7, #81c784);
}

.insight-fill.compliance {
  background: linear-gradient(90deg, #ce93d8, #ba68c8);
}

.insight-fill.cyber {
  background: linear-gradient(90deg, #ef9a9a, #e57373);
}

.insight-value {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  min-width: 20px;
  text-align: right;
}

/* AI Scan Bar */
.ai-scan-bar {
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(129, 199, 132, 0.05) 0%, rgba(129, 199, 132, 0.1) 50%, rgba(129, 199, 132, 0.05) 100%);
  border-radius: 6px;
  border: 1px solid rgba(129, 199, 132, 0.15);
  text-align: center;
}

.scan-text {
  font-size: 11px;
  color: #6b7280;
  animation: scanTextFade 4s ease-in-out infinite;
}

@keyframes scanTextFade {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* === RISK REGISTER - Full Table View === */
.risk-table-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Table Header */
.table-header-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.5fr 0.8fr;
  gap: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Table Body */
.table-body {
  flex: 1;
  overflow-y: auto;
}

.table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.5fr 0.8fr;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  align-items: center;
  transition: background 0.15s ease;
}

.table-row:hover {
  background: #fafafa;
}

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

/* AI Analyzing Row */
.table-row.ai-analyzing {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.03), rgba(59, 130, 246, 0.06));
  position: relative;
}

.table-row.ai-analyzing::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #3b82f6;
  animation: aiBarPulse 1.5s ease-in-out infinite;
}

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

/* Risk Column */
.td-risk {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.risk-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.table-row.critical .risk-indicator { background: #e57373; }
.table-row.high .risk-indicator { background: #ffb74d; }
.table-row.medium .risk-indicator { background: #fff176; }
.table-row.low .risk-indicator { background: #81c784; }

.risk-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.risk-id {
  font-size: 9px;
  font-weight: 600;
  color: #9ca3af;
}

.risk-title {
  font-size: 11px;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Other Columns */
.td-category,
.td-owner {
  font-size: 10px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td-score {
  font-size: 11px;
  font-weight: 600;
  color: #1f2937;
}

.table-row.critical .td-score { color: #c62828; }
.table-row.high .td-score { color: #e65100; }

/* Status Badges */
.td-status {
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
}

.td-status.open {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.td-status.mitigating {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.td-status.monitoring {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.td-status.closed {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

/* Table AI Bar */
.table-ai-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.1));
  border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.table-ai-bar .ai-icon {
  font-size: 12px;
  color: #3b82f6;
  animation: aiTablePulse 2s ease-in-out infinite;
}

@keyframes aiTablePulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
}

.table-ai-bar .ai-text {
  font-size: 11px;
  color: #3b82f6;
  font-weight: 500;
}

/* ========================================
   RISK REGISTER - Living Model (New Design)
   ======================================== */

.register-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  gap: 12px;
  background: white;
}

/* Risk List - Clean white rows */
.risk-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #f3f4f6;
  border-radius: 8px;
  overflow: hidden;
}

/* Risk row - grid layout for proper alignment */
.risk-row {
  display: grid;
  grid-template-columns: 8px 1fr 120px 40px 70px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: white;
  cursor: pointer;
  transition: background 0.15s ease;
}

.risk-row:hover {
  background: #fafafa;
}

.risk-row.selected {
  background: #f0f9ff;
}

.risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.risk-dot.critical { background: #fca5a5; }
.risk-dot.high { background: #fdba74; }
.risk-dot.medium { background: #fcd34d; }
.risk-dot.low { background: #86efac; }

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

.risk-id {
  font-size: 9px;
  font-weight: 500;
  color: #9ca3af;
}

.risk-name {
  font-size: 11px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.risk-objective {
  font-size: 10px;
  color: #9ca3af;
  text-align: left;
}

.risk-score {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  text-align: center;
}

/* Risk Analysis Panel - Slides in */
.risk-analysis-panel {
  background: #fafafa;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.analysis-title {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.analysis-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analysis-narrative {
  font-size: 11px;
  color: #374151;
  line-height: 1.6;
}

.analysis-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.section-label {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.analysis-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analysis-list li {
  font-size: 11px;
  color: #6b7280;
  padding-left: 12px;
  position: relative;
}

.analysis-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #9ca3af;
}

.analysis-list li.suggested {
  color: #3b82f6;
}

.analysis-list li.suggested::before {
  content: '';
}

/* ========================================
   CONTROLS - Grouped by Objective (New Design)
   ======================================== */

.controls-view-new {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  gap: 12px;
  background: white;
}

/* Coverage Strip */
.coverage-strip {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.coverage-value {
  font-size: 24px;
  font-weight: 600;
  color: #16a34a;
}

.coverage-label {
  font-size: 12px;
  color: #6b7280;
}

/* Controls Grouped */
.controls-grouped {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}

.group-name {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.group-coverage {
  font-size: 11px;
  font-weight: 500;
  color: #16a34a;
}

.group-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fafafa;
  border-radius: 6px;
}

.control-item.ai-suggested {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px dashed #3b82f6;
}

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

.control-dot.success { background: #16a34a; }
.control-dot.warning { background: #d97706; }
.control-dot.ai { background: #3b82f6; animation: aiDotPulse 2s ease-in-out infinite; }

@keyframes aiDotPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.control-name {
  flex: 1;
  font-size: 11px;
  color: #374151;
}

.control-protects {
  font-size: 10px;
  color: #9ca3af;
}

.control-eff-value {
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  min-width: 32px;
  text-align: right;
}

/* Effectiveness Narrative */
.effectiveness-narrative {
  background: #fafafa;
  border-radius: 8px;
  padding: 12px;
}

.effectiveness-narrative .narrative-header {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.effectiveness-narrative .narrative-text {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.6;
}

/* === CONTROLS - Full List View with Risk Links === */
.controls-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 10px;
}

.controls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.controls-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.controls-count {
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 10px;
}

.controls-list-full {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.control-row:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.control-row.ai-suggested {
  border: 1px dashed #3b82f6;
  background: linear-gradient(135deg, white, rgba(59, 130, 246, 0.02));
  animation: aiRowPulse 2s ease-in-out infinite;
}

@keyframes aiRowPulse {
  0%, 100% { border-color: rgba(59, 130, 246, 0.3); }
  50% { border-color: rgba(59, 130, 246, 0.6); }
}

.control-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.control-type-tag {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  flex-shrink: 0;
}

.control-type-tag.preventive {
  background: rgba(96, 165, 250, 0.15);
  color: #3b82f6;
}

.control-type-tag.detective {
  background: rgba(167, 139, 250, 0.15);
  color: #8b5cf6;
}

.control-type-tag.corrective {
  background: rgba(244, 114, 182, 0.15);
  color: #ec4899;
}

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

.control-name {
  font-size: 11px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control-desc {
  font-size: 9px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control-links {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.linked-risk {
  font-size: 8px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #6b7280;
}

.linked-risk.critical {
  background: rgba(229, 115, 115, 0.15);
  color: #c62828;
}

.linked-risk.high {
  background: rgba(255, 183, 77, 0.15);
  color: #e65100;
}

.linked-risk.medium {
  background: rgba(255, 241, 118, 0.15);
  color: #9e9d24;
}

.control-eff {
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  flex-shrink: 0;
}

.ai-suggested-tag {
  font-size: 9px;
  font-weight: 600;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  animation: aiTagPulse 1.5s ease-in-out infinite;
}

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

.controls-ai-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.1));
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.controls-ai-bar .ai-icon {
  font-size: 12px;
  color: #3b82f6;
  animation: aiIconSpin 2s ease-in-out infinite;
}

@keyframes aiIconSpin {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.controls-ai-bar .ai-text {
  font-size: 11px;
  color: #3b82f6;
  font-weight: 500;
}

/* === REPORTS - Full Typing Animation with Keywords === */
/* Reports Canvas - Clean document area */
.reports-canvas {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  padding: 0;
}

/* KRI Insert Block */
.kri-insert {
  display: inline-block;
  max-width: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  vertical-align: middle;
  margin: 0;
}

.kri-1 {
  animation: kriInsert1 8s ease-in-out infinite;
}

.kri-2 {
  animation: kriInsert2 8s ease-in-out infinite;
}

@keyframes kriInsert1 {
  0%, 32% {
    max-width: 0;
    max-height: 0;
    opacity: 0;
    margin: 0;
  }
  35%, 100% {
    max-width: 200px;
    max-height: 50px;
    opacity: 1;
    margin: 4px 4px;
  }
}

@keyframes kriInsert2 {
  0%, 62% {
    max-width: 0;
    max-height: 0;
    opacity: 0;
    margin: 0;
  }
  65%, 100% {
    max-width: 200px;
    max-height: 50px;
    opacity: 1;
    margin: 4px 4px;
  }
}

.kri-block {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #bae6fd;
  border-radius: 4px;
  white-space: nowrap;
}

.kri-label {
  font-size: 7px;
  font-weight: 700;
  color: white;
  background: #0ea5e9;
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kri-name {
  font-size: 9px;
  font-weight: 500;
  color: #0c4a6e;
}

.kri-value {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}

.kri-value.critical {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.kri-value.positive {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

/* Words after KRI - delayed animation (adjusted for faster typing) */
.word-after-kri-1 {
  animation-delay: 2.5s !important;
}

.word-after-kri-2 {
  animation-delay: 4.5s !important;
}

.ai-document {
  flex: 1;
  background: white;
  border: none;
  border-radius: 0;
  padding: 24px 32px;
  overflow: hidden;
  /* Clean document canvas - like Google Docs */
}

.ai-typing-container {
  font-size: 11px;
  line-height: 1.8;
  color: #374151;
}

.ai-typed-paragraph {
  margin: 0;
}

/* ERM Document - Clean text on white canvas */
.erm-document {
  flex: 1;
  font-size: 11px;
  line-height: 1.7;
  color: #374151;
}

.report-h1 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 16px 0;
}

.report-meta-line {
  font-size: 10px;
  color: #6b7280;
  margin: 0 0 4px 0;
}

.report-h2 {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin: 16px 0 8px 0;
}

.report-paragraph {
  font-size: 11px;
  line-height: 1.7;
  color: #374151;
  margin: 0 0 8px 0;
}

/* Bullet list */
.report-list {
  margin: 8px 0 12px 0;
  padding-left: 20px;
  list-style: disc;
}

.report-list li {
  font-size: 11px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 4px;
}

.report-list li::marker {
  color: #9ca3af;
}

/* Report Table - Clean minimal styling */
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin: 8px 0;
}

.report-table th {
  text-align: left;
  font-weight: 600;
  color: #111827;
  padding: 6px 10px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.report-table td {
  padding: 6px 10px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}

.report-table tr:last-child td {
  border-bottom: none;
}

/* Notion-style table insertion - starts hidden, JS animates in sync with typing */
.notion-table-insert {
  opacity: 0;
  transform: translateY(8px);
}

/* Trend indicators */
.trend-up {
  color: #dc2626;
  font-weight: 600;
}

.trend-down {
  color: #16a34a;
  font-weight: 600;
}

.trend-stable {
  color: #6b7280;
  font-weight: 600;
}

/* Key Insight callout */
.report-insight {
  font-size: 11px;
  line-height: 1.7;
  color: #1e40af;
  background: #eff6ff;
  padding: 8px 12px;
  border-left: 3px solid #3b82f6;
  margin: 12px 0;
  border-radius: 0 4px 4px 0;
}

/* Words start hidden, JS will animate them in sequence from top to bottom */
.word {
  display: inline;
  opacity: 0;
  transition: opacity 0.08s ease;
}

.word.visible {
  opacity: 1;
}

/* Reports section: show words immediately without animation */
.erm-document .word {
  opacity: 1;
}

/* Keyword Highlighting */
.highlight-keyword {
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}

.highlight-positive {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}

.highlight-critical {
  background: rgba(229, 115, 115, 0.15);
  color: #c62828;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}

.highlight-metric {
  background: rgba(139, 92, 246, 0.1);
  color: #6d28d9;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
}

.highlight-action {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}

.typing-cursor-line {
  display: inline-block;
  width: 2px;
  height: 13px;
  background: #3b82f6;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink 0.7s steps(1) infinite;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.ai-writing-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.1));
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.ai-write-icon {
  font-size: 12px;
  color: #3b82f6;
  animation: aiWritePulse 2s ease-in-out infinite;
}

@keyframes aiWritePulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
}

.ai-write-status {
  font-size: 11px;
  color: #3b82f6;
  font-weight: 500;
}

.typing-dots {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

.typing-dots span {
  width: 4px;
  height: 4px;
  background: #3b82f6;
  border-radius: 50%;
  animation: typingDotBounce 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDotBounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* === REGISTER LIST (Risk Register Scene) === */
.register-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}

.register-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  transition: all 0.2s ease;
}

.register-item:hover {
  border-color: var(--gray-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.register-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.register-item.critical .register-indicator { background: #e57373; }
.register-item.high .register-indicator { background: #ffb74d; }
.register-item.medium .register-indicator { background: #fff176; }
.register-item.low .register-indicator { background: #81c784; }

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

.register-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.register-id {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  font-family: 'SF Mono', monospace;
}

.register-name {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

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

.register-category,
.register-owner {
  font-size: 11px;
  color: #9ca3af;
}

.register-status {
  font-size: 10px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.register-status.open {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.register-status.mitigating {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.register-status.closed {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

/* === CONTROLS LIST (Controls Scene) === */
.controls-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}

.controls-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  transition: all 0.2s ease;
}

.controls-item:hover {
  border-color: var(--gray-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.controls-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.controls-item.preventive .controls-indicator { background: #60a5fa; }
.controls-item.detective .controls-indicator { background: #a78bfa; }
.controls-item.corrective .controls-indicator { background: #f472b6; }

.pulse-dot.preventive { background: #60a5fa; }
.pulse-dot.detective { background: #a78bfa; }
.pulse-dot.corrective { background: #f472b6; }
.pulse-dot.report { background: #34d399; }
.pulse-dot.scheduled { background: #fbbf24; }

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

.controls-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.controls-id {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  font-family: 'SF Mono', monospace;
}

.controls-name {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

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

.controls-type,
.controls-links {
  font-size: 11px;
  color: #9ca3af;
}

.controls-eff {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.eff-bar {
  width: 60px;
  height: 6px;
  background: var(--gray-100);
  border-radius: 3px;
  overflow: hidden;
}

.eff-fill {
  height: 100%;
  background: linear-gradient(90deg, #81c784, #66bb6a);
  border-radius: 3px;
}

.eff-value {
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  min-width: 32px;
}

/* === REPORT PREVIEW COMPACT (Reports Scene) === */
.report-preview-compact {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.report-doc-mini {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.report-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.report-mini-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.report-mini-date {
  font-size: 11px;
  color: #6b7280;
}

.report-mini-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.report-mini-stats {
  display: flex;
  gap: 16px;
}

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

.report-stat .stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.report-stat .stat-label {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
}

.report-stat.critical .stat-value { color: #e57373; }
.report-stat.high .stat-value { color: #ffb74d; }

.report-mini-heatmap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.heatmap-row {
  display: flex;
  gap: 4px;
}

.report-mini-heatmap .heatmap-cell {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.report-mini-heatmap .heatmap-cell.critical { background: #e57373; }
.report-mini-heatmap .heatmap-cell.high { background: #ffb74d; }
.report-mini-heatmap .heatmap-cell.medium { background: #fff176; }
.report-mini-heatmap .heatmap-cell.low { background: #81c784; }

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

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

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

.finding-dot.critical { background: #e57373; }
.finding-dot.success { background: #81c784; }

.finding-row .finding-text {
  font-size: 12px;
  color: #374151;
}

.report-templates-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.template-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: all 0.2s ease;
}

.template-item:hover {
  border-color: var(--gray-300);
}

.template-item.active {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

.template-icon {
  font-size: 14px;
}

.template-name {
  font-size: 11px;
  color: #374151;
  font-weight: 500;
}

/* Bar Chart */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bar-item {
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInBar 0.5s ease forwards;
}

.bar-item:nth-child(1) { animation-delay: 0.1s; }
.bar-item:nth-child(2) { animation-delay: 0.2s; }
.bar-item:nth-child(3) { animation-delay: 0.3s; }
.bar-item:nth-child(4) { animation-delay: 0.4s; }
.bar-item:nth-child(5) { animation-delay: 0.5s; }

@keyframes slideInBar {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.bar-label {
  font-size: 13px;
  color: var(--gray-600);
}

.bar-track {
  height: 28px;
  background: var(--gray-100);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

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

.bar-fill.operational { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.bar-fill.financial { background: linear-gradient(90deg, #10B981, #34D399); }
.bar-fill.compliance { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
.bar-fill.strategic { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.bar-fill.cyber { background: linear-gradient(90deg, #EF4444, #F87171); }

.bar-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  text-align: right;
}

/* ========================================
   SCENE 2: RISK REGISTER - ENHANCED
   ======================================== */

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 8px 12px;
  transition: var(--transition);
}

.search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.search-box svg {
  color: var(--gray-400);
}

.search-box input {
  border: none;
  outline: none;
  font-size: 14px;
  width: 180px;
}

.search-box input::placeholder {
  color: var(--gray-400);
}

/* Risk Table */
.table-container {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.risk-table {
  width: 100%;
  border-collapse: collapse;
}

.risk-table th {
  background: var(--gray-50);
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--gray-200);
  position: relative;
}

.risk-table th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.risk-table th:hover::after {
  width: 100%;
}

.risk-table td {
  padding: 16px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
  color: var(--gray-700);
}

.risk-row {
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInRow 0.4s ease forwards;
  transition: all 0.3s ease;
  cursor: pointer;
}

.risk-row:nth-child(1) { animation-delay: 0.1s; }
.risk-row:nth-child(2) { animation-delay: 0.2s; }
.risk-row:nth-child(3) { animation-delay: 0.3s; }
.risk-row:nth-child(4) { animation-delay: 0.4s; }
.risk-row:nth-child(5) { animation-delay: 0.5s; }

@keyframes slideInRow {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.risk-row:hover {
  background: linear-gradient(90deg, var(--primary-light), transparent);
  transform: scale(1.01);
}

.risk-row:hover td:first-child {
  border-left: 3px solid var(--primary);
}

.risk-row.highlight {
  animation: rowHighlight 1s ease;
}

@keyframes rowHighlight {
  0%, 100% { background: transparent; }
  50% { background: var(--primary-light); }
}

.risk-id {
  font-weight: 600;
  color: var(--primary);
  font-family: 'Courier New', monospace;
}

.risk-desc {
  max-width: 280px;
}

/* Category Tags */
.category-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  transition: var(--transition);
}

.category-tag:hover {
  transform: scale(1.05);
}

.category-tag.cyber {
  background: #FEE2E2;
  color: #DC2626;
}

.category-tag.operational {
  background: #DBEAFE;
  color: #2563EB;
}

.category-tag.compliance {
  background: #EDE9FE;
  color: #7C3AED;
}

.category-tag.financial {
  background: #D1FAE5;
  color: #059669;
}

.category-tag.strategic {
  background: #FEF3C7;
  color: #D97706;
}

/* Rating Badges */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.rating::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
}

.rating.critical {
  background: #FEE2E2;
  color: #DC2626;
}

.rating.critical::before {
  background: #DC2626;
  animation: ratingPulse 1s ease-in-out infinite;
}

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

.rating.high {
  background: #FED7AA;
  color: #C2410C;
}

.rating.high::before {
  background: #C2410C;
}

.rating.medium {
  background: #FEF3C7;
  color: #D97706;
}

.rating.medium::before {
  background: #D97706;
}

.rating.low {
  background: #D1FAE5;
  color: #059669;
}

.rating.low::before {
  background: #059669;
}

/* Owner Cell */
.owner-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.owner-avatar {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--gray-300), var(--gray-200));
  color: var(--gray-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  transition: var(--transition);
}

.risk-row:hover .owner-avatar {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  transform: scale(1.1);
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-badge.open {
  background: #FEE2E2;
  color: #DC2626;
}

.status-badge.open::before {
  background: #DC2626;
  animation: statusBlink 1s ease-in-out infinite;
}

@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.status-badge.mitigating {
  background: #FEF3C7;
  color: #D97706;
}

.status-badge.mitigating::before {
  background: #D97706;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.status-badge.closed {
  background: #D1FAE5;
  color: #059669;
}

.status-badge.closed::before {
  background: #059669;
}

.action-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--gray-400);
  border-radius: var(--radius);
  transition: var(--transition);
}

.action-btn:hover {
  background: var(--gray-100);
  color: var(--primary);
  transform: rotate(90deg);
}

/* AI Modal */
.ai-modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 100;
}

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

.ai-modal-content {
  background: white;
  border-radius: var(--radius-lg);
  width: 500px;
  max-width: 90%;
  box-shadow: var(--shadow-xl);
  transform: scale(0.9) translateY(20px);
  transition: var(--transition-slow);
}

.ai-modal.active .ai-modal-content {
  transform: scale(1) translateY(0);
}

.ai-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
}

.ai-icon-pulse {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary) 0%, #FF6B6B 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  animation: aiIconPulse 2s ease-in-out infinite;
  position: relative;
}

.ai-icon-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #FF6B6B 100%);
  opacity: 0.3;
  animation: aiRing 2s ease-in-out infinite;
}

@keyframes aiIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes aiRing {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.3); opacity: 0; }
}

.ai-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
}

.ai-modal-body {
  padding: 24px;
}

.ai-typing {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(90deg, var(--gray-50), var(--gray-100));
  border-radius: var(--radius);
  margin-bottom: 20px;
  animation: typingBg 2s ease-in-out infinite;
}

@keyframes typingBg {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.ai-typing-text {
  font-size: 14px;
  color: var(--gray-600);
}

.typing-dots {
  display: flex;
  gap: 4px;
}

.typing-dots span {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: typingDot 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0%, 100% { opacity: 0.3; transform: scale(1) translateY(0); }
  50% { opacity: 1; transform: scale(1.2) translateY(-4px); }
}

.ai-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: var(--transition);
}

.ai-results.show {
  opacity: 1;
  transform: translateY(0);
}

.ai-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  opacity: 0;
  transform: translateX(-20px);
  transition: var(--transition);
  cursor: pointer;
}

.ai-result-item:hover {
  border-color: var(--primary);
  background: white;
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.ai-result-item.show {
  opacity: 1;
  transform: translateX(0);
}

.ai-result-icon {
  width: 36px;
  height: 36px;
  background: var(--success-light);
  color: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.ai-result-item:hover .ai-result-icon {
  transform: scale(1.1) rotate(10deg);
}

.ai-result-icon svg {
  width: 18px;
  height: 18px;
}

.ai-result-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ai-result-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-800);
}

.ai-result-category {
  font-size: 12px;
  color: var(--gray-500);
}

.ai-result-rating {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}

.ai-result-rating.critical {
  background: #FEE2E2;
  color: #DC2626;
}

.ai-result-rating.high {
  background: #FED7AA;
  color: #C2410C;
}

.ai-result-rating.medium {
  background: #FEF3C7;
  color: #D97706;
}

.ai-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
}

/* ========================================
   SCENE 3: CONTROLS - ENHANCED
   ======================================== */

.filter-tabs {
  display: flex;
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 4px;
}

.filter-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.filter-tab:hover {
  color: var(--gray-800);
}

.filter-tab.active {
  background: white;
  color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}

.filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
}

/* Controls Grid */
.controls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.control-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  opacity: 0;
  transform: translateY(20px) rotateX(10deg);
  animation: cardFlipIn 0.6s ease forwards;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  perspective: 1000px;
}

.control-card:nth-child(1) { animation-delay: 0.1s; }
.control-card:nth-child(2) { animation-delay: 0.15s; }
.control-card:nth-child(3) { animation-delay: 0.2s; }
.control-card:nth-child(4) { animation-delay: 0.25s; }
.control-card:nth-child(5) { animation-delay: 0.3s; }
.control-card:nth-child(6) { animation-delay: 0.35s; }

@keyframes cardFlipIn {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

.control-card:hover {
  border-color: var(--primary);
  box-shadow: 0 20px 40px rgba(230, 57, 70, 0.15);
  transform: translateY(-8px);
}

.control-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

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

.control-type {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition);
}

.control-card:hover .control-type {
  transform: scale(1.05);
}

.control-type.preventive {
  background: #DBEAFE;
  color: #2563EB;
}

.control-type.detective {
  background: #EDE9FE;
  color: #7C3AED;
}

.control-type.corrective {
  background: #FED7AA;
  color: #C2410C;
}

.control-id {
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 500;
  font-family: 'Courier New', monospace;
}

.control-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
  transition: var(--transition);
}

.control-card:hover .control-title {
  color: var(--primary);
}

.control-desc {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
  margin-bottom: 16px;
}

.control-effectiveness {
  display: flex;
  align-items: center;
  gap: 8px;
}

.effectiveness-label {
  font-size: 12px;
  color: var(--gray-500);
  min-width: 80px;
}

.effectiveness-bar {
  flex: 1;
  height: 8px;
  background: var(--gray-100);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.effectiveness-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), #34D399);
  width: 0;
  border-radius: 4px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.effectiveness-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  animation: effectivenessShimmer 2s infinite;
}

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

.effectiveness-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  min-width: 36px;
  text-align: right;
}

.control-risks {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

.risks-label {
  font-size: 12px;
  color: var(--gray-500);
}

.risk-tags {
  display: flex;
  gap: 6px;
}

.risk-tag {
  padding: 2px 8px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
}

.risk-tag:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.1);
}

/* ========================================
   SCENE 4: REPORTS - ENHANCED
   ======================================== */

.reports-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  width: 4px;
  height: 16px;
  background: var(--primary);
  border-radius: 2px;
}

.report-templates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.report-template-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.report-template-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-light), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.report-template-card:hover::before {
  opacity: 1;
}

.report-template-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.report-template-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.template-icon {
  width: 44px;
  height: 44px;
  background: var(--gray-100);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  margin-bottom: 12px;
  transition: var(--transition);
  position: relative;
  z-index: 1;
}

.template-icon svg {
  width: 22px;
  height: 22px;
}

.report-template-card:hover .template-icon {
  background: var(--primary-light);
  color: var(--primary);
  transform: scale(1.1) rotate(-5deg);
}

.report-template-card.active .template-icon {
  background: var(--primary);
  color: white;
}

.template-content {
  position: relative;
  z-index: 1;
}

.template-content h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 4px;
}

.template-content p {
  font-size: 12px;
  color: var(--gray-500);
}

.template-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  background: linear-gradient(135deg, var(--primary), #FF6B6B);
  color: white;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  animation: badgeShine 3s ease infinite;
}

@keyframes badgeShine {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Report Preview */
.report-preview-section {
  display: flex;
  flex-direction: column;
}

.report-preview {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.report-document {
  flex: 1;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
}

.report-document::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), #FF6B6B, var(--primary));
  background-size: 200% 100%;
  animation: documentGradient 3s ease infinite;
}

@keyframes documentGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.report-document:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-xl);
}

.report-doc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.report-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.report-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.report-meta span:first-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.report-date {
  font-size: 12px;
  color: var(--gray-500);
}

.report-doc-body {
  padding: 20px;
}

.report-section-preview {
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(10px);
  animation: sectionFadeIn 0.5s ease forwards;
}

.report-section-preview:nth-child(1) { animation-delay: 0.2s; }
.report-section-preview:nth-child(2) { animation-delay: 0.4s; }
.report-section-preview:nth-child(3) { animation-delay: 0.6s; }

@keyframes sectionFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.report-section-preview:last-child {
  margin-bottom: 0;
}

.report-section-preview h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}

.mini-stats {
  display: flex;
  gap: 16px;
}

.mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  background: var(--gray-50);
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
}

.mini-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.mini-stat.critical {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
}

.mini-stat.high {
  background: linear-gradient(135deg, #FED7AA, #FDBA74);
}

.mini-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
}

.mini-stat.critical .mini-value { color: #DC2626; }
.mini-stat.high .mini-value { color: #C2410C; }

.mini-label {
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-findings {
  list-style: none;
}

.finding-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-100);
  margin-bottom: 8px;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s ease;
  cursor: pointer;
}

.finding-item:hover {
  border-color: var(--warning);
  background: var(--warning-light);
}

.finding-item.show {
  opacity: 1;
  transform: translateX(0);
}

.finding-icon {
  width: 24px;
  height: 24px;
  background: var(--warning-light);
  color: var(--warning);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  animation: findingPulse 2s ease-in-out infinite;
}

@keyframes findingPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.finding-text {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.5;
}

/* Mini Heatmap */
.mini-heatmap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  background: var(--gray-50);
  border-radius: var(--radius);
}

.mini-heatmap-row {
  display: flex;
  gap: 3px;
}

.mini-cell {
  width: 36px;
  height: 22px;
  border-radius: 3px;
  transition: var(--transition);
  cursor: pointer;
}

.mini-cell:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.mini-cell.low { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); }
.mini-cell.medium { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
.mini-cell.high { background: linear-gradient(135deg, #FED7AA, #FDBA74); }
.mini-cell.critical { background: linear-gradient(135deg, #FECACA, #FCA5A5); }

.report-doc-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  font-size: 11px;
  color: var(--gray-500);
}

.report-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Export Modal */
.export-modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 100;
}

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

.export-modal-content {
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 400px;
  text-align: center;
  transform: scale(0.9);
  transition: var(--transition-slow);
}

.export-modal.active .export-modal-content {
  transform: scale(1);
}

.export-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.export-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  position: relative;
}

.export-icon svg {
  width: 32px;
  height: 32px;
}

.export-icon.spinning {
  animation: iconSpin 1.5s linear infinite;
}

.export-icon.spinning::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primary);
  animation: ringSpinner 1s linear infinite;
}

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

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

.export-icon.success {
  background: linear-gradient(135deg, var(--success-light), #A7F3D0);
  color: var(--success);
  animation: successBounce 0.5s ease;
}

@keyframes successBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.export-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: var(--gray-100);
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #FF6B6B);
  width: 0;
  transition: width 0.4s ease;
  position: relative;
}

.progress-bar .progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  animation: progressShimmer 1s infinite;
}

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

.export-status {
  font-size: 14px;
  color: var(--gray-500);
}

.export-complete {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.export-complete.show {
  display: flex;
  animation: fadeInUp 0.5s ease;
}

.export-progress.hide {
  display: none;
}

.export-filename {
  font-size: 14px;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 10px 20px;
  border-radius: var(--radius);
  font-family: 'Courier New', monospace;
}

/* ========================================
   DEMO CONTROLS
   ======================================== */

.demo-progress {
  margin-top: 24px;
  padding: 0 20px;
}

.progress-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}

.progress-track .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, white, rgba(255,255,255,0.8));
  width: 0;
  transition: width 0.1s linear;
  border-radius: 3px;
}

.progress-scenes {
  display: flex;
  justify-content: space-between;
}

.scene-dot {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 20px;
  transition: var(--transition);
}

.scene-dot:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.scene-dot.active {
  background: white;
  color: var(--primary);
  font-weight: 600;
}

.demo-controls {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  gap: 8px;
}

.control-btn {
  width: 52px;
  height: 52px;
  background: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}

.control-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

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

.control-btn svg {
  width: 22px;
  height: 22px;
  color: var(--gray-700);
}

.control-btn .pause-icon {
  display: none;
}

.control-btn.playing .play-icon {
  display: none;
}

.control-btn.playing .pause-icon {
  display: block;
}

/* ========================================
   EMBEDDED MODE - Notion/Cursor style
   Frame never changes, only content swaps
   ======================================== */

@media (max-height: 500px) {
  /* === FRAME: OS Chrome is provided by parent (Hero), hide ours === */

  .browser-frame {
    border-radius: 0;
  }

  .browser-header {
    display: none;
  }

  .app-container {
    height: 100vh;
  }

  /* Sidebar - LOCKED, never changes */
  .sidebar {
    width: 140px;
    padding: 8px 0;
  }

  .sidebar-logo {
    padding: 0 10px 8px;
    margin-bottom: 6px;
  }

  .logo-icon {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .logo-text {
    font-size: 13px;
  }

  .nav-item {
    padding: 6px 10px;
    font-size: 10px;
    gap: 8px;
  }

  .nav-item svg {
    width: 14px;
    height: 14px;
  }

  .sidebar-footer {
    padding: 8px 10px;
  }

  .user-avatar {
    width: 22px;
    height: 22px;
    font-size: 8px;
  }

  .user-name {
    font-size: 10px;
  }

  .user-role {
    font-size: 9px;
  }

  /* === SCENES: Instant swap, no animation === */
  .scene {
    padding: 10px 12px;
    overflow: hidden;
    transition: none;
    transform: none;
  }

  .scene.active {
    transform: none;
  }

  .scene.exiting {
    transform: none;
  }

  /* Page header - consistent across all scenes */
  .page-header {
    margin-bottom: 8px;
    min-height: 28px;
  }

  .header-left h1 {
    font-size: 13px;
  }

  .header-subtitle {
    display: none;
  }

  .header-actions {
    gap: 6px;
  }

  .btn {
    padding: 4px 8px;
    font-size: 9px;
  }

  .btn svg {
    width: 12px;
    height: 12px;
  }

  /* === DASHBOARD SCENE - TWO COLUMN (EMBEDDED) === */
  .scene-dashboard {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .executive-briefing {
    height: 100%;
    gap: 6px;
    padding: 8px 10px;
  }

  /* KPI Strip - Embedded */
  .kpi-strip {
    gap: 12px;
    padding: 0;
  }

  .kpi-value {
    font-size: 12px;
  }

  .kpi-label {
    font-size: 7px;
  }

  /* Main Canvas - Two columns embedded */
  .main-canvas {
    grid-template-columns: 70% 30%;
    gap: 10px;
    margin-bottom: 8px;
  }

  .map-header {
    font-size: 9px;
    margin-bottom: 6px;
    padding-bottom: 4px;
  }

  /* Strategy Table - Embedded */
  .strategy-table {
    font-size: 9px;
  }

  .strategy-table th {
    font-size: 8px;
    padding: 4px 8px;
  }

  .strategy-table td {
    padding: 6px 8px;
  }

  .expand-icon {
    font-size: 8px;
    margin-left: 4px;
  }

  .risk-panel-content {
    padding: 6px 8px;
  }

  .panel-header {
    font-size: 7px;
    margin-bottom: 6px;
  }

  .panel-risks {
    gap: 4px;
  }

  .panel-risk-item {
    padding: 4px 6px;
    gap: 6px;
  }

  .panel-risk-item .risk-indicator {
    width: 5px;
    height: 5px;
  }

  .panel-risk-item .risk-label {
    font-size: 8px;
  }

  .panel-risk-item .risk-score-badge {
    font-size: 7px;
    padding: 1px 4px;
  }

  .status-pill {
    font-size: 7px;
    padding: 1px 4px;
  }

  /* AI Narrative Panel - Embedded */
  .ai-narrative-panel {
    padding: 8px;
  }

  .narrative-header {
    font-size: 8px;
    margin-bottom: 4px;
  }

  .narrative-list {
    gap: 4px;
  }

  .narrative-item {
    font-size: 9px;
    line-height: 1.3;
  }

  /* Heatmap Section - Embedded */
  .heatmap-section {
    padding-top: 8px;
  }

  .heatmap-header {
    font-size: 9px;
    margin-bottom: 6px;
  }

  /* Risk Matrix Table - Embedded */
  .risk-matrix .cell {
    width: 28px;
    height: 32px;
  }

  .risk-matrix .cell .dot {
    width: 4px;
    height: 4px;
  }

  .risk-matrix .axis-num {
    font-size: 6px;
    width: 10px;
    padding: 1px;
  }

  .risk-matrix .y-axis-text {
    font-size: 6px;
  }

  .risk-matrix .x-axis-label {
    font-size: 6px;
  }

  .risk-matrix .axis-label-cell {
    width: 10px;
  }

  .heatmap-legend {
    gap: 8px;
    margin-top: 6px;
    padding-top: 4px;
  }

  .legend-color {
    width: 8px;
    height: 8px;
  }

  .legend-text {
    font-size: 6px;
  }

  /* === RISK REGISTER - LIVING MODEL (NEW) === */
  .register-view {
    padding: 10px 12px;
    gap: 8px;
  }

  .risk-list {
    gap: 1px;
  }

  .risk-row {
    padding: 8px 10px;
    gap: 8px;
  }

  .risk-dot {
    width: 6px;
    height: 6px;
  }

  .risk-id {
    font-size: 8px;
  }

  .risk-name {
    font-size: 10px;
  }

  .risk-objective {
    font-size: 8px;
  }

  .risk-score {
    font-size: 10px;
  }

  .risk-analysis-panel {
    padding: 10px;
    gap: 8px;
  }

  .analysis-title {
    font-size: 10px;
  }

  .analysis-narrative {
    font-size: 9px;
  }

  .section-label {
    font-size: 8px;
  }

  .analysis-list li {
    font-size: 9px;
    padding-left: 10px;
  }

  /* === CONTROLS - GROUPED BY OBJECTIVE (NEW) === */
  .controls-view-new {
    padding: 10px 12px;
    gap: 8px;
  }

  .coverage-strip {
    gap: 6px;
  }

  .coverage-value {
    font-size: 18px;
  }

  .coverage-label {
    font-size: 10px;
  }

  .controls-grouped {
    gap: 12px;
  }

  .group-header {
    padding-bottom: 4px;
  }

  .group-name {
    font-size: 10px;
  }

  .group-coverage {
    font-size: 9px;
  }

  .control-item {
    padding: 6px 8px;
    gap: 8px;
  }

  .control-dot {
    width: 5px;
    height: 5px;
  }

  .control-name {
    font-size: 9px;
  }

  .control-protects {
    font-size: 8px;
  }

  .control-eff-value {
    font-size: 9px;
  }

  .effectiveness-narrative {
    padding: 8px;
  }

  .effectiveness-narrative .narrative-header {
    font-size: 9px;
    margin-bottom: 6px;
  }

  .effectiveness-narrative .narrative-text {
    font-size: 9px;
  }

  .insight-value {
    font-size: 8px;
    min-width: 14px;
  }

  /* AI Scan Bar - Embedded */
  .ai-scan-bar {
    padding: 5px 10px;
    border-radius: 4px;
  }

  .scan-text {
    font-size: 8px;
  }

  /* === RISK REGISTER TABLE - Embedded === */
  .risk-table-view {
    padding: 0;
    gap: 0;
  }

  .table-header-row {
    grid-template-columns: 1.8fr 0.9fr 0.8fr 0.4fr 0.7fr;
    gap: 4px;
    padding: 6px 8px;
    font-size: 8px;
  }

  .table-body {
    flex: 1;
    overflow-y: auto;
  }

  .table-row {
    grid-template-columns: 1.8fr 0.9fr 0.8fr 0.4fr 0.7fr;
    gap: 4px;
    padding: 5px 8px;
  }

  .table-row.ai-analyzing::before {
    width: 2px;
  }

  .risk-indicator {
    width: 6px;
    height: 6px;
  }

  .td-risk {
    gap: 5px;
  }

  .risk-id {
    font-size: 7px;
  }

  .risk-title {
    font-size: 9px;
  }

  .td-category,
  .td-owner {
    font-size: 8px;
  }

  .td-score {
    font-size: 9px;
  }

  .td-status {
    font-size: 7px;
    padding: 1px 4px;
  }

  .table-ai-bar {
    padding: 5px 8px;
    gap: 5px;
  }

  .table-ai-bar .ai-icon {
    font-size: 9px;
  }

  .table-ai-bar .ai-text {
    font-size: 8px;
  }

  /* === CONTROLS LIST - Embedded === */
  .controls-view {
    padding: 8px;
    gap: 6px;
  }

  .controls-header {
    padding-bottom: 6px;
  }

  .controls-title {
    font-size: 11px;
  }

  .controls-count {
    font-size: 9px;
    padding: 2px 6px;
  }

  .controls-list-full {
    gap: 4px;
  }

  .control-row {
    padding: 6px 8px;
    gap: 6px;
  }

  .control-type-tag {
    width: 18px;
    height: 18px;
    font-size: 8px;
  }

  .control-name {
    font-size: 9px;
  }

  .control-desc {
    font-size: 7px;
  }

  .linked-risk {
    font-size: 7px;
    padding: 1px 4px;
  }

  .control-eff {
    font-size: 9px;
  }

  .ai-suggested-tag {
    font-size: 7px;
    padding: 1px 6px;
  }

  .controls-ai-bar {
    padding: 6px 10px;
    gap: 6px;
  }

  .controls-ai-bar .ai-icon {
    font-size: 10px;
  }

  .controls-ai-bar .ai-text {
    font-size: 9px;
  }

  /* === REPORTS TYPING - Embedded === */
  .reports-view {
    padding: 8px;
    gap: 6px;
  }

  .report-header-bar {
    padding-bottom: 6px;
  }

  .report-doc-title {
    font-size: 11px;
  }

  .report-doc-date {
    font-size: 9px;
    padding: 2px 6px;
  }

  .ai-document {
    padding: 10px;
  }

  .ai-typing-container {
    font-size: 9px;
    line-height: 1.7;
  }

  .highlight-keyword,
  .highlight-positive,
  .highlight-critical,
  .highlight-metric,
  .highlight-action {
    padding: 0px 3px;
    font-size: 9px;
  }

  .typing-cursor-line {
    height: 11px;
    width: 1px;
  }

  .ai-writing-bar {
    padding: 6px 10px;
    gap: 6px;
  }

  .ai-write-icon {
    font-size: 10px;
  }

  .ai-write-status {
    font-size: 9px;
  }

  .typing-dots span {
    width: 3px;
    height: 3px;
  }

  /* === Reports Canvas - Embedded === */
  .reports-canvas {
    padding: 12px 16px;
  }

  /* === ERM Document - Embedded === */
  .erm-document {
    font-size: 8px;
    line-height: 1.5;
  }

  .report-h1 {
    font-size: 10px;
    margin: 0 0 8px 0;
  }

  .report-meta-line {
    font-size: 7px;
    margin: 0 0 2px 0;
  }

  .report-h2 {
    font-size: 9px;
    margin: 10px 0 4px 0;
  }

  .report-paragraph {
    font-size: 8px;
    line-height: 1.5;
    margin: 0 0 4px 0;
  }

  .report-list {
    margin: 4px 0 6px 0;
    padding-left: 12px;
  }

  .report-list li {
    font-size: 8px;
    line-height: 1.5;
    margin-bottom: 2px;
  }

  .report-table {
    font-size: 7px;
    margin: 4px 0;
  }

  .report-table th {
    padding: 3px 6px;
  }

  .report-table td {
    padding: 3px 6px;
  }

  .report-insight {
    font-size: 8px;
    padding: 4px 8px;
    margin: 6px 0;
  }

  /* === REGISTER LIST - Embedded === */
  .register-list {
    gap: 4px;
  }

  .register-item {
    padding: 6px 10px;
    gap: 8px;
    border-radius: 4px;
  }

  .register-indicator {
    width: 5px;
    height: 5px;
  }

  .register-main {
    gap: 6px;
    margin-bottom: 2px;
  }

  .register-id {
    font-size: 8px;
  }

  .register-name {
    font-size: 9px;
  }

  .register-meta {
    gap: 8px;
  }

  .register-category,
  .register-owner {
    font-size: 8px;
  }

  .register-status {
    font-size: 7px;
    padding: 2px 6px;
  }

  /* === CONTROLS LIST - Embedded === */
  .controls-list {
    gap: 4px;
  }

  .controls-item {
    padding: 6px 10px;
    gap: 8px;
    border-radius: 4px;
  }

  .controls-indicator {
    width: 5px;
    height: 5px;
  }

  .controls-main {
    gap: 6px;
    margin-bottom: 2px;
  }

  .controls-id {
    font-size: 8px;
  }

  .controls-name {
    font-size: 9px;
  }

  .controls-meta {
    gap: 8px;
  }

  .controls-type,
  .controls-links {
    font-size: 8px;
  }

  .controls-eff {
    gap: 4px;
  }

  .eff-bar {
    width: 40px;
    height: 4px;
  }

  .eff-value {
    font-size: 8px;
    min-width: 24px;
  }

  /* === REPORT PREVIEW COMPACT - Embedded === */
  .report-preview-compact {
    grid-template-columns: 1fr 100px;
    gap: 8px;
  }

  .report-mini-header {
    padding: 6px 10px;
  }

  .report-mini-title {
    font-size: 9px;
  }

  .report-mini-date {
    font-size: 8px;
  }

  .report-mini-body {
    padding: 8px;
    gap: 8px;
  }

  .report-mini-stats {
    gap: 10px;
  }

  .report-stat .stat-value {
    font-size: 14px;
  }

  .report-stat .stat-label {
    font-size: 7px;
  }

  .heatmap-cell {
    width: 14px;
    height: 14px;
    border-radius: 2px;
  }

  .heatmap-row {
    gap: 2px;
  }

  .report-mini-heatmap {
    gap: 2px;
  }

  .finding-row {
    gap: 4px;
  }

  .finding-dot {
    width: 4px;
    height: 4px;
  }

  .finding-row .finding-text {
    font-size: 8px;
  }

  .report-templates-compact {
    gap: 4px;
  }

  .template-item {
    padding: 6px 8px;
    gap: 6px;
  }

  .template-icon {
    font-size: 10px;
  }

  .template-name {
    font-size: 8px;
  }

  /* Legacy styles kept for compatibility */
  .stats-grid {
    display: none;
  }

  .charts-row {
    display: none;
  }

  /* === RISK REGISTER SCENE === */
  .scene-risk-register {
    display: flex;
    flex-direction: column;
  }

  .table-container {
    flex: 1;
    overflow: hidden;
  }

  .risk-table {
    width: 100%;
  }

  .risk-table th {
    padding: 6px 8px;
    font-size: 9px;
    white-space: nowrap;
  }

  .risk-table td {
    padding: 8px;
    font-size: 10px;
  }

  .risk-id {
    font-size: 10px;
    font-weight: 600;
  }

  .risk-desc {
    max-width: 200px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .category-tag,
  .rating,
  .status-badge {
    font-size: 8px;
    padding: 2px 5px;
  }

  .owner-cell {
    gap: 5px;
  }

  .owner-cell span:last-child {
    font-size: 9px;
  }

  .owner-avatar {
    width: 20px;
    height: 20px;
    font-size: 7px;
  }

  .action-btn {
    padding: 3px;
  }

  .action-btn svg {
    width: 12px;
    height: 12px;
  }

  .search-box {
    padding: 4px 8px;
  }

  .search-box input {
    font-size: 10px;
    width: 100px;
  }

  .search-box svg {
    width: 12px;
    height: 12px;
  }

  /* === CONTROLS SCENE === */
  .scene-controls {
    display: flex;
    flex-direction: column;
  }

  .controls-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 6px;
    min-height: 0;
  }

  .control-card:nth-child(n+7) {
    display: none;
  }

  .control-card {
    padding: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .control-header {
    margin-bottom: 4px;
    flex-shrink: 0;
  }

  .control-type {
    font-size: 7px;
    padding: 2px 4px;
  }

  .control-id {
    font-size: 8px;
  }

  .control-title {
    font-size: 10px;
    margin-bottom: 3px;
    flex-shrink: 0;
  }

  .control-desc {
    font-size: 9px;
    margin-bottom: 6px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    min-height: 0;
  }

  .control-meta {
    margin-top: auto;
    flex-shrink: 0;
  }

  .control-risks {
    display: none;
  }

  .control-effectiveness {
    gap: 4px;
  }

  .effectiveness-label {
    font-size: 8px;
    min-width: 50px;
  }

  .effectiveness-bar {
    height: 5px;
  }

  .effectiveness-value {
    font-size: 9px;
  }

  .filter-tabs {
    gap: 4px;
  }

  .filter-tab {
    padding: 3px 8px;
    font-size: 9px;
  }

  /* === REPORTS SCENE === */
  .scene-reports {
    display: flex;
    flex-direction: column;
  }

  .reports-section {
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  .section-title {
    font-size: 10px;
    margin-bottom: 5px;
  }

  .report-templates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .report-template-card {
    padding: 8px;
  }

  .template-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
  }

  .template-icon svg {
    width: 12px;
    height: 12px;
  }

  .template-content h4 {
    font-size: 9px;
  }

  .template-content p {
    font-size: 8px;
    display: none;
  }

  .template-badge {
    font-size: 7px;
    padding: 1px 3px;
  }

  .report-preview-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .report-preview {
    flex: 1;
    display: flex;
    gap: 8px;
    min-height: 0;
  }

  .report-document {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .report-doc-header {
    padding: 6px 10px;
    flex-shrink: 0;
  }

  .report-logo {
    font-size: 10px;
  }

  .report-logo .logo-icon.small {
    width: 16px;
    height: 16px;
    font-size: 8px;
  }

  .report-meta span {
    font-size: 8px;
  }

  .report-doc-body {
    padding: 8px;
    flex: 1;
    overflow: hidden;
  }

  .report-section-preview {
    margin-bottom: 6px;
  }

  .report-section-preview h4 {
    font-size: 9px;
    margin-bottom: 4px;
  }

  .mini-stats {
    gap: 6px;
  }

  .mini-stat {
    padding: 6px 10px;
  }

  .mini-value {
    font-size: 14px;
  }

  .mini-label {
    font-size: 7px;
  }

  .report-findings {
    display: none;
  }

  .mini-heatmap {
    gap: 2px;
  }

  .mini-heatmap-row {
    gap: 2px;
  }

  .mini-cell {
    height: 12px;
  }

  .report-doc-footer {
    padding: 4px 8px;
    font-size: 7px;
    flex-shrink: 0;
  }

  .report-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .report-actions .btn {
    padding: 5px 8px;
    font-size: 9px;
  }

  /* === HIDE ALL MODALS & POPUPS === */
  .ai-modal,
  .export-modal,
  .heatmap-tooltip {
    display: none !important;
  }

  /* === HIDE DEMO CONTROLS === */
  .demo-progress {
    display: none;
  }

  .demo-controls {
    display: none;
  }
}

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

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .controls-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-templates {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  body {
    padding: 20px;
  }

  .sidebar {
    width: 60px;
  }

  .sidebar-logo .logo-text,
  .nav-item span,
  .user-info {
    display: none;
  }

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

  .charts-row {
    grid-template-columns: 1fr;
  }
}