/* ============================================================
   INTERACTIVE DIAGRAM STYLES
   ============================================================ */

/* Shared Diagram Container */
.diagram-container {
  position: relative;
  background: var(--color-neutral-900);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-neutral-700);
}

.diagram-container svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Diagram Header */
.diagram-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--color-neutral-800);
  border-bottom: 1px solid var(--color-neutral-700);
}

.diagram-title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-light);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.diagram-subtitle {
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
  margin-top: var(--space-1);
}

/* Diagram Toggle Button */
.diagram-toggle {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-neutral-300);
  background: var(--color-neutral-700);
  border: 1px solid var(--color-neutral-600);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.diagram-toggle:hover {
  background: var(--color-neutral-600);
  color: var(--color-white);
}

.diagram-toggle.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Diagram Body */
.diagram-body {
  position: relative;
  padding: var(--space-6);
}

@media (min-width: 768px) {
  .diagram-body {
    padding: var(--space-8);
  }
}

/* Tooltips */
.diagram-tooltip,
.glycol-tooltip,
.draft-tooltip {
  position: absolute;
  max-width: 300px;
  background: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-600);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  z-index: 100;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.diagram-tooltip.visible,
.glycol-tooltip.visible,
.draft-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.diagram-tooltip h4,
.glycol-tooltip h4,
.draft-tooltip h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.diagram-tooltip p,
.glycol-tooltip p,
.draft-tooltip p {
  font-size: var(--text-sm);
  color: var(--color-neutral-300);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.tooltip-issue,
.tooltip-spec {
  font-size: var(--text-xs);
  color: var(--color-warning);
  background: rgba(201, 162, 39, 0.1);
  border-left: 2px solid var(--color-warning);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.tooltip-spec {
  color: var(--color-primary-light);
  background: rgba(26, 95, 158, 0.15);
  border-color: var(--color-primary-light);
}

/* ============================================================
   REACH-IN DIAGRAM SPECIFIC
   ============================================================ */

#reachin-diagram {
  min-height: 400px;
}

#reachin-diagram [data-component] {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

#reachin-diagram [data-component]:hover,
#reachin-diagram [data-component].highlighted {
  filter: brightness(1.3);
}

#reachin-diagram [data-component]:hover path,
#reachin-diagram [data-component]:hover rect,
#reachin-diagram [data-component]:hover circle,
#reachin-diagram [data-component].highlighted path,
#reachin-diagram [data-component].highlighted rect,
#reachin-diagram [data-component].highlighted circle {
  stroke: var(--color-primary-light);
  stroke-width: 2;
}

/* Component Labels */
.component-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--color-neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none;
}

.component-label.active {
  fill: var(--color-primary-light);
}

/* Refrigerant Flow Animation */
.refrigerant-flow {
  stroke-dasharray: 4 4;
  animation: flowDash 1s linear infinite;
  opacity: 0.6;
}

@keyframes flowDash {
  to {
    stroke-dashoffset: -8;
  }
}

/* ============================================================
   GLYCOL SYSTEM DIAGRAM
   ============================================================ */

#glycol-diagram {
  min-height: 350px;
}

#glycol-diagram [data-glycol-part] {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

#glycol-diagram [data-glycol-part]:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(45, 123, 196, 0.5));
}

/* Glycol Flow Animation */
.glycol-flow {
  stroke-dasharray: 8 8;
  stroke-dashoffset: 0;
  opacity: 0.3;
  transition: all var(--duration-normal) var(--ease-out);
}

#glycol-diagram.animating .glycol-flow {
  opacity: 1;
  animation: glycolFlowForward 1.5s linear infinite;
}

/* Return lines flow opposite direction - use different animation */
#glycol-diagram.animating .glycol-flow.return {
  animation: glycolFlowReturn 1.5s linear infinite;
}

@keyframes glycolFlowForward {
  to {
    stroke-dashoffset: -32;
  }
}

@keyframes glycolFlowReturn {
  to {
    stroke-dashoffset: 32;
  }
}

/* Glycol Reservoir Level */
.glycol-level {
  transition: all 0.5s ease-out;
  transform-origin: bottom;
}

