/* MirrorGPT reasoning grid v2
   Keeps the original effort state and request bridge while rendering the
   supplied pixel-grid reference as a responsive popover. */

.effort-switch[data-mgpt-effort-native='1'] {
  --p: 0.68;
  --p-pct: 68%;
  --clip-right: 32%;
  --level-rgb: 126, 95, 220;
  position: relative !important;
  display: block !important;
  flex: 0 0 380px !important;
  width: 380px !important;
  min-width: 0 !important;
  max-width: 380px !important;
  height: 168px !important;
  min-height: 168px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  touch-action: none !important;
}

.effort-switch[data-mgpt-effort-native='1']::before,
.effort-switch[data-mgpt-effort-native='1']::after,
.effort-switch[data-mgpt-effort-native='1'] > .effort-switch__thumb,
.effort-switch[data-mgpt-effort-native='1'] > .effort-switch__opt,
.effort-switch[data-mgpt-effort-native='1'] > .mgpt-effort-flow,
.effort-switch[data-mgpt-effort-native='1'] > .mgpt-effort-magnet {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  animation: none !important;
  content: none !important;
}

.mgpt-effort-native-shell {
  position: absolute;
  inset: 0;
  z-index: 12;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.075);
  border-radius: 20px;
  color: rgba(52, 52, 52, 0.88);
  background:
    radial-gradient(circle at 82% 18%, rgba(var(--level-rgb), 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 248, 248, 0.97));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.86) inset,
    0 -1px 0 rgba(0, 0, 0, 0.025) inset;
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  overflow: hidden;
  pointer-events: auto;
}

.mgpt-effort-native-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--p-pct) 73%, rgba(var(--level-rgb), 0.18), transparent 23%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 48%);
  opacity: 0.9;
  pointer-events: none;
}

.mgpt-effort-native-shell::after {
  display: none;
  content: none;
}

.mgpt-effort-native-head {
  position: absolute;
  top: 19px;
  left: 21px;
  right: 52px;
  z-index: 6;
  display: flex;
  align-items: center;
  height: 23px;
  color: rgba(92, 92, 92, 0.9);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 740;
  pointer-events: none;
}

.mgpt-effort-native-head span {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  white-space: nowrap;
}

.mgpt-effort-native-label {
  display: inline-block;
  min-width: 0;
  margin-left: 6px;
  color: rgb(var(--level-rgb));
  font-weight: 820;
  text-shadow: 0 0 10px rgba(var(--level-rgb), 0.25);
  padding-bottom: 2px;
  line-height: 1.2;
  overflow: visible;
  text-overflow: ellipsis;
}

.mgpt-effort-native-scale {
  position: absolute;
  top: 70px;
  left: 22px;
  right: 22px;
  z-index: 6;
  height: 27px;
  pointer-events: auto;
}

.mgpt-effort-native-scale::before,
.mgpt-effort-native-scale::after {
  position: absolute;
  top: -20px;
  color: rgba(92, 92, 92, 0.7);
  font-size: 12px;
  line-height: 1;
  font-weight: 650;
  pointer-events: none;
}

.mgpt-effort-native-scale::before {
  content: 'Faster';
  left: 0;
}

.mgpt-effort-native-scale::after {
  content: 'Smarter';
  right: 0;
}

.mgpt-effort-native-tick {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 19px;
  padding: 0 4px 1px;
  margin: 0;
  border: 0;
  border-radius: 7px;
  color: rgba(96, 96, 96, 0.54);
  background: transparent;
  box-shadow: none;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 720;
  text-transform: none;
  transform: translateX(-50%);
  overflow: visible;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.mgpt-effort-native-tick[data-level='ultra'] {
  min-width: 36px;
  transform: translateX(-50%);
}

.mgpt-effort-native-tick::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 19px;
  width: 1px;
  height: 7px;
  border-radius: 1px;
  background: rgba(100, 100, 100, 0.18);
  transform: translateX(-50%);
}

