/*
 * AgentStop
 *
 * Drawn in Figma as `Agent Stop` (1156:296), Size x State + Focused. The size
 * ramp, radius and focus ring are Button's, read from the same tokens.
 *
 * HEIGHT COMES FROM `min-height`, NEVER FROM VERTICAL PADDING
 *
 * This file used to set `padding: <v> <h>` on all three sizes. Padding and
 * min-height then both claim the height, and the larger wins: Large asked for
 * 48 but computed 12 + 32 + 12 = 56, so the ramp shipped as 32/40/56 and only
 * two of its three rungs were the ones it meant. Button hit this exact bug and
 * says so at the point of the rule — "deriving height from padding instead is
 * what left all three sizes 2px off" — so the fix is Button's fix: pad the
 * inline axis only and let `min-height` own the block axis. The ramp is
 * 32/40/48, and it now grows rather than jumps if a label ever wraps.
 *
 * Large is `type-body-md`, not `type-body-lg`, for the same reason Button's
 * Large is: body-lg is the XLarge rung, and a 32px line box in a 48px control
 * leaves no room to look like a control.
 *
 * THE GLYPH RUNS ONE RUNG BELOW BUTTON'S ICON LADDER — xs/sm/md against
 * Button's xs/md/lg. Deliberate, and the one place this does not follow
 * Button: the glyph is a plain hollow square, which carries far more visual
 * weight than a detailed Lucide glyph at the same size. Matched rung for rung
 * it out-weighs the label it is meant to sit beside.
 *
 * DELIBERATELY NOT `surface/error`. Stopping a run is normal and expected, and
 * you can start it again. Colouring it like a delete teaches hesitation about
 * the one control that must never be hesitated over. It reads as a firm
 * neutral: strong border, plain surface, error colour only on hover, where it
 * confirms rather than warns.
 */
.ion-agent-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--spacing-40);
  padding-inline: var(--spacing-16);
  border: var(--border-width-default) solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-default);
  font-family: var(--font-family-sans);
  font-size: var(--type-body);
  line-height: var(--type-body-line-height);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    background-color var(--ion-duration-base) var(--ion-ease-out),
    border-color var(--ion-duration-base) var(--ion-ease-out),
    color var(--ion-duration-base) var(--ion-ease-out);
}

.ion-agent-stop:focus-visible {
  outline: var(--border-width-thick) solid var(--border-focus);
  outline-offset: 2px;
}

/*
 * Disabled ONLY while the stop is in flight, never as a resting state. A
 * greyed-out stop button on a running agent is the failure this component
 * exists to prevent, so the styling deliberately does not read as
 * "unavailable" — it reads as "already asked".
 *
 * Declared before :hover so specificity reads non-decreasing; the :not(:disabled)
 * on the hover rules is what keeps them from fighting.
 */
.ion-agent-stop:disabled {
  cursor: default;
  background-color: var(--surface-muted);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.ion-agent-stop:hover:not(:disabled) {
  background-color: var(--surface-error-subtle);
  border-color: var(--border-error);
  color: var(--text-error);
}

.ion-agent-stop:active:not(:disabled) {
  background-color: var(--surface-error-subtle-hover);
}

.ion-agent-stop__glyph {
  display: inline-flex;
  flex: none;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.ion-agent-stop__glyph svg {
  width: 100%;
  height: 100%;
}

/* The square shrinks while stopping — the one motion cue that the press
 * landed, on a control whose text also changed. */
.ion-agent-stop[data-stopping] .ion-agent-stop__glyph svg {
  transform: scale(0.7);
  transition: transform var(--ion-duration-base) var(--ion-ease-out);
}

.ion-agent-stop--sm {
  min-height: var(--spacing-32);
  padding-inline: var(--spacing-12);
  font-size: var(--type-body-sm);
  line-height: var(--type-body-sm-line-height);
}

.ion-agent-stop--sm .ion-agent-stop__glyph {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.ion-agent-stop--lg {
  min-height: var(--spacing-48);
  padding-inline: var(--spacing-20);
  font-size: var(--type-body-md);
  line-height: var(--type-body-md-line-height);
}

.ion-agent-stop--lg .ion-agent-stop__glyph {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}