/* procomp.lt/partpicker — the chassis view.
 *
 * One memorable element: a side view of the case that fills up as parts are
 * chosen. Everything else on the page stays plain Tailwind.
 */
.pp-rig {
    --pp-chassis: #0f172a;
    --pp-panel: #1e293b;
    --pp-line: #334155;
    --pp-empty: #475569;
    --pp-part: #cbd5e1;
    --pp-led: #22c55e;
    --pp-warn: #f59e0b;
    --pp-error: #ef4444;
}

.pp-rig svg { display: block; width: 100%; height: auto; }

/* Empty places are drawn as dashed outlines inviting a click. */
.pp-zone { cursor: pointer; outline: none; }
.pp-zone .pp-slot {
    fill: transparent;
    stroke: var(--pp-empty);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    transition: stroke .2s, fill .2s;
}
.pp-zone .pp-plus { fill: var(--pp-empty); font: 600 11px system-ui, sans-serif; transition: fill .2s; }
.pp-zone:hover .pp-slot,
.pp-zone:focus-visible .pp-slot { stroke: var(--pp-led); fill: rgba(34, 197, 94, .08); }
.pp-zone:hover .pp-plus,
.pp-zone:focus-visible .pp-plus { fill: var(--pp-led); }
.pp-zone:focus-visible .pp-slot { stroke-width: 2.5; }
.pp-zone.is-on:hover .pp-body,
.pp-zone.is-on:focus-visible .pp-body { stroke: var(--pp-led); stroke-width: 2.5; }

/* A chosen part: solid body, hidden placeholder. */
.pp-part { opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.pp-zone.is-on .pp-part { opacity: 1; }
.pp-zone.is-on .pp-slot,
.pp-zone.is-on .pp-plus { opacity: 0; }
.pp-body { fill: var(--pp-panel); stroke: var(--pp-part); stroke-width: 1.5; }
.pp-detail { fill: none; stroke: var(--pp-line); stroke-width: 1; }
.pp-chip { fill: #64748b; }
.pp-lit { fill: var(--pp-led); opacity: .35; transition: opacity .3s; }
.pp-rig.is-live .pp-lit { opacity: 1; }

/* Problems show on the part itself. */
.pp-zone.is-error .pp-body,
.pp-zone.is-error .pp-slot { stroke: var(--pp-error); stroke-width: 2.5; }
.pp-zone.is-warning .pp-body { stroke: var(--pp-warn); stroke-width: 2; }

/* The part a person just picked snaps into place. */
@keyframes pp-snap {
    0% { opacity: 0; transform: translateY(-14px) scale(.96); }
    70% { opacity: 1; transform: translateY(2px) scale(1.01); }
    100% { opacity: 1; transform: none; }
}
.pp-zone.is-new .pp-part {
    animation: pp-snap .42s cubic-bezier(.2, .9, .3, 1.2) both;
    animation-delay: var(--pp-delay, 0s);
}

/* Fans turn once the machine is complete and compatible. */
.pp-fan { transform-box: fill-box; transform-origin: center; }
@keyframes pp-spin { to { transform: rotate(360deg); } }
.pp-rig.is-live .pp-fan { animation: pp-spin 1.1s linear infinite; }

/* Power-on moment: LEDs come on in sequence. */
@keyframes pp-boot { 0% { opacity: .2; } 40% { opacity: 1; } 55% { opacity: .5; } 100% { opacity: 1; } }
.pp-rig.is-booting .pp-lit { animation: pp-boot .9s ease-out both; }
.pp-rig.is-booting .pp-lit:nth-of-type(2n) { animation-delay: .12s; }
.pp-rig.is-booting .pp-lit:nth-of-type(3n) { animation-delay: .24s; }

.pp-power-led { fill: #334155; transition: fill .3s; }
.pp-rig.is-live .pp-power-led { fill: var(--pp-led); filter: drop-shadow(0 0 3px var(--pp-led)); }

/* Glass side panel once a case is chosen. */
.pp-glass { fill: rgba(148, 163, 184, .06); stroke: #64748b; stroke-width: 2; }
.pp-rig.has-case .pp-glass { fill: rgba(56, 189, 248, .05); stroke: var(--pp-part); }

/* Power meter under the rig. */
.pp-meter { height: 10px; border-radius: 5px; background: #e2e8f0; position: relative; overflow: visible; }
.pp-meter-fill { height: 100%; border-radius: 5px; background: #22c55e; transition: width .5s ease, background-color .3s; }
.pp-meter-fill.is-warning { background: #f59e0b; }
.pp-meter-fill.is-error { background: #ef4444; }
.pp-meter-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #0f172a; border-radius: 1px; }

/* Progress: one segment per required part. */
.pp-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.pp-step { height: 6px; border-radius: 3px; background: #e2e8f0; transition: background-color .3s; }
.pp-step.is-on { background: #22c55e; }
.pp-step.is-error { background: #ef4444; }
.pp-step.is-warning { background: #f59e0b; }

/* "Ask AI": the one place the page uses a second colour. */
.pp-ai-button { background: linear-gradient(90deg, #7c3aed, #16a34a); }
.pp-ai-button:hover { filter: brightness(1.08); }
@keyframes pp-wand { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 75% { transform: rotate(14deg); } }
.pp-wand-busy { animation: pp-wand .7s ease-in-out infinite; transform-origin: 20% 80%; }

@media (prefers-reduced-motion: reduce) {
    .pp-wand-busy { animation: none; }
    .pp-zone.is-new .pp-part,
    .pp-rig.is-live .pp-fan,
    .pp-rig.is-booting .pp-lit { animation: none; }
    .pp-meter-fill, .pp-step, .pp-zone .pp-slot { transition: none; }
}

/* Share buttons: brand colours, 36 px round targets. */
.pp-share { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
            border-radius: 9999px; color: #fff; transition: filter .15s; }
.pp-share:hover, .pp-share:focus-visible { filter: brightness(1.1); }
.pp-share svg { width: 18px; height: 18px; }
.pp-share-facebook { background: #1877f2; }
.pp-share-whatsapp { background: #25d366; }
.pp-share-telegram { background: #229ed9; }
.pp-share-viber { background: #7360f2; }
.pp-share-email { background: #6b7280; }