/* tier.js: a three-stop effort slider with a secondary, benchmark-ranked model picker. */
/* Wrapped rows keep Send at the card's right edge, including on wide screens. */
#send { margin-left: auto; }
.effort-control {
  position: relative; display: flex; align-items: center; gap: var(--sv-space-2);
  min-width: 0; max-width: 100%; padding-left: var(--sv-space-2);
  border: 1px solid var(--sv-glass-rim-lo); border-radius: var(--sv-radius);
  background: var(--sv-glass-tint); color: var(--sv-ink-secondary); font-size: var(--ui-meta);
  box-shadow: inset 0 1px 0 var(--sv-glass-rim);
}
.effort-control > label { cursor: pointer; }
.effort-track { --effort-progress: 0.5; position: relative; width: 5rem; flex: 0 0 5rem; }
/* 34px inside its 1px rims: the control is Send's 36px, so the options row is no taller than Send. */
#effort-slider { appearance: auto; display: block; width: 100%; min-width: 0; max-width: none; height: 34px; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.effort-rail { position: absolute; top: 50%; left: 8px; right: 8px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--sv-glass-tint-sunken); pointer-events: none; }
.effort-rail::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; transform-origin: left; transform: scaleX(var(--effort-progress)); }
.effort-rail > span { position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; border-radius: 50%; background: var(--sv-ink-tertiary); transform: translate(-50%, -50%); }
.effort-rail > span:first-child { left: 0; }
.effort-rail > span:last-child { left: 100%; }
.effort-rail::after {
  content: ""; position: absolute; left: calc(var(--effort-progress) * 100%); top: 50%;
  width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%;
  background: var(--sv-surface); box-shadow: inset 0 1px 0 var(--sv-glass-rim);
  transform: translate(-50%, -50%);
}
.effort-track:has(#effort-slider:focus-visible) .effort-rail::after { outline: 2px solid var(--sv-ink); outline-offset: 3px; }
.effort-control.is-auto .effort-track { opacity: 0.5; }
#effort-value { flex: 0 0 8ch; text-align: right; white-space: nowrap; color: var(--sv-ink); }
#effort-summary {
  display: flex; align-items: center; justify-content: center; gap: var(--sv-space-1); min-height: 34px; min-width: 36px;
  padding: 0 var(--sv-space-2); border: 0; border-radius: var(--sv-radius);
  background: none; color: var(--sv-ink-secondary); font-size: var(--ui-meta); cursor: pointer;
}
#effort-summary:hover, #effort-summary[aria-expanded="true"] { background: var(--ws-hover); color: var(--sv-ink); }
.effort-control.is-pinned #effort-summary { color: var(--sv-ink); background: var(--sv-surface-sunken); }
#effort-pin { display: flex; align-items: center; gap: var(--sv-space-1); min-width: 0; max-width: 10rem; }
#effort-pin[hidden] { display: none; }
#effort-pin > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#effort-summary > .icon { flex: none; width: 12px; height: 12px; transform: rotate(90deg); }
#effort-summary[aria-expanded="true"] > .icon { transform: rotate(-90deg); }
.effort-pop {
  position: absolute; bottom: calc(100% + var(--sv-space-2)); left: 0;
  z-index: var(--sv-z-overlay); width: min(26rem, calc(100vw - 32px));
  max-height: min(38rem, 65dvh); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sv-space-2); border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-surface); box-shadow: var(--sv-shadow-lg);
}
.route-choice {
  display: flex; align-items: center; gap: var(--sv-space-2); width: 100%; min-height: 48px;
  padding: var(--sv-space-2); border: 0; border-radius: var(--sv-radius); background: transparent;
  color: var(--sv-ink); text-align: left; font-size: var(--ui-text); cursor: pointer;
}
.route-choice:hover { background: var(--ws-hover); }
.route-choice[aria-checked="true"] { background: var(--sv-surface-sunken); }
.route-choice > .icon { flex: none; width: 14px; opacity: 0; }
.route-choice[aria-checked="true"] > .icon { opacity: 1; }
.route-choice-text { flex: 1; min-width: 0; }
.route-choice-name { display: flex; align-items: center; gap: var(--sv-space-2); }
.route-choice-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-choice .model-logo { width: 18px; height: 18px; }
.route-choice-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.model-score { flex: none; font-size: var(--ui-meta); font-variant-numeric: tabular-nums; color: var(--sv-ink-secondary); }
button.effort-auto {
  width: 100%; min-height: 44px; padding: var(--sv-space-2); border: 0; border-radius: var(--sv-radius);
  background: none; color: var(--sv-ink-secondary); font-size: var(--ui-meta); text-align: left;
}
button.effort-auto:hover { background: var(--ws-hover); }
button.effort-auto[aria-pressed="true"] { background: var(--sv-surface-sunken); color: var(--sv-ink); }
.model-heading { margin: var(--sv-space-2); padding-top: var(--sv-space-2); border-top: var(--sv-hairline-w) solid var(--sv-hairline); color: var(--sv-ink); }
#model-browse > summary { min-height: 44px; padding: var(--sv-space-2); align-content: center; cursor: pointer; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.model-note { margin: var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.model-note a { color: inherit; text-decoration: underline; }
.model-search-label { display: block; margin: var(--sv-space-2); font-size: var(--ui-meta); }
#model-search { width: 100%; max-width: none; min-height: 44px; }
/* Its own row only when the card is too narrow for it beside Attach and Send
 * (36rem): a wide window with Details open keeps one options row. */
@container composer (max-width: 36rem) {
  .effort-control { flex: 0 0 100%; order: -1; }
  .effort-track { flex: 1; width: auto; min-width: 3rem; }
  #effort-pin { max-width: 7rem; }
}
@container composer (max-width: 28rem) {
  #effort-pin > span:last-child { max-width: 4ch; }
}
@media (max-width: 760px) {
  .composer { position: relative; }
  .effort-control { position: static; }
  #effort-summary, #effort-slider { min-height: 44px; }
  .effort-pop { left: 0; width: 100%; }
}
@media (forced-colors: active) {
  #effort-slider { opacity: 1; }
  .effort-rail { display: none; }
}