/* Circuit PCB loader — Uiverse.io by Vosoone (adapted, themed for portfolio) */

.circuit-loader-root {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.circuit-loader-root--fab {
  width: auto;
  height: 100%;
  min-height: 0;
}

.circuit-loader-wrap {
  width: 100%;
  max-width: min(100%, 280px);
}

.circuit-loader-wrap--fab {
  width: 44px;
  height: 44px;
  max-width: none;
  display: grid;
  place-items: center;
}

.circuit-loader-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.circuit-loader-wrap--fab .circuit-loader-svg {
  width: 44px;
  height: 44px;
}

.circuit-chip-body {
  fill: color-mix(in oklab, var(--card, #141418), transparent 8%);
  stroke: color-mix(in oklab, var(--border, #333), transparent 20%);
  stroke-width: 1.2;
}

.circuit-chip-text {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  fill: color-mix(in oklab, var(--muted, #888), transparent 15%);
  font-family: var(--font-mono, ui-monospace, monospace);
}

.circuit-chip-pin {
  fill: #25252c;
  stroke: #444;
  stroke-width: 0.5;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
}

.circuit-trace-bg {
  stroke: #333;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.circuit-trace-flow {
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40 400;
  stroke-dashoffset: 438;
  filter: drop-shadow(0 0 6px currentColor);
  animation: circuit-flow 3s cubic-bezier(0.5, 0, 0.9, 1) infinite;
}

.circuit-yellow {
  stroke: #ffea00;
  color: #ffea00;
}
.circuit-blue {
  stroke: #00ccff;
  color: #00ccff;
}
.circuit-green {
  stroke: #00ff15;
  color: #00ff15;
}
.circuit-purple {
  stroke: #9900ff;
  color: #9900ff;
}
.circuit-red {
  stroke: #ff3300;
  color: #ff3300;
}

.circuit-node {
  fill: #08080a;
  stroke: #2a2a30;
  stroke-width: 1;
}

@keyframes circuit-flow {
  to {
    stroke-dashoffset: 0;
  }
}

/* Chat typing row */
.cw-typing-circuit {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: 72px;
  padding: 10px 12px !important;
  max-width: 95% !important;
}

@media (prefers-reduced-motion: reduce) {
  .circuit-trace-flow {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 0.65;
  }
}