/* Live 54-sticker graph visualization for Zero-Training AI Rubik solver */
.rubik-graph-anchor{border-top:1px solid #344252;padding:0;background:#0b1118}
.rubik-graph-widget{background:linear-gradient(180deg,#0d151f,#080d13);color:#dceaf6;font:11px/14px Arial,Helvetica,sans-serif;padding-bottom:7px}
.rubik-graph-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px 5px;border-bottom:1px solid #273646}
.rubik-graph-header strong{display:block;color:#7ad0ff;font-size:11px;letter-spacing:.35px;line-height:13px}
.rubik-graph-header span{display:block;color:#8199ad;font-size:9px;line-height:11px;margin-top:1px}
.rubik-graph-toggle{white-space:nowrap;color:#d7e6f2;font-weight:700;font-size:10px;cursor:pointer;user-select:none}
.rubik-graph-toggle input{vertical-align:-2px;margin:0 4px 0 0;accent-color:#269ce9}
.rubik-graph-status{padding:4px 8px 2px;color:#a8c4da;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rubik-graph-canvas-wrap{height:190px;padding:0 5px;transition:height .2s ease,opacity .2s ease;overflow:hidden}
#rubik-live-graph{display:block;width:100%;height:190px;overflow:visible}
.rubik-graph-face-box{fill:#111c27;stroke:#30475d;stroke-width:1;transition:fill .15s ease,stroke .15s ease,filter .15s ease}
.rubik-graph-face-box.active{fill:#153b57;stroke:#7ad0ff;stroke-width:1.8;filter:url(#rubikNodeGlow)}
.rubik-graph-face-label{fill:#7890a5;font-size:9px;font-weight:700;pointer-events:none;transition:fill .15s ease,font-size .15s ease}
.rubik-graph-face-label.active{fill:#dff5ff;font-size:10px}
.rubik-graph-edge{stroke:#334757;stroke-width:1;opacity:.78}
.rubik-graph-bridge{stroke:#223441;stroke-width:.75;stroke-dasharray:2 2;opacity:.62}
.rubik-graph-node{transition:transform .28s cubic-bezier(.2,.85,.2,1);will-change:transform}
.rubik-graph-sticker-circle{stroke:#081018;stroke-width:1.5;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}
.rubik-graph-node-center .rubik-graph-sticker-circle{stroke:#b8cfe0;stroke-width:1.7}
.rubik-graph-node.just-moved .rubik-graph-sticker-circle{animation:rubik-node-pulse .42s ease-out}
@keyframes rubik-node-pulse{0%{stroke:#fff;stroke-width:3.2;filter:url(#rubikNodeGlow)}100%{stroke:#081018;stroke-width:1.5}}
.rubik-graph-widget.graph-solved #rubik-live-graph{filter:drop-shadow(0 0 5px rgba(65,210,120,.22))}
.rubik-graph-legend{border-top:1px solid #1d2a35;color:#7890a5;font-size:9px;line-height:12px;margin-top:1px;padding:5px 8px 1px}
.rubik-graph-widget.graph-hidden .rubik-graph-canvas-wrap{height:0;opacity:0;padding-top:0;padding-bottom:0}
.rubik-graph-widget.graph-hidden .rubik-graph-status,.rubik-graph-widget.graph-hidden .rubik-graph-legend{display:none}

/* Give the right-side decision area enough room for the live graph. */
@media (min-width:721px){
  .app-with-decision-panel{right:370px}
  .decision-engine-panel{width:370px}
}

/* On narrow screens the right panel naturally becomes a panel below the cube. */
@media (max-width:720px){
  .solver-application-shell .decision-engine-panel{top:auto!important;bottom:0!important;height:390px!important;left:0!important;right:0!important;width:auto!important}
  .solver-application-shell .app-with-decision-panel{right:0!important;bottom:390px!important}
  .rubik-graph-canvas-wrap,#rubik-live-graph{height:174px}
  .rubik-graph-header strong{font-size:10px}
}