/* ================================================================
   SauerlandAI — Component Library (sai-components.css)
   Version: 1.0 | 2026-03-25

   Domain-specific components for the Octopus Pipeline UI:
   - Chat message bubbles
   - Pipeline phase indicators
   - Axiom cards
   - Confidence meters
   - Ampel (traffic light) component

   Requires: unified-base.css (or sai-theme.css for token definitions)
   ================================================================ */


/* ================================================================
   CHAT MESSAGE BUBBLES
   ================================================================ */
.sai-chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--sai-space-4, 16px);
  padding: var(--sai-space-4, 16px);
  overflow-y: auto;
}

.sai-chat-msg {
  display: flex;
  gap: var(--sai-space-3, 12px);
  max-width: 85%;
  animation: sai-msg-in 0.25s ease-out;
}

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

/* User message — right-aligned */
.sai-chat-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.sai-chat-msg-user .sai-chat-bubble {
  background: var(--sai-chat-user-bg, var(--sai-light-green));
  color: var(--sai-chat-user-text, #fff);
  border-radius: 16px 16px 4px 16px;
}

/* AI message — left-aligned */
.sai-chat-msg-ai {
  align-self: flex-start;
}
.sai-chat-msg-ai .sai-chat-bubble {
  background: var(--sai-chat-ai-bg, var(--sai-bg-surface, #fff));
  color: var(--sai-text-primary);
  border: 1px solid var(--sai-chat-ai-border, var(--sai-border-light));
  border-radius: 16px 16px 16px 4px;
}

/* System message — centered */
.sai-chat-msg-system {
  align-self: center;
  max-width: 60%;
}
.sai-chat-msg-system .sai-chat-bubble {
  background: var(--sai-bg-surface-alt, #f1f5f9);
  color: var(--sai-text-secondary);
  border-radius: 12px;
  font-size: var(--sai-text-xs, 11px);
  text-align: center;
}

.sai-chat-bubble {
  padding: 10px 14px;
  font-size: var(--sai-text-sm, 13px);
  line-height: 1.55;
  word-break: break-word;
  box-shadow: var(--sai-shadow-sm);
}

.sai-chat-bubble code {
  font-family: var(--sai-font-mono);
  font-size: 0.9em;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0,0,0,0.06);
}
.sai-chat-msg-user .sai-chat-bubble code {
  background: rgba(255,255,255,0.2);
}

.sai-chat-bubble pre {
  margin-top: 8px;
  padding: 10px;
  border-radius: var(--sai-radius-md, 6px);
  background: rgba(0,0,0,0.06);
  overflow-x: auto;
  font-size: var(--sai-text-xs, 11px);
}

.sai-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.sai-chat-avatar-user {
  background: var(--sai-light-green);
}
.sai-chat-avatar-ai {
  background: linear-gradient(135deg, var(--sai-light-green), var(--sai-light-green-dark, #2D6B3E));
}

.sai-chat-meta {
  font-size: var(--sai-text-xs, 11px);
  color: var(--sai-text-tertiary);
  margin-top: 4px;
  padding: 0 4px;
}

/* Typing indicator */
.sai-chat-typing {
  display: inline-flex;
  gap: 4px;
  padding: 10px 14px;
}
.sai-chat-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sai-text-tertiary);
  animation: sai-typing-bounce 1.2s infinite;
}
.sai-chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.sai-chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes sai-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-6px); opacity: 1; }
}


/* ================================================================
   PIPELINE PHASE INDICATORS
   Visualizes the 40+ phases of the Octopus Pipeline.
   ================================================================ */
.sai-pipeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sai-phase {
  display: flex;
  align-items: center;
  gap: var(--sai-space-3, 12px);
  padding: 6px 12px;
  border-radius: var(--sai-radius-md, 6px);
  font-size: var(--sai-text-xs, 11px);
  transition: background var(--sai-transition);
  position: relative;
}
.sai-phase:hover {
  background: var(--sai-bg-hover, rgba(0,0,0,0.03));
}

/* Phase number badge */
.sai-phase-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
  color: #fff;
  background: var(--sai-text-tertiary);
}

.sai-phase-name {
  font-weight: 600;
  color: var(--sai-text-primary);
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sai-phase-duration {
  font-family: var(--sai-font-mono);
  font-size: 10px;
  color: var(--sai-text-tertiary);
  flex-shrink: 0;
}

/* Phase states */
.sai-phase-pending .sai-phase-num {
  background: var(--sai-text-tertiary);
  opacity: 0.5;
}
.sai-phase-active .sai-phase-num {
  background: var(--sai-light-green);
  box-shadow: 0 0 0 3px rgba(61,139,80,0.2);
  animation: sai-phase-pulse 1.5s infinite;
}
.sai-phase-done .sai-phase-num {
  background: var(--sai-status-proved);
}
.sai-phase-skipped .sai-phase-num {
  background: var(--sai-status-unknown);
  opacity: 0.4;
}
.sai-phase-error .sai-phase-num {
  background: var(--sai-status-false);
}

@keyframes sai-phase-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(61,139,80,0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(61,139,80,0.1); }
}

