/*
 * Authoritative model-tile primitive shared by Image Studio Advanced
 * Generation and Video Studio. Route styles may provide content, but must not
 * redefine this geometry: both model pickers intentionally resolve here.
 */
.model-tile-base {
  position:relative;
  z-index:45;
  box-sizing:border-box;
  width:100%;
  height:96px!important;
  min-height:96px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:1px solid #eceae4!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(24,24,27,.04),0 1px 1px rgba(24,24,27,.02)!important;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.model-tile-base:hover,
.model-tile-base:focus-within,
.model-tile-base.is-open {
  border-color:#f97316!important;
  background:#fffaf7!important;
  box-shadow:0 0 0 3px rgba(249,115,22,.075)!important;
}
.model-tile-base > .beta-model-picker-toggle {
  display:flex;
  box-sizing:border-box;
  width:100%;
  height:94px;
  min-height:94px;
  align-items:center;
  gap:8px;
  padding:12px 15px;
  border:0;
  border-radius:16px;
  background:transparent;
  color:#18181b;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.model-tile-base > .beta-model-picker-toggle > .beta-model-heading-icon,
.model-tile-base > .beta-model-picker-toggle > .beta-setting-heading-copy { display:none; }
.model-tile-base .beta-model-current {
  display:grid;
  min-width:0;
  flex:1;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:11px;
  margin:0;
  text-align:left;
}
.model-tile-base .beta-model-current-logo {
  display:grid;
  box-sizing:border-box;
  width:36px;
  height:36px;
  place-items:center;
  border:1px solid #eceae4;
  border-radius:10px;
  background:#fbfaf7;
  color:#18181b;
  font-size:8px;
  font-weight:800;
}
.model-tile-base .beta-model-current-logo img { width:19px;height:19px;object-fit:contain; }
.model-tile-base .beta-model-current-copy { display:grid;min-width:0;gap:2px; }
.model-tile-base .beta-model-current-copy small,
.model-tile-base .beta-model-current-copy strong,
.model-tile-base .beta-model-current-copy em {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.model-tile-base .beta-model-current-copy small {
  color:#f97316;
  font-size:9px;
  font-weight:720;
  line-height:normal;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.model-tile-base .beta-model-current-copy strong {
  color:#18181b;
  font-size:14px;
  font-weight:600;
  line-height:normal;
  letter-spacing:-.01em;
}
.model-tile-base .beta-model-current-copy em {
  color:#6b7280;
  font-size:10px;
  font-style:normal;
  font-weight:520;
  line-height:normal;
}
.model-tile-base > .beta-model-picker-toggle::after {
  content:"";
  width:7px;
  height:7px;
  margin-left:auto;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  opacity:.5;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .22s ease;
}
.model-tile-base.is-open > .beta-model-picker-toggle::after { transform:translateY(2px) rotate(225deg); }
.model-tile-base > .beta-model-menu {
  position:absolute;
  z-index:80;
  top:calc(100% + 8px);
  right:0;
  left:0;
  display:grid;
  max-height:290px;
  gap:3px;
  padding:8px;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid #dad6ce;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 30px -10px rgba(24,24,27,.12),0 4px 10px -4px rgba(24,24,27,.04);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scale(.985);
  transform-origin:top;
  transition:opacity .16s ease,transform .25s cubic-bezier(.22,1,.36,1),visibility 0s linear .25s;
}
.model-tile-base.is-open > .beta-model-menu {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition-delay:0s;
}
.model-tile-base .beta-model-highlight { display:none; }
.model-tile-base .beta-model-option {
  min-height:50px;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:10px;
  color:#6b7280;
}
.model-tile-base .beta-model-option:hover { border-color:#eceae4;background:#f4f1ec;color:#18181b; }
.model-tile-base .beta-model-option[aria-selected="true"] { border-color:rgba(249,115,22,.38);background:#fff1e6;color:#18181b; }
.model-tile-base .beta-model-option-copy strong::after { display:none; }

html[data-theme="dark"] .model-tile-base {
  border-color:#45413e!important;
  background:#262424!important;
  color:#f0ebe4!important;
  box-shadow:0 18px 38px -30px rgba(0,0,0,.72)!important;
}
html[data-theme="dark"] .model-tile-base:hover,
html[data-theme="dark"] .model-tile-base:focus-within,
html[data-theme="dark"] .model-tile-base.is-open {
  border-color:#dca47f!important;
  background:#2d2b2a!important;
  box-shadow:0 0 0 3px rgba(220,164,127,.075)!important;
}
html[data-theme="dark"] .model-tile-base > .beta-model-picker-toggle { color:#f0ebe4; }
html[data-theme="dark"] .model-tile-base .beta-model-current-logo { border-color:#45413e;background:#302e2d;color:#f0ebe4; }
html[data-theme="dark"] .model-tile-base .beta-model-current-copy small { color:#dca47f; }
html[data-theme="dark"] .model-tile-base .beta-model-current-copy strong { color:#f0ebe4; }
html[data-theme="dark"] .model-tile-base .beta-model-current-copy em { color:#c7bfb6; }
html[data-theme="dark"] .model-tile-base > .beta-model-menu { border-color:#45413e;background:#262424;box-shadow:0 24px 52px -24px rgba(0,0,0,.82); }
html[data-theme="dark"] .model-tile-base .beta-model-option { color:#c7bfb6; }
html[data-theme="dark"] .model-tile-base .beta-model-option:hover { border-color:#45413e;background:#302e2d;color:#f0ebe4; }
html[data-theme="dark"] .model-tile-base .beta-model-option[aria-selected="true"] { border-color:rgba(220,164,127,.46);background:rgba(220,164,127,.1);color:#f0ebe4; }
html[data-theme="dark"] .model-tile-base .beta-model-current-logo img[data-provider="openai"],
html[data-theme="dark"] .model-tile-base .beta-model-current-logo img[data-provider="xai"],
html[data-theme="dark"] .model-tile-base .beta-model-current-logo img[data-provider="bytedance"],
html[data-theme="dark"] .model-tile-base .beta-model-option-icon img[data-provider="openai"],
html[data-theme="dark"] .model-tile-base .beta-model-option-icon img[data-provider="xai"],
html[data-theme="dark"] .model-tile-base .beta-model-option-icon img[data-provider="bytedance"] { filter:invert(1); }