/*! [R94] 顶层浮层消息修复（mk-toast-fix.css）
 * ------------------------------------------------------------------
 * 症状：设备控制页底部的提示条（「假锁屏已显示」等）把上面的界面往上挤 / 被裁掉。
 * 根因：panel/skin/mk-particle-bg.css 里的规则
 *         `.app > :not(.mk-particle-bg), .auth-page > :not(.mk-particle-bg), .ctrl-page > :not(.mk-particle-bg)`
 *         { position: relative; z-index: 1; }
 *       特异性 (0,2,0) 高于 index-*.css 里的 `.ctrl-toast-container{position:fixed}` (0,1,0)，
 *       于是提示容器被改写成 in-flow 的 relative 块，参与 .ctrl-page 的 flex 列排版：
 *       实测 scrollHeight 1052 > clientHeight 1000，整页内容被顶高并被 overflow:hidden 裁掉。
 * 修复：只在样式层把它们重新钉成「最顶居中悬浮的弹窗」——脱离文档流、不占布局、不挡点击。
 *       不动 React 包、不动 mk-particle-bg.css，删掉本文件 + index.html 里那一行即可完全回滚。
 * 加载顺序：必须排在 mk-particle-bg.css / mk-skin.css / mk-light.css 之后（index.html </head> 前）。
 */

/* ===== 1) 提示容器：固定在视口最顶，脱离文档流 ===== */
.ctrl-toast-container,
.mk-inj-toast-box,
.ctrl-page > [class*="toast-container"],
.app > [class*="toast-container"],
.auth-page > [class*="toast-container"] {
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: min(92vw, 460px) !important;
  max-height: calc(100vh - 24px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
  /* 只做展示，不拦截下面的按钮点击 */
  pointer-events: none !important;
  z-index: 2147482000 !important;
  transform: translateX(-50%) !important;
}

/* ===== 2) 单条消息：顶部居中胶囊，自适应换行 ===== */
.ctrl-toast-container > .ctrl-toast,
.mk-inj-toast-box > .ctrl-toast {
  pointer-events: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: break-word !important;
  box-shadow: 0 12px 30px -14px rgba(16, 24, 40, .38) !important;
  animation: mkToastDropIn .22s ease-out both !important;
}

/* 从顶部下落（原来是 ctrl-slideIn 从右侧滑入，顶部锚点时改为下落更自然） */
@keyframes mkToastDropIn {
  from { opacity: 0; transform: translateY(-9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 3) 小屏兜底：窄屏时占满上沿，仍不占布局 ===== */
@media (max-width: 560px) {
  .ctrl-toast-container,
  .mk-inj-toast-box {
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
    align-items: stretch !important;
    transform: none !important;
  }
}
/* ===== 4) 裸类型兜底：mk-ui.js 的 injToast() 用的是 `ctrl-toast info`（连字符版是 ctrl-toast-info），
 *          之前没有背景色，只有阴影 → 这里补上同一套配色，让「注入地址校验失败」这类消息也能看清。 ===== */
.ctrl-toast-container > .ctrl-toast.info,
.mk-inj-toast-box > .ctrl-toast.info {
  background: var(--accent-light, #eef2ff) !important;
  color: var(--accent, #4f6ef7) !important;
  border: 1px solid rgba(79, 110, 247, .20) !important;
}
.ctrl-toast-container > .ctrl-toast.success,
.mk-inj-toast-box > .ctrl-toast.success {
  background: var(--green-light, #ecfdf5) !important;
  color: var(--green, #059669) !important;
  border: 1px solid rgba(16, 185, 129, .20) !important;
}
.ctrl-toast-container > .ctrl-toast.error,
.ctrl-toast-container > .ctrl-toast.err,
.mk-inj-toast-box > .ctrl-toast.error,
.mk-inj-toast-box > .ctrl-toast.err {
  background: var(--red-light, #fef2f2) !important;
  color: var(--red, #dc2626) !important;
  border: 1px solid rgba(239, 68, 68, .20) !important;
}