/* Add a speed toolbar without resizing or restyling the existing effort picker. */
#zordexEffortTopRow{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
#zordexSpeedControl{position:relative;justify-self:start;display:flex;align-items:center}
#zordexSpeedMode{
  display:grid;place-items:center;width:34px;height:34px;padding:6px;
  border:0;border-radius:8px;background:transparent;color:#aab5be;cursor:pointer;
}
#zordexSpeedMode svg{display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;transition:fill .15s,color .15s}
#zordexSpeedMode:hover{background:#303a40;color:#e5f9f3}
#zordexSpeedMode[aria-pressed="true"]{color:#80e8c9}
#zordexSpeedMode[aria-pressed="true"] svg{fill:currentColor}
#zordexSpeedMode:focus-visible{outline:2px solid #80e8c9;outline-offset:2px}
#zordexSpeedMode:disabled{opacity:.5;cursor:wait}
#zordexSpeedCost{justify-self:end;color:#aab5be;font-size:10px;white-space:nowrap}
#zordexEffortTopRow.speed-active #zordexSpeedCost,#zordexEffortButton.speed-active{color:#80e8c9}
#zordexSpeedTooltip{
  position:absolute;z-index:50;left:0;bottom:calc(100% + 8px);box-sizing:border-box;
  width:276px;max-width:calc(100vw - 48px);padding:12px 14px;border:1px solid #48565e;border-radius:10px;
  background:#11191e;color:#c6d2d9;box-shadow:0 10px 30px #0007;
  font-size:12px;line-height:1.5;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transition:opacity .12s,visibility .12s;
}
#zordexSpeedTooltip::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
#zordexSpeedTooltip strong,#zordexSpeedTooltip span{display:block}
#zordexSpeedTooltip strong{margin-bottom:5px;color:#effbf7;font-size:13px}
#zordexSpeedTooltip .speed-tooltip-cost{margin-top:7px;color:#80e8c9}
#zordexSpeedControl:not(.tooltip-dismissed):hover #zordexSpeedTooltip,
#zordexSpeedControl:not(.tooltip-dismissed):focus-within #zordexSpeedTooltip{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){#zordexSpeedMode svg,#zordexSpeedTooltip{transition:none}}

/* Keep the dock's toolbar and build inside the same available grid height. */
#chatPage.chat-main.zordex-active .conversation-stage.zordex-v71-workbench-visible > #zordexContextPanel:not(.zordex-v5-project) {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  border: 1px solid #303d40;
  border-radius: 12px 0 0 12px;
  background: #111719;
}
#chatPage.chat-main.zordex-active #zordexContextPanel > #zordexV5BuildPane.zordex-v5-build {
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch;
}
#chatPage.chat-main.zordex-active .zordex-v5-nav {
  padding: 8px 10px;
  min-height: 48px;
  background: #192222;
}
#chatPage.chat-main.zordex-active .zordex-v5-nav button,
#chatPage.chat-main.zordex-active .zordex-v5-editor > header nav button,
#chatPage.chat-main.zordex-active .zordex-v5-tabs button,
#chatPage.chat-main.zordex-active .zordex-v5-file {
  clip-path: none !important;
  border-radius: 7px !important;
  min-height: 28px;
}
#chatPage.chat-main.zordex-active .zordex-v5-nav > div:last-child,
#chatPage.chat-main.zordex-active .zordex-v5-editor > header nav {
  clip-path: none !important;
  border-radius: 9px !important;
}
#chatPage.chat-main.zordex-active .zordex-v5-editor > header {
  padding: 5px 8px;
  gap: 5px;
  min-height: 0 !important;
  align-content: start;
}
#chatPage.chat-main.zordex-active .zordex-v5-editor > header nav {
  padding: 3px;
  min-height: 0;
}
#chatPage.chat-main.zordex-active .zordex-v5-progress {
  padding: 8px 12px;
  gap: 5px;
}
#chatPage.chat-main.zordex-active .zordex-v5-progress > header {
  min-height: 0;
  padding: 0;
}
#chatPage.chat-main.zordex-active .zordex-v5-tabs { padding: 0; }
#chatPage.chat-main.zordex-active .zordex-v5-file.active {
  background: #213a33;
  color: #e0f5ed;
}
#chatPage.chat-main.zordex-active .zordex-v5-stage { gap: 0; }