#glycol-diagram.animating .glycol-level {
  animation: glycolPulse 3s ease-in-out infinite;
}

/* FAILING STATE - Dramatic visual changes */
#glycol-diagram.state-failing .glycol-level {
  transform: scaleY(0.15) !important;
  opacity: 0.3 !important;
  animation: none !important;
}

#glycol-diagram.state-failing .glycol-flow {
  animation: none !important;
  opacity: 0.1 !important;
}

#glycol-diagram.state-failing .pump-status {
  opacity: 1 !important;
}

#glycol-diagram.state-failing .chiller-temp {
  fill: #ef4444 !important;
}

#glycol-diagram.state-failing [data-glycol-part="chiller"] rect:first-child {
  stroke: #ef4444 !important;
  stroke-width: 3px;
}

@keyframes glycolPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.8;
    transform: scaleY(0.92);
  }
}

/* Flow Particles */
.flow-particle {
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

#glycol-diagram.animating .flow-particle {
  opacity: 1;
}

/* ============================================================
   DRAFT SYSTEM DIAGRAM
   ============================================================ */

#draft-diagram {
  min-height: 400px;
}

#draft-diagram [data-draft-part] {
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

#draft-diagram [data-draft-part]:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(45, 123, 196, 0.5));
}

/* Pour Button */
.pour-btn {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-secondary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  user-select: none;
}

.pour-btn:hover {
  background: var(--color-secondary-dark);
  transform: translateY(-2px);
}

.pour-btn:active {
  transform: translateY(0);
}

/* Beer Flow Animation */
.beer-flow {
  stroke-dasharray: 6 6;
  stroke-dashoffset: 0;
  opacity: 0;
}

.co2-flow {
  stroke-dasharray: 4 8;
  stroke-dashoffset: 0;
  opacity: 0.3;
}

#draft-diagram.pouring .beer-flow,
#draft-diagram.poured .beer-flow {
  opacity: 1;
  animation: beerFlow 0.8s linear infinite;
}

#draft-diagram.pouring .co2-flow {
  opacity: 0.8;
  animation: co2Flow 1.5s linear infinite;
}

@keyframes beerFlow {
  to {
    stroke-dashoffset: -12;
  }
}

@keyframes co2Flow {
  to {
    stroke-dashoffset: -24;
  }
}

/* Beer Glass Fill */
.beer-glass-fill {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 1.5s var(--ease-out);
}

#draft-diagram.pouring .beer-glass-fill {
  transform: scaleY(0.7);
}

#draft-diagram.poured .beer-glass-fill {
  transform: scaleY(0.85);
}

/* Foam */
.beer-foam {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s var(--ease-out);
  transition-delay: 1s;
}

#draft-diagram.poured .beer-foam {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   NEW BAR-BASED POUR ANIMATION
   ============================================================ */

/* Pour stream from faucet */
.pour-stream {
  opacity: 0;
  transition: opacity 0.2s ease;
}

#draft-diagram.pouring .pour-stream {
  opacity: 1;
}

/* Beer bars - hidden by default */
.beer-bar, .foam-bar {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Problem foam bars - hidden by default */
.problem-foam-1, .problem-foam-2 {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* WORKING STATE - Normal pour animation */
#draft-diagram.pouring .beer-bar-1,
#draft-diagram.poured .beer-bar-1 {
  opacity: 0.95;
  transition-delay: 0.2s;
}

#draft-diagram.pouring .beer-bar-2,
#draft-diagram.poured .beer-bar-2 {
  opacity: 0.9;
  transition-delay: 0.5s;
}

#draft-diagram.pouring .beer-bar-3,
#draft-diagram.poured .beer-bar-3 {
  opacity: 0.85;
  transition-delay: 0.8s;
}

#draft-diagram.poured .foam-bar {
  opacity: 1;
  transition-delay: 1.1s;
}

/* FAILING STATE - Mostly foam, little beer */
#draft-diagram.state-failing.pouring .beer-bar-1,
#draft-diagram.state-failing.poured .beer-bar-1 {
  opacity: 0.9;
  transition-delay: 0.2s;
}

