/* ═══════════════════════════════════════════════════════════════
   ChaozCode Animated Icon System v2.0
   Standalone reusable icon library for all platform apps
   Usage: <div class="chaoz-icon chaoz-icon--memory-spine"></div>
   ═══════════════════════════════════════════════════════════════ */

/* ─── Base Container ─── */
.chaoz-icon {
    --icon-size: 100px;
    --icon-radius: 24px;
    --icon-bg: linear-gradient(145deg, rgba(99,102,241,0.12), rgba(139,92,246,0.06));
    --icon-border: rgba(139,92,246,0.18);
    --icon-glow-color: rgba(139,92,246,0.2);
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--icon-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--icon-bg);
    border: 1.5px solid var(--icon-border);
    overflow: visible;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    isolation: isolate;
}
.chaoz-icon:hover {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 12px 40px var(--icon-glow-color);
    border-color: rgba(139,92,246,0.4);
}
.chaoz-icon svg {
    width: 56px;
    height: 56px;
    z-index: 1;
}

/* Glow ring */
.chaoz-icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: calc(var(--icon-radius) + 5px);
    background: radial-gradient(circle, var(--icon-glow-color) 0%, transparent 70%);
    animation: chaozIconGlow 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Ambient particle ring */
.chaoz-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--icon-radius) + 2px);
    border: 1px solid transparent;
    background: conic-gradient(from var(--conic-angle, 0deg), transparent 0%, rgba(139,92,246,0.3) 10%, transparent 20%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: chaozIconRingSpin 6s linear infinite;
    pointer-events: none;
}

/* Size variants */
.chaoz-icon--sm { --icon-size: 64px; --icon-radius: 16px; }
.chaoz-icon--sm svg { width: 36px; height: 36px; }
.chaoz-icon--lg { --icon-size: 120px; --icon-radius: 28px; }
.chaoz-icon--lg svg { width: 68px; height: 68px; }
.chaoz-icon--xl { --icon-size: 160px; --icon-radius: 36px; }
.chaoz-icon--xl svg { width: 90px; height: 90px; }

/* ─── Base Animations ─── */
@keyframes chaozIconGlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.06); }
}
@keyframes chaozIconRingSpin {
    to { --conic-angle: 360deg; }
}
@property --conic-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}