/* Connector line between phases */
.sai-phase-connector {
  width: 2px;
  height: 8px;
  background: var(--sai-border-light, var(--sai-light-border));
  margin-left: 25px;
}
.sai-phase-done + .sai-phase-connector {
  background: var(--sai-status-proved);
}

/* Phase color coding (matches sai-theme.css phase tokens) */
.sai-phase-nervenring  .sai-phase-num { background: #3b82f6; }
.sai-phase-resonanz    .sai-phase-num { background: #22c55e; }
.sai-phase-echoortung  .sai-phase-num { background: #f59e0b; }
.sai-phase-battle      .sai-phase-num { background: #ef4444; }
.sai-phase-magnetfeld  .sai-phase-num { background: #8b5cf6; }
.sai-phase-embodied    .sai-phase-num { background: #06b6d4; }
.sai-phase-llm         .sai-phase-num { background: #3b82f6; }
.sai-phase-immunsystem .sai-phase-num { background: #22c55e; }
.sai-phase-schwarm     .sai-phase-num { background: #eab308; }
.sai-phase-zentralhirn .sai-phase-num { background: #0070F2; }

/* Compact horizontal timeline variant */
.sai-pipeline-horizontal {
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  padding: var(--sai-space-2, 8px);
}
.sai-pipeline-horizontal .sai-phase {
  flex-direction: column;
  padding: 8px;
  min-width: 60px;
  text-align: center;
}
.sai-pipeline-horizontal .sai-phase-name {
  font-size: 9px;
}
.sai-pipeline-horizontal .sai-phase-connector {
  width: 16px;
  height: 2px;
  margin: 0;
  align-self: center;
}


/* ================================================================
   AXIOM CARDS
   Displays legal/tax axioms with source, confidence, and status.
   ================================================================ */
.sai-axiom-card {
  background: var(--sai-bg-surface, #fff);
  border: 1px solid var(--sai-border-light, var(--sai-light-border));
  border-radius: var(--sai-radius-lg, 8px);
  padding: var(--sai-space-4, 16px);
  transition: all var(--sai-transition-smooth, 200ms ease);
  position: relative;
}
.sai-axiom-card:hover {
  box-shadow: var(--sai-shadow-md);
  border-color: var(--sai-border-medium, rgba(0,0,0,0.12));
}

/* Left accent border indicating status */
.sai-axiom-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--sai-status-unknown);
}
.sai-axiom-card-proved::before  { background: var(--sai-status-proved); }
.sai-axiom-card-probable::before { background: var(--sai-status-probable); }
.sai-axiom-card-false::before   { background: var(--sai-status-false); }
.sai-axiom-card-goedel::before  { background: var(--sai-status-goedel); }
.sai-axiom-card-korridor::before { background: var(--sai-status-korridor); }

.sai-axiom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sai-space-2, 8px);
}

.sai-axiom-id {
  font-family: var(--sai-font-mono);
  font-size: var(--sai-text-xs, 11px);
  font-weight: 600;
  color: var(--sai-text-tertiary);
  background: var(--sai-bg-surface-alt, #f1f5f9);
  padding: 2px 6px;
  border-radius: var(--sai-radius-sm, 4px);
}

.sai-axiom-text {
  font-size: var(--sai-text-sm, 13px);
  color: var(--sai-text-primary);
  line-height: 1.55;
  margin-bottom: var(--sai-space-3, 12px);
}

.sai-axiom-source {
  font-size: var(--sai-text-xs, 11px);
  color: var(--sai-text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sai-axiom-source-icon {
  font-size: 12px;
}

.sai-axiom-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sai-space-2, 8px);
  margin-top: var(--sai-space-3, 12px);
  padding-top: var(--sai-space-3, 12px);
  border-top: 1px solid var(--sai-border-light, var(--sai-light-border));
}

.sai-axiom-elo {
  font-family: var(--sai-font-mono);
  font-size: var(--sai-text-xs, 11px);
  color: var(--sai-text-secondary);
}


/* ================================================================
   CONFIDENCE METER
   Horizontal bar displaying confidence [0.0, 1.0].
   ================================================================ */
.sai-confidence {
  display: flex;
  align-items: center;
  gap: var(--sai-space-2, 8px);
  font-size: var(--sai-text-xs, 11px);
}

.sai-confidence-bar {
  flex: 1;
  height: 6px;
  background: var(--sai-bg-surface-alt, #e2e8f0);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}

.sai-confidence-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease, background 0.4s ease;
  background: var(--sai-status-proved);
}

/* Color thresholds */
.sai-confidence-fill[data-level="high"]   { background: var(--sai-status-proved); }
.sai-confidence-fill[data-level="medium"] { background: var(--sai-status-probable); }
.sai-confidence-fill[data-level="low"]    { background: var(--sai-status-false); }

.sai-confidence-value {
  font-family: var(--sai-font-mono);
  font-weight: 600;
  min-width: 36px;
  text-align: right;
  color: var(--sai-text-secondary);
}

/* Larger variant */
.sai-confidence-lg .sai-confidence-bar {
  height: 10px;
  border-radius: 5px;
}
.sai-confidence-lg .sai-confidence-value {
  font-size: var(--sai-text-sm, 13px);
}

/* Animated shimmer for active processing */
.sai-confidence-active .sai-confidence-fill {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: sai-conf-shimmer 1.5s linear infinite;
}

@keyframes sai-conf-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}


/* ================================================================
   AMPEL (Traffic Light) COMPONENT
   Three-state indicator: green/yellow/red.
   Used for risk assessment, verification status, GoBD compliance.
   ================================================================ */
.sai-ampel {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--sai-bg-surface-sunken, #1a1a2e);
  border-radius: 20px;
  border: 2px solid var(--sai-border-default, #333);
}

.sai-ampel-horizontal {
  flex-direction: row;
}

.sai-ampel-light {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #333;
  transition: all 0.3s ease;
  position: relative;
}

/* Inactive state — dimmed */
.sai-ampel-red    { background: #4a1a1a; }
.sai-ampel-yellow { background: #4a3a1a; }
.sai-ampel-green  { background: #1a3a1a; }

/* Active states with glow */
.sai-ampel[data-state="red"] .sai-ampel-red,
.sai-ampel-red.active {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239,68,68,0.6), 0 0 16px rgba(239,68,68,0.3);
}
.sai-ampel[data-state="yellow"] .sai-ampel-yellow,
.sai-ampel-yellow.active {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245,158,11,0.6), 0 0 16px rgba(245,158,11,0.3);
}
.sai-ampel[data-state="green"] .sai-ampel-green,
.sai-ampel-green.active {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.6), 0 0 16px rgba(34,197,94,0.3);
}

/* Blinking for attention */
.sai-ampel-blink .active {
  animation: sai-ampel-blink 1s infinite;
}
@keyframes sai-ampel-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Compact inline variant */
.sai-ampel-inline {
  flex-direction: row;
  padding: 3px 6px;
  border-radius: 12px;
  gap: 3px;
  border-width: 1px;
}
.sai-ampel-inline .sai-ampel-light {
  width: 10px;
  height: 10px;
}

/* Label next to ampel */
.sai-ampel-labeled {
  display: inline-flex;
  align-items: center;
  gap: var(--sai-space-2, 8px);
}
.sai-ampel-label {
  font-size: var(--sai-text-xs, 11px);
  font-weight: 600;
  color: var(--sai-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Light theme override — lighter casing */
[data-theme="light"] .sai-ampel {
  background: var(--sai-bg-surface, #f8f8f8);
  border-color: var(--sai-border-default, #dee2e6);
}
[data-theme="light"] .sai-ampel-red    { background: #fecaca; }
[data-theme="light"] .sai-ampel-yellow { background: #fef3c7; }
[data-theme="light"] .sai-ampel-green  { background: #dcfce7; }


/* ================================================================
   LOADING / SKELETON
   ================================================================ */
.sai-skeleton {
  background: linear-gradient(
    90deg,
    var(--sai-bg-surface-alt, #e2e8f0) 25%,
    var(--sai-bg-hover, #f1f5f9) 50%,
    var(--sai-bg-surface-alt, #e2e8f0) 75%
  );
  background-size: 200% 100%;
  animation: sai-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--sai-radius-md, 6px);
}
.sai-skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}
.sai-skeleton-text:last-child {
  width: 60%;
}
.sai-skeleton-circle {
  border-radius: 50%;
}

@keyframes sai-skeleton-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}


/* ================================================================
   TOOLTIP
   ================================================================ */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--sai-color-slate-800, #1e293b);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  border-radius: var(--sai-radius-sm, 4px);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: var(--sai-z-tooltip, 700);
}
[data-tooltip]:hover::after {
  opacity: 1;
}