/* Namespaced to the interaction view; compiler/control layout stays intact. */
.interaction-panel[hidden] { display:none !important; }
.interaction-panel { position:fixed; right:16px; bottom:16px; width:min(660px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; z-index:1000; padding:16px; background:rgba(3,13,17,.985); border:1px solid var(--cyan); box-shadow:0 0 32px rgba(0,0,0,.75); color:var(--text); font-size:13px; line-height:1.45; }
.interaction-head { display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:-16px; z-index:2; background:#030d11; padding:8px 0; }
.interaction-head h2 { color:var(--amber); font-size:14px; letter-spacing:.08em; margin:0; }
.interaction-head button { margin:0; white-space:nowrap; }
.interaction-kind { display:inline-block; border:1px solid var(--line); padding:5px 8px; color:var(--cyan); margin:8px 0; }
.interaction-panel h3 { margin:5px 0 12px; font-size:17px; font-weight:normal; color:white; }
.interaction-canvas { overflow-x:auto; border:1px solid var(--line); background:radial-gradient(ellipse at center,#10242b,#030b0f); }
.interaction-canvas svg { display:block; width:100%; min-width:384px; height:auto; }
.interaction-panel .v-label { font:18px 'Courier New',monospace; fill:#e5f5f5; }
.interaction-panel .v-small { font-size:16px; }
.interaction-panel .v-muted { fill:#b1c5c8; font-size:15px; }
.interaction-panel .v-accent { fill:var(--amber); }
.interaction-panel svg path { fill:none; stroke-width:2.4; vector-effect:non-scaling-stroke; }
.interaction-panel [data-draw] { stroke-dasharray:none; stroke-dashoffset:0; }
.interaction-panel .v-charged { stroke:#86ffb0; }
.interaction-panel .v-alt { stroke:#e6b35a; }
.interaction-panel .v-radiation { stroke:#79f1ff; marker-end:var(--v-arrow); }
.interaction-panel .v-guide { stroke:#79f1ff; stroke-dasharray:6 5; }
.interaction-panel .v-vector { stroke:#86ffb0; marker-end:var(--v-arrow); }
.interaction-panel .v-missing { stroke:#e6b35a; stroke-dasharray:6 4; marker-end:var(--v-arrow); }
.interaction-panel .v-diagram { stroke:#d8edf0; marker-end:var(--v-arrow); }
.interaction-panel .v-exchange { stroke:#e6b35a; stroke-dasharray:5 5; }
.interaction-panel .v-amplitude { stroke:#79f1ff; }
.interaction-panel .v-amplitude.v-alt { stroke:#e6b35a; }
.interaction-panel .v-flux { stroke:#e6b35a; stroke-width:3; }
.interaction-panel .v-loop { stroke:#86ffb0; }
.interaction-panel .v-level { stroke:#d8edf0; }
.interaction-panel .v-field { stroke:#79f1ff; opacity:.65; }
.interaction-panel .v-evanescent { stroke:#e6b35a; }
.interaction-panel .v-wavefront { stroke:#79f1ff; }
.interaction-panel .v-vertex,.interaction-panel .v-hit { fill:#e6b35a; }
.interaction-panel .v-region,.interaction-panel .v-inferred-box { fill:#07161b; stroke:#527f89; stroke-width:1; }
.interaction-panel .v-inferred-box { stroke-dasharray:4 3; }
.interaction-panel .v-tracker { fill:rgba(134,255,176,.04); stroke:#528267; }
.interaction-panel .v-ecal { fill:rgba(121,241,255,.08); stroke:#79f1ff; }
.interaction-panel .v-medium { fill:rgba(121,241,255,.025); stroke:#42636b; }
.interaction-panel .v-cloud { fill:rgba(121,241,255,.045); stroke:#79a2aa; stroke-dasharray:4 3; }
.interaction-panel .v-barrier { fill:rgba(230,179,90,.12); stroke:#e6b35a; }
.interaction-panel .v-probability { fill:#79f1ff; }
.interaction-panel .v-probability.v-dim { opacity:.45; }
.interaction-panel .v-deposit rect { fill:#e6b35a; fill-opacity:.35; stroke:#e6b35a; }
.interaction-panel .v-deposit path,.interaction-panel .v-shower { stroke:#e6b35a; }
.interaction-stages { padding-left:23px; color:#d8edf0; }
.interaction-stages li { margin:3px 0; }
.interaction-legend { color:#b1c5c8; border-top:1px solid var(--line); padding-top:8px; }
.interaction-caution { border-left:2px solid var(--amber); padding-left:10px; color:#e3cfa4; }
.interaction-foot { display:flex; align-items:center; gap:14px; }
.interaction-foot button { margin:0; }
.interaction-foot p { color:#b1c5c8; font-size:12px; }
@media(max-width:480px) { .interaction-panel { right:8px; bottom:8px; width:calc(100% - 16px); max-height:calc(100dvh - 16px); padding:12px; } .interaction-head { top:-12px; } .interaction-head h2 { font-size:12px; } .interaction-panel h3 { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .interaction-panel *, .interaction-panel *::before, .interaction-panel *::after { animation:none !important; transition:none !important; } }
/* Marker geometry must override the generic unfilled SVG-path rule. */
.interaction-panel marker path { fill:context-stroke; stroke:none; }

.interaction-panel .v-source { stroke:#86ffb0; marker-end:var(--v-arrow); }
.interaction-panel .v-cone { stroke:#79f1ff; }
/* The existing EQ banks must scroll inside their panel rather than widening the
   entire single-column page at small sizes. No control or compiler changes. */
.grid > .panel { min-width:0; }
@media(max-width:900px) { .grid { grid-template-columns:minmax(0,1fr); } }

.interaction-pan-hint { display:none; color:#b1c5c8; font-size:12px; }
@media(max-width:480px) { .interaction-pan-hint { display:block; } }