#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-editor > header { padding: 5px 8px !important; gap: 5px !important; }
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-tabs { min-height: 29px; padding-bottom: 0; }
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-tabs button { min-height: 28px; padding: 4px 8px; }

/* Effort card: retain the original wide slider and add a distinct speed row. */
#zordexEffortPicker {
  width: 480px !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box;
  padding: 16px !important;
  gap: 14px 8px !important;
  border: 1px solid #42534f !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #25302e, #181f22 65%) !important;
  box-shadow: 0 18px 55px #0008, inset 0 1px 0 #ffffff0c !important;
}
#zordexEffortTopRow {
  padding-bottom: 13px;
  border-bottom: 1px solid #ffffff12;
}
#zordexSpeedControl { display: flex; align-items: center; gap: 11px; }
#zordexSpeedMode {
  width: 40px; height: 40px; flex: 0 0 40px;
  border: 1px solid #51645d; border-radius: 12px;
  background: #293833; color: #b8d5c9;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#zordexSpeedMode:hover { background: #365447; border-color: #84d8b4; }
#zordexSpeedMode[aria-pressed="true"] {
  color: #122c23; background: #8ee6ba; border-color: #b5f7d4;
  box-shadow: 0 0 18px #82edb32b;
}
.speed-mode-label { display: grid; gap: 4px; pointer-events: none; }
.speed-mode-label strong { color: #eef5f1; font: 650 13px/1.2 system-ui,sans-serif; }
#zordexSpeedState { color: #a1b3ad; font: 11px/1.25 system-ui,sans-serif; }
#zordexSpeedCost {
  padding: 6px 9px; border: 1px solid #4b5a54; border-radius: 999px;
  color: #c5d4cd; background: #ffffff05; font: 600 11px/1 system-ui,sans-serif;
  white-space: nowrap;
}
#zordexEffortTopRow.speed-active #zordexSpeedCost { color: #b1f5ce; background: #7ce3ad12; border-color: #638d75; }
#zordexEffortPicker .zordex-effort-heading { gap: 4px; }
#zordexEffortPicker .zordex-effort-heading span { color: #a4b5ae; font-size: 10px; }
#zordexEffortPicker .zordex-effort-heading output { color: #eff8f3; font-size: 14px; }
#zordexEffortPicker > small { color: #a9bab2; font-size: 10px; line-height: 1.45; }
#zordexEffortRange { height: 7px; background: linear-gradient(to right,#8ddbb6 0 var(--effort-progress),#3b4845 var(--effort-progress) 100%); }
#zordexEffortRange::-webkit-slider-thumb { width: 20px; height: 20px; background: #e1ffed; border: 3px solid #95dcb8; box-shadow: 0 2px 8px #0006; }
#zordexEffortRange::-moz-range-thumb { width: 15px; height: 15px; background: #e1ffed; border: 3px solid #95dcb8; box-shadow: 0 2px 8px #0006; }
#zordexSpeedTooltip { border-radius: 12px; border-color: #526d60; }

/* ZORDEX_NEON_EFFORT_FX_V3 — seamless loop and composited crossfade
   Ultra High and OmniThink are two PERMANENT layers; state changes animate
   opacity instead of resetting animations / swapping background-image.
   The native slider remains interactive and the effort budget is untouched. */
