/* 机型版本弹窗：原来挂在机型列表下方的内嵌面板，改成模态 <dialog>。
   只用 admin.css 已有的颜色变量，深色主题自动适配。
   注意：不要给 .vp-dialog 直接设置 display，否则会盖掉关闭状态的 display:none；flex 布局只在 [open] 时设置。 */
.vp-dialog{width:min(1080px,calc(100vw - 48px));max-width:none;background:var(--surface)}
.vp-dialog[open]{display:flex;flex-direction:column}
.vp-dialog .versions-header{flex-shrink:0;flex-wrap:nowrap;gap:12px;padding:18px 24px}
.vp-dialog-title{display:flex;flex-direction:column;gap:4px;min-width:0;margin-right:auto}
.vp-dialog-title h3{margin:0;font-size:20px;font-weight:550;line-height:1.35;overflow-wrap:anywhere}
.vp-dialog-title .model-info{font-size:13px;color:var(--ink-3);overflow-wrap:anywhere}
.vp-dialog .versions-header .icon-button{flex-shrink:0}
.vp-dialog-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.vp-dialog .versions-actions{flex-shrink:0;background:var(--elev-1)}
/* 提示条改成 popover 后，浏览器默认给它 inset:0 与 margin:auto，这里还原成原来的底部居中位置。 */
.toast[popover]{inset:auto;left:50%;bottom:28px;margin:0;border:0;overflow:visible}
@media (max-width:760px){
  .toast[popover]{bottom:20px}
  .vp-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
  .vp-dialog .versions-header{padding:14px 16px}
}
