/* ============================================================================
 * [R115] 假手机机模重构 —— 无障碍阅读器 / 无障碍投屏
 *   爹的要求：① 按真实截图的呈现大小缩小  ② 换成好看高级的手机机模（素材上网找）
 *
 *   ① 尺寸：机身 296px 宽、屏幕 276 x 598（9 : 19.5，贴近 1080x2400 真机比例）
 *      旧版：机身约 378px、屏幕 362 x 643（9:16）→ 线性 -22%，屏幕面积 -32%
 *   ② 机模：钛金属质感中框 + 音量键/电源键 + 灵动岛 + 玻璃炫光 + 空态壁纸
 *   素材：Unsplash 免费壁纸（自托管 panel/skin/assets/phone/）
 *         Lucide 图标（ISC 许可，自托管 panel/skin/assets/icons/）
 *
 *   纯皮肤层：删除本文件 + index.html 里的那一行 <link> 即完全回退。
 *   说明：停靠引擎 mk-ui.js#dockPanels() 每轮都按 .mk-frame-screen 的
 *        getBoundingClientRect() 重算 scale/clip，改尺寸会自动适配，无需改 JS。
 * ========================================================================== */

/* ------------------------------------------------------------------ */
/* 0) 设计变量                                                        */
/* ------------------------------------------------------------------ */
:root {
  --mkph-w: 296px;          /* 机身宽（真实截图呈现大小） */
  --mkph-bezel: 9px;        /* 中框黑边厚度 */
  --mkph-r-out: 34px;       /* 机身圆角 */
  --mkph-r-in: 25px;        /* 屏幕圆角 */
  --mkph-skin-1: #f4f7fc;
  --mkph-skin-2: #dfe5f0;
  --mkph-skin-3: #ffffff;
  --mkph-edge: rgba(23, 42, 77, .14);
  --mkph-rim: rgba(255, 255, 255, .95);
  --mkph-shadow: rgba(20, 40, 80, .30);
  --mkph-bezel-c: #080b12;
  --mkph-title: #26324b;
  --mkph-pill-bg: rgba(24, 43, 77, .05);
  --mkph-screen-ring: rgba(255, 255, 255, .55);
}
html[data-theme="dark"] {
  --mkph-skin-1: #2a313d;
  --mkph-skin-2: #14181f;
  --mkph-skin-3: #454f60;
  --mkph-edge: rgba(255, 255, 255, .10);
  --mkph-rim: rgba(255, 255, 255, .26);
  --mkph-shadow: rgba(0, 0, 0, .78);
  --mkph-bezel-c: #04060b;
  --mkph-title: #dde7f8;
  --mkph-pill-bg: rgba(255, 255, 255, .05);
  --mkph-screen-ring: rgba(255, 255, 255, .08);
}