.mgpt-effort-native-tick.active {
  color: rgb(var(--level-rgb));
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 3px 9px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(var(--level-rgb), 0.14) inset;
}

.mgpt-effort-native-tick.active::after {
  width: 2px;
  background: rgb(var(--level-rgb));
  box-shadow: 0 0 8px rgba(var(--level-rgb), 0.56);
}

.mgpt-effort-native-tick[data-unavailable='1'],
.effort-switch__opt[data-mgpt-option-unavailable='1'] {
  display: none !important;
}

.mgpt-effort-native-track {
  position: absolute;
  top: 104px;
  left: 21px;
  right: 21px;
  z-index: 3;
  height: 39px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(226, 226, 223, 0.98), rgba(214, 214, 211, 0.96));
  box-shadow:
    0 5px 11px rgba(0, 0, 0, 0.07),
    0 3px 7px rgba(0, 0, 0, 0.11) inset,
    0 -2px 4px rgba(255, 255, 255, 0.58) inset;
  overflow: hidden;
  pointer-events: none;
}

.mgpt-effort-native-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: inherit;
  clip-path: inset(0 var(--clip-right) 0 0 round 11px);
  background:
    linear-gradient(90deg,
      rgba(207, 207, 202, 0.94) 0%,
      rgba(194, 190, 206, 0.9) 20%,
      rgba(166, 153, 217, 0.88) 42%,
      rgba(144, 122, 220, 0.94) 64%,
      rgba(130, 100, 216, 0.98) 82%,
      rgba(121, 80, 207, 1) 100%);
  box-shadow:
    0 0 18px rgba(var(--level-rgb), 0.22),
    0 0 12px rgba(255, 255, 255, 0.12) inset;
  overflow: hidden;
  transform: translateZ(0);
}

.mgpt-effort-native-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%, rgba(255, 255, 255, 0.05) 72%, transparent),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 25%, rgba(255, 255, 255, 0.04) 56%, transparent 78%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.mgpt-effort-native-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  mix-blend-mode: screen;
  pointer-events: none;
}

.mgpt-effort-native-mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.095) 1px, transparent 1px);
  background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32) 22%, rgba(0, 0, 0, 0.8) 56%, #000);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32) 22%, rgba(0, 0, 0, 0.8) 56%, #000);
  animation: mgpt-effort-mesh 2.8s linear infinite;
  pointer-events: none;
}

.mgpt-effort-native-sweep {
  position: absolute;
  top: -24%;
  bottom: -24%;
  left: 0;
  z-index: 4;
  width: 23%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.54) 52%, rgba(255, 255, 255, 0.13) 72%, transparent 100%);
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity: 0.58;
  transform: translateX(-120%) skewX(-12deg);
  animation: mgpt-effort-sweep 1.12s linear infinite;
  pointer-events: none;
}

.mgpt-effort-native-knob {
  position: absolute;
  top: 99px;
  left: var(--p-pct);
  z-index: 8;
  width: 43px;
  height: 49px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 246, 246, 0.98));
  box-shadow:
    0 7px 15px rgba(0, 0, 0, 0.15),
    -5px 0 16px rgba(var(--level-rgb), 0.19),
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 -2px 3px rgba(0, 0, 0, 0.03) inset;
  transform: translateX(-50%);
  pointer-events: none;
}

.mgpt-effort-native-knob::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 8px;
  right: 8px;
  height: 10px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent);
  opacity: 0.36;
}

.mgpt-effort-native-hit {
  position: absolute;
  top: 93px;
  right: 10px;
  bottom: 7px;
  left: 10px;
  z-index: 40;
  border-radius: 14px;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  pointer-events: auto !important;
}

