/* Run bar + dock: [Reset] [Run | Execution FAST]  /  [Pause or Resume | status | Stop], with stat tiles above (phones).
 * Markup comes from the Run component (class .fxrb). State comes from /fx-run.js. Light and dark themes. */
html body:not(#_) .fxrb,
html body:not(#_) .fxrb__dock {
    --fx-bg: #f4f7fc; --fx-tile: #ffffff; --fx-panel: #ffffff; --fx-line: #d3dbe9; --fx-ink: #0e1a33; --fx-sub: #5d6b86;
    --fx-run: #0b63f6; --fx-run-2: #2a82ff; --fx-pause: #ffa51f; --fx-pause-2: #ffb84d; --fx-resume: #079e86; --fx-resume-2: #12bfa3;
    --fx-stop: #d6334a; --fx-stop-2: #ee4a60; --fx-on: #13b8a4;
}
html body:not(#_).theme--dark .fxrb,
html body:not(#_).theme--dark .fxrb__dock {
    --fx-bg: #04060b; --fx-tile: #04060b; --fx-panel: #04060b; --fx-line: #1c2434; --fx-ink: #ffffff; --fx-sub: #9ba8c0;
}

/* ---------- dock (phones) ---------- */
html body:not(#_) .fxrb__dock {
    background: var(--fx-bg) !important; border-top: 1px solid var(--fx-line) !important; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px; align-items: stretch !important; justify-content: flex-start !important; box-sizing: border-box;
}
html body:not(#_) .fxrb__stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: 100%; }
html body:not(#_) .fxrb__tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 7px 2px 6px;
    background: var(--fx-tile); border: 1px solid var(--fx-line); border-radius: 10px; text-align: center;
}
html body:not(#_) .fxrb__tile-t { font-size: 10.5px; font-weight: 700; line-height: 1; color: var(--fx-ink); }
html body:not(#_) .fxrb__tile-v { font-size: 12.5px; font-weight: 700; line-height: 1.1; color: var(--fx-ink); white-space: nowrap; font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html body:not(#_) .fxrb__actions { display: flex !important; gap: 8px; align-items: stretch; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; padding: 0 !important; }
html body:not(#_) .fxrb__reset {
    flex: 0 0 21%; min-width: 64px; height: 52px; border-radius: 10px; cursor: pointer; font: 700 13px/1 inherit; color: var(--fx-ink);
    background: var(--fx-tile); border: 1px solid var(--fx-line); -webkit-tap-highlight-color: transparent; transition: filter .15s, transform .1s;
}
html body:not(#_) .fxrb__reset:active:not(:disabled) { transform: scale(.97); }
html body:not(#_) .fxrb__reset:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- the bar itself (phones + desktop toolbar) ---------- */
html body:not(#_) .fxrb {
    display: flex !important; align-items: stretch; flex: 1 1 auto; min-width: 0; width: 100%; height: 52px !important; padding: 0 !important; margin: 0;
    border: 1px solid var(--fx-line); border-radius: 10px; overflow: hidden; background: var(--fx-panel); box-sizing: border-box;
}
html body:not(#_) .controls__animation.fxrb { width: auto !important; height: 52px !important; border-radius: 10px !important; flex: 1 1 auto; }
html body:not(#_) .fxrb .run__button_wrapper { flex: 1 1 0; height: 100% !important; align-items: stretch; min-width: 0; }

/* every button inside the bar */
html body:not(#_) .fxrb #db-animation__run-button,
html body:not(#_) .fxrb__btn {
    display: flex !important; align-items: center; justify-content: center; gap: 8px; height: 100% !important; min-height: 0 !important; margin: 0; padding: 0 10px !important;
    border: 0 !important; border-radius: 0 !important; cursor: pointer; color: #fff !important; font: 700 15px/1 inherit; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent; transition: filter .15s, transform .1s; box-shadow: none !important; text-transform: none;
}
html body:not(#_) .fxrb #db-animation__run-button {
    flex: 1 1 0; width: auto !important; min-width: 0; font-size: 19px;
    background: linear-gradient(180deg, var(--fx-run-2), var(--fx-run)) !important;
}
html body:not(#_) .fxrb #db-animation__run-button .dc-btn__icon { display: flex; margin: 0; }
html body:not(#_) .fxrb #db-animation__run-button svg { width: 24px; height: 24px; fill: #fff !important; }
html body:not(#_) .fxrb #db-animation__run-button svg path { fill: #fff !important; }
html body:not(#_) .fxrb #db-animation__run-button .dc-text, html body:not(#_) .fxrb #db-animation__run-button span { color: #fff !important; font-weight: 700; font-size: 19px; }
html body:not(#_) .fxrb #db-animation__run-button:disabled { filter: saturate(.55) brightness(1.15); opacity: .55; cursor: not-allowed; }
html body:not(#_) .fxrb #db-animation__run-button:hover:not(:disabled) { filter: brightness(1.06); }

html body:not(#_) .fxrb__btn { flex: 0 0 31%; min-width: 0; }
html body:not(#_) .fxrb__btn .fxrb__ico { width: 20px; height: 20px; flex: none; }
html body:not(#_) .fxrb__btn--pause { background: linear-gradient(180deg, var(--fx-pause-2), var(--fx-pause)) !important; }
html body:not(#_) .fxrb__btn--resume { background: linear-gradient(180deg, var(--fx-resume-2), var(--fx-resume)) !important; }
html body:not(#_) .fxrb__btn--stop,
html body:not(#_) .fxrb #db-animation__stop-button { background: linear-gradient(180deg, var(--fx-stop-2), var(--fx-stop)) !important; }
html body:not(#_) .fxrb__btn:hover:not(:disabled) { filter: brightness(1.06); }
html body:not(#_) .fxrb__btn:active:not(:disabled) { transform: scale(.98); }
html body:not(#_) .fxrb__btn:disabled { opacity: .5; cursor: not-allowed; }
html body:not(#_) .fxrb__btn:focus-visible, html body:not(#_) .fxrb__switch:focus-visible, html body:not(#_) .fxrb__reset:focus-visible, html body:not(#_) .fxrb #db-animation__run-button:focus-visible { outline: 2px solid #38d0ff; outline-offset: -3px; }

/* middle: status text + progress dots */
html body:not(#_) .fxrb__status {
    flex: 1 1 0; min-width: 0; height: 100% !important; margin: 0; padding: 7px 10px 8px !important; border: 0 !important; border-radius: 0 !important; background: var(--fx-panel) !important;
    display: flex; flex-direction: column; justify-content: center; gap: 6px; box-sizing: border-box;
}
html body:not(#_) .fxrb__status .animation__text { margin: 0 !important; font-size: 12px; font-weight: 700; line-height: 1.15; color: var(--fx-ink) !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body:not(#_) .fxrb__status .animation__progress-line { background: var(--fx-line); }
html body:not(#_) .fxrb--paused .fxrb__status .animation__progress-bar { background: var(--fx-resume-2); }
html body:not(#_) .fxrb--paused .fxrb__status .animation__progress .circular-wrapper .dynamic-circle { animation: none; opacity: 0; }
html body:not(#_) .fxrb__status .animation__progress .circular-wrapper .static-circle { background: var(--fx-sub); }

/* idle: Execution FAST + switch */
html body:not(#_) .fxrb__exec { flex: 0 0 42%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px; background: var(--fx-panel); }
html body:not(#_) .fxrb__exec-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html body:not(#_) .fxrb__exec-txt small { font-size: 9px; white-space: nowrap; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fx-sub); line-height: 1; }
html body:not(#_) .fxrb__exec-txt b { font-size: 15px; font-weight: 800; line-height: 1; color: var(--fx-ink); }
html body:not(#_) .fxrb__switch {
    position: relative; flex: none; width: 46px; height: 26px; padding: 0; border-radius: 999px; cursor: pointer; border: 1px solid var(--fx-line);
    background: var(--fx-line); transition: background .2s, border-color .2s; -webkit-tap-highlight-color: transparent;
}
html body:not(#_) .fxrb__switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .2s; }
html body:not(#_) .fxrb__switch.is-on { background: var(--fx-on); border-color: var(--fx-on); }
html body:not(#_) .fxrb__switch.is-on i { transform: translateX(20px); }

/* ---------- phones: the dock replaces the in-drawer stats + Reset, so don't show them twice ---------- */
html body:not(#_) .run-panel__container--mobile .run-panel__stat,
html body:not(#_) .run-panel__container--mobile .run-panel__clear-button { display: none !important; }

/* keep the floating Risk / AI buttons clear of the taller dock */
@media (max-width: 600px) {
    html body:not(#_) .aisc__fab { bottom: calc(8rem + 68px) !important; }
    html body:not(#_) .risk-disclaimer-btn { bottom: calc(8rem + 68px) !important; }
}

/* ---------- desktop toolbar ---------- */
html body:not(#_) .toolbar__animation.fxrb { width: 35rem !important; }

@media (max-width: 360px) {
    html body:not(#_) .fxrb__tile-v { font-size: 11px; }
    html body:not(#_) .fxrb__btn { font-size: 13px; gap: 5px; }
    html body:not(#_) .fxrb #db-animation__run-button, html body:not(#_) .fxrb #db-animation__run-button .dc-text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html body:not(#_) .fxrb *, html body:not(#_) .fxrb__dock * { transition: none !important; } }