/* finesse · component: model-picker · register=product
 * states: default · hover · focus-visible · active · disabled · loading · error · success
 * tokens: inherited PIKA palette and app/typography.css */
.model-picker { display: inline-flex; flex: 0 0 auto; min-width: 0; max-width: 190px; }
.model-picker .ui-select { min-width: 0; max-width: 100%; }
.model-picker :is(.model-picker-trigger,.model-picker-retry) { min-height: 44px; max-width: 190px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: var(--ui-text-size); white-space: nowrap; outline: 2px solid transparent; outline-offset: 2px; }
/* Hide only the trigger's decorative border without changing its hit area. */
.model-picker .ui-select>.model-picker-trigger { border-color:transparent; }
.model-picker-trigger > span { display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; white-space:nowrap; }
.model-picker-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.model-picker[data-purpose],.model-picker[data-purpose] .model-picker-trigger { max-width:260px; }
.model-picker-purpose { color:var(--muted); flex:none; }
.model-picker-trigger .model-cover,.model-picker-menu .model-cover { width:auto; height:var(--model-cover-text-height,1lh); flex:0 0 auto; border-radius:5px; max-width:120px; }
.model-picker-trigger .model-cover,.model-picker-menu .model-cover { border:0; background:transparent; }
.model-picker-menu .model-cover { height:34px; }
.model-picker-trigger .model-cover img,.model-picker-menu .model-cover img { width:auto; height:100%; max-width:120px; object-fit:contain; }
.model-picker-trigger .model-cover:has(svg),.model-picker-menu .model-cover:has(svg) { aspect-ratio:1; }
.model-picker-trigger .model-cover svg,.model-picker-menu .model-cover svg { width:65%; height:65%; }
.model-picker :is(button:focus-visible,.is-focus) { outline: 2px solid var(--ink); outline-offset: 2px; }
.model-picker :is(button:active,.is-active) { background: var(--yellow-soft); }
.model-picker button:disabled { opacity: .5; cursor: not-allowed; }
.model-picker[data-state="loading"] { min-width: 142px; }
.model-picker[data-state="error"] button { border-color: var(--ink); }
.model-picker[data-state="success"] button { color: var(--ink); }
@media (hover: hover) { .model-picker :is(button:hover,.is-hover):not(:disabled) { background: var(--card-soft); } }
@media (max-width: 414px) { .model-picker,.model-picker :is(.model-picker-trigger,.model-picker-retry) { max-width: 152px; } }
.ui-select-menu.model-picker-menu { width:max-content; max-width:calc(100vw - 24px); max-height:min(420px,70dvh); padding:8px; background:var(--card); color:var(--ink); border-color:var(--line); }
.model-picker-menu .ui-select-menu-title { padding:8px 12px 12px; color:var(--muted); overflow-wrap:anywhere; }
.model-picker-menu .ui-select-options { display:flex; flex-direction:column; gap:4px; width:100%; padding:0; background:transparent; }
.ui-select-menu.model-picker-menu .ui-select-options>button { display:flex; align-items:center; gap:14px; flex:none; width:100%; min-height:46px; padding:6px 12px; text-align:left; white-space:normal; border-radius:12px; color:var(--ink); transform:none; }
.ui-select-menu.model-picker-menu .ui-select-options>button[aria-selected=true] { background:var(--card-soft); box-shadow:none; }
.ui-select-menu.model-picker-menu .ui-select-options>button[aria-selected=true]:hover:not(:disabled) { background:var(--card-soft); }
.model-picker-menu .ui-select-options>button:not(:disabled):hover { transform:none; }
@media(hover:hover) and (pointer:fine){.ui-select-menu.model-picker-menu .ui-select-options>button:hover:not(:disabled):not([aria-disabled=true]):not([aria-selected=true]){background:var(--ui-option-hover-bg)}}
.model-picker-menu .ui-select-options>button:focus-visible { box-shadow:inset 0 0 0 1px var(--ink); }
.model-picker-copy { display:flex; flex:1; flex-direction:column; gap:1px; min-width:0; }
.model-picker-copy strong { font-weight:600; overflow-wrap:anywhere; }
.model-picker-copy small { color:var(--muted); display:block; min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.model-picker-check { width:20px; display:flex; flex:none; justify-content:center; }