#zordexEffortPicker {
  transition:border-color .45s ease,box-shadow .45s ease;
}
#zordexEffortButton {
  transition:border-color .45s ease,box-shadow .45s ease,color .45s ease;
}
#zordexEffortPicker .zordex-effort-heading output,
#zordexEffortButton strong {
  transition:color .45s ease,text-shadow .45s ease;
}
#zordexEffortPicker[data-effort="ultra-high"] {
  border-color:#7859b0 !important;
  box-shadow:0 18px 55px #0008,0 0 19px #7043ea30,inset 0 1px 0 #ffffff18 !important;
}
#zordexEffortPicker[data-effort="omnithink"] {
  border-color:#9952df !important;
  box-shadow:0 18px 55px #0008,0 0 25px #8d42fc38,inset 0 1px 0 #ffffff25 !important;
}
#zordexEffortPicker[data-effort="ultra-high"] .zordex-effort-heading output,
#zordexEffortButton[data-effort="ultra-high"] strong {
  color:#bf88ff;
  text-shadow:0 0 10px #a866ff70;
}
#zordexEffortPicker[data-effort="omnithink"] .zordex-effort-heading output,
#zordexEffortButton[data-effort="omnithink"] strong {
  color:#f0afff;
  text-shadow:0 0 13px #d37dff94;
}
#zordexEffortButton[data-effort="ultra-high"] {
  border-color:#8a5ae2;
  box-shadow:0 0 12px #8655df46;
}
#zordexEffortButton[data-effort="omnithink"] {
  border-color:#b76df0;
  box-shadow:0 0 17px #a960f16b;
  animation:zdx-neon-button-pulse 3.1s ease-in-out infinite;
}
#zordexEffortButton.maximum[data-effort="omnithink"]::before {
  background:#e598ff;
  box-shadow:0 0 11px #e598ff,0 0 19px #a37bff;
}
/* Keep a stable wrapper height between ordinary and neon levels. */
#zordexEffortPicker .zordex-effort-slider-wrap {
  position:relative;
  isolation:isolate;
  height:30px;
  --zdx-track-height:16px;
}
/* Only the rail changes to charcoal on premium levels; its vertical space
   and the native range layout never jump. */
#zordexEffortPicker:is([data-effort="ultra-high"],[data-effort="omnithink"]) .zordex-effort-slider-wrap {
  background:linear-gradient(180deg,#353141,#24212d) center / calc(100% - 2px) var(--zdx-track-height) no-repeat;
  border-radius:999px;
}
/* Both pseudo elements exist on ALL six levels, so switching never creates
   or destroys either animation. Their per-mode opacity crossfades in 450ms. */
