/* ============================================================
   AI MODEL PICKER — replaces the native <select>
   ============================================================ */
.ai-model-select-hidden{ display:none !important; }

.ai-model-picker{ position:relative; flex:none; }

.ai-model-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:var(--r-md);
  border:1px solid var(--border-s);
  background:var(--surface-2); color:var(--fg);
  font:500 var(--fs-sm,12.5px)/1 var(--sans);
  cursor:pointer; max-width:240px;
  transition:border-color .15s, background .15s;
}
.ai-model-btn:hover{ border-color:var(--border-strong); background:var(--surface-3); }
.ai-model-btn:focus-visible{
  outline:none;
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  box-shadow:var(--ring-soft);
}
.ai-model-btn[aria-expanded="true"]{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
}
.ai-model-btn .ai-model-label{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ai-model-btn .ai-model-chev{ flex:none; opacity:.7; }
.ai-model-btn.has-model .ai-model-label{ font-weight:600; }

.ai-model-menu{
  position:absolute; top:calc(100% + 6px); right:0;
  z-index:200;
  width:min(360px,90vw);
  max-height:min(70vh,540px);
  background:var(--surface);
  border:1px solid var(--border-s);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
  display:flex; flex-direction:column;
  animation:ampIn .16s var(--ease-out,ease);
}
@keyframes ampIn{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:none; }
}
.ai-model-search-wrap{
  display:flex; align-items:center; gap:8px;
  padding:9px 11px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  flex:none;
}
.ai-model-search-ico{ color:var(--muted); flex:none; }
.ai-model-search{
  flex:1; min-width:0; width:100%;
  border:none; background:transparent; padding:2px 0;
  font:500 13px var(--sans); color:var(--fg);
  outline:none; box-shadow:none;
}
.ai-model-search::placeholder{ color:var(--dim); }

.ai-model-list{
  flex:1; min-height:0; overflow-y:auto;
  padding:4px 4px 6px;
  overscroll-behavior:contain;
}

.amp-group-label{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px 4px;
  font:600 10px var(--mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  position:sticky; top:0; z-index:1;
  background:var(--surface);
}
.amp-count{
  margin-left:auto;
  font:600 9px var(--mono);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);
  border-radius:99px; padding:1px 7px;
}

.amp-item{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:7px 10px;
  border-radius:7px; border:1px solid transparent;
  background:none; color:var(--fg);
  font:500 12.5px/1.3 var(--sans);
  cursor:pointer; text-align:left; min-width:0;
}
.amp-item:hover,
.amp-item.hi{
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);
}
.amp-item.is-current{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.amp-item-model{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--mono); font-size:11.5px;
}
.amp-item-check{ flex:none; color:var(--accent); font-weight:700; }

.amp-empty{
  padding:26px 16px; text-align:center;
  color:var(--muted); font:400 12.5px var(--sans);
}
.amp-more{
  padding:10px 12px; text-align:center;
  font:500 11px var(--mono); color:var(--dim);
  border-top:1px solid var(--border);
  background:var(--surface-2);
}

[data-skin="paper"] .ai-model-btn,
[data-skin="comfy"] .ai-model-btn,
[data-skin="contrast"] .ai-model-btn{
  background:var(--surface-2); border-color:var(--border);
}
[data-skin="paper"] .ai-model-menu,
[data-skin="comfy"] .ai-model-menu,
[data-skin="contrast"] .ai-model-menu{
  box-shadow:0 0 0 1px var(--border) inset,0 20px 50px -20px rgba(35,28,15,.42);
}

@media (max-width:720px){
  .ai-model-btn{ max-width:140px; padding:6px 9px; font-size:11px; }
  .ai-model-menu{ width:min(330px,calc(100vw - 16px)); right:-4px; }
}