/* ═══════════════════════════════════════════════════════════════
   1. MEMORY SPINE — Neural network with data flowing through synapses
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--memory-spine {
    --icon-bg: linear-gradient(145deg, rgba(99,102,241,0.15), rgba(67,56,202,0.08));
    --icon-border: rgba(99,102,241,0.22);
    --icon-glow-color: rgba(99,102,241,0.25);
}
/* Synaptic links */
.icon-ms .synapse {
    stroke: oklch(58% 0.15 265);
    stroke-width: 1;
    opacity: 0.3;
    stroke-dasharray: 3 4;
    animation: msSynapseFlow 3s linear infinite;
}
.icon-ms .synapse:nth-child(2) { animation-delay: -0.5s; }
.icon-ms .synapse:nth-child(3) { animation-delay: -1s; }
.icon-ms .synapse:nth-child(4) { animation-delay: -1.5s; }
.icon-ms .synapse:nth-child(5) { animation-delay: -2s; }
.icon-ms .synapse:nth-child(6) { animation-delay: -2.5s; }
/* Data pulse traveling synapses */
.icon-ms .data-pulse {
    fill: oklch(78% 0.22 265);
    filter: url(#ms-glow);
    animation: msDataPulse 2.5s ease-in-out infinite;
}
.icon-ms .data-pulse:nth-child(n+9) { animation-delay: -1.2s; }
.icon-ms .data-pulse:nth-child(n+11) { animation-delay: -0.6s; }
/* Core hub */
.icon-ms .core {
    fill: oklch(65% 0.2 265);
    filter: url(#ms-glow);
}
.icon-ms .core-ring {
    fill: none;
    stroke: oklch(72% 0.18 265);
    stroke-width: 1.5;
    animation: msCoreRing 2s ease-in-out infinite;
}
/* Outer nodes */
.icon-ms .node {
    fill: oklch(68% 0.16 265);
    animation: msNodeBreathe 2.4s ease-in-out infinite;
}
.icon-ms .node:nth-child(n+15) { animation-delay: -0.4s; }
.icon-ms .node:nth-child(n+17) { animation-delay: -0.8s; }
.icon-ms .node:nth-child(n+19) { animation-delay: -1.2s; }
.icon-ms .node:nth-child(n+21) { animation-delay: -1.6s; }
.icon-ms .node:nth-child(n+23) { animation-delay: -2s; }
/* Vector ripple ring */
.icon-ms .ripple {
    fill: none;
    stroke: oklch(72% 0.15 265);
    stroke-width: 0.8;
    animation: msRipple 3s ease-out infinite;
}
.icon-ms .ripple:nth-child(n+25) { animation-delay: -1s; }
.icon-ms .ripple:nth-child(n+26) { animation-delay: -2s; }

@keyframes msSynapseFlow {
    0% { stroke-dashoffset: 14; opacity: 0.2; }
    50% { opacity: 0.5; }
    100% { stroke-dashoffset: 0; opacity: 0.2; }
}
@keyframes msDataPulse {
    0%, 100% { opacity: 0; r: 1; }
    10% { opacity: 0; }
    30% { opacity: 1; r: 1.8; }
    70% { opacity: 1; r: 1.8; }
    90% { opacity: 0; }
}
@keyframes msCoreRing {
    0%, 100% { r: 6; opacity: 0.6; stroke-width: 1.5; }
    50% { r: 8; opacity: 0.3; stroke-width: 0.8; }
}
@keyframes msNodeBreathe {
    0%, 100% { r: 2.8; opacity: 0.7; }
    50% { r: 3.5; opacity: 1; }
}
@keyframes msRipple {
    0% { r: 6; opacity: 0.5; stroke-width: 1; }
    100% { r: 24; opacity: 0; stroke-width: 0.2; }
}
/* Memory wave — concentric sonar-like expanding waves from center */
.icon-ms .memory-wave {
    fill: none;
    stroke: oklch(68% 0.14 265);
    stroke-width: 0.6;
    opacity: 0;
    animation: msMemoryWave 4s ease-out infinite;
}
.icon-ms .memory-wave:nth-child(n+28) { animation-delay: -1.3s; }
.icon-ms .memory-wave:nth-child(n+29) { animation-delay: -2.6s; }
/* Vector particle — small floating dots drifting upward and fading */
.icon-ms .vector-particle {
    fill: oklch(75% 0.2 265);
    opacity: 0;
    animation: msVectorParticle 3.5s ease-out infinite;
}
.icon-ms .vector-particle:nth-child(n+31) { animation-delay: -0.7s; }
.icon-ms .vector-particle:nth-child(n+32) { animation-delay: -1.4s; }
.icon-ms .vector-particle:nth-child(n+33) { animation-delay: -2.1s; }
.icon-ms .vector-particle:nth-child(n+34) { animation-delay: -2.8s; }
/* Spine column — vertical center line pulsing with data */
.icon-ms .spine-column {
    stroke: oklch(70% 0.16 265);
    stroke-width: 1.2;
    stroke-linecap: round;
    fill: none;
    opacity: 0.3;
    animation: msSpineColumn 2s ease-in-out infinite;
}

@keyframes msMemoryWave {
    0% { r: 4; opacity: 0.5; stroke-width: 0.8; }
    100% { r: 22; opacity: 0; stroke-width: 0.1; }
}
@keyframes msVectorParticle {
    0% { opacity: 0; transform: translateY(0); }
    15% { opacity: 0.8; }
    100% { opacity: 0; transform: translateY(-16px); }
}
@keyframes msSpineColumn {
    0%, 100% { opacity: 0.2; stroke-width: 1; }
    50% { opacity: 0.6; stroke-width: 1.8; }
}


/* ═══════════════════════════════════════════════════════════════
   2. ML ROUTER — Decision tree with branching data streams
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--ml-router {
    --icon-bg: linear-gradient(145deg, rgba(139,92,246,0.15), rgba(124,58,237,0.08));
    --icon-border: rgba(139,92,246,0.22);
    --icon-glow-color: rgba(139,92,246,0.25);
}
.icon-mlr .trunk {
    stroke: oklch(60% 0.16 290);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
}
.icon-mlr .branch {
    stroke: oklch(55% 0.14 290);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
}
.icon-mlr .decision-node {
    fill: oklch(65% 0.2 290);
}
.icon-mlr .endpoint {
    fill: oklch(72% 0.22 290);
    filter: url(#mlr-glow);
    animation: mlrEndpointPulse 2s ease-in-out infinite;
}
.icon-mlr .endpoint:nth-child(n+8) { animation-delay: -0.5s; }
.icon-mlr .endpoint:nth-child(n+9) { animation-delay: -1s; }
.icon-mlr .endpoint:nth-child(n+10) { animation-delay: -1.5s; }
/* Data stream particles */
.icon-mlr .stream {
    fill: oklch(80% 0.25 290);
    filter: url(#mlr-glow);
}
.icon-mlr .stream-1 { animation: mlrStream1 2.2s ease-in-out infinite; }
.icon-mlr .stream-2 { animation: mlrStream2 2.2s ease-in-out 0.7s infinite; }
.icon-mlr .stream-3 { animation: mlrStream3 2.2s ease-in-out 1.4s infinite; }
/* Confidence arc */
.icon-mlr .confidence-arc {
    fill: none;
    stroke: oklch(72% 0.18 290);
    stroke-width: 1.5;
    stroke-dasharray: 40 20;
    stroke-linecap: round;
    animation: mlrConfidence 4s linear infinite;
}

@keyframes mlrEndpointPulse {
    0%, 100% { r: 3; opacity: 0.7; }
    50% { r: 4; opacity: 1; }
}
@keyframes mlrStream1 {
    0% { cx: 12; cy: 42; opacity: 0; }
    15% { opacity: 1; }
    100% { cx: 42; cy: 10; opacity: 0; }
}
@keyframes mlrStream2 {
    0% { cx: 12; cy: 42; opacity: 0; }
    15% { opacity: 1; }
    100% { cx: 42; cy: 25; opacity: 0; }
}
@keyframes mlrStream3 {
    0% { cx: 12; cy: 42; opacity: 0; }
    15% { opacity: 1; }
    100% { cx: 42; cy: 40; opacity: 0; }
}
@keyframes mlrConfidence {
    to { stroke-dashoffset: -120; }
}
/* Route trace — animated dotted paths showing routing decisions */
.icon-mlr .route-trace {
    fill: none;
    stroke: oklch(72% 0.18 290);
    stroke-width: 0.8;
    stroke-dasharray: 2 3;
    opacity: 0;
    animation: mlrRouteTrace 3s ease-in-out infinite;
}
.icon-mlr .route-trace:nth-child(n+12) { animation-delay: -1s; }
.icon-mlr .route-trace:nth-child(n+13) { animation-delay: -2s; }
/* Weight indicator — small confidence bars near endpoints */
.icon-mlr .weight-indicator {
    fill: oklch(68% 0.16 290);
    opacity: 0.5;
    animation: mlrWeightPulse 2.5s ease-in-out infinite;
    transform-origin: center bottom;
}
.icon-mlr .weight-indicator:nth-child(n+15) { animation-delay: -0.8s; }
.icon-mlr .weight-indicator:nth-child(n+16) { animation-delay: -1.6s; }
/* Feedback loop — curved arrow path looping back to center */
.icon-mlr .feedback-loop {
    fill: none;
    stroke: oklch(65% 0.14 290);
    stroke-width: 0.8;
    stroke-dasharray: 3 2;
    opacity: 0.3;
    animation: mlrFeedbackLoop 4s linear infinite;
}

@keyframes mlrRouteTrace {
    0%, 20% { opacity: 0; stroke-dashoffset: 10; }
    30% { opacity: 0.7; }
    70% { opacity: 0.7; }
    100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes mlrWeightPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.5); }
    50% { opacity: 0.8; transform: scaleY(1); }
}
@keyframes mlrFeedbackLoop {
    0% { stroke-dashoffset: 10; opacity: 0.15; }
    50% { opacity: 0.5; }
    100% { stroke-dashoffset: 0; opacity: 0.15; }
}


/* ═══════════════════════════════════════════════════════════════
   3. HELIXHYPER — Double helix DNA with rotating nodes
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--helixhyper {
    --icon-bg: linear-gradient(145deg, rgba(6,182,212,0.12), rgba(20,184,166,0.08));
    --icon-border: rgba(6,182,212,0.22);
    --icon-glow-color: rgba(6,182,212,0.25);
}
.icon-hh .strand-a {
    fill: none;
    stroke: oklch(68% 0.18 185);
    stroke-width: 2.5;
    stroke-linecap: round;
}
.icon-hh .strand-b {
    fill: none;
    stroke: oklch(62% 0.18 330);
    stroke-width: 2.5;
    stroke-linecap: round;
}
.icon-hh .helix-group {
    animation: hhHelixRotate 6s linear infinite;
    transform-origin: 25px 25px;
}
.icon-hh .rung {
    stroke: oklch(55% 0.1 200);
    stroke-width: 1;
    opacity: 0.4;
    animation: hhRungPulse 3s ease-in-out infinite;
}
.icon-hh .rung:nth-child(2) { animation-delay: -0.6s; }
.icon-hh .rung:nth-child(3) { animation-delay: -1.2s; }
.icon-hh .rung:nth-child(4) { animation-delay: -1.8s; }
.icon-hh .rung:nth-child(5) { animation-delay: -2.4s; }
.icon-hh .cross-node {
    fill: oklch(75% 0.2 195);
    filter: url(#hh-glow);
    animation: hhNodeGlow 2s ease-in-out infinite;
}
.icon-hh .cross-node:nth-child(n+8) { animation-delay: -0.5s; }
.icon-hh .cross-node:nth-child(n+9) { animation-delay: -1s; }
.icon-hh .cross-node:nth-child(n+10) { animation-delay: -1.5s; }
/* Orbiting data particle */
.icon-hh .orbit-particle {
    fill: oklch(82% 0.22 180);
    filter: url(#hh-glow);
    animation: hhOrbitParticle 4s linear infinite;
    transform-origin: 25px 25px;
}

@keyframes hhHelixRotate {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
@keyframes hhRungPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}
@keyframes hhNodeGlow {
    0%, 100% { r: 2.5; opacity: 0.7; }
    50% { r: 3.5; opacity: 1; }
}
@keyframes hhOrbitParticle {
    0% { transform: rotate(0deg) translateX(18px); opacity: 0.8; }
    50% { opacity: 1; }
    100% { transform: rotate(360deg) translateX(18px); opacity: 0.8; }
}
/* Energy field — subtle rotating gradient behind helix */
.icon-hh .energy-field {
    fill: none;
    stroke: oklch(60% 0.12 195);
    stroke-width: 0.5;
    opacity: 0.15;
    transform-origin: 25px 25px;
    animation: hhEnergyField 8s linear infinite;
}
/* Data cascade — small dots cascading through helix rungs */
.icon-hh .data-cascade {
    fill: oklch(78% 0.2 185);
    opacity: 0;
    animation: hhDataCascade 3s ease-in-out infinite;
}
.icon-hh .data-cascade:nth-child(n+13) { animation-delay: -0.6s; }
.icon-hh .data-cascade:nth-child(n+14) { animation-delay: -1.2s; }
.icon-hh .data-cascade:nth-child(n+15) { animation-delay: -1.8s; }
.icon-hh .data-cascade:nth-child(n+16) { animation-delay: -2.4s; }
/* Quantum shimmer — slight scale oscillation on the whole helix group */
.icon-hh .quantum-shimmer {
    animation: hhQuantumShimmer 5s ease-in-out infinite;
    transform-origin: 25px 25px;
}

@keyframes hhEnergyField {
    0% { transform: rotate(0deg); opacity: 0.1; }
    50% { opacity: 0.25; }
    100% { transform: rotate(360deg); opacity: 0.1; }
}
@keyframes hhDataCascade {
    0% { cy: 8; opacity: 0; }
    15% { opacity: 0.9; }
    85% { opacity: 0.9; }
    100% { cy: 42; opacity: 0; }
}
@keyframes hhQuantumShimmer {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.02); }
    50% { transform: scale(0.98); }
    75% { transform: scale(1.01); }
}


/* ═══════════════════════════════════════════════════════════════
   4. ZEARCH — Magnifying glass with radar scan and data particles
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--zearch {
    --icon-bg: linear-gradient(145deg, rgba(59,130,246,0.12), rgba(37,99,235,0.08));
    --icon-border: rgba(59,130,246,0.22);
    --icon-glow-color: rgba(59,130,246,0.25);
}
.icon-zr .lens-outer {
    fill: none;
    stroke: oklch(65% 0.16 240);
    stroke-width: 2.5;
}
.icon-zr .lens-inner {
    fill: rgba(59,130,246,0.06);
    stroke: none;
}
.icon-zr .handle {
    stroke: oklch(55% 0.12 240);
    stroke-width: 3.5;
    stroke-linecap: round;
}
.icon-zr .scan-beam {
    fill: none;
    stroke: oklch(75% 0.2 230);
    stroke-width: 1.5;
    stroke-dasharray: 2 3;
    transform-origin: 20px 20px;
    animation: zrScanSweep 3s linear infinite;
}
.icon-zr .scan-fill {
    fill: oklch(70% 0.18 230);
    opacity: 0;
    transform-origin: 20px 20px;
    animation: zrScanFill 3s linear infinite;
}
.icon-zr .result-dot {
    fill: oklch(78% 0.22 230);
    filter: url(#zr-glow);
    opacity: 0;
    animation: zrResultPop 3s ease-out infinite;
}
.icon-zr .result-dot:nth-child(n+7) { animation-delay: 0.8s; }
.icon-zr .result-dot:nth-child(n+8) { animation-delay: 1.6s; }
.icon-zr .result-dot:nth-child(n+9) { animation-delay: 2.2s; }
/* Ripple from lens */
.icon-zr .scan-ripple {
    fill: none;
    stroke: oklch(70% 0.14 240);
    stroke-width: 0.8;
    animation: zrRipple 2.5s ease-out infinite;
}
.icon-zr .scan-ripple:nth-child(n+11) { animation-delay: -0.8s; }
.icon-zr .scan-ripple:nth-child(n+12) { animation-delay: -1.6s; }