#zordexEffortPicker .zordex-effort-slider-wrap::before,
#zordexEffortPicker .zordex-effort-slider-wrap::after {
  content:"";
  position:absolute;
  top:50%;
  left:1px;
  width:calc(var(--effort-fill,100%) - 2px);
  max-width:calc(100% - 2px);
  height:var(--zdx-track-height);
  transform:translateY(-50%);
  border-radius:999px;
  pointer-events:none;
  z-index:1;
  opacity:0;
  background-size:67px 100%,107px 100%,141px 100%,250% 100%;
  background-repeat:repeat,repeat,repeat,no-repeat;
  background-position:-35px 50%,65px 50%,-70px 50%,0% 50%;
  will-change:opacity;
  transition:opacity .45s ease-in-out,width .24s ease;
}
#zordexEffortPicker .zordex-effort-slider-wrap::before {
  background-image:
    radial-gradient(circle,rgba(255,255,255,.93) 0 1.15px,transparent 1.9px),
    radial-gradient(circle,rgba(255,255,255,.66) 0 .8px,transparent 1.7px),
    radial-gradient(circle,rgba(250,241,255,.83) 0 1px,transparent 1.8px),
    linear-gradient(100deg,#4936ec 0%,#7950ff 22%,#cb70ff 49%,#7848fa 73%,#563eea 100%);
  box-shadow:0 0 8px #9a4effbb,0 0 18px #9a4effbb,inset 0 1px 2px #ffffff64;
  animation:zdx-neon-particles 2.8s linear infinite;
}
#zordexEffortPicker .zordex-effort-slider-wrap::after {
  background-image:
    radial-gradient(circle,rgba(255,255,255,.93) 0 1.15px,transparent 1.9px),
    radial-gradient(circle,rgba(255,255,255,.66) 0 .8px,transparent 1.7px),
    radial-gradient(circle,rgba(250,241,255,.83) 0 1px,transparent 1.8px),
    linear-gradient(95deg,#4a42ff 0%,#aa49ff 19%,#fa56dc 40%,#52d9ff 62%,#8163ff 80%,#ff78cf 100%);
  box-shadow:0 0 10px #bc75ffe8,0 0 22px #8c54ffaf,0 0 35px #d15bff50,inset 0 1px 2px #ffffff92;
  animation:zdx-neon-particles 2.8s linear infinite,zdx-neon-color-cycle 8s linear infinite;
}
#zordexEffortPicker[data-effort="ultra-high"] .zordex-effort-slider-wrap::before {opacity:1;}
#zordexEffortPicker[data-effort="omnithink"] .zordex-effort-slider-wrap::after {opacity:1;}
#zordexEffortPicker:is([data-effort="ultra-high"],[data-effort="omnithink"]) #zordexEffortRange {
  position:relative;
  z-index:3;
  height:30px;
  background:transparent !important;
  appearance:none;
  cursor:pointer;
}
#zordexEffortPicker:is([data-effort="ultra-high"],[data-effort="omnithink"]) #zordexEffortRange::-webkit-slider-runnable-track {
  height:16px;border:0;background:transparent;
}
#zordexEffortPicker:is([data-effort="ultra-high"],[data-effort="omnithink"]) #zordexEffortRange::-moz-range-track {
  height:16px;border:0;background:transparent;
}
#zordexEffortPicker:is([data-effort="ultra-high"],[data-effort="omnithink"]) .zordex-effort-ticks {
  z-index:2;top:13px;
}
#zordexEffortPicker:is([data-effort="ultra-high"],[data-effort="omnithink"]) .zordex-effort-ticks i {
  background:#ffffff9e;box-shadow:0 0 5px #fff8;
}
#zordexEffortPicker:is([data-effort="ultra-high"],[data-effort="omnithink"]) #zordexEffortRange::-webkit-slider-thumb {
  appearance:none;width:27px;height:27px;margin-top:-5.5px;
  border:2px solid #f5edff;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#f1eaff 80%);
  box-shadow:0 0 0 2px #b48aff3b,0 0 11px #c18cffc9,0 2px 7px #000a;
  animation:zdx-neon-thumb 2.4s ease-in-out infinite;
}
#zordexEffortPicker:is([data-effort="ultra-high"],[data-effort="omnithink"]) #zordexEffortRange::-moz-range-thumb {
  width:25px;height:25px;border:2px solid #f5edff;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#f1eaff 80%);
  box-shadow:0 0 0 2px #b48aff3b,0 0 11px #c18cffc9,0 2px 7px #000a;
  animation:zdx-neon-thumb 2.4s ease-in-out infinite;
}
/* Each particle tile ends exactly one repeat-period from where it started:
   67px, 107px, 141px respectively. The final frame equals the first. */
@keyframes zdx-neon-particles {
  0%   {background-position:-35px 50%,65px 50%,-70px 50%,0% 50%;}
  100% {background-position: 32px 50%,-42px 50%, 71px 50%,0% 50%;}
}
/* 360deg (not 0deg!) at the end: no sudden reverse rotation at the seam. */
@keyframes zdx-neon-color-cycle {
  0%   {filter:hue-rotate(0deg) saturate(1.22) brightness(1.09);}
  100% {filter:hue-rotate(360deg) saturate(1.22) brightness(1.09);}
}
@keyframes zdx-neon-thumb {
  0%,100% {filter:brightness(1);}
  50% {filter:brightness(1.17) drop-shadow(0 0 4px #d7aaff);}
}
@keyframes zdx-neon-button-pulse {
  0%,100% {filter:brightness(1);}
  50% {filter:brightness(1.17) drop-shadow(0 0 5px #a673f0);}
}
@media (prefers-reduced-motion:reduce) {
  #zordexEffortPicker .zordex-effort-slider-wrap::before,
  #zordexEffortPicker .zordex-effort-slider-wrap::after,
  #zordexEffortButton:is([data-effort="ultra-high"],[data-effort="omnithink"]) {
    animation:none !important;transition:none !important;will-change:auto;
  }
  #zordexEffortPicker:is([data-effort="ultra-high"],[data-effort="omnithink"]) #zordexEffortRange::-webkit-slider-thumb {animation:none !important;}
  #zordexEffortPicker:is([data-effort="ultra-high"],[data-effort="omnithink"]) #zordexEffortRange::-moz-range-thumb {animation:none !important;}
}