#draft-diagram.state-failing.pouring .beer-bar-2,
#draft-diagram.state-failing.poured .beer-bar-2 {
  opacity: 0 !important;
}

#draft-diagram.state-failing.pouring .beer-bar-3,
#draft-diagram.state-failing.poured .beer-bar-3 {
  opacity: 0 !important;
}

#draft-diagram.state-failing.pouring .foam-bar,
#draft-diagram.state-failing.poured .foam-bar {
  opacity: 0 !important;
}

#draft-diagram.state-failing.pouring .problem-foam-1,
#draft-diagram.state-failing.poured .problem-foam-1 {
  opacity: 1;
  transition-delay: 0.4s;
}

#draft-diagram.state-failing.pouring .problem-foam-2,
#draft-diagram.state-failing.poured .problem-foam-2 {
  opacity: 1;
  transition-delay: 0.6s;
}

/* ============================================================
   PROBLEM CARD SVG ILLUSTRATIONS
   ============================================================ */

.problem-card__illustration {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, var(--color-neutral-800) 0%, var(--color-neutral-900) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.problem-card__illustration svg {
  width: 80%;
  height: 80%;
  max-width: 300px;
}

.problem-card__illustration::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 70%, rgba(26, 95, 158, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(196, 92, 38, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

/* Dirty Coil Animation */
.dust-particle {
  animation: floatDust 3s ease-in-out infinite;
}

.dust-particle:nth-child(2) { animation-delay: 0.5s; }
.dust-particle:nth-child(3) { animation-delay: 1s; }
.dust-particle:nth-child(4) { animation-delay: 1.5s; }

@keyframes floatDust {
  0%, 100% { transform: translate(0, 0); opacity: 0.6; }
  50% { transform: translate(5px, -8px); opacity: 1; }
}

/* Temperature Warning Pulse */
.temp-warning {
  animation: tempPulse 2s ease-in-out infinite;
}

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

/* Glycol Level Animation */
.glycol-level {
  animation: glycolWave 2s ease-in-out infinite;
}

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

/* Mystery Unit Glitch */
.mystery-glitch {
  animation: glitchText 3s steps(1) infinite;
}

@keyframes glitchText {
  0%, 90%, 100% { opacity: 1; }
  92%, 94%, 96%, 98% { opacity: 0; }
  91%, 93%, 95%, 97%, 99% { opacity: 1; }
}

/* ============================================================
   INTERACTIVE SECTION LAYOUT
   ============================================================ */

.diagram-section {
  padding: var(--space-16) 0;
  background: var(--color-bg-alt);
}

.diagram-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .diagram-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }
}

.diagram-grid--single {
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .diagram-grid--single {
    grid-template-columns: 1fr;
    max-width: 900px;
  }
}

/* Diagram Instruction */
.diagram-instruction {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
  margin-top: var(--space-3);
}

.diagram-instruction svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary-light);
}

/* ============================================================
   LIGHT MODE OVERRIDES
   ============================================================ */

[data-theme="light"] .diagram-container,
:root:not([data-theme="dark"]) .diagram-container {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-200);
}

[data-theme="light"] .diagram-header,
:root:not([data-theme="dark"]) .diagram-header {
  background: var(--color-neutral-200);
  border-color: var(--color-neutral-300);
}

[data-theme="light"] .diagram-tooltip,
[data-theme="light"] .glycol-tooltip,
[data-theme="light"] .draft-tooltip,
:root:not([data-theme="dark"]) .diagram-tooltip,
:root:not([data-theme="dark"]) .glycol-tooltip,
:root:not([data-theme="dark"]) .draft-tooltip {
  background: var(--color-white);
  border-color: var(--color-neutral-200);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .diagram-tooltip h4,
[data-theme="light"] .glycol-tooltip h4,
[data-theme="light"] .draft-tooltip h4,
:root:not([data-theme="dark"]) .diagram-tooltip h4,
:root:not([data-theme="dark"]) .glycol-tooltip h4,
:root:not([data-theme="dark"]) .draft-tooltip h4 {
  color: var(--color-neutral-900);
}

[data-theme="light"] .diagram-tooltip p,
[data-theme="light"] .glycol-tooltip p,
[data-theme="light"] .draft-tooltip p,
:root:not([data-theme="dark"]) .diagram-tooltip p,
:root:not([data-theme="dark"]) .glycol-tooltip p,
:root:not([data-theme="dark"]) .draft-tooltip p {
  color: var(--color-neutral-600);
}

[data-theme="light"] .problem-card__illustration,
:root:not([data-theme="dark"]) .problem-card__illustration {
  background: linear-gradient(135deg, var(--color-neutral-100) 0%, var(--color-neutral-200) 100%);
}


/* ============================================================
   STATE TOGGLE BUTTONS
   ============================================================ */

.state-toggle {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-400);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-neutral-600);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.state-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-neutral-500);
  color: var(--color-neutral-300);
}

