apps/desktop/src/renderer/styles/model-switcher.css

/* Model + thinking sit as one left-footer pair after permission. */
.maka-model-selection-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
}

/* The composer footer's model and thinking pickers are ghost-button
   DropdownMenus — the same toolbar primitive as ＋ and permission, so their
   resting, hover, focus, and disabled chrome all derive from the Astryx
   Button and no product overlay is needed here. Trigger geometry (min/max
   width) is owned by composer.css, the one real context these triggers
   render in; the Button's label span truncates inside that cap. */

/* Connection group heading inside the model menus. Mirrors Astryx's
   data-driven DropdownMenu section title (supporting role, secondary ink,
   sm menu padding) so the compound menu reads like a native sectioned one. */
.maka-model-menu-group-heading {
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  font: var(--maka-text-supporting);
  color: var(--foreground-secondary);
  user-select: none;
  white-space: nowrap;
}

.maka-model-picker-root {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}

/* The project picker's trigger is now a ghost-button DropdownMenu like the
   model and thinking chips beside it (workspace-picker.tsx), so resting,
   hover, focus, disabled and tooltip chrome all derive from Astryx Button —
   no field overlay needed here.
   Geometry sizes to the project name rather than holding the model pair's
   column width: it is the last control in a row that already wraps, so a
   fixed width would spend space the model chip beside it needs. The cap is
   what keeps a long directory name from pushing the send button off the
   row. */
.maka-workspace-picker {
  min-width: 0;
  max-width: min(280px, 60vw);
  flex: 0 0 auto;
}

/* Cursor: product-wide native-cursor.css (maka.legacy) owns default vs pointer. */

/* The one rem that stays, and the reason is the icon scale rather than the
   root. Everywhere else in product CSS rem was a stale habit — a length
   written in root-relative units that had to become absolute once the root
   stopped being a density knob. This is an icon box, and Astryx authors its
   icon sizes in rem against a 16px root (12/16/20/24, see Icon.tsx), so 1rem
   IS the `sm` icon box next to body text. Under the old 13px root it rendered
   13px, i.e. one step below Astryx's own smallest body-text icon; it now
   renders the 16px it always meant. chat-shell-layout-contract.test.ts pins
   the square so flex cannot squash it. */
.modelPickerProviderMark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  color: var(--foreground);
}

.modelPickerProviderMark svg,
.modelPickerProviderMark img,
.modelPickerProviderMark .providerAssetMask {
  width: 100%;
  height: 100%;
}

.modelPickerOption {
  min-width: 0;
}

.modelPickerOptionLabel {
  display: block;
  min-width: 0;
  max-width: min(260px, 56vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}