/*! V7-工作室AI版 · [R221] 控制页「OEM 档案」单标签内嵌 + 主页「OEM 管理」内嵌按钮
 * ---------------------------------------------------------------------------
 * 搭配 mk-r221-oem.js。爹：「做成1个标签吧。一个是OEM档固定镶嵌在标签页面
 * 然后把OEM管理 放到主页设置旁边做成按钮 嵌入的」
 *
 * ① 控制页：档案卡从 fixed 浮层压成流式内嵌（!important 能压过 JS 写的 inline style）；
 *    .mk-oem-on 让原生 React 标签面板让位（互斥），不再叠在档案卡下面被盖住。
 * ② 主页：.mk221-shell 是顶栏下方的内嵌层；R104 宿主在其内部被压成静态流式，
 *    原来那层 rgba(8,11,18,.55) 全屏遮罩底 + 居中弹窗壳一并清掉。
 *
 * 回退：删掉 panel/index.html 里引用 mk-r221-oem.css / mk-r221-oem.js 的两行即可。
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
 * ① 控制页 /panel/device
 * ======================================================================== */

#mkR221Embed {
  min-height: 140px;
  min-width: 0;
  box-sizing: border-box;
}
#mkR221Embed[hidden] { display: none !important; }

/* 档案卡：解除 body 级浮层定位 → 真内嵌（R103 的 placeCard() 每轮都写 inline，
   所以这里必须 !important） */
#mkR221Embed .mkr103-card,
#mkR221Embed[data-mk221] > .mkr103-card {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  z-index: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden !important;
  display: block !important;
}

/* 互斥：OEM 档案标签激活时，隐藏原生 React 标签面板（保留常驻左栏 .mk-pin-info） */
.ctrl-content.mk-oem-on > div:not(.mk-pin-info):not(#mkR221Embed) { display: none !important; }

/* 「OEM 档案」标签固定排在最末位（兼底：JS 已 appendChild 到末尾） */
.ctrl-sidebar > .ctrl-nav-item.mk-r221-tab { order: 9999 !important; }
.ctrl-sidebar > .ctrl-nav-item.mk-r221-tab.active { background: #eef3ff !important; border-color: #c9d8ff !important; color: #2b47c7 !important; }

/* R103 的厂商知识库浮层本体：入口已让给 R221，宿主保持隐藏 */
#mkR103Host { display: none !important; }

@media (max-width: 1499px) {
  #mkR221Embed { max-height: 70vh; overflow: auto; }
}

/* ==========================================================================
 * ② 主页 /panel/devices —— 顶栏「OEM 管理」按钮 + 内嵌层
 * ======================================================================== */

/* 顶栏入口（与 R198「设置」并排；.nav-btn 的基础样式来自 mk-topnav.css / mk-r32-home.css） */
#mk221-oem-btn { color: #33415c !important; }
#mk221-oem-btn svg { color: #4f6ef7; width: 15px; height: 15px; }
#mk221-oem-btn.active {
  background: #eef3ff !important; border-color: #c9d8ff !important; color: #2b47c7 !important;
}

/* 内嵌层：铺在顶栏下方（z 9410，比「设置中心」9420 低一层，点设置时让位） */
.mk221-shell {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9410;
  display: none; background: #f6f8fb; font-family: inherit; color: #0f172a;
}
.mk221-shell.is-open { display: flex; flex-direction: column; }

.mk221-stage {
  flex: 1; min-height: 0; min-width: 0;
  padding: 12px 14px 14px; box-sizing: border-box;
  display: flex; overflow: hidden;
}

/* 把 R104 的全屏宿主压成静态流式 */
.mk221-shell .mk-r104-host {
  position: static !important;
  inset: auto !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}
.mk221-shell .mk-r104-host[hidden] { display: none !important; }

/* 内嵌后的编辑器壳：撑满内嵌层，去掉浮动弹窗的尺寸/阴影/圆角（外层已有留白） */
.mk221-shell .mk-r104-host .mkr104-shell {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .06) !important;
  border: 1px solid #e3e7ee !important;
}

/* 窄屏：内嵌层左右留白收紧 */
@media (max-width: 1100px) {
  .mk221-stage { padding: 8px 8px 10px; }
}