.state-toggle.active {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
}

/* Status Indicators in Tooltips */
.tooltip-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11px;
}

.tooltip-status.status-ok {
  background: rgba(34, 197, 94, 0.15);
  border-left: 3px solid #22c55e;
  color: #22c55e;
}

.tooltip-status.status-warn {
  background: rgba(239, 68, 68, 0.15);
  border-left: 3px solid #ef4444;
  color: #ef4444;
}


/* ============================================================
   FAILING STATE VISUAL CHANGES
   ============================================================ */

/* Reach-In Failing State */
#reachin-diagram.state-failing [data-component="compressor"] {
  animation: componentPulse 1s ease-in-out infinite;
}

#reachin-diagram.state-failing [data-component="condenser-coil"] {
  filter: sepia(0.5) hue-rotate(-30deg);
}

#reachin-diagram.state-failing .temp-display {
  fill: #ef4444 !important;
}

/* ============================================================
   GLYCOL FAILING STATE - DRAMATIC
   ============================================================ */

/* Bath drains almost completely */
#glycol-diagram.state-failing .glycol-level {
  transform: scaleY(0.15) !important;
  opacity: 0.25 !important;
  animation: none !important;
}

/* Flow stops completely */
#glycol-diagram.state-failing .glycol-flow {
  opacity: 0.1 !important;
  animation: none !important;
}

/* Flow particles disappear */
#glycol-diagram.state-failing .flow-particle {
  opacity: 0 !important;
}

/* Chiller outline turns red */
#glycol-diagram.state-failing [data-glycol-part="chiller"] > rect:first-child {
  stroke: #ef4444 !important;
  stroke-width: 3px !important;
  animation: warningPulse 1.5s ease-in-out infinite;
}

/* Chiller temp turns red */
#glycol-diagram.state-failing .chiller-temp {
  fill: #ef4444 !important;
}

/* Pump failed indicator appears */
#glycol-diagram.state-failing .pump-status {
  opacity: 1 !important;
  animation: warningBlink 1s ease-in-out infinite;
}

/* Tower temp turns red */
#glycol-diagram.state-failing .tower-temp {
  fill: #ef4444 !important;
}

/* Tower warm indicator appears */
#glycol-diagram.state-failing .tower-warm-indicator {
  opacity: 1 !important;
  animation: warningBlink 1s ease-in-out infinite;
}

/* Tower shows warm temp */
#glycol-diagram.state-failing [data-glycol-part="tower"] text:last-child {
  fill: #ef4444 !important;
}

@keyframes warningPulse {
  0%, 100% { stroke: #ef4444; }
  50% { stroke: #f87171; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5)); }
}

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

/* ============================================================
   DRAFT FAILING STATE - FOAM OVERFLOW
   ============================================================ */

/* Old beer-foam and beer-flow states no longer used with new bar system */

@keyframes componentPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3) drop-shadow(0 0 8px rgba(239, 68, 68, 0.5)); }
}


/* ============================================================
   ENHANCED TOOLTIPS FOR MOBILE
   ============================================================ */

@media (max-width: 768px) {
  .diagram-tooltip,
  .glycol-tooltip,
  .draft-tooltip {
    position: fixed !important;
    left: 50% !important;
    bottom: 20px !important;
    top: auto !important;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 350px;
  }
  
  .diagram-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .state-toggle {
    order: 3;
    flex: 1;
    text-align: center;
  }
}