/* ═══════════════ The model picker (js/model-picker.js): one model button, and an effort bar only while Ethix Deep is chosen ═══════════════
   The button is the page's existing .model-chip (shell.css); this sheet adds what the picker itself draws — the small «تجريبي» /
   Beta badge beside Ethix Deep's name, and the slim three-stop effort bar (سريع / عميق / أقصى). Logical properties only, so it
   reads right in RTL and LTR (the first stop, سريع, sits at the reading start). Colours are the page's tokens, so the dark theme
   follows. No inline styles anywhere (the page's CSP): every state is a class. */

.model-chip .mp-name{white-space:nowrap}
.model-chip .mp-beta,.model-pop .mp-beta{
  flex:none;padding:0 7px;border-radius:999px;font-size:10.5px;font-weight:700;line-height:17px;letter-spacing:.02em;
  color:color-mix(in srgb,var(--gold-text,var(--gold-deep)) 70%,var(--ink));background:color-mix(in srgb,var(--gold-deep) 8%,transparent);
}
.model-pop .mp-beta{margin-inline-start:6px}

/* The effort bar: a slim pill of three stops; the ones up to the chosen level are filled, the chosen one is the accent —
   a level, as a bar shows one. Beside the model button on a wide screen (it is inserted right after the button's row in the
   composer's footer), on a slim row of its own above the footer on a phone. */
.mp-effort{
  display:inline-flex;align-items:stretch;flex:none;gap:2px;height:30px;padding:2px;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.mp-stop{
  display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:0 12px;border:0;border-radius:999px;
  background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background-color var(--t-fast,.15s),color var(--t-fast,.15s),box-shadow var(--t-fast,.15s);
}
.mp-stop.is-filled{background:color-mix(in srgb,var(--gold-deep) 17%,transparent);color:var(--ink-soft)}
.mp-stop.is-on{background:var(--g-mode);color:var(--on-accent);box-shadow:0 2px 8px color-mix(in srgb,var(--accent-b) 38%,transparent)}
@media (hover:hover){.mp-stop:not(.is-on):not(:disabled):hover{color:var(--ink)}}
.mp-stop:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px}
.mp-stop:disabled{cursor:default;opacity:.7}
@media (prefers-reduced-motion:reduce){.mp-stop{transition:none}}
html.reduce-motion .mp-stop{transition:none}

/* With the bar present the composer's footer may wrap: the bar takes the whole first row on a phone (three equal stops), so
   neither the button, nor the send button, nor a mic is ever pushed off a 375px screen. */
.mp-has-effort{flex-wrap:wrap}
@media (max-width:640px){
  .mp-has-effort > .mp-effort{order:-1;display:flex;flex:1 1 100%}
  .mp-effort .mp-stop{flex:1 1 0;min-width:0;padding:0 6px}
}