@keyframes zrScanSweep {
    0% { transform: rotate(0deg); opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0.8; }
}
@keyframes zrScanFill {
    0% { opacity: 0; transform: rotate(0deg); }
    10% { opacity: 0.15; }
    40% { opacity: 0.15; }
    50% { opacity: 0; transform: rotate(180deg); }
    60% { opacity: 0.15; }
    90% { opacity: 0.15; }
    100% { opacity: 0; transform: rotate(360deg); }
}
@keyframes zrResultPop {
    0%, 30% { opacity: 0; r: 0; }
    40% { opacity: 1; r: 2.5; }
    80% { opacity: 1; r: 2; }
    100% { opacity: 0; r: 0; }
}
@keyframes zrRipple {
    0% { r: 10; opacity: 0.4; stroke-width: 1; }
    100% { r: 22; opacity: 0; stroke-width: 0.2; }
}
/* Search ray — thin beams radiating from lens center outward */
.icon-zr .search-ray {
    stroke: oklch(72% 0.18 230);
    stroke-width: 0.5;
    fill: none;
    opacity: 0;
    transform-origin: 20px 20px;
    animation: zrSearchRay 4s ease-out infinite;
}
.icon-zr .search-ray:nth-child(n+14) { animation-delay: -1s; }
.icon-zr .search-ray:nth-child(n+15) { animation-delay: -2s; }
.icon-zr .search-ray:nth-child(n+16) { animation-delay: -3s; }
/* Index line — horizontal lines inside lens like indexed data */
.icon-zr .index-line {
    stroke: oklch(65% 0.12 240);
    stroke-width: 0.6;
    fill: none;
    opacity: 0;
    animation: zrIndexLine 3.5s ease-in-out infinite;
}
.icon-zr .index-line:nth-child(n+18) { animation-delay: -0.7s; }
.icon-zr .index-line:nth-child(n+19) { animation-delay: -1.4s; }
.icon-zr .index-line:nth-child(n+20) { animation-delay: -2.1s; }
/* Discovery spark — bright flash at result dot positions */
.icon-zr .discovery-spark {
    fill: oklch(90% 0.25 230);
    filter: url(#zr-glow);
    opacity: 0;
    animation: zrDiscoverySpark 3s ease-out infinite;
}
.icon-zr .discovery-spark:nth-child(n+22) { animation-delay: 0.8s; }
.icon-zr .discovery-spark:nth-child(n+23) { animation-delay: 1.6s; }

@keyframes zrSearchRay {
    0%, 15% { opacity: 0; }
    20% { opacity: 0.6; }
    35% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes zrIndexLine {
    0%, 25% { opacity: 0; stroke-dashoffset: 12; }
    35% { opacity: 0.5; stroke-dashoffset: 0; }
    65% { opacity: 0.5; }
    80%, 100% { opacity: 0; }
}
@keyframes zrDiscoverySpark {
    0%, 35% { opacity: 0; r: 0; }
    40% { opacity: 1; r: 4; }
    50% { opacity: 0.8; r: 2; }
    70% { opacity: 0; r: 0; }
    100% { opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   5. AGENTZ — Interconnected mesh with pulsing nodes and data arcs
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--agentz {
    --icon-bg: linear-gradient(145deg, rgba(16,185,129,0.12), rgba(5,150,105,0.08));
    --icon-border: rgba(16,185,129,0.22);
    --icon-glow-color: rgba(16,185,129,0.25);
}
.icon-az .mesh-link {
    stroke: oklch(52% 0.1 160);
    stroke-width: 0.8;
    opacity: 0.35;
}
.icon-az .mesh-arc {
    fill: none;
    stroke: oklch(60% 0.15 160);
    stroke-width: 1.2;
    stroke-dasharray: 4 3;
    animation: azArcFlow 2.5s linear infinite;
}
.icon-az .mesh-arc:nth-child(n+8) { animation-delay: -0.8s; }
.icon-az .mesh-arc:nth-child(n+9) { animation-delay: -1.6s; }
.icon-az .agent-node {
    fill: oklch(65% 0.18 158);
    animation: azNodePulse 2s ease-in-out infinite;
}
.icon-az .agent-node:nth-child(n+12) { animation-delay: -0.4s; }
.icon-az .agent-node:nth-child(n+13) { animation-delay: -0.8s; }
.icon-az .agent-node:nth-child(n+14) { animation-delay: -1.2s; }
.icon-az .agent-node:nth-child(n+15) { animation-delay: -1.6s; }
.icon-az .agent-node:nth-child(n+16) { animation-delay: -2s; }
.icon-az .core-agent {
    fill: oklch(72% 0.22 155);
    filter: url(#az-glow);
    animation: azCorePulse 1.8s ease-in-out infinite;
}
.icon-az .agent-ring {
    fill: none;
    stroke: oklch(68% 0.16 158);
    stroke-width: 1;
    animation: azRingExpand 2.5s ease-out infinite;
}
/* Data packet traveling mesh */
.icon-az .packet {
    fill: oklch(80% 0.24 155);
    filter: url(#az-glow);
}
.icon-az .pkt-1 { animation: azPkt1 3s ease-in-out infinite; }
.icon-az .pkt-2 { animation: azPkt2 3s ease-in-out 1s infinite; }
.icon-az .pkt-3 { animation: azPkt3 3s ease-in-out 2s infinite; }

@keyframes azArcFlow {
    0% { stroke-dashoffset: 14; }
    100% { stroke-dashoffset: 0; }
}
@keyframes azNodePulse {
    0%, 100% { r: 3; opacity: 0.65; }
    50% { r: 4; opacity: 1; }
}
@keyframes azCorePulse {
    0%, 100% { r: 5; opacity: 0.8; }
    50% { r: 6.5; opacity: 1; }
}
@keyframes azRingExpand {
    0% { r: 5; opacity: 0.5; }
    100% { r: 18; opacity: 0; }
}
@keyframes azPkt1 {
    0% { cx: 25; cy: 25; opacity: 0; }
    10% { opacity: 1; }
    100% { cx: 42; cy: 10; opacity: 0; }
}
@keyframes azPkt2 {
    0% { cx: 25; cy: 25; opacity: 0; }
    10% { opacity: 1; }
    100% { cx: 8; cy: 30; opacity: 0; }
}
@keyframes azPkt3 {
    0% { cx: 25; cy: 25; opacity: 0; }
    10% { opacity: 1; }
    100% { cx: 35; cy: 44; opacity: 0; }
}
/* Task queue — small rectangles popping in/out near core */
.icon-az .task-queue {
    fill: oklch(62% 0.14 160);
    opacity: 0;
    rx: 1;
    animation: azTaskQueue 2.8s ease-in-out infinite;
}
.icon-az .task-queue:nth-child(n+19) { animation-delay: -0.7s; }
.icon-az .task-queue:nth-child(n+20) { animation-delay: -1.4s; }
.icon-az .task-queue:nth-child(n+21) { animation-delay: -2.1s; }
/* Mesh shimmer — subtle color wave flowing through mesh links */
.icon-az .mesh-shimmer {
    stroke: oklch(72% 0.2 155);
    stroke-width: 0.6;
    fill: none;
    opacity: 0;
    animation: azMeshShimmer 3.5s ease-in-out infinite;
}
.icon-az .mesh-shimmer:nth-child(n+23) { animation-delay: -0.9s; }
.icon-az .mesh-shimmer:nth-child(n+24) { animation-delay: -1.8s; }
/* Load bar — tiny progress bar near each agent node */
.icon-az .load-bar {
    fill: oklch(68% 0.18 158);
    opacity: 0.4;
    animation: azLoadBar 2s ease-in-out infinite;
    transform-origin: left center;
}
.icon-az .load-bar:nth-child(n+26) { animation-delay: -0.5s; }
.icon-az .load-bar:nth-child(n+27) { animation-delay: -1s; }
.icon-az .load-bar:nth-child(n+28) { animation-delay: -1.5s; }

@keyframes azTaskQueue {
    0% { opacity: 0; transform: scale(0.3); }
    20% { opacity: 0.8; transform: scale(1); }
    80% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.3) translateX(4px); }
}
@keyframes azMeshShimmer {
    0% { opacity: 0; stroke-dashoffset: 12; }
    30% { opacity: 0.6; }
    70% { opacity: 0.6; }
    100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes azLoadBar {
    0%, 100% { transform: scaleX(0.2); opacity: 0.3; }
    50% { transform: scaleX(1); opacity: 0.7; }
}


/* ═══════════════════════════════════════════════════════════════
   6. COUNCIL OF MINDS — Orbital thought system with multi-ring
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--council {
    --icon-bg: linear-gradient(145deg, rgba(245,158,11,0.12), rgba(217,119,6,0.08));
    --icon-border: rgba(245,158,11,0.22);
    --icon-glow-color: rgba(245,158,11,0.2);
}
.icon-com .orbit-ring {
    fill: none;
    stroke: oklch(55% 0.08 65);
    stroke-width: 0.6;
    stroke-dasharray: 2 3;
}
.icon-com .orbit-ring-2 {
    fill: none;
    stroke: oklch(52% 0.06 65);
    stroke-width: 0.5;
    stroke-dasharray: 3 2;
}
.icon-com .core-mind {
    fill: oklch(70% 0.2 55);
    filter: url(#com-glow);
}
.icon-com .core-aura {
    fill: none;
    stroke: oklch(65% 0.15 55);
    stroke-width: 1;
    animation: comAuraPulse 2.5s ease-in-out infinite;
}
/* 9 perspective orbiters */
.icon-com .thought-orb {
    filter: url(#com-glow);
}
.icon-com .t-analyst { fill: oklch(72% 0.2 230); animation: comOrbit1 5s linear infinite; transform-origin: 25px 25px; }
.icon-com .t-critic { fill: oklch(72% 0.2 25); animation: comOrbit2 7s linear infinite; transform-origin: 25px 25px; }
.icon-com .t-creative { fill: oklch(72% 0.22 310); animation: comOrbit3 6s linear infinite; transform-origin: 25px 25px; }
.icon-com .t-pragmatist { fill: oklch(72% 0.18 150); animation: comOrbit1 8s linear -2s infinite; transform-origin: 25px 25px; }
.icon-com .t-security { fill: oklch(72% 0.2 0); animation: comOrbit2 5.5s linear -1s infinite; transform-origin: 25px 25px; }
/* Thought connection lines */
.icon-com .thought-link {
    stroke: oklch(60% 0.1 55);
    stroke-width: 0.5;
    opacity: 0;
    animation: comThoughtLink 4s ease-in-out infinite;
}
.icon-com .thought-link:nth-child(n+10) { animation-delay: -1.3s; }
.icon-com .thought-link:nth-child(n+11) { animation-delay: -2.6s; }

@keyframes comAuraPulse {
    0%, 100% { r: 6; opacity: 0.5; }
    50% { r: 8; opacity: 0.2; }
}
@keyframes comOrbit1 {
    0% { transform: rotate(0deg) translateX(15px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(15px) rotate(-360deg); }
}
@keyframes comOrbit2 {
    0% { transform: rotate(72deg) translateX(12px) rotate(-72deg); }
    100% { transform: rotate(432deg) translateX(12px) rotate(-432deg); }
}
@keyframes comOrbit3 {
    0% { transform: rotate(200deg) translateX(18px) rotate(-200deg); }
    100% { transform: rotate(560deg) translateX(18px) rotate(-560deg); }
}
@keyframes comThoughtLink {
    0%, 30%, 100% { opacity: 0; }
    40%, 80% { opacity: 0.5; }
}
/* Consensus wave — pulse outward when thoughts align */
.icon-com .consensus-wave {
    fill: none;
    stroke: oklch(70% 0.16 55);
    stroke-width: 0.6;
    opacity: 0;
    animation: comConsensusWave 5s ease-out infinite;
}
.icon-com .consensus-wave:nth-child(n+13) { animation-delay: -1.6s; }
.icon-com .consensus-wave:nth-child(n+14) { animation-delay: -3.2s; }
/* Debate spark — sparks between orbiting thoughts */
.icon-com .debate-spark {
    fill: oklch(82% 0.24 45);
    filter: url(#com-glow);
    opacity: 0;
    animation: comDebateSpark 3s ease-out infinite;
}
.icon-com .debate-spark:nth-child(n+16) { animation-delay: -0.8s; }
.icon-com .debate-spark:nth-child(n+17) { animation-delay: -1.6s; }
.icon-com .debate-spark:nth-child(n+18) { animation-delay: -2.4s; }
/* Wisdom ring — slowly rotating outer ring */
.icon-com .wisdom-ring {
    fill: none;
    stroke: oklch(58% 0.1 65);
    stroke-width: 0.5;
    stroke-dasharray: 4 6 2 6;
    opacity: 0.25;
    transform-origin: 25px 25px;
    animation: comWisdomRing 12s linear infinite;
}

@keyframes comConsensusWave {
    0% { r: 6; opacity: 0.5; stroke-width: 0.8; }
    100% { r: 24; opacity: 0; stroke-width: 0.1; }
}
@keyframes comDebateSpark {
    0%, 40% { opacity: 0; r: 0; }
    45% { opacity: 1; r: 2.5; }
    55% { opacity: 0.7; r: 1.5; }
    70%, 100% { opacity: 0; r: 0; }
}
@keyframes comWisdomRing {
    0% { transform: rotate(0deg); opacity: 0.2; }
    50% { opacity: 0.35; }
    100% { transform: rotate(360deg); opacity: 0.2; }
}


/* ═══════════════════════════════════════════════════════════════
   7. ZEMAIL — Envelope with particles and send animation
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--zemail {
    --icon-bg: linear-gradient(145deg, rgba(239,68,68,0.1), rgba(220,38,38,0.06));
    --icon-border: rgba(239,68,68,0.2);
    --icon-glow-color: rgba(239,68,68,0.2);
}
.icon-zm .envelope-body {
    fill: rgba(239,68,68,0.06);
    stroke: oklch(62% 0.18 25);
    stroke-width: 2;
    stroke-linejoin: round;
    rx: 3;
}
.icon-zm .envelope-flap {
    fill: none;
    stroke: oklch(65% 0.2 25);
    stroke-width: 2;
    stroke-linejoin: round;
    animation: zmFlapOpen 4s ease-in-out infinite;
    transform-origin: 25px 14px;
}
.icon-zm .envelope-seal {
    fill: oklch(70% 0.22 25);
    filter: url(#zm-glow);
    animation: zmSealPulse 2s ease-in-out infinite;
}
/* Flying send particles */
.icon-zm .send-particle {
    fill: oklch(78% 0.22 25);
    filter: url(#zm-glow);
}
.icon-zm .sp-1 { animation: zmSendParticle1 4s ease-out 1.5s infinite; }
.icon-zm .sp-2 { animation: zmSendParticle2 4s ease-out 1.7s infinite; }
.icon-zm .sp-3 { animation: zmSendParticle3 4s ease-out 1.9s infinite; }
/* Notification badge */
.icon-zm .notif-badge {
    fill: oklch(72% 0.22 25);
    animation: zmNotifBounce 2s ease-in-out infinite;
}
.icon-zm .notif-text {
    fill: white;
    font-size: 6px;
    font-weight: 700;
    font-family: system-ui;
    text-anchor: middle;
    dominant-baseline: central;
}

@keyframes zmFlapOpen {
    0%, 35% { transform: rotateX(0deg); }
    42% { transform: rotateX(-45deg); }
    55%, 100% { transform: rotateX(0deg); }
}
@keyframes zmSealPulse {
    0%, 100% { r: 2.5; opacity: 0.7; }
    50% { r: 3.2; opacity: 1; }
}
@keyframes zmSendParticle1 {
    0%, 40% { opacity: 0; cx: 25; cy: 14; }
    45% { opacity: 1; }
    100% { cx: 44; cy: 4; opacity: 0; }
}
@keyframes zmSendParticle2 {
    0%, 40% { opacity: 0; cx: 25; cy: 14; }
    45% { opacity: 1; }
    100% { cx: 46; cy: 12; opacity: 0; }
}
@keyframes zmSendParticle3 {
    0%, 40% { opacity: 0; cx: 25; cy: 14; }
    45% { opacity: 1; }
    100% { cx: 42; cy: 0; opacity: 0; }
}
@keyframes zmNotifBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.1); }
}
/* Inbox line — lines inside envelope body showing message content */
.icon-zm .inbox-line {
    stroke: oklch(58% 0.1 25);
    stroke-width: 0.6;
    fill: none;
    opacity: 0;
    animation: zmInboxLine 4s ease-in-out 0.5s infinite;
}
.icon-zm .inbox-line:nth-child(n+12) { animation-delay: 0.7s; }
.icon-zm .inbox-line:nth-child(n+13) { animation-delay: 0.9s; }
/* Delivery trail — fading trail behind flying send particles */
.icon-zm .delivery-trail {
    stroke: oklch(72% 0.18 25);
    stroke-width: 0.5;
    fill: none;
    stroke-dasharray: 2 2;
    opacity: 0;
    animation: zmDeliveryTrail 4s ease-out 1.6s infinite;
}
.icon-zm .delivery-trail:nth-child(n+15) { animation-delay: 1.8s; }
.icon-zm .delivery-trail:nth-child(n+16) { animation-delay: 2.0s; }
/* Stamp rotate — small rotating stamp/seal in corner */
.icon-zm .stamp-rotate {
    fill: oklch(65% 0.16 25);
    opacity: 0.4;
    transform-origin: center;
    animation: zmStampRotate 6s ease-in-out infinite;
}

@keyframes zmInboxLine {
    0%, 30% { opacity: 0; stroke-dashoffset: 10; }
    40% { opacity: 0.4; stroke-dashoffset: 0; }
    55% { opacity: 0.4; }
    65%, 100% { opacity: 0; }
}
@keyframes zmDeliveryTrail {
    0%, 40% { opacity: 0; }
    45% { opacity: 0.6; }
    100% { opacity: 0; }
}
@keyframes zmStampRotate {
    0%, 100% { transform: rotate(0deg); opacity: 0.3; }
    50% { transform: rotate(15deg); opacity: 0.6; }
}


/* ═══════════════════════════════════════════════════════════════
   8. PROBRIDGEZ — Arch bridge with flowing data packets
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--probridgez {
    --icon-bg: linear-gradient(145deg, rgba(234,179,8,0.1), rgba(202,138,4,0.06));
    --icon-border: rgba(234,179,8,0.2);
    --icon-glow-color: rgba(234,179,8,0.2);
}
.icon-pb .bridge-arc {
    fill: none;
    stroke: oklch(62% 0.16 85);
    stroke-width: 2.5;
    stroke-linecap: round;
}
.icon-pb .cable {
    fill: none;
    stroke: oklch(55% 0.1 85);
    stroke-width: 1;
    opacity: 0.5;
}
.icon-pb .pillar {
    stroke: oklch(55% 0.12 85);
    stroke-width: 2.5;
    stroke-linecap: round;
}
.icon-pb .road {
    stroke: oklch(48% 0.08 85);
    stroke-width: 2;
}
.icon-pb .lane-mark {
    stroke: oklch(65% 0.14 85);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    animation: pbLaneFlow 1.5s linear infinite;
}
/* Data packets crossing bridge */
.icon-pb .bridge-packet {
    fill: oklch(78% 0.22 85);
    filter: url(#pb-glow);
}
.icon-pb .bp-1 { animation: pbPacketCross 2.5s ease-in-out infinite; }
.icon-pb .bp-2 { animation: pbPacketCross 2.5s ease-in-out 0.8s infinite; }
.icon-pb .bp-3 { animation: pbPacketCross 2.5s ease-in-out 1.6s infinite; }
/* API signal dots at endpoints */
.icon-pb .endpoint-signal {
    fill: oklch(72% 0.2 85);
    animation: pbSignalBlink 1.5s ease-in-out infinite;
}
.icon-pb .endpoint-signal:nth-child(n+16) { animation-delay: -0.7s; }

@keyframes pbLaneFlow {
    0% { stroke-dashoffset: 14; }
    100% { stroke-dashoffset: 0; }
}
@keyframes pbPacketCross {
    0% { cx: 5; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { cx: 45; opacity: 0; }
}
@keyframes pbSignalBlink {
    0%, 100% { opacity: 0.5; r: 2; }
    50% { opacity: 1; r: 3; }
}
/* API pulse — pulse wave traveling along the bridge arc */
.icon-pb .api-pulse {
    fill: none;
    stroke: oklch(78% 0.22 85);
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: 0;
    stroke-dasharray: 4 40;
    animation: pbApiPulse 2.5s ease-in-out infinite;
}
.icon-pb .api-pulse:nth-child(n+18) { animation-delay: -0.8s; }
.icon-pb .api-pulse:nth-child(n+19) { animation-delay: -1.6s; }
/* Connector spark — sparks at bridge endpoints */
.icon-pb .connector-spark {
    fill: oklch(82% 0.24 85);
    filter: url(#pb-glow);
    opacity: 0;
    animation: pbConnectorSpark 2s ease-out infinite;
}
.icon-pb .connector-spark:nth-child(n+21) { animation-delay: -0.5s; }
.icon-pb .connector-spark:nth-child(n+22) { animation-delay: -1s; }
.icon-pb .connector-spark:nth-child(n+23) { animation-delay: -1.5s; }
/* Cable vibrate — slight vibration on cables during data transfer */
.icon-pb .cable-vibrate {
    fill: none;
    stroke: oklch(58% 0.12 85);
    stroke-width: 0.8;
    opacity: 0.4;
    animation: pbCableVibrate 0.3s ease-in-out infinite;
}

@keyframes pbApiPulse {
    0% { stroke-dashoffset: 44; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pbConnectorSpark {
    0%, 60% { opacity: 0; r: 0; }
    65% { opacity: 1; r: 3; }
    75% { opacity: 0.6; r: 1.5; }
    90%, 100% { opacity: 0; r: 0; }
}
@keyframes pbCableVibrate {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-0.4px); }
    75% { transform: translateY(0.4px); }
}


/* ═══════════════════════════════════════════════════════════════
   9. GITCHAOZOXIDE — Git branch merge with Rust gear
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--gitchaoz {
    --icon-bg: linear-gradient(145deg, rgba(251,146,60,0.1), rgba(234,88,12,0.06));
    --icon-border: rgba(251,146,60,0.2);
    --icon-glow-color: rgba(251,146,60,0.2);
}
.icon-gco .main-branch {
    stroke: oklch(62% 0.18 145);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
}
.icon-gco .feat-branch {
    stroke: oklch(60% 0.18 35);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: gcoDrawBranch 4s ease-in-out infinite;
}
.icon-gco .commit {
    fill: oklch(70% 0.2 145);
}
.icon-gco .commit-feat {
    fill: oklch(72% 0.2 35);
}
.icon-gco .merge-commit {
    fill: oklch(80% 0.24 80);
    filter: url(#gco-glow);
    animation: gcoMergeFlash 4s ease-in-out infinite;
}
/* Rust gear overlay */
.icon-gco .gear {
    fill: none;
    stroke: oklch(60% 0.15 35);
    stroke-width: 1.2;
    animation: gcoGearSpin 8s linear infinite;
    transform-origin: 40px 12px;
    opacity: 0.5;
}
/* Scan line */
.icon-gco .scan-line {
    stroke: oklch(72% 0.18 145);
    stroke-width: 0.8;
    opacity: 0;
    animation: gcoScanLine 3s ease-in-out infinite;
}

@keyframes gcoDrawBranch {
    0%, 10% { stroke-dashoffset: 100; }
    45% { stroke-dashoffset: 0; }
    55% { stroke-dashoffset: 0; }
    90%, 100% { stroke-dashoffset: -100; }
}
@keyframes gcoMergeFlash {
    0%, 40% { r: 3; opacity: 0.5; }
    50% { r: 5; opacity: 1; }
    60%, 100% { r: 3; opacity: 0.5; }
}
@keyframes gcoGearSpin {
    to { transform: rotate(360deg); }
}
@keyframes gcoScanLine {
    0% { y1: 5; y2: 5; opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; }
    100% { y1: 45; y2: 45; opacity: 0; }
}
/* Diff highlight — green/red colored segments on branches */
.icon-gco .diff-highlight {
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    opacity: 0;
    animation: gcoDiffHighlight 4s ease-in-out infinite;
}
.icon-gco .diff-highlight--add {
    stroke: oklch(68% 0.2 145);
}
.icon-gco .diff-highlight--remove {
    stroke: oklch(65% 0.2 25);
    animation-delay: -2s;
}
/* Commit ring — expanding ring from merge commit */
.icon-gco .commit-ring {
    fill: none;
    stroke: oklch(75% 0.2 80);
    stroke-width: 0.8;
    opacity: 0;
    animation: gcoCommitRing 4s ease-out infinite;
}
.icon-gco .commit-ring:nth-child(n+18) { animation-delay: -1.3s; }
.icon-gco .commit-ring:nth-child(n+19) { animation-delay: -2.6s; }
/* Oxide shimmer — metallic shimmer effect on the gear */
.icon-gco .oxide-shimmer {
    fill: oklch(72% 0.12 55);
    opacity: 0;
    mix-blend-mode: overlay;
    animation: gcoOxideShimmer 3s ease-in-out infinite;
}

@keyframes gcoDiffHighlight {
    0%, 10% { opacity: 0; stroke-dashoffset: 20; }
    45% { opacity: 0.7; stroke-dashoffset: 0; }
    55% { opacity: 0.7; stroke-dashoffset: 0; }
    90%, 100% { opacity: 0; stroke-dashoffset: -20; }
}
@keyframes gcoCommitRing {
    0%, 45% { r: 3; opacity: 0; }
    50% { r: 3; opacity: 0.8; }
    100% { r: 14; opacity: 0; stroke-width: 0.1; }
}
@keyframes gcoOxideShimmer {
    0%, 100% { opacity: 0; transform: translateX(-4px); }
    40% { opacity: 0.3; }
    50% { opacity: 0.5; transform: translateX(4px); }
    60% { opacity: 0.3; }
}


/* ═══════════════════════════════════════════════════════════════
   10. CHAOZHERO — Terminal with live typing and blinking cursor
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--chaozhero {
    --icon-bg: linear-gradient(145deg, rgba(99,102,241,0.1), rgba(79,70,229,0.06));
    --icon-border: rgba(99,102,241,0.2);
    --icon-glow-color: rgba(99,102,241,0.2);
}
.icon-ch .screen {
    fill: oklch(12% 0.02 265);
    stroke: oklch(45% 0.08 265);
    stroke-width: 1.5;
    rx: 5;
}
.icon-ch .title-bar {
    fill: oklch(20% 0.03 265);
    rx: 5;
}
.icon-ch .title-bar-bottom {
    fill: oklch(20% 0.03 265);
}
.icon-ch .dot-red { fill: oklch(60% 0.2 25); }
.icon-ch .dot-yellow { fill: oklch(72% 0.18 90); }
.icon-ch .dot-green { fill: oklch(68% 0.18 150); }
.icon-ch .prompt {
    fill: oklch(70% 0.18 150);
    font-size: 5.5px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-weight: 600;
}
.icon-ch .cmd-text {
    fill: oklch(80% 0.12 265);
    font-size: 5px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.icon-ch .output-text {
    fill: oklch(62% 0.06 265);
    font-size: 4.5px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.icon-ch .cursor-block {
    fill: oklch(75% 0.2 150);
    animation: chCursorBlink 1s step-end infinite;
}
/* Typed text animation */
.icon-ch .typing-line {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: chTyping 3s steps(20) infinite;
}
/* Activity indicator */
.icon-ch .activity-dot {
    fill: oklch(72% 0.2 150);
    animation: chActivityPulse 1.5s ease-in-out infinite;
}
.icon-ch .activity-dot:nth-child(n+12) { animation-delay: -0.3s; }
.icon-ch .activity-dot:nth-child(n+13) { animation-delay: -0.6s; }

@keyframes chCursorBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes chTyping {
    0% { stroke-dashoffset: 50; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}
@keyframes chActivityPulse {
    0%, 100% { r: 1; opacity: 0.5; }
    50% { r: 1.5; opacity: 1; }
}
/* Status bar — bottom bar with tiny animated segments */
.icon-ch .status-bar {
    fill: oklch(18% 0.03 265);
    stroke: oklch(40% 0.06 265);
    stroke-width: 0.5;
    rx: 1;
}
.icon-ch .status-bar-segment {
    fill: oklch(60% 0.14 150);
    opacity: 0.5;
    animation: chStatusSegment 3s ease-in-out infinite;
}
.icon-ch .status-bar-segment:nth-child(n+15) { animation-delay: -0.6s; }
.icon-ch .status-bar-segment:nth-child(n+16) { animation-delay: -1.2s; }
.icon-ch .status-bar-segment:nth-child(n+17) { animation-delay: -1.8s; }
/* Tab indicator — multiple tabs at top showing active session */
.icon-ch .tab-indicator {
    fill: oklch(22% 0.03 265);
    stroke: oklch(42% 0.06 265);
    stroke-width: 0.4;
    rx: 1.5;
    opacity: 0.5;
}
.icon-ch .tab-indicator--active {
    fill: oklch(28% 0.05 265);
    opacity: 1;
    border-bottom: none;
    animation: chTabActive 4s ease-in-out infinite;
}
/* Output stream — scrolling text effect in output area */
.icon-ch .output-stream {
    stroke: oklch(55% 0.06 265);
    stroke-width: 0.5;
    fill: none;
    opacity: 0;
    animation: chOutputStream 2.5s steps(8) infinite;
}
.icon-ch .output-stream:nth-child(n+20) { animation-delay: -0.5s; }
.icon-ch .output-stream:nth-child(n+21) { animation-delay: -1s; }

@keyframes chStatusSegment {
    0%, 100% { opacity: 0.3; fill: oklch(60% 0.14 150); }
    30% { opacity: 0.8; fill: oklch(72% 0.2 150); }
    60% { opacity: 0.5; fill: oklch(65% 0.16 265); }
}
@keyframes chTabActive {
    0%, 100% { fill: oklch(28% 0.05 265); }
    50% { fill: oklch(32% 0.07 265); }
}
@keyframes chOutputStream {
    0% { opacity: 0; stroke-dashoffset: 20; }
    30% { opacity: 0.5; stroke-dashoffset: 10; }
    70% { opacity: 0.5; stroke-dashoffset: 0; }
    100% { opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   11. AUIE — Autonomous UI Engine with component assembly
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--auie {
    --icon-bg: linear-gradient(145deg, rgba(236,72,153,0.12), rgba(219,39,119,0.06));
    --icon-border: rgba(236,72,153,0.22);
    --icon-glow-color: rgba(236,72,153,0.25);
}
/* Component frame — overlapping rectangles being assembled */
.icon-auie .component-frame {
    fill: rgba(236,72,153,0.05);
    stroke: oklch(62% 0.18 340);
    stroke-width: 1.5;
    rx: 3;
    opacity: 0;
    animation: auieComponentSlide 3.5s ease-out infinite;
}
.icon-auie .component-frame:nth-child(2) { animation-delay: -0.7s; }
.icon-auie .component-frame:nth-child(3) { animation-delay: -1.4s; }
.icon-auie .component-frame:nth-child(4) { animation-delay: -2.1s; }
/* Assembly particle — sparkle effects during assembly */
.icon-auie .assembly-particle {
    fill: oklch(80% 0.24 340);
    filter: url(#auie-glow);
    opacity: 0;
    animation: auieAssemblySparkle 2.5s ease-out infinite;
}
.icon-auie .assembly-particle:nth-child(n+6) { animation-delay: -0.5s; }
.icon-auie .assembly-particle:nth-child(n+7) { animation-delay: -1s; }
.icon-auie .assembly-particle:nth-child(n+8) { animation-delay: -1.5s; }
.icon-auie .assembly-particle:nth-child(n+9) { animation-delay: -2s; }
/* Style wave — gradient wave sweeping over components */
.icon-auie .style-wave {
    fill: none;
    stroke: oklch(72% 0.2 340);
    stroke-width: 0.8;
    stroke-dasharray: 6 8;
    opacity: 0.3;
    animation: auieStyleWave 4s linear infinite;
}
/* Layout grid — background grid lines drawing in */
.icon-auie .layout-grid {
    stroke: oklch(50% 0.08 340);
    stroke-width: 0.4;
    fill: none;
    opacity: 0;
    animation: auieLayoutGrid 5s ease-in-out infinite;
}
.icon-auie .layout-grid:nth-child(n+12) { animation-delay: -1s; }
.icon-auie .layout-grid:nth-child(n+13) { animation-delay: -2s; }
.icon-auie .layout-grid:nth-child(n+14) { animation-delay: -3s; }

@keyframes auieComponentSlide {
    0% { opacity: 0; transform: translateY(8px) scale(0.8); }
    20% { opacity: 0.8; transform: translateY(0) scale(1); }
    80% { opacity: 0.8; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-4px) scale(0.95); }
}
@keyframes auieAssemblySparkle {
    0% { opacity: 0; r: 0; }
    20% { opacity: 1; r: 2.5; }
    40% { opacity: 0.8; r: 1.5; }
    60%, 100% { opacity: 0; r: 0; }
}
@keyframes auieStyleWave {
    0% { stroke-dashoffset: 28; opacity: 0.2; }
    50% { opacity: 0.5; }
    100% { stroke-dashoffset: 0; opacity: 0.2; }
}
@keyframes auieLayoutGrid {
    0% { opacity: 0; stroke-dashoffset: 20; }
    30% { opacity: 0.3; stroke-dashoffset: 0; }
    70% { opacity: 0.3; }
    100% { opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   12. AGENT ECONOMY — Marketplace with value flow between agents
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--agent-economy {
    --icon-bg: linear-gradient(145deg, rgba(52,211,153,0.12), rgba(16,185,129,0.06));
    --icon-border: rgba(52,211,153,0.22);
    --icon-glow-color: rgba(52,211,153,0.25);
}
/* Economy node — interconnected agent circles */
.icon-ae .economy-node {
    fill: oklch(65% 0.18 160);
    animation: aeNodePulse 2.2s ease-in-out infinite;
}
.icon-ae .economy-node:nth-child(2) { animation-delay: -0.4s; }
.icon-ae .economy-node:nth-child(3) { animation-delay: -0.8s; }
.icon-ae .economy-node:nth-child(4) { animation-delay: -1.2s; }
.icon-ae .economy-node:nth-child(5) { animation-delay: -1.6s; }
/* Value stream — flowing connections between nodes showing value */
.icon-ae .value-stream {
    fill: none;
    stroke: oklch(72% 0.2 160);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.4;
    animation: aeValueStream 2.5s linear infinite;
}
.icon-ae .value-stream:nth-child(n+7) { animation-delay: -0.6s; }
.icon-ae .value-stream:nth-child(n+8) { animation-delay: -1.2s; }
.icon-ae .value-stream:nth-child(n+9) { animation-delay: -1.8s; }
/* Market ring — rotating outer economy ring */
.icon-ae .market-ring {
    fill: none;
    stroke: oklch(58% 0.1 160);
    stroke-width: 0.8;
    stroke-dasharray: 5 3 2 3;
    opacity: 0.3;
    transform-origin: 25px 25px;
    animation: aeMarketRing 10s linear infinite;
}
/* Trade particle — particles exchanging between nodes */
.icon-ae .trade-particle {
    fill: oklch(80% 0.24 155);
    filter: url(#ae-glow);
    opacity: 0;
    animation: aeTradeParticle 3s ease-in-out infinite;
}
.icon-ae .trade-particle:nth-child(n+12) { animation-delay: -1s; }
.icon-ae .trade-particle:nth-child(n+13) { animation-delay: -2s; }

@keyframes aeNodePulse {
    0%, 100% { r: 3.5; opacity: 0.65; }
    50% { r: 4.5; opacity: 1; }
}
@keyframes aeValueStream {
    0% { stroke-dashoffset: 12; opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { stroke-dashoffset: 0; opacity: 0.3; }
}
@keyframes aeMarketRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes aeTradeParticle {
    0% { opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   13. PROMPTMASTERZ — Prompt crafting with text block arrangement
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--promptmaster {
    --icon-bg: linear-gradient(145deg, rgba(167,139,250,0.12), rgba(139,92,246,0.06));
    --icon-border: rgba(167,139,250,0.22);
    --icon-glow-color: rgba(167,139,250,0.25);
}
/* Text block — floating text blocks being arranged */
.icon-pm .text-block {
    fill: rgba(167,139,250,0.08);
    stroke: oklch(62% 0.16 280);
    stroke-width: 1.2;
    rx: 2;
    opacity: 0;
    animation: pmTextBlockArrange 4s ease-in-out infinite;
}
.icon-pm .text-block:nth-child(2) { animation-delay: -0.8s; }
.icon-pm .text-block:nth-child(3) { animation-delay: -1.6s; }
.icon-pm .text-block:nth-child(4) { animation-delay: -2.4s; }
/* Craft wand — magic wand effect orchestrating the arrangement */
.icon-pm .craft-wand {
    stroke: oklch(70% 0.2 280);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    transform-origin: 35px 15px;
    animation: pmCraftWandWave 4s ease-in-out infinite;
}
.icon-pm .craft-wand-tip {
    fill: oklch(80% 0.24 280);
    filter: url(#pm-glow);
    animation: pmWandTipGlow 2s ease-in-out infinite;
}
/* Optimize sparkle — sparkles appearing at optimization points */
.icon-pm .optimize-sparkle {
    fill: oklch(85% 0.22 280);
    filter: url(#pm-glow);
    opacity: 0;
    animation: pmOptimizeSparkle 3s ease-out infinite;
}
.icon-pm .optimize-sparkle:nth-child(n+8) { animation-delay: -0.6s; }
.icon-pm .optimize-sparkle:nth-child(n+9) { animation-delay: -1.2s; }
.icon-pm .optimize-sparkle:nth-child(n+10) { animation-delay: -1.8s; }
.icon-pm .optimize-sparkle:nth-child(n+11) { animation-delay: -2.4s; }
/* Prompt cursor — blinking cursor in prompt text */
.icon-pm .prompt-cursor {
    fill: oklch(75% 0.2 280);
    animation: pmPromptCursor 1.2s step-end infinite;
}

@keyframes pmTextBlockArrange {
    0% { opacity: 0; transform: translate(var(--pm-dx, 6px), var(--pm-dy, 4px)); }
    25% { opacity: 0.8; transform: translate(0, 0); }
    75% { opacity: 0.8; transform: translate(0, 0); }
    100% { opacity: 0; transform: translate(var(--pm-dx2, -3px), var(--pm-dy2, -2px)); }
}
@keyframes pmCraftWandWave {
    0%, 100% { transform: rotate(-5deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(-3deg); }
    75% { transform: rotate(8deg); }
}
@keyframes pmWandTipGlow {
    0%, 100% { r: 2; opacity: 0.7; }
    50% { r: 3; opacity: 1; }
}
@keyframes pmOptimizeSparkle {
    0% { opacity: 0; r: 0; }
    15% { opacity: 1; r: 2; }
    30% { opacity: 0.6; r: 1.2; }
    50%, 100% { opacity: 0; r: 0; }
}
@keyframes pmPromptCursor {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   14. THIRDEYE NEWS — Globe with news feeds and event visualization
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--thirdeye {
    --icon-bg: linear-gradient(145deg, rgba(99,102,241,0.12), rgba(79,70,229,0.06));
    --icon-border: rgba(99,102,241,0.22);
    --icon-glow-color: rgba(99,102,241,0.25);
}
/* Globe wireframe — spinning globe outline */
.icon-te .globe-wire {
    fill: none;
    stroke: oklch(58% 0.14 250);
    stroke-width: 1.5;
}
.icon-te .globe-meridian {
    fill: none;
    stroke: oklch(52% 0.1 250);
    stroke-width: 0.8;
    opacity: 0.4;
    transform-origin: 25px 25px;
    animation: teGlobeRotate 8s linear infinite;
}
.icon-te .globe-meridian:nth-child(2) { animation-delay: -2.6s; }
.icon-te .globe-meridian:nth-child(3) { animation-delay: -5.3s; }
/* Feed beam — data feeds radiating outward from globe */
.icon-te .feed-beam {
    stroke: oklch(72% 0.2 250);
    stroke-width: 0.8;
    fill: none;
    stroke-dasharray: 2 4;
    opacity: 0;
    animation: teFeedBeam 3s ease-out infinite;
}
.icon-te .feed-beam:nth-child(n+5) { animation-delay: -0.6s; }
.icon-te .feed-beam:nth-child(n+6) { animation-delay: -1.2s; }
.icon-te .feed-beam:nth-child(n+7) { animation-delay: -1.8s; }
.icon-te .feed-beam:nth-child(n+8) { animation-delay: -2.4s; }
/* Event dot — news events popping at globe locations */
.icon-te .event-dot {
    fill: oklch(80% 0.24 250);
    filter: url(#te-glow);
    opacity: 0;
    animation: teEventDot 4s ease-out infinite;
}
.icon-te .event-dot:nth-child(n+10) { animation-delay: -1s; }
.icon-te .event-dot:nth-child(n+11) { animation-delay: -2s; }
.icon-te .event-dot:nth-child(n+12) { animation-delay: -3s; }
/* Orbit ring — satellite ring around globe */
.icon-te .orbit-ring {
    fill: none;
    stroke: oklch(55% 0.08 250);
    stroke-width: 0.5;
    stroke-dasharray: 2 3;
    transform-origin: 25px 25px;
    animation: teOrbitRing 6s linear infinite;
}

@keyframes teGlobeRotate {
    0% { transform: rotateY(0deg); opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { transform: rotateY(360deg); opacity: 0.3; }
}
@keyframes teFeedBeam {
    0%, 20% { opacity: 0; }
    30% { opacity: 0.7; }
    60% { opacity: 0.4; }
    100% { opacity: 0; }
}
@keyframes teEventDot {
    0%, 20% { opacity: 0; r: 0; }
    30% { opacity: 1; r: 3; }
    50% { opacity: 0.8; r: 2; }
    80%, 100% { opacity: 0; r: 0; }
}
@keyframes teOrbitRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════
   15. ZAGEX — Processing engine with gears and data pipeline
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--zagex {
    --icon-bg: linear-gradient(145deg, rgba(20,184,166,0.12), rgba(13,148,136,0.06));
    --icon-border: rgba(20,184,166,0.22);
    --icon-glow-color: rgba(20,184,166,0.25);
}
/* Engine gear — spinning gears at different speeds */
.icon-zg .engine-gear {
    fill: none;
    stroke: oklch(58% 0.14 175);
    stroke-width: 1.5;
    animation: zgGearSpin 6s linear infinite;
}
.icon-zg .engine-gear--sm {
    stroke-width: 1.2;
    animation: zgGearSpinReverse 4s linear infinite;
}
.icon-zg .engine-gear--xs {
    stroke-width: 1;
    animation: zgGearSpin 3s linear infinite;
}
/* Pipeline track — processing pipeline visualization */
.icon-zg .pipeline-track {
    fill: none;
    stroke: oklch(52% 0.1 175);
    stroke-width: 1.8;
    stroke-linecap: round;
}
/* Data flow — particles flowing through pipeline */
.icon-zg .data-flow {
    fill: oklch(78% 0.22 175);
    filter: url(#zg-glow);
    opacity: 0;
    animation: zgDataFlow 2.5s ease-in-out infinite;
}
.icon-zg .data-flow:nth-child(n+7) { animation-delay: -0.6s; }
.icon-zg .data-flow:nth-child(n+8) { animation-delay: -1.2s; }
.icon-zg .data-flow:nth-child(n+9) { animation-delay: -1.8s; }
/* Process node — nodes lighting up as data passes */
.icon-zg .process-node {
    fill: oklch(65% 0.16 175);
    opacity: 0.4;
    animation: zgProcessNode 3s ease-in-out infinite;
}
.icon-zg .process-node:nth-child(n+11) { animation-delay: -0.8s; }
.icon-zg .process-node:nth-child(n+12) { animation-delay: -1.6s; }
.icon-zg .process-node:nth-child(n+13) { animation-delay: -2.4s; }

@keyframes zgGearSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes zgGearSpinReverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
@keyframes zgDataFlow {
    0% { opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes zgProcessNode {
    0%, 100% { r: 3; opacity: 0.3; fill: oklch(60% 0.12 175); }
    40% { r: 4; opacity: 0.9; fill: oklch(72% 0.2 175); }
    60% { r: 3.5; opacity: 0.7; fill: oklch(68% 0.18 175); }
}


/* ═══════════════════════════════════════════════════════════════
   16. SECURITY SHIELD — Shield with radar sweep and threat detection
   ═══════════════════════════════════════════════════════════════ */
.chaoz-icon--security {
    --icon-bg: linear-gradient(145deg, rgba(220,38,38,0.12), rgba(185,28,28,0.06));
    --icon-border: rgba(220,38,38,0.22);
    --icon-glow-color: rgba(220,38,38,0.25);
}
/* Shield body — main shield outline */
.icon-sec .shield-body {
    fill: rgba(220,38,38,0.04);
    stroke: oklch(55% 0.16 15);
    stroke-width: 2;
    stroke-linejoin: round;
}
/* Scan sweep — rotating radar sweep inside shield */
.icon-sec .scan-sweep {
    fill: oklch(62% 0.18 15);
    opacity: 0.15;
    transform-origin: 25px 22px;
    animation: secScanSweep 3s linear infinite;
}
/* Lock core — pulsing lock at center */
.icon-sec .lock-core {
    fill: oklch(65% 0.2 15);
    filter: url(#sec-glow);
    animation: secLockPulse 2s ease-in-out infinite;
}
.icon-sec .lock-shackle {
    fill: none;
    stroke: oklch(60% 0.16 15);
    stroke-width: 1.5;
    stroke-linecap: round;
}
/* Threat dot — threats detected and caught by shield */
.icon-sec .threat-dot {
    fill: oklch(72% 0.22 15);
    opacity: 0;
    animation: secThreatDot 4s ease-out infinite;
}
.icon-sec .threat-dot:nth-child(n+8) { animation-delay: -1s; }
.icon-sec .threat-dot:nth-child(n+9) { animation-delay: -2s; }
.icon-sec .threat-dot:nth-child(n+10) { animation-delay: -3s; }
/* Defense ring — expanding ring on threat neutralization */
.icon-sec .defense-ring {
    fill: none;
    stroke: oklch(68% 0.18 15);
    stroke-width: 0.8;
    opacity: 0;
    animation: secDefenseRing 4s ease-out infinite;
}
.icon-sec .defense-ring:nth-child(n+12) { animation-delay: -1.3s; }
.icon-sec .defense-ring:nth-child(n+13) { animation-delay: -2.6s; }

@keyframes secScanSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes secLockPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}
@keyframes secThreatDot {
    0% { opacity: 0; r: 0; }
    10% { opacity: 0.9; r: 2.5; }
    30% { opacity: 0.7; r: 2; }
    50% { opacity: 0.3; r: 1; }
    70%, 100% { opacity: 0; r: 0; }
}
@keyframes secDefenseRing {
    0%, 45% { r: 4; opacity: 0; }
    50% { opacity: 0.6; r: 4; }
    100% { opacity: 0; r: 20; stroke-width: 0.1; }
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .chaoz-icon {
    --icon-bg: linear-gradient(145deg, rgba(99,102,241,0.08), rgba(139,92,246,0.04));
    --icon-border: rgba(99,102,241,0.15);
    --icon-glow-color: rgba(99,102,241,0.12);
}
[data-theme="light"] .chaoz-icon::before {
    background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
}
[data-theme="light"] .chaoz-icon--memory-spine { --icon-bg: linear-gradient(145deg, rgba(99,102,241,0.1), rgba(67,56,202,0.05)); }
[data-theme="light"] .chaoz-icon--ml-router { --icon-bg: linear-gradient(145deg, rgba(139,92,246,0.1), rgba(124,58,237,0.05)); }
[data-theme="light"] .chaoz-icon--helixhyper { --icon-bg: linear-gradient(145deg, rgba(6,182,212,0.08), rgba(20,184,166,0.04)); }
[data-theme="light"] .chaoz-icon--zearch { --icon-bg: linear-gradient(145deg, rgba(59,130,246,0.08), rgba(37,99,235,0.04)); }
[data-theme="light"] .chaoz-icon--agentz { --icon-bg: linear-gradient(145deg, rgba(16,185,129,0.08), rgba(5,150,105,0.04)); }
[data-theme="light"] .chaoz-icon--council { --icon-bg: linear-gradient(145deg, rgba(245,158,11,0.08), rgba(217,119,6,0.04)); }
[data-theme="light"] .chaoz-icon--zemail { --icon-bg: linear-gradient(145deg, rgba(239,68,68,0.06), rgba(220,38,38,0.03)); }
[data-theme="light"] .chaoz-icon--probridgez { --icon-bg: linear-gradient(145deg, rgba(234,179,8,0.06), rgba(202,138,4,0.03)); }
[data-theme="light"] .chaoz-icon--gitchaoz { --icon-bg: linear-gradient(145deg, rgba(251,146,60,0.06), rgba(234,88,12,0.03)); }
[data-theme="light"] .chaoz-icon--chaozhero { --icon-bg: linear-gradient(145deg, rgba(99,102,241,0.06), rgba(79,70,229,0.03)); }
[data-theme="light"] .icon-ch .screen { fill: oklch(96% 0.01 265); stroke: oklch(75% 0.04 265); }
[data-theme="light"] .icon-ch .title-bar, [data-theme="light"] .icon-ch .title-bar-bottom { fill: oklch(90% 0.02 265); }
[data-theme="light"] .icon-ch .cmd-text { fill: oklch(30% 0.08 265); }
[data-theme="light"] .icon-ch .output-text { fill: oklch(50% 0.04 265); }
/* New icons — light theme */
[data-theme="light"] .chaoz-icon--auie { --icon-bg: linear-gradient(145deg, rgba(236,72,153,0.08), rgba(219,39,119,0.04)); }
[data-theme="light"] .chaoz-icon--agent-economy { --icon-bg: linear-gradient(145deg, rgba(52,211,153,0.08), rgba(16,185,129,0.04)); }
[data-theme="light"] .chaoz-icon--promptmaster { --icon-bg: linear-gradient(145deg, rgba(167,139,250,0.08), rgba(139,92,246,0.04)); }
[data-theme="light"] .chaoz-icon--thirdeye { --icon-bg: linear-gradient(145deg, rgba(99,102,241,0.08), rgba(79,70,229,0.04)); }
[data-theme="light"] .chaoz-icon--zagex { --icon-bg: linear-gradient(145deg, rgba(20,184,166,0.08), rgba(13,148,136,0.04)); }
[data-theme="light"] .chaoz-icon--security { --icon-bg: linear-gradient(145deg, rgba(220,38,38,0.06), rgba(185,28,28,0.03)); }


/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .chaoz-icon,
    .chaoz-icon::before,
    .chaoz-icon::after,
    .chaoz-icon svg * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}