/* Each intelligence owns its Boost control and color. */
#intelligenceDialog .intelligence-option {
  --mode-color: #38a7ff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  position: relative;
  border-radius: 16px;
}
#intelligenceDialog .intelligence-option.fast { --mode-color: #33ef84; }
#intelligenceDialog .intelligence-option.deep { --mode-color: #ee72ef; }
#intelligenceDialog .intelligence-option .intelligence-mode {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  min-height: 76px;
  padding: 10px 12px;
}
#intelligenceDialog .intelligence-plus {
  position: relative;
  overflow: hidden;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--mode-color) 40%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--mode-color) 8%, #0c1421);
  color: color-mix(in srgb, var(--mode-color) 65%, white);
  font: 400 30px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background 250ms, box-shadow 350ms, border-color 250ms;
}
#intelligenceDialog .plus-label { font-size: 10px; opacity: 0; }
#intelligenceDialog .is-boosted .plus-label { opacity: 1; }
#intelligenceDialog .is-boosted .intelligence-plus {
  border-color: color-mix(in srgb, var(--mode-color) 65%, white);
  background: color-mix(in srgb, var(--mode-color) 24%, #0c1421);
  box-shadow: 0 0 23px color-mix(in srgb, var(--mode-color) 24%, transparent), inset 0 1px 0 #ffffff60;
}
#intelligenceDialog .is-boosted .intelligence-plus::after {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(115deg, transparent 40%, #ffffff55 50%, transparent 60%);
  animation: intelligence-boost-shimmer 400ms ease-out both;
  pointer-events: none;
}
#intelligenceDialog .is-boosted .mode-copy strong { color: color-mix(in srgb, var(--mode-color) 60%, white); }
#intelligenceDialog button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
#intelligenceDialog .intelligence-modes { overflow-y: auto; }
#intelligenceDialog .capacity-tabs button { color: #fff; }
@keyframes intelligence-boost-shimmer {
  from { transform: translateX(-80%); }
  to { transform: translateX(80%); }
}
@media (prefers-reduced-motion: reduce) {
  #intelligenceDialog .is-boosted .intelligence-plus::after { animation: none; display: none; }
  #intelligenceDialog .intelligence-plus { transition: none; }
}