/* ------------------------------------------------------------------ */
/* 1) 布局：两台手机顶对齐 / 居中 / 自然尺寸（不再被拉满左栏高度）      */
/* ------------------------------------------------------------------ */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 16px !important;
  row-gap: 10px !important;
  padding: 6px 12px 4px !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-reader-ctl {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 612px !important;
  margin: 0 auto !important;
  align-self: start !important;
  height: auto !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame {
  grid-row: 2 !important;
  align-self: start !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame[data-kind="reader"] { grid-column: 1 !important; }
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame[data-kind="cast"]   { grid-column: 2 !important; }

/* 左栏只留两台手机需要的宽度，把空间让给右侧内容 */
@media (min-width: 1321px) {
  .ctrl-layout.ctrl-layout { grid-template-columns: minmax(0, 648px) 132px minmax(0, 1fr) !important; }
}

/* ------------------------------------------------------------------ */
/* 2) 机身：钛金属中框                                                */
/* ------------------------------------------------------------------ */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: var(--mkph-w) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: var(--mkph-bezel) !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  border-radius: var(--mkph-r-out) !important;
  border: 1px solid var(--mkph-edge) !important;
  background: linear-gradient(154deg,
      var(--mkph-skin-3) 0%, var(--mkph-skin-1) 20%,
      var(--mkph-skin-2) 46%, var(--mkph-skin-1) 74%,
      var(--mkph-skin-3) 100%) !important;
  box-shadow:
    inset 0 1px 0 var(--mkph-rim),
    inset 0 -1px 0 rgba(255, 255, 255, .22),
    inset 1px 0 0 rgba(255, 255, 255, .16),
    inset -1px 0 0 rgba(255, 255, 255, .16),
    0 2px 0 rgba(255, 255, 255, .35),
    0 26px 48px -26px var(--mkph-shadow),
    0 10px 20px -16px var(--mkph-shadow) !important;
}

/* 音量键（左） / 电源键（右） */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame::before {
  content: '' !important; position: absolute !important; display: block !important;
  left: -3px !important; top: 108px !important; width: 3px !important; height: 30px !important;
  border-radius: 3px 0 0 3px !important;
  background: linear-gradient(180deg, var(--mkph-skin-3), var(--mkph-skin-2) 50%, var(--mkph-skin-3)) !important;
  box-shadow: 0 0 0 .5px var(--mkph-edge) !important;
  pointer-events: none !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame::after {
  content: '' !important; position: absolute !important; display: block !important;
  right: -3px !important; top: 136px !important; width: 3px !important; height: 52px !important;
  border-radius: 0 3px 3px 0 !important;
  background: linear-gradient(180deg, var(--mkph-skin-3), var(--mkph-skin-2) 50%, var(--mkph-skin-3)) !important;
  box-shadow: 0 0 0 .5px var(--mkph-edge) !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------------ */
/* 3) 屏幕：真机比例 + 玻璃质感                                        */
/* ------------------------------------------------------------------ */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-screen.mk-frame-screen {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  aspect-ratio: 9 / 19.5 !important;
  border-radius: var(--mkph-r-in) !important;
  border: 1px solid rgba(0, 0, 0, .5) !important;
  background-color: var(--mkph-bezel-c) !important;
  background-image: linear-gradient(180deg, #070b13, #04060b) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 0 0 1px var(--mkph-screen-ring),
    0 10px 22px -16px rgba(0, 0, 0, .55) !important;
  overflow: hidden !important;
}

/* 空态（未停靠）：两张免费壁纸 + 压暗，看起来就是一台真机 */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame:not(.mk-has-dock) > .mk-frame-screen.mk-frame-screen[class] {
  background-image:
    linear-gradient(180deg, rgba(6, 10, 20, .28) 0%, rgba(6, 10, 20, .06) 34%, rgba(6, 10, 20, .46) 100%),
    url("/panel/skin/assets/phone/wallpaper-default.jpg") !important;
  background-size: cover, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame[data-kind="reader"]:not(.mk-has-dock) > .mk-frame-screen.mk-frame-screen[class] {
  background-image:
    linear-gradient(180deg, rgba(6, 10, 20, .26) 0%, rgba(6, 10, 20, .05) 34%, rgba(6, 10, 20, .46) 100%),
    url("/panel/skin/assets/phone/wallpaper-reader.jpg") !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame[data-kind="cast"]:not(.mk-has-dock) > .mk-frame-screen.mk-frame-screen[class] {
  background-image:
    linear-gradient(180deg, rgba(6, 10, 20, .26) 0%, rgba(6, 10, 20, .05) 34%, rgba(6, 10, 20, .46) 100%),
    url("/panel/skin/assets/phone/wallpaper-cast.jpg") !important;
}

/* 灵动岛（只在空态显示；画面停靠后让位给真实状态栏） */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame:not(.mk-has-dock) > .mk-frame-screen.mk-frame-screen::before {
  content: '' !important; position: absolute !important; display: block !important;
  left: 50% !important; top: 10px !important; width: 62px !important; height: 17px !important;
  margin: 0 !important; transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(6, 8, 13, .93) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 2px 8px rgba(0, 0, 0, .55) !important;
  pointer-events: none !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame.mk-has-dock > .mk-frame-screen.mk-frame-screen::before {
  display: none !important;
}

/* 玻璃炫光（两种状态都在，很淡，像真机屏幕反光） */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-screen.mk-frame-screen::after {
  content: '' !important; position: absolute !important; inset: 0 !important;
  border-radius: inherit !important; pointer-events: none !important; display: block !important;
  background: linear-gradient(126deg,
      rgba(255, 255, 255, .16) 0%,
      rgba(255, 255, 255, .05) 12%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0) 72%,
      rgba(255, 255, 255, .035) 92%,
      rgba(255, 255, 255, .085) 100%) !important;
  box-shadow: inset 0 0 0 1px var(--mkph-screen-ring) !important;
  z-index: 3 !important;
}

/* 空态文案：做成玻璃胶囊 */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame:not(.mk-has-dock) > .mk-frame-screen.mk-frame-screen > .mk-frame-empty {
  color: #f3f7ff !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  padding: 7px 15px !important;
  margin-top: 52px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .20) !important;
  background: rgba(8, 13, 24, .46) !important;
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .9) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  position: relative !important;
  z-index: 4 !important;
}

/* ------------------------------------------------------------------ */
/* 4) 机身顶部这条（标题 / 状态药丸 / 开关）精致化                      */
/* ------------------------------------------------------------------ */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head {
  padding: 1px 4px !important;
  gap: 7px !important;
  min-height: 20px !important;
  flex-wrap: wrap !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head > .mk-frame-title {
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--mkph-title) !important;
  letter-spacing: .01em !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head > .mk-frame-pill {
  padding: 2px 10px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  background: var(--mkph-pill-bg) !important;
  border: 1px solid var(--mkph-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame .mk-switch {
  width: 40px !important;
  height: 22px !important;
  box-shadow: inset 0 2px 5px rgba(6, 12, 26, .28) !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame .mk-switch i {
  width: 15px !important; height: 15px !important; top: 3px !important;
  background: linear-gradient(180deg, #ffffff, #dbe3ef) !important;
  box-shadow: 0 1px 3px rgba(6, 12, 26, .38) !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame .mk-switch input:checked + i {
  left: 22px !important;
  background: linear-gradient(180deg, #b39bff, #7c5cf0) !important;
  box-shadow: 0 0 10px rgba(124, 92, 240, .75) !important;
}
/* ------------------------------------------------------------------ */
/* 5) 顶部图标（Lucide 自托管素材，mask 渲染，跟随主题色）              */
/* ------------------------------------------------------------------ */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head > .mk-frame-dot {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  border-radius: 4px !important;
  background: #5b8dff !important;
  -webkit-mask: url("/panel/skin/assets/icons/book-open.svg") center / contain no-repeat !important;
  mask: url("/panel/skin/assets/icons/book-open.svg") center / contain no-repeat !important;
  opacity: .92 !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame[data-kind="cast"] > .mk-frame-head > .mk-frame-dot {
  background: #8b6cf6 !important;
  -webkit-mask-image: url("/panel/skin/assets/icons/cast.svg") !important;
  mask-image: url("/panel/skin/assets/icons/cast.svg") !important;
}

/* ------------------------------------------------------------------ */
/* 6) 顶栏一行排布收敛（实测 276px 屏宽下：标题/药丸/按钮/开关必须同一行）*/
/* ------------------------------------------------------------------ */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head.mk-frame-head {
  gap: 5px !important;
  padding: 1px 3px !important;
  flex-wrap: wrap !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head.mk-frame-head > .mk-frame-title {
  font-size: 11.5px !important;
  letter-spacing: 0 !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head.mk-frame-head > .mk-frame-pill {
  padding: 2px 8px !important;
  font-size: 10px !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head.mk-frame-head > .mk-frame-btn {
  height: 26px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head.mk-frame-head > .mk-frame-mode {
  font-size: 10.5px !important;
}
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame > .mk-frame-head.mk-frame-head > .mk-frame-select {
  min-width: 50px !important;
  font-size: 11px !important;
  padding: 0 6px !important;
}
/* 投屏框头部元素多，去掉图标给它让位（保证开关不掉到第二行） */
.ctrl-layout .mk-ctl-left > .mk-ctl-readers.mk-ctl-readers > .mk-frame.mk-frame[data-kind="cast"] > .mk-frame-head.mk-frame-head > .mk-frame-dot {
  display: none !important;
}