.mgpt-effort-limit-hint {
  position: absolute;
  top: auto;
  bottom: 4px;
  left: 50%;
  z-index: 41;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  max-width: calc(100% - 110px);
  padding: 0 8px;
  border: 1px solid rgba(126, 95, 220, 0.2);
  border-radius: 999px;
  color: rgba(84, 60, 156, 0.88);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.07);
  font-size: 9px;
  line-height: 1;
  font-weight: 750;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.effort-switch[data-mgpt-effort-native='1'][data-mgpt-limit-hint='1'] .mgpt-effort-limit-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='low'] {
  --level-rgb: 159, 159, 154;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='medium'] {
  --level-rgb: 149, 137, 201;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='high'] {
  --level-rgb: 134, 108, 214;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='xhigh'] {
  --level-rgb: 126, 95, 220;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='max'] {
  --level-rgb: 121, 87, 218;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='ultra'] {
  --level-rgb: 116, 78, 216;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='low'] .mgpt-effort-native-mesh {
  opacity: 0.2;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='medium'] .mgpt-effort-native-mesh {
  opacity: 0.28;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='high'] .mgpt-effort-native-mesh {
  opacity: 0.36;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='max'] .mgpt-effort-native-mesh {
  opacity: 0.58;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='ultra'] .mgpt-effort-native-mesh {
  opacity: 0.66;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='low'] .mgpt-effort-native-sweep {
  opacity: 0.12;
  animation-duration: 3s;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='medium'] .mgpt-effort-native-sweep {
  opacity: 0.22;
  animation-duration: 2.35s;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='high'] .mgpt-effort-native-sweep {
  opacity: 0.36;
  animation-duration: 1.72s;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='max'] .mgpt-effort-native-sweep {
  opacity: 0.7;
  animation-duration: 0.82s;
}

.effort-switch[data-mgpt-effort-native='1'] .mgpt-effort-native-shell[data-level='ultra'] .mgpt-effort-native-sweep {
  opacity: 0.82;
  animation-duration: 0.6s;
}

html[data-mgpt-theme='dark'] .mgpt-effort-native-shell {
  color: rgba(245, 245, 245, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 82% 18%, rgba(var(--level-rgb), 0.16), transparent 32%),
    linear-gradient(180deg, rgba(54, 54, 54, 0.99), rgba(39, 39, 39, 0.99));
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.48),
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset;
}

html[data-mgpt-theme='dark'] .mgpt-effort-native-head,
html[data-mgpt-theme='dark'] .mgpt-effort-native-scale::before,
html[data-mgpt-theme='dark'] .mgpt-effort-native-scale::after {
  color: rgba(238, 238, 238, 0.68);
}

html[data-mgpt-theme='dark'] .mgpt-effort-native-tick {
  color: rgba(238, 238, 238, 0.5);
}

html[data-mgpt-theme='dark'] .mgpt-effort-native-tick.active {
  color: rgb(var(--level-rgb));
  background: rgba(255, 255, 255, 0.1);
}

html[data-mgpt-theme='dark'] .mgpt-effort-native-track {
  background: linear-gradient(180deg, #3d3d3d, #323232);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.25),
    0 3px 7px rgba(0, 0, 0, 0.42) inset,
    0 -1px 2px rgba(255, 255, 255, 0.06) inset;
}

html[data-mgpt-theme='dark'] .mgpt-effort-limit-hint {
  color: rgba(222, 214, 255, 0.92);
  background: rgba(42, 42, 42, 0.94);
}

@keyframes mgpt-effort-mesh {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 12px 6px, 12px 6px;
  }
}

@keyframes mgpt-effort-sweep {
  from {
    transform: translateX(-120%) skewX(-12deg);
  }
  to {
    transform: translateX(510%) skewX(-12deg);
  }
}

@media (max-width: 430px) {
  .mgpt-effort-native-head {
    left: 18px;
  }

  .mgpt-effort-native-scale,
  .mgpt-effort-native-track {
    right: 18px;
    left: 18px;
  }

  .mgpt-effort-native-tick {
    min-width: 24px;
    padding-inline: 3px;
    font-size: 7.5px;
  }

  .mgpt-effort-native-tick[data-level='ultra'] {
    min-width: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mgpt-effort-native-canvas,
  .mgpt-effort-native-mesh,
  .mgpt-effort-native-sweep {
    animation: none !important;
  }
}